vue的项目

登录功能

Login模块的实现

• 1.从element上面找到表单，然后将标签内容和script的内容分别放在相应的位置
• 2.初始化完成后，将标签中的内容替换删减成需要的模块
• 3.将rouleForm改成LoginName，
• 4.添加输入框的name属性为username/password
• 5.在表单验证中将name分别替换为username和password，进行表单验证
• 6.判断valid的值是否为true，true代表表单验证通过，false代表表单验证失败
• 7.引入axios，然后使用axios发送请求，携带的参数为this.loginName，即这个表单的内容
• 8.请求完成判断，判断当前的结果res.data.meta.status===200
• 9.如果判断结果为true，那么，首先保存token，然后再使用this.$router.push('home')
• 10.如果结果为false，那么弹出提示的错误信息

Login模块-index.js的添加内容

• 1.导入组件Home
• 2.在路由中添加一个路由
• 3.添加路由守卫
  router.beforeEach(to,from,next)
• 4.如果to.path ===login ==》next()
• 5.获取token的值
• 6.如果token的值为true ===》next()
• 7.如果token的值为 false ===》next('/login')

Login模块-样式的处理

• 1.引入layout布局的方式将模板引入在页面中
• 2.保留一一行一列
• 3.设置主轴的对齐方式为justify=‘center’ type=“flex”
• 4.设置侧轴的对齐方式，align：middle，由于当前页面的height不是全屏的，所以暂时不会动
• 5.设置当前的页面的height为100%，且再设置背景颜色
• 6.给表单域设置背景颜色为白色且设置padding值圆角

主页的渲染

Home.vue的主页框架

• 1.首先从element-UI下载模板，然后渲染
• 2.设置页面的大小，即先设置页面的全屏
• 3.设置app.vue中的html和body的height：100%
• 4.再设置home组件中home-container的 height: 100%;
• 5.给头部设置背景色和其他的组件
• 6.设置侧边栏的导航，并设置背景颜色
• 7.在home组件中设置组件的出口

home.vue中的aside的实现

• 1.首先从element中将结构复制下来(带下拉框的)
• 2.首先让模板结构能够正常的渲染，然后开始删减结构
• 3.保留一个下拉导航和一个可点击的导航
• 4.修改导航的名称，给用户列表的index属性值设置为users
• 5.在el-menu中设置 ：router=‘true’开启导航
• 6.当用户列表被触发，会到index.js中查找路由，根据home.vue中的路由出口，将显示的内容放在了main的区域，数据能够显示成功

用户信息显示

Users.vue模块

• 1.创建Users模块
• 2.在element上面找到对应的表格组件，将结构和js代码复制下来
• 3.首先将模板的展示完成，然后删减修改模板组件数据
• 4.引入axios，发送get请求，传两个参数，分别是params和headers
• 5.在headers中写入固定格式内容 Authorization：- localStrong.getItems('token')
• 6.params中传入参数，query，pagenum，pagesize
• 7.在then的回调函数中，处理响应的结果
• 8.如果.....data.status===200，将this.userList = data.users
• 9.如果请求失败，this.$router.push('/login'),- localStrong.removeItems('token')
• 10.在menthods，将请求数据的过程封装成一个方法，然后在created中调用一- 次
• 11.在menthods中注册一个事件，当页码发生改变时，执行这个函数

user.vue中的添加的data的属性

• 1.userList表示用户的数组集合
• 2.total表示数据的总数
• 3.pagesize表示每页的大小
• 4.currpage表示当前页

user.vue中的分页

• 1.在标签的el-table同级位置添加一个分页模块，从element中复制该模块
• 2.首先将标签展示在页面中，然后修改属性值
• 3.给 :page-size=3 :current-page=1 :total='total' @current-change="changPage"

user.vue-index.js的添加的内容

• 1.导入组件Users
• 2.在home路由中添加一个children(),将Users.vue添加到children()中

用户状态的显示

• 1.在状态的区域，拷贝数据，开关控件
• 2.给这个控件添加v-model=“scope.row.mg_state”
• 3.然后给控件添加事件@change="changeStatus(scope.row)"
• 4.在methods中注册事件changeStatus
• 5.发送put修改请求，传递修改的参数
• 6.处理修改成功和失败的回调函数

用户的操作

• 1.从element-UI中下载对应的组件
• 2.修改样式删减成需要的样式
• 3.未完待续

项目优化

1.axios的优化

以下配置均在main.js中

• 1.不用重复引入axios

import axios from ‘axios’

引入axios
Vue.prototype.axios = axios
将axios添加到Vue的原型上，Vue的实例可以直接调用

• 2.配置配置基准路径

axios.defaults.baseURL='http://localhost:8888/api/private/v1'

• 3.请求拦截器

axios.interceptors.request.use(config=>{
config.headers.Authorization=localStrong.getItem('token')
return config
})
根据axios的优化将登陆，用户数据的渲染的请求方式，全部改成优化后的方式