vue+element-ui商城后台管理系统(day01-day02)

项目介绍

目录

一. 需要用到的技术

二. 项目初始化

三. 登录与退出

四. 格式化的配置问题

五. 设置主页头部与侧边栏

六. 用户列表

七. 自己写发现的错误

---

一. 需要用到的技术

二. 项目初始化

2.1 项目初始化步骤

• 安装elementUI插件与axios

  • 设置elementUI按需导入

  {
    "presets": [["es2015", { "modules": false }]],
    "plugins": [
      [
        "component",
        {
          "libraryName": "element-ui",
          "styleLibraryName": "theme-chalk"
        }
      ]
    ]
  }
  

• 申请码云账号并配置ssh公钥

• 把本地项目上传到码云

2.2 后台环境与配置

• 安装mysql
• 这里要导入数据库
• 这里使用的是phpstudy
• 建议phpstudy2018
• 开启服务并测试API

---

三. 登录与退出

3.1 登录业务流程

• 在登录页面输入用户名和密码
• 调用后台接口进行验证
• 通过验证后, 根据后台的响应状态跳转到项目主页

3.2 如何保持登录状态

• cookie 在客户端记录
• session 在服务端记录
• token 可跨域
  • token工作原理
    

3.3 利用分支去开发login功能

• git checkout -b login

3.4 引入elementUI

• 在element.js中按需注册
• 更改label相关属性
  • label-width
• 更改form-item的box-sizing(默认content-box)
• 添加字体图标(两种方法 1. 添加prifix-icon属性 2. 添加slot)
  • 1.直接在elementUI组件中找自带的字体图标(search)
  • 2.引入阿里图标库(css文件)
  • 根据demo文档为el-input添加prefix-icon="iconfont icon-user"

3.5 实现表单的数据绑定

• 在el-form中添加:model="data"(data需要在组件的data(){}中定义 用于子组件获取其属性)
• 子组件el-input中双向绑定(v-model)data的值
• 在密码框对应的input中添加type="password"

3.6 检验与重置与提交预验证表单数据

• 校验表单
  • 为el-form绑定一个校验规则对象 使:rules=rules
  • 用props为子组件配置上相应的rule :prop="name"

rules: {
    name: [
        { required: true, message: '请输入活动名称', trigger: 'blur' },
        { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],

• 重置表单
  • 为表单添加ref
  • 给充值按钮绑定事件this.$refs.loginFormRef.resetFields()
• 预验证表单
  • 加ref
  • 给提交按钮绑定事件this.$refs.login.validate(callback( Boolean ))

3.7 处理登录返回的数据

• 在3.6的login方法中判断valid的值
• 给vue全局加上axios

axios.defaults.baseURL = ~
vue.prototype.$http = axios

• 这时候返回的士一个promise可以用async与await直接返回res
• 并通过状态码来判断登录是否成功

login () {
	this.$refs.loginFormRef.validate(async valid => {
		if (!valid) return
		const { data: res } = await this.$http.post('login', this.loginForm)
		if (res.meta.status !== 200) return console.log('登录失败')
		console.log('登录成功')
	})
}

3.8 给登录状态返回一个弹窗

• 给Message全局导入 用prototype来配置$message
• 在状态码不等于200的时候 this.$message.error( 错误信息 )

3.9 使用sessionStorage保存登录的token

3.10 每次更改router.path的时候验证是否有token(增加拦截器)

• 有token放行(window.sessionStorage.getItem('key'))来获取是否有token
• 无token强制回到login

3.11 退出清除token

• 绑定退出方法window.sessionStorage.removeItem('key')
• 然后再进行$router.push

3.12 提交代码至码云

• 在login上提交
• 切换成master并合并login git merge login
• push到云代码的master
• 切换回login使用git push -u origin login (实现上传分支)

---

四. 格式化配置问题

• alt+shift+f格式化出来的的东西与eslint不匹配, 发出警告

4.1 配置prettierrc来改变编译软件的格式化工具

• {
      // 结束后面加分号
      "semi": false, 
      // 单引号
      "singleQuote": true
  }
  

4.2 配置editorcongi改变eslint的检查规则

• 在rules中添加'space-before-function-paren': 0可以改变方法函数名离后面括号之间要加空格的机制

---

五. 设置主页头部与侧边栏

5.1 实现基本的页面布局

• elementUI主件库按模板添加需要用到的组件
• 标签名如el-header会自动添加上class为class="el-header"所以可以直接使用标签名作为类名

5.2 运用flex布局完成header的实现

• justify-content 教程链接
  • flex-start: 同行左侧对齐
  • flex-end: 同行右侧对齐
  • flex-center: 同行中间对齐, 相邻没有间隙, 未填满会在两侧补充空格
  • space-between: 平均分配在一行中, 左右两边贴边
  • space-around: 平均分配在一行中, 左右两边没贴边
  • initial: 默认值
  • inherit: 从父元素继承该属性。

5.3 axios拦截器

• 为了演示用以后的API(验证是否含有token)

axios.interceptors.request.use(config => {
    // 为请求头对象, 天机Token验证的Authorization字段
    config.headers.Authorization = window.sessionStorage.getItem('token')
    return config
})

5.4 获取左侧菜单数据

5.5 通过for循环填写左侧菜单栏

• index属性是elementUI的一个代表菜单栏的唯一值, 相同的话点击一个会使index相同的菜单都发生点击事件
  • index可以设置router的跳转
• 添加字体颜色并且添加字体图标
  • 字体图标可以另外设置一个data然后每个id对应着他的class(第三方字体图标库)
• 给menu添加unique-opened属性可使点击一个扩展开来的时候其他的都关上
• 边框不齐问题
  • el-menu中设置border属性为none可以解决

5.6 侧边栏的折叠与展开

• 添加|||来设置是否触发
• collapse: 是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）设置为true
• 之后发生的问题
  • 宽度固定在200px很丑
    • 用v-bind动态修改width(根据sollapse是否为true)
  • 动画效果不好看
    • collapse-transition设置为false

5.7 实现首页路由的重定向效果

{
    path: '/home',
    component: Home,
    redirect: '/welcome',
    children: [{ path: '/welcome', component: Welcome }]
}

• 在el-main中放路由占位符router-view

5.8 侧边栏路由链接的改造

• 给menu设置router为true
• 这样之后点击侧边栏的时候会直接跳转到该项的index(前面把它设置为id)
  • 把它设置为path就可以了
    • 不要忘记前面加'/'

5.9 点击user没有高亮显示

• 给menu增加default-active
• 并用sessionStorage来记录当前的path

---

六. 用户列表

6.1 栅格系统+面包屑+卡片

• 可以在base.css中修改基础样式
• el-row与el-col
• 通过:gutter给el-col设置间隙
• 通过:span给el-col设定宽度(例如flex 总宽24 )

6.2 获取用户列表

• /users
• 在data () {}中设定一个param(整合到url上面的数据)
• 获取成功保存

6.3 绘制用户列表

• 使用table tablie-colum
• table的data为依照的数据
• label为每列名称
• prop为对应value的key
• 添加索引列
  • table-colum中加入type="index"
• 渲染状态与操作(按需渲染)
  • 使用v-slot 此时会覆盖prop所指向的值
  • 放三个按钮注意能不能再一行上面显示
  • 加入鼠标移到上面时会出提示框
• 分页效果显示
  • 每次调整每页显示数量重新发送请求

6.4 用户状态修改

• 接口中:id的意思是该值需要更改传递
• @change事件
• 修改失败(status不为200)应该把原来的值改回去

6.5 搜索用户

• 通过修改table的获取用户列表的params数据的query还有点击事件更新用户列表的数据来实现

6.6 清空搜索框与清空后重新获取用户数据

• 增加clearable属性实现添加一件清空功能
• 绑定@clear对应的事件(一件清空后触发)

6.7 添加用户功能

• 增加dialog组件
• 定义:visible.sync="addDialogVisible"属性 增加时间修改addDialogVisible即可
• 添加信息表单
• 邮箱与手机号等特殊校验规则
  • validator: 校验方法(在data中定义)

data() {
    // 验证邮箱的规则
    var checkEmail = (rule, value, cb) => {
      // 验证邮箱的正则表达式
      const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
      if (regEmail.test(value)) {
        // 合法的邮箱
        return cb()
      }
      cb(new Error('请输入合法的邮箱'))
    }
    // 验证手机号的规则
    var checkMobile = (rule, value, cb) => {
      // 验证手机号的正则表达式
      const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
      if (regMobile.test(value)) {
        return cb()
      }
      cb(new Error('请输入合法的手机号'))
    }
    return {
      // 添加表单的验证规则对象
      addFormRules: {
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { validator: checkEmail, trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { validator: checkMobile, trigger: 'blur' }
        ]
      }
    }
  }

• 增加@close事件关闭的时候resetFields()
• 添加用户的步骤 校验 -> 调用API -> 判断status -> $message -> 隐藏对话框 -> 重新获取用户数据

---

七. 自己写遇到的错误

7.1 input不能填写

• 要添加双向绑定之后才能填入
• form中的model属性是方便提取表单数据而用的?
  • 为了resetFields()而绑定model
    • 而resetFields()要有prop属性才会生效
    • 而有rules才会有错误信息显示

7.2 字体图标

• 可以通过 prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增加显示图标，也可以通过 slot 来放置图标。

7.3 rules的使用

• form绑定rules
• form-item绑定rulse的值

7.4 if (!valid) return 有eslint报错

• 解决方法
  • if (!valid) return false

7.5 collapse问题

• 无法获得this.$refs.homeMenu.isCollapse?
• 解决方法:
  • $emit的时候并把Home.vue也设置一个isCollapase

7.6 服务器上做接口问题

• 需要配置config对应的host(ip)属性
• 云服务器上的nodejs可以用localhost访问云服务器上的数据库(同一IP)
• 所有操作都需要放行端口, 宝塔与阿里云要同时放行

7.7 使用table组件

• 自定义表头
  • 去掉prop属性
  • 添加v-slot="自定义名字"
  • 后面引用的时候要用.row不然报错
• 表格边框不对齐
  • base.css文件加上

.el-table th.gutter {
  display: table-cell !important;
}

7.8 element按需导入eslint报错

• 错误原因: import后面大括号有换行
• 在.eslintrc.js中加入属性
  • 'object-curly-newline': 'off'