整项目地址:vue-element-admin
https://github.com/PanJiaChen/vue-element-admin
做这个 vueAdmin-template 的主要原因是: vue-element-admin 这个项目的初衷是一个 vue 的管理后台集成方案,把平时用到的一些组件或者经验分享给大家,同时它也在不断的维护和拓展中,比如最近重构了dashboard,加入了全屏功能,新增了 tabs-view 等等。所以项目会越来越复杂,不太适合很多初用 vue 的同学来构建后台。所以就写了这个基础模板,它没有复杂的功能,只包含了一个后台需要最基础的东西。 vueAdmin-template 主要是基于vue-cli webpack模板为基础开发的,引入了如下dependencies:
该项目只做了一个管理后台需要极简的功能,封装了axios请求,支持无限层级路由,动态权限和动态侧边栏。 如果需要更多复杂的功能可以参考 vue-element-admin,若还有不足,欢迎提issue或者pr。下文会简单说一下用该模板需要注意的地方。
路由懒加载应该是写大一点的项目都会用的一个功能,只有在使用这个component的时候才会加载这个相应的组件,这样写大大减少了初始页面 js 的大小并且能更好的利用浏览器的缓存。
const Foo = resolve => require(['./Foo.vue'], resolve)
//或者
const Foo = () => import('./Foo');
复制代码
在懒加载页面不多的情况下一切是那么的美好,但我司后台业务在不断地迭代,现在项目近百个路由,这时候使用路由懒加载在开发模式下就是一件痛苦的事情了,随手改一行代码热更新都是要6000ms+的,这怎么能忍。楼主整整花了一天多的时间找原因,能webpack优化的方法都用了,什么 dll, HappyPack 等方法都是过了,但提升的效果都不是很明显,正好那段时间出了 webpack3 楼主也升级了,编译速度也得到了很大幅度的提升,不过也要2000ms+。后来经过大神 @jzlxiaohei 的指点发现原来是路由懒加载搞得鬼,楼主猜测可能是异步加载导致 webpack 每次的 cache 失效了,所以每次的rebuild 才会这么的慢。找到了原因我们就可以对症下药了,我们就自己封装了一个_import()的方法,只有在正式环境下才使用懒加载。这样解决了困扰多事的rebuild慢问题。代码
const _import = require('./_import_' + process.env.NODE_ENV);
const Foo = _import('Foo');
复制代码
整整比原来6000ms快了十多倍,我终于又能愉快的开发了。
在手摸手,带你用vue撸后台 系列二(登录权限篇)这章中其实已经详细介绍过了。该项目中权限的实现方式是:通过获取当前用户的权限去比对路由表,生成当前用户具的权限可访问的路由表,通过router.addRoutes动态挂载到router上。 但其实很多公司的业务逻辑可能不是这样的,举一个例子来说,很多公司的需求是每个页面的权限是动态配置的,不像本项目中是写死预设的。但其实原理是相同的。如这个例子,你可以在后台通过一个tree控件或者其它展现形式给每一个页面动态配置权限,之后将这份路由表存储到后端。当用户登录后根据role,后端返回一个相应的路由表或者前端去请求之前存储的路由表动态生成可访问页面,之后就是router.addRoutes动态挂载到router上,你会发现原来是相同的,万变不离其宗。
侧边栏:本项目里的侧边栏是根据 router.js 配置的路由并且根据权限动态生成的,这样就省去了写一遍路由还要再手动写侧边栏这种麻烦事,同是使用了递归组件,这样不管你路由多少级嵌套,都能愉快的显示了。权限验证那里也做了递归的处理。
面包屑:本项目中也封装了一个面包屑导航,它也是通过watch $route动态生成的。代码
由于侧边栏导航和面包屑亦或是权限,你会发现其实都是和router密切相关的,所以基于vue-router路由信息对象上做了一下小小的拓展,自定义了一些属性
icon : the icon show in the sidebar
element-ui自带的图标不是很丰富,但管理后台图标的定制性又很强。这里只给大家推荐使用阿里的 iconfont ,简单好用又方便管理。本项目中已经嵌入了一些 iconfont 作为例子,大家可以自行替换。 这里来简单介绍一下 iconfont 的使用方式。首先注册好 iconfont 账号之后,可以在我的项目中管理自己的 iconfont 。我司所有的项目都是用这个管理的,真心推荐使用。
创建好图标库后如果有更新替换也很方便,这里我使用了 Symbol 的方式引入,这里还有unicode,font-class的引入方式,有兴趣的可以自行研究。 之后我们点击下载 Symbol,会发现有如下这些文件,我们只要关心iconfont.js就可以了
我们将它替换项目中的 iconfont.js 就可以了。本项目中也封装了一个svg component 方便大家使用。
<icon-svg icon-class="填入你需要的iconfont名字就能使用了"></icon-svg>
复制代码
每个项目都需要有一个属于自己的favicon。
其实实现起来非常的方便,我们主需要借助html-webpack-plugin
//webpack config
function resolveApp(relativePath) {
return path.resolve(relativePath);
}
new HtmlWebpackPlugin({
filename: config.build.index,
template: 'index.html',
inject: true,
favicon: resolveApp('favicon.ico')
}),
复制代码
你只要将本项目跟目录下的favicon.ico文件替换为你想要的图标即可。
vue cli 默认提供了standard和airbnb 两种 lint 规范,说真的一个j检查校验的太松一个又太紧,而且每个团队的 lint 规范又是不同的,所以楼主干脆在项目里把大部分常用的 lint 规范都列举了出来并写上了注释方便大家修改代码地址,大家也可以把自己的规范上传到npm,像 vue 一样 vue-eslint-config。配置 eslint 对多人协作的项目有很大的好处,同时配置好lint 在加 ide 的 lint 插件写代码简直要起飞。相关配置可见第一篇教程。
相信大部分 vue 的项目都是基于 vue-cli 来开发的,不过毕竟每个人需求都是不太一样的,需要自定义一些的东西。就比如拿 postcss 来说 vue-cli 有一个小坑,它默认 autoprefixer 只会对通过 vue-loader 引入的样式有作用,换而言之也就是 .vue 文件里面的 css autoprefixer 才会效果。相关问题issues/544,issues/600。解决方案也很简单粗暴
//app.vue
<style lang="scss">
@import './styles/index.scss'; // 全局自定义的css样式
</style>
复制代码
你在 .vue 文件中引入你要的样式就可以了,或者你可以改变 vue-cli的文件在 css-loader 前面在加一个 postcss-loader,在前面的issue地址中已经给出了解决方案。 这里再来说一下 postcss 的配置问题,新版的vue-cli webpack 模板 inti 之后跟目录下默认有一个.postcssrc.js 。vue-loader 的 postcss 会默认读取这个文件的里的配置项,所以在这里直接改配置文件就可以了。配置和postcss是一样的。
//.postcssrc.js
module.exports = {
"plugins": {
// to edit target browsers: use "browserlist" field in package.json
"autoprefixer": {}
}
}
//package.json
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
复制代码
如上代码所述,autoprefixe r回去读取 package.json 下 browserslist的配置文件
本项目暂时没有兼容性需求,如有兼容性需求可自行使用babel-polyfill。 在Node/Browserify/webpack中使用
npm install --save babel-polyfill //下载依赖
复制代码
在入口文件中引入
import 'babel-polyfill';
// 或者
require('babel-polyfill');//es6
复制代码
在webpack.config.js中加入babel-polyfill到你的入口数组:
module.exports = {
entry:["babel-polyfill","./app/js"]
}
复制代码
具体可参考 link
或者更简单暴力 polyfill.io 使用它给的一个 cdn 地址,引入这段js之后它会自动判断游览器,加载缺少的那部分 polyfill,但国内速度肯能不行,大家可以自己搭 cdn。
楼主 vue 群里的小伙伴们问的最多的问题还是关于跨域的,其实跨域问题真的不是一个很难解决的问题。这里我来简单总结一下我推荐的几种跨域解决方案。
开发环境 生成环境 cors cors proxy nginx
这里我只推荐这两种方式跨域,其它的跨域方式都很多,但真心主流的也就这两种方式。
vue-element-admin 由于是一个纯前端个人项目,所以所以的数据都是用mockjs生成的,它的原理是:拦截了所有的请求并代理到本地模拟数据,所以 network 中没有任何的请求发出。不过这并不符合实际业务开发中的场景,所以这个项目中使用了前不久刚出的 easy-mock,支持跨域,mockjs 的语法,支持Swagger 这几点还是挺不错的。相关文章
线上或者测试环境接口的 base_url 不一样是很长见得需求,或者你在本地用了如 easy-mock 这种模拟数据到线上环境你想用自己公司生产环境的数据,这些需求都可以简单的通过用 baseurl 来解决。首先我们在config/下有dev.env.js和prod.env.js这两个配置文件。用它来区分不同环境的配置参数。
//dev.env.js
module.exports = {
NODE_ENV: '"development"',
BASE_API: '"https://easy-mock.com/mock/5950a2419adc231f356a6636/vue-admin"',
}
//prod.env.js
module.exports = {
NODE_ENV: '"production"',
BASE_API: '"https://prod-xxx"',
}
复制代码
同时本项目封装了axios拦截器,方便大家使用,大家也可根据自己的业务自行修改。
import axios from 'axios';
import { Message } from 'element-ui';
import store from '../store';
// 创建axios实例
const service = axios.create({
baseURL: process.env.BASE_API, // api的base_url 读取config配置文件
timeout: 5000 // 请求超时时间
});
// request拦截器
service.interceptors.request.use(config => {
if (store.getters.token) {
config.headers['X-Token'] = store.getters.token; // 让每个请求携带自定义token 请根据实际情况自行修改
}
return config;
}, error => {
// Do something with request error
console.log(error); // for debug
Promise.reject(error);
})
// respone拦截器
service.interceptors.response.use(
response => {
/**
* code为非20000是抛错 可结合自己业务进行修改
*/
const res = response.data;
if (res.code !== 20000) {
Message({
message: res.data,
type: 'error',
duration: 5 * 1000
});
// 50008:非法的token; 50012:其他客户端登录了; 50014:Token 过期了;
if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
MessageBox.confirm('你已被登出,可以取消继续留在该页面,或者重新登录', '确定登出', {
confirmButtonText: '重新登录',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
store.dispatch('FedLogOut').then(() => {
location.reload();// 为了重新实例化vue-router对象 避免bug
});
})
}
return Promise.reject(error);
} else {
return response.data;
}
},
error => {
console.log('err' + error);// for debug
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
});
return Promise.reject(error);
}
)
export default service;
复制代码
由于axios每一个都是一个实例,你的请求都是基于这个实例来的,所以所以配置的参数属性都继承了下来.
//api.xxx.js
import fetch from '@/utils/fetch';
export function getInfo(token) {
return fetch({
url: '/user/info',
method: 'get',
params: { token }
});
}
//你可以直接这样使用,之前拦截器写的东西都是生效的,
//它自动会有一个你之前配置的baseURL,
//但你说我这个请求baseURL和其它的不同,
//这也是很方便的,你可以字请求内部修改,
//它会自动覆盖你在创建实例时候写的参数如
export function getInfo(token) {
return fetch({
baseURL: https://api2-xxxx.com
url: '/user/info',
method: 'get',
params: { token }
});
}
复制代码
这篇文章主要是介绍了 vueAdmin 做了哪些事情,希望大家如果有后台新项目要开发,建议基于 vue-admin-template 来开发,而 vue-element-admin 更多的是用来当做一个集成方案,你要什么功能就去里面找拿来用,因为两者的基础架构是一样的,所以复用成本也很低。
知道早期的开发中,前后端是不分离的吗?那么后来它们又为什么要“分家”呢?分离后又有什么好处呢?
在前面一篇文章中,产品汪搞懂了前后端的工作分工。但是了解过程中,一个程序猿哥哥不经意间的一句话:“现在都是前后端分离的”,让小汪感到纳闷了,以前难道前后端不分离的么?于是小汪就继续深究起来。
在十几年前,前端的地位其实相对于后端并不那么强势,以下是一种经典的编程框架。
MVC:Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业务逻辑、数据、界面显示分离的方法组织代码。
有意思的事情出现了,内容是传给用户的,前端并不是直接接触用户的!前端只是提供了个样式模板,由后端把内容嵌入进入,再由后端直接传给用户。
这个时候,前端的编程要各种顺着后端哥哥的心意,而且前端要是出bug了,还得拉上后端一起研究,谁让你往我的模板里插了内容,出了幺蛾子你就得负责到底。
这个时期前后端高度耦合,从编程环境、到开发调试,都必须“在一起”,对于前端来说,其实自主权就不高,对后端来说,也要懂一些前端的知识。
于是前端程序猿对后端程序猿说,要不……你只管你的业务和数据,把结果给我,我来负责组装与呈现,这样大家都轻松些。于是前后端就分离了。
前后端分离带来的好处:
(1)编程更轻松
前后端分离之后,后端更专注于实现业务逻辑,形成一套标准化的“API接口”,例如需要创建商品,前端将商品信息传给后端创建商品的接口,后端就会完成商品的创建,并返回创建结果。如果前端给的创建商品信息缺了标题或者价格,后端还能返回创建失败的结果,并且提示缺失了哪些信息等。
前端除了负责界面样式和交互,还接管了获取和展示数据的权利,从此前端开发就自由多了,如果遇上bug,也能很轻松定位到是前端还是后台的事情。
(2)更高的可复用性
前后端分离,更是顺应了互联网发展多样化的潮流。后端通过提供一系列可以实现不同业务功能的接口,就可以让不同的前端、甚至外部系统过来对接。
这样方便了公司不断推广自己的产品,今天推出手机网页版、明天推出APP版、后天推出小程序版本等。而后端只需要提供一次接口,无需每增加一类客户端,后端就要新写过。
用户访问网站的过程小知识:
但是久而久之,前后端分离在web网页上也遇到了一些问题,最明显的是以下两点:
前后端分离为用户设备带来的影响,可以通过“换台新手机”、“换台新电脑”解决,但是搜索引擎爬不到网页的数据,对很多重度依赖搜索引擎流量的产品来讲,打击可就大了。
例如你需要找一个菜谱的时候,可能会在百度搜索“芥蓝怎么炒好吃?”,然后再从搜索结果里面访问各种美食网站。又或者你想去哪里玩,就会在百度搜索“土耳其旅游攻略”等等。对于这类重搜索引擎流量的网站而言,如果爬虫爬不到自己的数据,客流损失就比较严重。
考虑到上诉问题,聪明的网页前端程序猿就想到了一个新的办法,那我们先把后台的数据跟HTML内容整合好,再呈现给用户吧,得力于一种叫做Node.JS的、可以使用网页前端熟悉的JavaScript编程的工具,于是有了2.0版本的前后端分离。
前端程序猿跟服务器上的后端说,让一让,给我腾个地儿,然后把Node.JS放在了服务器上。等用户或者爬虫需要访问网页时,这个运行在服务器上的程序,先请求后端获得数据,并整合到HTML中,然后再返回给用户。
这样一来,用户的设备就少了JavaScript多次请求后端的烦恼,加快了运行速度,而爬虫也可以爬取到填充好内容的HTML网页了。
看到这里,小汪就想,这么一来,用户体验、爬虫的问题确实解决了,但是让本来本该发生在用户浏览器上的事情,都在服务器上做了嘛,如果访问量大的话,咱服务器的压力不就很大了?
前端程序猿哥哥呵呵一笑,其实不然,你想想,很多用户都是在访问同一个网页,看同一个商品、读同一篇文章,这些请求,要是服务器的前端就请求后台一次,然后把整合好的HTML保存起来,下次再有人再来访问,就把这个生成好的HTML展示给用户,这样不就服务器轻松了、用户访问也快了么!
小汪又问了,那咋们页面多了,不就要每个页面都保存一份HTML文件么,服务器储存的空间不就越来越少了么?
前端程序猿哥哥继续答道:久而久之,HTML文件在服务器积累多了,就把好久都没人访问的HTML删了,给其他新保存的HTML文件让位置,通过“缓存”技术,让服务器永葆活力。
小汪恍然大悟,原来这就是缓存啊!这下子,小汪终于明白了前后端分离是什么回事,以及为什么要前后端分离。
现在随着很多大型产品的形成、独立运行,新的“信息孤岛”正在形成。例如微信的公众号-小程序-朋友圈-圈子,然后通过搜一搜进行统一搜索,内部造血,而不再依赖传统的搜索引擎为他引流。
又例如淘宝,很多年前就拒绝了让百度爬虫爬取他的商品信息,只允许在淘宝内进行搜索。你在百度上搜不到淘宝的商品,在微信上也找不淘宝的任何信息、无法访问淘宝任何的链接,如果你要淘宝购物,就只能去淘宝网站或者下载淘宝APP。新的互联网格局的形成,肯定会进一步影响着前后端的关系。
本文由 @iCheer 原创发布于人人都是产品经理,未经作者许可,禁止转载。
题图来自Unsplash,基于CC0协议。
为了丰富 Naive Admin 生态,近期我们一直在精雕细琢,日夜奋战,终于又迎来了Arco Vue Pro 正式发布上线!
ArcoDesign 是由字节跳动 GIP UED 团队和架构前端团队联合推出的企业级设计系统,在打磨了近 3 年之后,通过字节内部大量业务沉淀和验证,开源了 ArcoDesign 设计系统,旨在让社区听见更多的声音,为更多中小型企业及个人设计师和开发者提效,创造更多高效美观的“最佳实践”。
Naive Admin Arco 是一个基于 Vue3.0、Vite、 Arco Vue、TypeScript 中后台解决方案。
Naive Admin Arco 企业级中后台前端框架,使用最新的前端技术栈,并提炼了典型的业务模型,页面,包括二次封装组件、动态菜单、权限校验、粒子化权限控制等功能,它可以帮助你快速搭建企业级中后台项目
响应式、多主题,多配置,快速集成,开箱即用
最新技术栈,使用 Vue 3、Typescript、Pinia、Vite 等前端前沿技术
强大的鉴权系统,对路由、菜单、功能点等支持 3 种鉴权模式,满足不同的业务鉴权需求
持续更新,实用性页面模板功能和交互,随意搭配组合,让构建页面变得简单化
更多页面、功能,组件,请直接在线预览查看
AdminPro
Naive Admin NaiveUi 生态最优秀的中后台框架,全面的系统配置,优质模板,常用组件,真正一站式开箱即用
*请认真填写需求信息,我们会在24小时内与您取得联系。