admin管理员组

文章数量:829151

后台管理系统开发流程

首先我们是从0开始开发的,那么就要从脚手架开始,这个后台管理系统的项目使用的是Vue脚手架3.0,安装好脚手架之后,我们就可以对项目进行封装模块,配置多环境变量,方便后期维护和修改,下载Vuex,node-sass,axios,element-ui , 对axios进行封装,请求拦截,响应拦截,对element-ui进行按需引入,配置rem,实现自适应,在请求拦截和响应拦截中添加loading效果,对scss混入使用(mixin);

之后就可以对项目进行渲染数据了。

渲染好数据之后就要进行打包
在打包的时候 路由模式要选择 history 模式

之后进行优化,优化分为项目优化和性能优化

项目优化:
1.使用keep-alive缓存不活动的组件
2. 使用路由懒加载
3. element-ui按需引入
因为Vue是页面开发,可能有很多的路由引入,这样使用webpcak打包后的文件很大,当进入首页时,加载的资源过多,页面会出现白屏的情况,不利于用户体验,如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载,这样就更高效了,这样会大大提高首页显示的速度,但是可能其他页面的速度就会降下来,

  1. 图片懒加载

对于图片过多的页面,为了加速页面的加载速度,很多时候我们需要将页面内未出现在可视区域内的图片先不做加载,等滚动到可视区域后再去加载,这样对于页面加载性能上会有很大的提升,同时提高了用户体验。

使用Vue中的vue-lazyload插件
下载:npm i vue-lazyload -S

使用:
main.js

import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload'Vue.use(VueLazyload)// or with options
Vue.use(VueLazyload, {preLoad: 1.3,error: 'dist/error.png',loading: 'dist/loading.gif',attempt: 1
})new Vue({el: 'body',components: {App}
})

组件:

<ul><li v-for="img in list"><img v-lazy="img.src" ></li>
</ul>

4.使用防抖和节流函数(性能优化) (需要会手写)

实现防抖函数(debounce)

原理: 在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。

const debounce = (fn,delay) =>{{let timer = null;return (...args)=>{clearTimeout(timer);timer = setTimeout(() =>{fn.apply(this,args);},delay)}}
}
  • 适应环境:
  • 按钮提交场景:防止多次提交按钮,只执行最好提交的一次
  • 服务端验证场景‘:表单验证需要服务端配合,只执行一段连续 的输入事件的最后一次,还有搜索联想词功能类似生存环境请用 lodash.debounce

实现节流函数(throttle)(需要会手写)
原理:规定在一个单位时间内,只能触发一次函数,如果这个单位时间内触发多次函数,只有一次生效。

手写简化版:

const throttle = (fn , delay = 500)=>
{let flag = true;return (...args) =>{if(!flag)return ; flag = false;setTimeout(()=>{fn.apply(this,args);flag = true;},delay)}
}

适用场景:

  • 拖拽场景:固定数据内只执行一次,防止超高频率次触发位置变动
  • 缩放场景:监控浏览器resize
  • 动画场景:避免短时间内多次触发动画引起性能问题

本文标签: 后台管理系统开发流程