各个功能模块如果有过多重复冗杂的部分将会抽取部分值得记录复习的地方进行记录

一项目简介

后端接口http://43.143.0.76:8889/api/private/v1/

在main.js文件配置根路径

‘http://43.143.0.76:8889/api/private/v1/’

配置路由器通过login登录之后会优先跳转到home父组件Element-ui的布局模式redirect重定向路由到welcome欢迎组件

const

import(/components/Login.vue)},{

path:

import(/components/Home.vue),redirect:

/welcome,children:

import(/components/Welcome.vue)

},{

import(/components/user/Users.vue)},{

path:

import(/components/power/Rights.vue)},{

path:

import(/components/power/Roles.vue)},{

path:

import(/components/goods/Cate.vue)},{

path:

import(/components/goods/Params.vue)},{

path:

import(/components/goods/List.vue)},{

path:

import(/components/goods/Add.vue)},{

path:

import(/components/order/Order.vue)},{

path:

import(/components/report/Report.vue)}]}]

})2用户登录/退出模块

http是无状态的通过cookie在客户端记录状态通过session在服务器端记录状态通过token方式维持状态

如果前端和后台不存在跨域问题可以通过cookie和session来记录登录状态如果存在跨域问题通过token方式来维持登录状态

2.1登录token原理分析

如果不通过登录来获取服务器的token值直接通过路由跳转对应页面服务器无法验证token通过有些接口功能将无法实现由此还需要配置路由守卫来防止用户直接通过路由跳转对应页面

2.2登录login函数逻辑代码

就会先返回等到触发的异步操作完成再接着执行函数体内后面的语句。

如果登录成功将服务器的token值保存到客户端的sessionStorage中利用seiItem属性键值对的方法存储以便之后的后续请求都携带token认证

login()

{this.$refs.loginFormRef.validate(async

(valid)

{this.$message.success(登录成功)//将token值保存到客户端中window.sessionStorage.setItem(token,

res.data.token)//并且跳转路由this.$router.push(/home)}}})},2.3路由守卫

在router.js中配置路由守卫目的是为了防止用户未通过登录而是选择更改路由跳转到对应页面。

//挂载路由守卫

next(/login)表示强制跳转到登录页面if(to.path

/login){//

console.log(to)next()}else{//获取用户当前客户端的token值const

tokenStr

window.sessionStorage.getItem(token)//如果没有token值强制跳转到登录页面//如果存在token就放行if(!tokenStr){next(/login)}else{next()}}})2.4Element-ui的表单验证和表单重置

表单验证

prefix-iconel-icon-user/el-input/el-form-item!--

--el-form-item

prefix-iconel-icon-lock/el-input/el-form-item!--

--el-form-item

clicklogin登录/el-buttonel-button

typeinfo

clickreset重置/el-button/el-form-item/el-form//登录时的校验对象loginFormRules:

{username:

this指向vue的原型对象通过原型对象绑定对应的resetFields函数

reset()

console.log(this)//实现表单的重置功能this.$refs.loginFormRef.resetFields()},2.5退出登录

直接调用sessionStorage.clear()函数清空存储的token即可同时跳转到/login页面即可

exit()

{window.sessionStorage.clear()this.$router.push(/login)},3用户管理模块

3.1Element-ui侧边栏

在回顾具体功能模块前提不得不提一下element-ui的侧边栏组件

!--

:classiconList[item.id]/ispan{{item.authName}}/span/template!--

二级菜单导航

classel-icon-menu/ispan{{subitem.authName}}/span/el-menu-item/el-submenu/el-menu/el-aside在el-menu标签中:default-active属性值是激活菜单的值并没有设死我们数据绑定到data中的activePath中在el-submenu标签中:index值是通过父级的v-for属性将menuList的所有item通过l插值语法两个花括号显示到模板上需要注意的一点是v-for属性同时需要key属性的同时存在否则会报错

data()

{this.getMenuList()this.activePath

window.sessionStorage.getItem(activePath)},//保存链接的激活状态saveNavState(activePath)

{window.sessionStorage.setItem(activePath,

activePath},savNavState函数解决了图标在当前选项高亮但当重进还是会选择上一高亮位置但内容则是welcome组件内容

通过sessionStorage存储当前的activePath在created()组件被创建的时候再从sessionStorage中取出

//保存链接的激活状态saveNavState(activePath)

{window.sessionStorage.setItem(activePath,

activePath},3.2作用域插槽

其余的element-ui界面布局组件没什么难度跟着文档走就可以了需要回顾的就是slot-scope作用域插槽

这里是想实现一个按钮来切换状态的效果element-ui提供了这个组件但是我们同时还要实现点击切换状态还要修改数据库中的数据

!--

changeuserStateChange(scope.row)/el-switch/template//监听用户状态修改的事件async

{//

this.$http.put(users/${userInfo.id}/state/${userInfo.mg_state})if

(res.meta.status

!userInfo.mg_statethis.$message.error(更新用户状态失败)}this.$message.success(更新用户状态成功)},3.3Pagination

!--

current-changehandleCurrentChange

:page-sizes[1,

:totaltotal/el-pagination分页功能不仅仅这里需要以后的项目一些业务都是需要分页功能的。

首先需要创建分页数据对象pagenum(当前页数)pagesize(每页显示数据条数)total(总条数)。

将其返回给后端后端返回对应数据。

queryInfo:

点击编辑按钮触发点击事件。

展示dialog同时通过id搜索该用户的个人信息将其展现。

用户通过更改本文内容双向数据绑定到editform表单对象中点击取消修改visible属性布尔值来隐藏该对话框点击确定通过请求修改对应数据库中信息同时列表需要刷新再次调用获取用户数据函数也修改visible属性隐藏对话框

html结构

disabled/el-input/el-form-item!--

2.邮箱

v-modeleditForm.email/el-input/el-form-item!--

手机号码

v-modeleditForm.mobile/el-input/el-form-item/el-formspan

slotfooter

定/el-button/span/el-dialog编辑按钮结构

!--

clickshowEditDialog(scope.row.id)/el-button点击确定修改信息逻辑

//修改用户editUser()

{//预校验this.$refs.editFormRef.validate(async

(valid)

this.$message.error(更新用户信息失败)}//关闭对话框this.editDialogVisible

false//刷新数据列表this.getUserList()//提示修改成功this.$message.success(更新用户信息成功)})},4权限管理模块

4.1展开表格列

主要还是通过作用域插槽和v-for还有嵌套的权限属性实现当然还有tag标签

el-row标签中利用v-for渲染出父级元素蓝色标签通过作用域插槽传数据同时el-tag将该值渲染成蓝色标签叉叉移除函数,removeRightById由于每个权限都有对应的id所以通过id来删除数据库中数据嵌套

html结构

item1.id){{item1.authName}}/el-tagi

classel-icon-caret-right/i/el-col!--

渲染二级和三级权限

item2.id){{item2.authName}}/el-tagi

classel-icon-caret-right/i/el-colel-col

:span18el-tag

item3.id){{item3.authName}}/el-tag/el-col/el-row/el-col/el-rowel-row

:span19/el-row/template/el-table-columnremoveRightById()函数

利用了confirm弹窗组件全局挂载promise对象需要.then().catch()来解析发送delete请求的参数利用到了es6模板字符串用法

//删除权限async

this.$http.delete(roles/${role.id}/rights/${roleId})if

(res.meta.status

element-ui提供的级联选择器有时候会出现bugelement-ui的版本不断地更新也在修正

v-model

selectedCateKeys数据双向绑定数组change事件当选中节点变化时触发:options绑定商品列表:props绑定对象的某个值实现多级级联选择器

html结构

:propscateProps/el-cascader/el-colchange事件函数

//监听级联选择器选中框变换async

{this.getParamsData()},//指定级联选择器的配置对象cateProps:

{value:

v-model双向数据绑定对应active选中的数据这里是many和onlytab-click事件监听标签页改变触发

通过级联选择器的handleChange和tabs标签页的handleTabClick两个事件都调用getParamsData()获取商品参数函数通过每个商品的特定id获取对应的参数信息

!--

tab-clickhandleTabClickdata(){//Tabs标签页的双向绑定数据activeName:

many,

}首先级联选择器的长度如果不是3即选中的只是一二级菜单就清空不展示第三级菜单根据所选分类的ID和当前所处的面板获取对应的参数

getParamsData函数

{//根据所选分类的ID和当前所处的面板获取对应的参数const

data:

this.$http.get(categories/${this.cateId}/attributes,{params:

{sel:

{this.$message.error(获取参数列表失败)}

else

console.log(res.data)//存储动态参数数据和静态属性数据res.data.forEach((item)

{item.attr_vals

false)//文本框中输入的值item.inputValue

})//

res.data}}}},将后台返回的数据进行forEach遍历存储还利用了split()分割函数

//存储动态参数数据和静态属性数据res.data.forEach((item)

{item.attr_vals

false)//文本框中输入的值item.inputValue

})5.3

在商品分类模块中对于分类名称利用到了tree树形控件用清晰的层级结构展示信息可展开或折叠。

:data数据绑定刀catelist商品分类列表。

:columns属性columns纵列分布依旧使用作用域插槽同时利用了v-if来控制对应的显示与隐藏利用表达式的值

tree-table

clickshowEditDialog(scope.row.cat_id)编辑/el-button!--

--el-button

clickremoveUserById(scope.row.cat_id)删除/el-button/template/tree-table5.4添加商品信息模块

5.4.1el-steps步骤展示信息

title完成/el-step/el-steps5.4.2el-tabs左侧标签页

el-tabs

console.log(this.activeIndex)//访问的是商品参数面板if

(this.activeIndex

this.$http.get(categories/${this.cateId}/attributes,{params:

sel:

{this.$message.error(获取商品参数失败)}

else

this.$message.success(成功)this.manyTableData

res.data//

console.log(this.manyTableDate)}}

else

this.$http.get(categories/${this.cateId}/attributes,{params:

sel:

{this.$message.error(获取商品参数失败)}

else

console.log(this.onlyTableData)}}},5.4.3upload上传图片

:preview”handlePreview“处理图片预览函数:on-preview“handlePreview”处理图片移除函数

el-tab-pane

actionhttp://43.143.0.76:8889/api/private/v1/upload

list-typepicture

:on-successhandleSuccessel-button

sizesmall

typeprimary点击上传/el-button/el-upload/el-tab-panehandlePreview图片预览函数

{//

console.log(file)this.previewPath

file.response.data.urlthis.previewVisible

filePath

file.response.data.tmp_path//2.从pics数组中找到该图片的索引值const

this.addForm.pics.findIndex((x)

{x.pic

filePath})//3.调用数组的splice方法从pics数组中移除this.addForm.pics.splice(i,

1)},6数据统计模块

echarts.init(this.$refs.main)const

data:

this.$http.get(reports/type/1)if

(res.meta.status

this.$message.error(初始化折线图失败)const

data

nprogress/nprogress.css//配置axios请求拦截器

//在requst

axios.interceptors.request.use(config

{NProgress.start()//为请求头对象添加token验证的Authorization字段config.headers.Authorization

window.sessionStorage.getItem(token)return

config

axios.interceptors.response.use(config

config

回想看完成这个项目用自己学的vue的知识一步一步的完成其中有许多相同的部分但还是自己一步一步的完成了期间遇到许许多多的error报错但还是上网不断的搜索搜索debug。

对于路由的掌握更加得心应手了包括登录的token认证路由守卫请求拦截器等等。

但也看过别人的大型项目是将请求同一封装到一个request,js文件中这样的好处更多是避免一个请求的方式出错减少更多的修改以后要还有项目一定尝试尝试。

回想看最头疼的也是最有收获的部分就是分类参数模块的级联选择器配合tabs标签页的使用添加参数等等。

通过这次的整理也算是对vue2的一个整体复习要开始步入vue3和ts的学习了。

加油吧