Express+MongoDB+Vue实现后台网站八

Sublime Text

Chrome浏览器调试

script代码如下图（分析重点代码）：　　1.调用created主要是为了获取数据对页面进行渲染：　　　　1）调用接口“users/getUserInfo”，并传参userId，如果res.status为1，则提示错误信息；如果不为1，则进行detail赋值，用于渲染页面数据（注意转换userStatus数据）。　　2.方法changeUserPassword：　　　　1）先校验表单规则“changePswRules”，定义了两个规则，其中的“rePsw”除了不为空校验，还校验不能少于8个字符（min: 8），也利用正则表达式校验只能输入数字和字母；　　　　2）校验成功（valid）则调用接口“users/findPassword”，并传参“data”，如果res.status为1，则显示错误信息；不为1则显示成功信息；　　　　3）校验不成功则输出错误信息。

template和style代码如下图（1-2），最终显示效果如下图（3）：　　1.template中“el-”开头的标签都是来自“element-ui”框架，详细可查看api（主要使用Form 表单）；　　2..style样式使用less编写。

script代码如下图（分析重点代码）：　　1.由于新增和修改共用一个页面，调用created时，存在userId（编辑），则调用接口“users/getUserInfo”获取相应用户数据，并渲染到编辑页面上；　　3.方法checkUser：　　　　1）先校验表单规则“checkUserRules”，定义了五个规则；　　　　2）校验成功（valid）则调用接口“admin/addUser”，并传参data，如果res.status为1，则显示错误信息；不为1则显示成功信息并返回到用户列表；　　　　3）校验不成功则输出错误信息。

template和style代码如下图（1-2），最终显示效果如下图（3）：　　1.template中“el-”开头的标签都是来自“element-ui”框架，详细可查看api（主要使用Form 表单和Table 表格）；　　2.style样式使用less编写。

script代码如下图（分析重点代码）：　　1.公共方法getUsers：　　　　1）根据传入的参数data，调用接口“admin/getUsersList”；　　　　2）如果res.status为1，则提示错误信息并跳到登录页面；如果不为1，则进行usersList赋值，用于渲染表格数据（注意转换userStop和userAdmin数据）；　　2.调用created的代码、查询操作onSubmit和翻页功能handleCurrentChange调用this.getUsers(data)，只是传参data数据不同而已，原理一样。

template和style代码如下图（1-2），最终显示效果如下图（3）：　　1.template中“el-”开头的标签都是来自“element-ui”框架，详细可查看api（主要使用Button 按钮）；　　2.style样式使用less编写。

script代码如下图（分析重点代码）：　　调用created主要是为了获取数据对页面进行渲染：　　　　1）调用接口“users/getUserInfo”，并传参userId，如果res.status为1，则提示错误信息；如果不为1，则进行detail赋值，用于渲染页面数据。