项目需求

后台新闻管理系统，主要功能：

  • 登录和注册、首页（文章数据的统计展示）、文章管理、个人中心等

项目技术栈

  • vue全家桶（vue + vue-router + vuex + vue-cli）
  • element-ui（组件库）
  • dayjs（时间格式化）
  • echarts（图表库）
  • quil-editor（富文本编辑器）

项目起步

创建项目

使用vue-cli创建

前提：安装node.js （默认安装到系统盘，不要动）

安装vue-cli
npm i -g @vue/cli
使用vue-cli提供的创建项目命令
vue create 项目名

目录设计

目的：工程化开发 目录

  • api （后台接口方法）
  • assets （静态资源）
    • images（图片）
  • components (全局组件)
  • router（路由配置）
  • store （vuex 全局数据共享）
    • modular（子模块文件）
  • style （全局样式）
  • utils （全局公用工具方法）

  • views （页面组件）

    axios 封装

  • 开发的时候对axios进行封装，放到utils目录中

  • 后台接口请求方法封装，放到api目录中 ```javascript import axios from ‘axios’

// 配置根路径 const request = axios.create({ baseURL: ‘根路径’ })

// 添加拦截器 // 请求拦截器 request.interceptors.request.use( (config) => { // 配置请求头 config.headers return config })

// 响应拦截器 request.interceptors.request.use( (response) => { return response }), (error) => { // 判断401响应错误 删除本地token 跳转登录页 return Promise.reject(error) }

  1. <a name="seeWE"></a>
  2. ## vuex模块化
  3. 根据项目需求，模块化管理项目中用到的全局共享数据<br />`store/modulse/子模块.js`
  4. ```javascript
  5. export default {
  6.   // 模块加锁
  7.   namespaced: true
  8.   // 定义变量
  9.   state: {},
  10.   // 修改变量
  11.   mutations: {
  12.     update(state,payload) {
  13.       state.变量名= payload
  14.     }
  15.   },
  16.   // 获取后台数据，异步
  17.   actions: {
  18.     getDate({commit},payload) {
  19.       // commit 方法可以调用外部mutations里的函数
  20.       commit('函数名'，参数)
  21.     }
  22.   }
  23. }

在父模块注册

  1. import 子模块名 from './modules/子模块.js'
  3. export default new Vue.Store({
  4.   //...
  5.   //注册子模块
  6.   modules: {
  7.     // 键值对一样可以省略
  8.     子模块名
  9.   }
  10. })

项目开发

前置

element 表单使用要点

  1. el-form组件 =》 :model=”表单变量” :rules=”校验规则”
  2. el-form-item =》lable=”表单项左边的名称” prop=”校验属性名”
  3. el-input 组件=》 v-model=”data变量” =》双向绑定 获取用户操作后的视图数据
  4. el-button =》点击提交表单=》兜底校验(this.$refs.ref值.validate() )

    页面访问控制

    没有登录不能访问后台页面（需要token才能）

    使用路由的前置守卫，配置白名单（登录、注册）

  1. router.beforeEach((to,from,next)=>{
  2.   // 排除白名单
  3.   // 根据是否有token？有放行页面 ：没有跳回登录页
  4. })

token过期处理

使用响应拦截器，处理401 （状态码401是身份验证失败）

  1. request.interceptors.response.use((res)=>{
  2.   // 2xx进入这里
  3.   return res
  4. }, (error)=>{
  5.     // 2xx之外进入这里
  6.   // 使用场景：拦截token失效，401情况=》跳回登录页
  7.   // error.response.status === 401 
  8. })

用户信息修改

使用vuex中存储的用户数据进行修改操作:

  1. vuex中用户数据发请求存到vuex=》异步，造成组件data中使用异步数据获取不到

解决❓：watch监听vuex中需要使用的state变量，变化后立即同步给data变量使用

  1. 如果把一个复杂类型vuex的变量直接赋值给data，会互相修改

解决❓: 进行拷贝：{…state变量} 浅拷贝 | JSON.parse(JSON.stringify(state变量)) 深拷贝

  1.  watch: {
  2.    // 调用方法需要‘’内
  3.     '$store.state.user.userInfo': {
  4.       // 切页面之后数据又消失了
  5.       // 需要加上immediate 页面加载之后立即执行一次监听
  6.       immediate: true,
  7.       handler (newValue) {
  8.         // 这样newValue和vuex是有引用关系的
  9.         // this.userInfo = newValue
  10.         // 浅拷贝
  11.         // {...拷贝对象}
  12.         this.userInfo = { ...newValue }
  13.         // 深拷贝
  14.         // JSON.parse(JSON.stringify(拷贝对象))
  15.       }
  16.     }
  17.   },

头像上传

读取file对象

1.准备img元素 （预览图）、input type=”file” 选择框
2.点击按钮触发点击选择框（ref操作dom）通过change事件获取file对象

  1. // 1. 通过FileReader，把file转成base64格式
  2. // 实例化FileReader对象
  3. const fr = new FileReader()
  4. // 使用fr.readAsDataURL方法读取图片内容
  5. fr.readAsDataURL(e.target.files[0])
  6. // 通过fr的onload事件获取=》读取图片内容base64格式
  7. fr.onload = (event) => {
  8.   this.src = event.target.result
  9. }
  11. // 2. 通过URL.URL.createObjectURL(file对象) =》图片地址
  12. URL.URL.createObjectURL(file对象)

3.调接口 进行图片的上传操作 =》入库