后台管理项目开发流程

1.多环境变量，axios请求响应拦截，api封装统一管理

面试官你好，《后台管理》这个项目是我自己独立开发的，下面我给您介绍一下，我从0开始，到发布上线的流程。首先，开发这个项目我用的最新的vue脚手架3.0，项目创建完后，首先我会配置多环境变量，方便后期测试，上线阶段快速切换后台接口。然后安装配置项目所用的ui框架（后台管理系统element-ui,移动端vant-ui）,之后安装axios，对axios进行封装，添加请求拦截，和响应拦截，我一般在请求拦截器中,给请求头添加token字段。当然这个token要存储在vuex中（稍后会降到），还有loding动画的开启，响应拦截器中，我一般会关闭请求时开启的动画，根据后端返回的状态码（code值），验证token是否有效或过期（一般401表示token无效，402表示token过期）。接着我会用封装好的axios进行api接口的封装，这里我用到了async、await封装请求接口函数，这样可以将异步操作同步化操作，代码更加友好，避免回到地狱的出现。

2.vuex使用

我这个项目用vuex对数据进行了共享。包括token,购物车中的商品数据，商品类型，商品总价，商品订单，收货地址，等。之前遇到过刷新页面vuex数据丢失的问题，我查阅资料，可以用数据持久化解决，原理就是把vuex中的数据，同步到sessionStorage中，用一个插件就可以解决vuex-persistedstate。

3.组件化拆分，开发项目

整个项目采用组件拆分的思想开发的，开发初期，我会创建三个目录，分别是views(页面级组件目录，比如home首页,category分类,detail详情，cart购物车,myself个人中心),common（公共组件目录比如：header公共头组件,swiper轮播组件,item商品信息组件,list上拉列表组件）,feature（功能性组件目录，比如toTop返回顶部组件，search搜索组件，sku商品规格组件等）,
列举5个重要的组件说下。

4.优化

1.使用keep-alive缓存不活动的组件

keep-alive是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在父组件链中；使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

2. 使用路由懒加载

Vue 是单页面应用，可能会有很多的路由引入，这样使用 webpcak 打包后的文件很大，当进入首页时，加载的资源过多，页面会出现白屏的情况，不利于用户体验。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件，这样就更加高效了。这样会大大提高首屏显示的速度，但是可能其他的页面的速度就会降下来。

3.v-for 遍历必须为 item 添加 key，且避免同时使用 v-if

- v-for 遍历必须为 item 添加 key

在列表数据进行遍历渲染时，需要为每一项 item 设置唯一 key 值，方便 Vue.js 内部机制精准找到该条列表数据。当 state
更新时，新的状态值和旧的状态值对比，较快地定位到 diff 。

- v-for 遍历避免同时使用 v-if

v-for 比 v-if 优先级高，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候，必要情况下应该替换成
computed 属性。

v-if 和 v-show 区分使用场景

v-if 适用于在运行时很少改变条件，不需要频繁切换条件的场景； v-show则适用于需要非常频繁切换条件的场景。

8. 长列表性能优化

Vue 会通过 Object.defineProperty 对数据进行劫持，来实现视图响应数据的变化，然而有些时候我们的组件就是纯粹的数据展示，不会有任何改变，我们就不需要 Vue 来劫持我们的数据，在大量数据展示的情况下，这能够很明显的减少组件初始化的时间，那如何禁止 Vue 劫持我们的数据呢？
可以通过 Object.freeze 方法来冻结一个对象，一旦被冻结的对象就再也不能被修改了。

后台管理项目开发流程相关推荐

带工作流的springboot后台管理项目，一个企业级快速开发解决方案
后台管理类项目项目名称: JeeSite 项目介绍: 这是个典型的SSM后台管理项目(不是有很多小伙伴让推荐SSM项目练手嘛),基于经典技术组合(Spring MVC.Shiro.MyBatis.B ...
项目4：后台管理的开发和使用（前端）
项目4:后台管理的开发和使用(前端) 1.npm包管理器的基本学习 2.利用现成后台管理系统开发 3.后台管理系统的路由配置 4.后台管理系统的地址访问配置 5.前后端联调 6.完善积分等级的前端系统 ...
覃超：Facebook的项目开发流程和工程师的绩效管理机制
覃超:Facebook的项目开发流程和工程师的绩效管理机制 http://mp.weixin.qq.com/s?__biz=MjM5MDE0Mjc4MA==&mid=2650992350&am ...
软件项目开发流程以及人员职责实行软件工程项目管理： ▲　项目经理（负责人）：项目经理（负责人）对整个项目负完全责任，是指导、控制、管理和规范某个软件和软/硬件系统建设的人，项目经理（负责人）是最终
转载自csdn(danieldaniel19851023的专栏) 软件项目开发流程以及人员职责实行软件工程项目管理: ▲ 项目经理(负责人):项目经理(负责人)对整个项目负完全责任,是指导.控制.管 ...
SpringMVC+Mybatis框架集成开发基础——项目开发流程——01
项目开发一般流程: 1.描述项目的主要功能及各个模块的功能 2.系统采用的技术方案 3.创建E-R模型图(实体关系模型图,数据库) 4.搭建数据库环境.创建数据库表及表间约束 5.搭建项目 ...
web前端不用怕，外卖平台的项目开发流程，大全！！
项目开发流程 1. 创建客户端项目 1.1 使用 vue-cli(脚手架)搭建项目 #在Github新建Vue-MintShop项目,然后clone到本地 git clone git@github.c ...
产品经理技能,岗位职责,项目开发流程
产品经理技能,岗位职责,项目开发流程 1.0 产品经理具备哪些技能 1.必须掌握的工具软件上述使用的脑图工具也是我们需要掌握的一项技能,Axure是以后在工作中使用频率最高的,也是我们必须掌握的原型 ...
电商项目总结java_Vue 电商后台管理项目阶段性总结(推荐)
一.阶段总结该项目偏向前端更多一点,后端 API 服务是已经搭建好了的,我们只需要用既可以,(但是作为一个全栈开发人员,它的数据库的表设计,Restful API 的设计是我们要着重学习的!!!) ...
游戏资讯及后台管理的开发与实现
其他项目,点击作者主页目录 1 系统简介 2 系统相关技术 2.1 java技术 2.2 JSP技术 2.3 B/S模式 3 需求分析 3.1 系统可行性分析 3.1.1 经济可行性 3.1.2 ...

后台管理项目开发流程

4.优化

- v-for 遍历必须为 item 添加 key

后台管理项目开发流程相关推荐

最新文章

热门文章