电商后台管理系统：首先大的功能是用户管理、权限管理、商品管理、订单管理、数据统计。

1、用户管理下面是用户列表，

  用户列表中的问题：

1）状态和操作是什么做的

首先是在element中的ui设计，template，v-slot（作用域插槽）

涉及到做弹窗，用的是el-dialog

 

 2、权限管理下面是角色列表和权限列表

 用到了树形空间el-tree。 

 

权限列表

el-tag 是标签 

 

 

一、 如何进行登录页面的预校验，实现登录

登录组件预验证，通过调用表单的validate函数

对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise

通过ref拿到表单的引用，然后访问引用对象this.$refs.loginFormRef，再直接调用validate函数，若直接打印valid，返回true或false

登录组件根据预验证决定是否发起请求

发起请求需要对应的axios包，在main.js中配置axios

import axios from 'axios'

axios.defaults.baseURL = 'http://api.shop.feishuai521.cn/api/private/v1/'

Vue.prototype.$http = axios //全局配置

通过this.$http.post('login', this.loginForm)发起请求

 注意：登录组件弹框提示，用message，需要全局挂载

二、登录之后要做什么

 将登录成功之后的token，保存到客户端的sessionStorage中，会话期间的存贮机制

  因为项目中除了登录之外的其他api接口，必须在登录之后才能访问

  token只应在当前网站打开期间生效，所以将token保存在sessionStorage中

 通过编程式导航实现页面跳转

三、路由导航守卫控制权限

home页面只有在登录之后才能进入，如果清除了token，用户没有登录，但是直接通过url访问特定页面，需要重新导航到登录页面，export default router之前挂载路由导航守卫

router.beforeEach((to, from, next) => {
  // to 将访问哪一个路径
  // from 代表从哪个路径跳转而来
  // next 是一个函数,表示放行
  //   next() 放行 next('/login') 强制跳转
  if (to.path === '/login') return next()
  // 从sessionStorage中获取到保存的token
  const token = window.sessionStorage.getItem('token')
  if (!token) return next('/login')
  next()
})

四、如何退出登录

 在Home.vue中

 

五、什么是树形控件

 

 el-row栅格布局，行；el-col

六、分页效果是怎么实现的在（P146 商品列表的分页功能）

<!--  分页区-->
      <el-row>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pagenum"
          :page-sizes="[5, 9, 11, 15]"
          :page-size="queryInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>

 

订单列表的分页框： 

 

七、使用axios，创建get、post请求

八、ajax的使用

九、项目中遇到了什么问题

跨域问题，如何解决的

Access to XMLHttpRequest at 'http://127.0.0.1:8080/api/private/v1/login' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

配置代理 新建vue.config.js文件  配置  

Error: Rule can only have one resource source (provided resource and test + include + exclude) in {

测试接口是否正常工作  先在powershell终端打开文件夹 安装依赖 npm install

然后运行node app.js    这里有报错  

数据库未访问成功  Error: ER_ACCESS_DENIED_ERROR: Access denied for user 'root'@'localhost' (using password: YES)

 这里和自己导入的数据库配置成一样才可以成功

 

十、项目中印象最深的什么