1. 确认需求

未登入时，默认跳转到【登录页面】
用户在未登录的时候可以注册或者登录
在注册页面用户可输入用户名密码进行注册
登录成功后默认跳转到【列表页面】，用户进行增删改查
怎么处理笔记
怎么处理回收站
当用户点击注销时，回到登录页面

2. 怎么和后端约定

要约定什么信息

接口的路径例如 XXX\register
数据请求的方式例如GET进行获取 POST进行提交或者创建
参数的类型和格式是JSON还是其他
参数的字段和约束例如密码的最小位数
请求成功时返回的数据格式
请求失败时返回的数据格式

3.如何封装请求API

1. 封装Axios请求

import axios from "axios"
// 配置通用参数
axios.defaults.headers.post["Content-Type"] = 'application/x-www-form-urlencoded'
axios.defaults.baseURL = process.env.VUE_APP_BASEURL
axios.defaults.withCredentials = true
export default function request (url, type = "GET", data = {}) {
    return new Promise((resolve, reject) => {
        let option = {
            url,
            method: type,
            ValidateStatus: function (status) {
                return (status >= 200 && status < 300) || status === 400
            }
        }
        if (type.toLowerCase() === "get") {
            option.params = data
        } else {
            option.data = data
        }
        axios(option).then(res => {
            if (res.status === 200) {
                resolve(res.data)
            } else {
                reject(res.data)
            }
        }).catch(err => {
            reject({ msg: err.response.data.msg })
        })
    })
}

总结而言

引入基础的配置项，包括请求类型、是否携带Cokkie等问题
option的处理和封装
axios发送与处理
Promise封装

2. API设计

import request from "@/helpers/request";

const URL = {
    REGISTER: "/XXX/register",
}

export default {
    register ({ username, password }) {
        return request(URL.REGISTER, "POST", { username, password })
    }

通过表存储约定的接口地址
按规定的请求方式和参数进行封装

4.如何在本地调试时解决跨域不携带Cookie的问题

在Vue的默认设置中，本地调试使用的是http协议，而chrome在2020年3月份升级了安全策略，对于跨域请求如果想写入cookie，必须是https协议才能携带Cookie。

1. 启动HTTPS

vue-cli 2

修改build/webpack.dev.conf 文件，在devServer里添加https: true

vue-cli 3+

修改vue.config.js

module.exports = {
    devServer: {
        https: true
    }
};

2.启动项目

yarn serve 进入HTTPS链接

3. 处理不安全

出现这种情况后，在当前页面用键盘输入 thisisunsafe ，不是在地址栏输入，页面即会自动刷新进入网页

5. 如何实现生产环境与测试环境分离

此处一般使用Vue-cli3以上的版本

1. 编写环境文件

.env.development 编写一个.env开头的文件，结尾代表环境名然后在内部写需要的参数

2. 使用参数

baseURL = process.env.VUE_APP_BASEURL 在其他文件中使用对应的参数名进行调用

3.调用环境

在package.json中

"serve:dev": "vue-cli-service serve --mode development",

即可使用以对应环境为结尾的参数对应的环境

6.路由传参和路由守卫

1. 传参

直接在路径中传递

父组件<router-link to = "/XX/YY"></router-link>

子组件: this.$route.params.YY接收父组件传递过来的参数

路由：{path: '/路径/:传参', }

利用对象

父组件

      this.$router.push({
        path: `/XX/${YY}`
      })

子组件: this.$route.params.YY

路由:{path: '/路径/:传参', }

3.query

父组件

      this.$router.push({
        path: '/c',
        query: {
          XX: 'YY'
        }
      })

子组件

this.$route.query.YY

路由不更改，不需要动态参数

地址：#/组件?XX=YY

2. 路由守卫

以beforeEach为例

router.beforeEach((to, from, next) => {
  // ...
})

每个守卫方法接收三个参数：

to: Route即将要进入的目标路由对象

from: Route当前导航正要离开的路由

next: Function一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

7. eslint不支持扩展运算符

Vue 默认的解析器存在部分情况无法解析扩展运算符

1 安装新的解析器

$ npm install eslint @babel/core @babel/eslint-parser --save-dev
# or
$ yarn add eslint @babel/core @babel/eslint-parser -D

2. 配置

.eslintrc.js

module.exports = {
    root: true,
    parserOptions: {
        sourceType: 'module'
    },
    parser: "@babel/eslint-parser",
    env: {
        browser: true,
        node: true,
        es6: true,
    },
    rules: {
        'no-console': 'off',
    }
}

8. 如何对请求数据统一使用Vuex进行处理

const users = {
    state: {
        user: null
    },
    getters: {
        username: state => state.user
    },
    mutations: {
        setUser (state, payload) {
            state.user = payload.user
        }
    },
    actions: {
        login ({ commit }, { username, password }) {
            return Auth.login({ username, password }).then(res => {
                commit("setUser", { user: res.data })
            })
        },// 如果需要处理的话在commit之前再套一层Promise进行处理
    }
}

state：原始的数据
getters：根据原始的数据，进行一个扩展
mutations：修改数据
actions：一些异步操作

9. 路由

先确定有几个页面，然后根据实际的开发过程进行修改

懒加载

component: () => import("@/components/Login.vue")

常见前后端交互项目踩坑