后台管理系统开发流程

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

图片懒加载

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

使用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
动画场景：避免短时间内多次触发动画引起性能问题

后台管理系统开发流程相关推荐

视频教程-SSM后台管理系统开发实战-Java
SSM后台管理系统开发实战 5年IT从业经验,目前职位是Java高级工程师.架构师,在gitchat发布有<SSM博客系统开发实战>达人课,CSDN博客专家,博客专栏作者,梦境网项目独立开 ...
SSM后台管理系统开发实战
一.简介: 通过这个课程带大家从零开发一款功能全面的后台管理系统,包括项目搭建.功能实现到最后的Linux系统部署全过程.本课程使用SpringMVC + Spring + Mybatis作为主体框架 ...
大事件后台管理系统开发实战（下）
文章目录续前篇:大事件后台管理系统开发实战(中) 1. 文章类别 1.1 点击编辑按钮展示修改文章分类的弹出层 1.2 为修改文章分类的弹出层填充表单数据 1.3 更新文章分类的数据 1.4 删除文 ...
Vue 2.x 实战之后台管理系统开发（二）
1. 导语承接上文:Vue 2.x 实战之后台管理系统开发(一) 在上一篇文章中,我详细叙述了如何创建项目框架和引入各种后台常用插件,做好这些准备工作后,我们就可以着手进行页面的开发了.在开发过程中 ...
Thinkphp实战教程后台管理系统开发
目录 ├─Thinkphp5 后台管理开发.png ├─Thinkphp5 后台管理开发.xmind ├─Thinkphp实战教程后台管理系统开发-1.课程介绍及大纲.mp4 ├─Thinkphp实战 ...
JAVA WEB商品后台管理系统开发
JAVA WEB商品后台管理系统开发前言 1.本实例采用eclips javaee做开花环境,利用java开发商品后台功能实现,利用jsp做前端显示页面.运行在tomcat服务器上. 2.实现了商品 ...
【SpringBoot】33、SpringBoot+LayUI后台管理系统开发脚手架
Asurplus-Vue:[SpringBoot]五十四.SpringBoot+VUE后台管理系统开发脚手架本期给大家推荐我自己写一个开源项目:Asurplus-LayUI,本着减少大量重复开发工作 ...
c# 基于layui的通用后台管理系统_【SpringBoot】三十三、SpringBoot+LayUI后台管理系统开发脚手架...
点击蓝色字免费订阅,每天收到这样的好信息前言:最近有不少粉丝关注本公众号.并且我已经成功开通了流量主同时会赚一点点广告费,我打算每个月把这部分钱拿出来给大家买点书刊,算是给大家一点福利吧.大家想买什 ...
vue-manage-system 后台管理系统开发总结
前言 vue-manage-system,一个基于 Vue.js 和 element-ui 的后台管理系统模板,从2016年年底第一个commit,到现在差不多两年了,GitHub上也有了 5k st ...

后台管理系统开发流程

后台管理系统开发流程相关推荐

最新文章

热门文章