电商系统项目主页布局

1. 主页布局

1. 借助element ui的container容器
2. 左侧导航栏布局借助element ui的NavMenu导航栏菜单

2. 通过接口获取后台数据

需要授权的 API ，必须在请求头中使用 Authorization 字段提供 token 令牌通过axios请求拦截器添加token,保证拥有获取数据的权限，在main.js入口文件中写入拦截器：

axios.interceptors.request.use(config => {
  // config就是请求对象 里面有headers
  config.headers.Authorization = window.sessionStorage.getItem('token')
  return config
})

3. 布局上的优化

参照element 使得左边侧栏可以变小变大。定义子路由，Home的子路由。

这个开关的状态是通过作用域插槽实现的,slotProps身上有.row属性，这个属性可以拿到参数，这个参数里面包含了true，然后对element ui开关组件进行数据绑定，true就打开，flase就关闭；

<el-table-column label="状态" >
        <template v-slot:default="slotProps">
              <el-switch
              v-model="slotProps.row.mg_state">
              </el-switch>
          </template>
      </el-table-column>

4. 添加用户

还是根据element ui组件去找一个合适的form表单模板，然后自定义一些验证规则，邮箱，手机这些参考自定义验证的表单；在发送添加用户请求代码段遇到问题

原来是我在确定按钮那里绑定了两个click，去掉一个就好了，留下addUser就行；

5. 删除用户

使用element ui下面的MessageBox 弹框实现弹窗提示是否确认删除$confirm方法需要先挂载到原型上才可以使用，在element.Vue.prototype.$confirm = MessageBox.confirm ；

async removeUserById (id) {
      // 根据id删除用户信息
      // 弹框询问是否确定删除
      const confirmResult = await this.$confirm('此操作将永久删除用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch((err) => {
        return err
      })
      if (confirmResult !== 'confirm') {
        return this.$message.info('已经取消')
      }
      const { data: res } = await this.$http.delete(`users/${id}`)
      if (res.meta.status !== 200) {
        return this.$message.error('删除用户失败')
      }
      this.$message.success('删除用户成功')
      this.getUserList()
    }

6. 进行代码的提交

• 先是创建分支usergit checkout -b user
• 然后git add . git commit -m '完成用户列表功能
• 把user分支推送到云仓库git push -u origin user
• 然后更新master分支 合并user到mastergit checkout master git merge user
• 最后更新master分支git push