vue项目开发流程思路（1）

红太狼 2021-07-24 19:36 398阅读 0赞

## vue项目开发流程思路 ##

*备注：写这篇文章时楼主内心十分复杂，刚刚19：30电话面试腾讯外包扑街了，一紧张把开发流程说错了，在此总结开发流程，并且引以为戒*

*  家具管理系统：项目使用vue+Element-UI开发，使用vue-cli脚手架搭建项目结构，使用vue-router管理路由，使用vuex共享数据管理

**login.vue登陆界面**：使用Element-UI的form表单验证+正则表达式验证表单，通过验证后，通过接口发送表单数据到后台，返回token存在localStorage中，

//封装
    function setToken (val, name = 'token') { 
      window.localStorage.setItem(name, val)
    }
    //返回操作
    setToken(res.data.token)

并且跳转到首页home.vue。运用生命周期钩子函数—创建后created ，判断如果有token直接跳转到首页

created () { 
        if (getToken()) { 
          this.$router.push('/home')
        }
    }

使用**axios拦截器**中的请求拦截器，如果请求中有token,则请求中添加token,

instance.interceptors.request.use(function (config) { 
      // 请求拦截器中，如果有token，请求中添加token
      if (getToken()) { 
        config.headers.token = getToken()
      }
      return config
    }

响应拦截器中，根据返回的状态码，执行对应操作，如果状态码为200则不做处理，如果为其他，则根据饿了么消息  
提示组件，返回错误信息

Message.error(response.data.message)

在**首页home.vue**中，运用生命周期钩子函数—创建后created钩子，如果没用token,跳转回首页，

if (!getToken()) { 
          this.$router.push('/')
          return
        }

之后再根据token,发送请求获取用户信息，存在vuex中，以便全局调用(楼主就是扑街在这里，说成存在localStorage中去了，现在想想，localStorage又难调用，又不安全)，之后的页面就暂时不说了

this.$store.state.userInfo = this.userInfo

腾讯面试官之后就直接问：CSRF，没听过，扑街，面试完问他，他说这是token被盗用。哎，我真的没听说过这玩意。。。然后再问他就叫我自己百度查了

发表评论取消回复

表情：

评论列表（有 0 条评论，398人围观）

还没有评论，来说两句吧...

相关阅读

相关企业开发项目【1】— — 流程、开发环境搭建模板

企业开发项目【1】— — 流程、开发环境搭建模板 > 以黑马的学成在线为例 1 项目背景 2 项目介绍 3 开发环境搭建 3.1 开发工具配置（后端

骑猪看日落/ 2024年03月29日 15:49/ 0 赞/ 115 阅读

相关 VUE项目开发的完整流程

文章目录一、VUE环境搭建二、创建VUE项目 1. 外部终端创建 2. IDea内部终端创建 3. 项目介绍

傷城~/ 2023年09月30日 08:49/ 0 赞/ 13 阅读

相关项目开发流程

需求分析 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0

红太狼/ 2023年07月25日 09:57/ 0 赞/ 36 阅读

相关 vue项目开发流程

创建vue项目流程 1.使用构建工具vue-cli创建项目脚手架 vue-cli是一个官方发布vue.js项目脚手架，使用vue-cli可以快速创建vue项目。（

痛定思痛。/ 2023年06月15日 06:43/ 0 赞/ 4 阅读

相关 vue 项目前端开发流程

一前端开发流程 1 添加路由文件的位置：E:\\vue-sdgt\\src\\router\\index.js 2 设置跳转页面路径 ![waterm

缺乏、安全感/ 2022年09月15日 05:58/ 0 赞/ 200 阅读

相关项目开发流程

说了那么多总算是到了开发的阶段了，下面我们就一块来看一下吧！一、需求分析 ![70][] 项目前期主要指的是项目业务需求调研、包括配合用户制定项目建设方案、技术规范书、

墨蓝/ 2022年05月05日 01:28/ 0 赞/ 292 阅读

相关 Vue 框架-12-Vue 项目的详细开发流程

Vue 框架-12-Vue 项目的详细开发流程首先，如果你还不了解 Vue 脚手架怎么搭建？默认的环境中有哪些文件？文件大概是什么作用？那么，您要先查

叁歲伎倆/ 2022年04月16日 04:20/ 0 赞/ 374 阅读

相关前端vue项目开发流程

1. 产品给出需求文档，产品原型 2. 阅读文档，梳理需求 3. 评审需求（产品逻辑、交互是否合理） 4. UI出图，交互设计稿 5. 开始做详细设计（拆分需求模块，

浅浅的花香味﹌/ 2022年03月25日 07:05/ 0 赞/ 307 阅读

相关项目开发流程

项目开发流程： 1、需求部门-外包公司的叫法 (产品部门）一般在做自己的产品才有外包公司： 1、分为产品外包,人家公司要做一个系统，外包公司接过来做

╰+哭是因爲堅強的太久メ/ 2022年02月15日 02:23/ 0 赞/ 302 阅读

相关 vue项目开发流程思路（1）

vue项目开发流程思路备注：写这篇文章时楼主内心十分复杂，刚刚19：30电话面试腾讯外包扑街了，一紧张把开发流程说错了，在此总结开发流程，并且引以为戒家具管理

红太狼/ 2021年07月24日 19:36/ 0 赞/ 399 阅读