07

VUE项目-第一天

01-反馈

姓名 意见或建议
*** 老师，笔记总没有图片啊。。。

• 共享中有

02-回顾

• 优化axios
  • 全局配置在任何vue实例可使用
  • 基础路径提前配置
  • 使用 async await 让一步操作逻辑清晰
• 动画
  • vue实现动画并不会去实现炫酷的动画
  • 实现 进入时 离开时 动画
  • 进入时
    • 进入前 v-enter
    • 进入中 v-enter-active
    • 进入后 v-enter-to
  • 离开时
    • 离开前 v-leave
    • 离开中 v-leave-active
    • 离开后 v-leave-to
  • 元素：transtion标签包裹
  • 列表：transition-group标签包裹
• 生命周期
  • created 数据挂载后
  • mounted 视图渲染后
• 项目准备
  • 配置本地接口服务器
  • pyg_manage_api 后台接口项目
  • 启动 node app.js
  • 考虑：数据库初始化 执行的项目中的sql文件 保证数据库的名字叫shop
  • 注意：在config/defaults的json文件中去修改的密码
  • 注意：mysql服务一定要启动
• 创建项目
  • 使用的是复杂模版 vue init webpack pyg_admin_69
  • 注意：如果安装失败 优化网络

清理缓存：

# 1. 在 C:\Users\Administrator\AppData\Roaming\npm-cache 删除文件夹
# 2. cmd 执行如下命令
npm cache clean -f

03-登录-绘制登录框

• 定义了一个全局的global的css文件
• 你需要在main.js去依赖这个文件
• 登录框需要居中

04-登录-引入element-ui

• 文档：element.eleme.cn/#/zh-CN/

• 是一个基于 vue2.0的组件库，ui框架

• 安装： npm i element-ui 后面接 --save|-S --save-dev|-D import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import App from './App.vue';

  Vue.use(ElementUI);
  
  new Vue({
    el: '#app',
    render: h => h(App)
  });
  // 以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。
  

05-登录-使用form组件

• 使用组件的第一步：分析结构

• 如果组件有使用数据 你需要在 data中申明

• 修改样式 发现尺寸不一样更小尺寸 所有的组件使用小尺寸

• Vue.use(ElementUI,{size:'small'})

06-登录-引入iconfont图标

• 去阿里巴巴iconfont 下载需要的图标
• 5个字体文件一个css文件
• 在main.js中 引入css文件

• <span class="iconfont icon-poweroff"></span>
  

• 在input中使用

07-登录-添加校验功能

• 需要校验 失去焦点的时候
  • 用户名必须输入
  • 密码必须输入 且 6-18个字符
• Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。
  • 1. 绑定 rules属性对应一个校验规则对象
    2. 具体书写你的校验规则
    3. 在表单元素的上一级el-form-item指定 prop 属性 属性的值 是规则的字段名字
• 需要校验 点击登录时候
  • 使用form dom元素 方法 validate 来进行整个表单的校验
  • 在函数中传入 回调函数 参数 布尔值 true 校验成功 ....

08-登录-引入axios并配置

• 新建一个HTTP的文件夹 index.js 返回一个配置好的axios

• // 导出一个已经配置好的axios
  import axios from 'axios'
  
  // 全局使用 必须依赖  Vue  在main.js中使用
  // baseURL 配置
  axios.defaults.baseURL = 'http://localhost:8888/api/private/v1'
  // TODO  
  
  // 导出
  export default axios
  

• main.js使用 import axio from './http' //默认使用的是该文件夹下的index,js文件
• 在Vue构造函数 挂载 $http = axios

09-登录-发送登录请求处理响应

• 发现： 响应成功后响应状态码 200 通讯成功
• 不代表业务是成功的。 返回的数据中 meta:{status:200,msg:'提示'}
• 逻辑： 不是 meta.status 不是 200 都是错误 需要提示给用户
• 逻辑： 跳转 后台系统的主页

10-eslint

• 比如语法
  • say () {}
  • const a = 10
  • {name: 'xxx'}
  • ['a', 'b']
  • 变量定义一定需要使用
  • 导入优先
• 代码自动修正工具
  • 就是一个命令行工具
  • "lint": "eslint --fix --ext .js,.vue src" package.json
  • 执行 npm run lint
• 配置项目不去检查语法
  • config ---> index.js ---> useEslint: false,
  • 重新后生效

10-登录-分析登录后业务逻辑

• 当后台告诉登录成功：
  • 跳转到后台首页
  • 注意：项目模式前后端分离
  • session去记录登录状态，但是session存储在服务端，localhost:8888
  • 前端的代码运行在 localhost:8080 服务器 不能使用session
  • 前后端分离的项目怎么记录用户的登录状态；
  • 使用一个token令牌来记录

11-登录-理解token令牌

• 回顾session是怎么实现
• token原理
  • 登录后会在服务端 产生token数据 查找用户信息 校验你的登录状态的
  • 登录的返回结果 包含 token 就是一个加密后的字符串
  • 客户端需要存储起来 下次请求的时候需要在请求头部携带
  • 服务端获取 去查询你的用户信息 如果有已登录 如果没有未登录或者登录失效
• 怎么在客户端存储 token
  • 使用的技术是 sessionStorage
  • 这是一个 bom 对象 用来在客户端存储信息
  • 特点：当关闭浏览器后 信息失效
  • sessionStorage 存储 sessionStorage.setItem('key','value')
  • sessionStorage 获取 sessionStorage.getItem('key')
    • sessionStorage 删除 sessionStorage.removeItem('key')
• 怎么在请求的头部加token ????

12-登录-理解导航守卫

const router = new VueRouter({ ... })
// 所有的路由跳转前  做些什么
// 添加导航守卫
router.beforeEach((to, from, next) => {
  // to 去的路由对象
  // from 离开的路由对象
  // next() 调用下一个路由
  // next('/xxx') 去某个路由
})

• 跳转路由前 这个时刻 next() 放行

13-登录-实现未登录拦截

• 登录页面 不需要拦截 放行
• 如果是其他页面 需要拦截

  • 如果sessionStorage中存储了token已登录 放行

  • 如果sessionStorage中没有存储token未登录 拦截登录页面

    // 添加导航守卫 router.beforeEach((to, from, next) => { // 1. 如果现在 跳转是登录 放行 if (to.path === '/login') return next() // 2. 如果现在 未登录（sessionStorage是否有token） 拦截到登录 if (!sessionStorage.getItem('token')) return next('/login') // 3. 其他情况 next() })

14-主页-布局-头部&侧边栏

15-主页-导航菜单效果

   <el-menu
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>导航一</span>
        </template>
        <el-menu-item index="1-1">选项2</el-menu-item>
        <el-menu-item index="1-2">选项2</el-menu-item>  
      </el-submenu>
    </el-menu>

• :collapse="collapse" 切换导航菜单 true 折叠 false 展开 状态的
• el-aside class="home_aside" :width="collapse?'65px':'180px'"
• :collapse-transition="false" 禁用动画
• style="border: none; margin-top: 5px"

17-主页-请求头配置令牌

• 在所有的请求中的请求头携带token信息
• 使用 axios 的请求拦截器 将来所有的请求都会携带我们追加的信息
• 需要授权的 API ，必须在请求头中使用 Authorization 字段提供 token 令牌 // 拦截器 axios.interceptors.request.use(config => { // 给config添加新的信息 // config可以给请求头追加属性 config.headers.Authorization = sessionStorage.getItem('token') return config })

18-主页-拦截令牌失效

axios.interceptors.response.use(res => {
  // 判断 token 是否失效
  if (res.data.meta.status === 401) {
    location.href = '#/login'
  } else {
    return res
  }
})

19-主页-动态导航菜单

20-主页-退出功能

21-主页-欢迎页面