项目注意事项整理

前端

一、参数相关

1 查询接口参数

key对应的value值为空时，该key不传。

2 日期参数

格式为时间戳格式或者yyyy-MM-dd格式。

3 分页参数

传limit与offset。

4 页面刷新后参数保留

保留刷新前的查询条件，路由参数与接口参数均需保留。

二、Vue添加请求拦截器

1 统一处理错误及配置请求信息

// 在router.js文件下
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
　　// 在发送请求之前做些什么
　　return config
}, function (error) {
　　// 对请求错误做些什么
    return Promise.reject(error)
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
　　// 对响应数据做点什么
　　return response
}, function (error) {
　　// 对响应错误做点什么
　　return Promise.reject(error)
});

2 登录拦截(例如：判断token信息是否存在)

let router = new Router({
  routes: [
    {
     path: '/',
     name: "欢迎",
     meta: {
      requireAuth: true, // 添加该字段，表示进入这个路由是需要登录的
     },
     component: () => import('@/components/client/Hello')
    },
    {
     path: '/login',
     name: "登录",
     component: () => import('@/view/login/login')
    }
  ]
})
// 在main.js中 利用vue-router提供的钩子函数beforeEach()对路由进行判断。
router.beforeEach((to, from, next) => {
 if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
  if (store.state.token) { // 通过vuex state获取当前的token是否存在
   next();
  }
  else {
   next({
    path: '/login',
    // 将跳转的路由path作为参数，登录成功后跳转到该路由
    query: {redirect: to.fullPath} 
   })
  }
 }
 else {
  next();
 }
})
// 确保要调用 next 方法，否则钩子就不会被 resolved。

三、vue-router 按需加载

1 vue的单页面（SPA）项目,必然涉及路由按需的问题。

//Vue-router的官网推荐这种方式：
//vue异步组件和webpack的【代码分块点】功能结合，实现了按需加载
component: () => import('@/pages/client/ClientList')

四、Vue 数组/对象更新 视图不更新

此类问题 vue官方文档 的链接

五、vue 滚动行为用法，进入路由需要滚动到浏览器底部、头部等等

使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。 注意：这个功能只在支持 history.pushState 的浏览器中可用。
链接：vue-router官方文档