vue + ElementUI 搭建后台管理系统记录 本文档记录了该系统从零配置的完整过程 项目源码请访问:https://gitee.com/szxio/vue2Admin,如果感觉对你有帮助,请点一个小星星,O(∩_∩)O 新建项目 vue create vueadmin 安装 less-loader 安装 这里是一个小坑,安装 less-loader 时推荐安装指定版本,如果安装默认高版本会导致项目出错 cnpm i less-loader@6.0.0 -D 使用 <style lang=…

文章目录如下:项目效果预览地址项目开源代码基于vue模块化开发后台系统--准备工作基于vue模块化开发后台系统--构建项目基于vue模块化开发后台系统--权限控制 前言 在熟悉上一篇说到准备工具之后,现在开始构建属于自己的项目,这是一个VUE的项目,那么使用vue-cli来构建,输入以下命令 vue init webpack xxxx 在构建过程中,因为之前说的要规范代码,因此在eslint这个提问中,要回复Y.等一切都结束后,我们来看看目录结构 项目目录结构 当然这个目录添加了一些,已经做了备…

其他章节请看: react 高效高质量搭建后台系统 系列 登录 本篇将完成登录模块.效果和 spug 相同: 需求如下: 登录页的绘制 支持普通登录和LDAP登录 登录成功后跳转到主页,没有登录的情况下访问系统会重定向到登录页,登录成功后再次回到之前的页面.系统会话过期后,请求会重定向到登录页. Tip:退出登录在进入系统后进行,暂不不管. 路由和登录 登录页是进入系统的门户,登录页绘制逻辑比较简单(单个模块的开发比较简单). 首先要解决:根据 url 不同,进入登录页还是系统主页.这里需要使用…

其他章节请看: react 高效高质量搭建后台系统 系列 系统布局 前面我们用脚手架搭建了项目,并实现了登录模块,登录模块所依赖的请求数据和antd(ui框架和样式)也已完成. 本篇将完成系统布局.比如导航区.头部区域.主体区域.页脚. 最终效果如下: spug 中系统布局的分析 spug 登录成功后进入系统,页面分为三大块:左侧导航.头部和主体区域.如下图所示: Tip:spug 将版权部分也放在主体区域内. 切换左侧导航,主体内容会跟着变化,头部区域不变.例如从工作台切换到 Dashboar…

其他章节请看: react 高效高质量搭建后台系统 系列 表格 有一种页面在后台系统中比较常见:页面分上下两部分,上部分是 input.select.时间等查询项,下部分是查询项对应的表格数据.包含增删改查,例如点击新建进行新增操作.就像这样: 本篇将对 ant 的表格进行封装.效果如下: spug 中 Table 封装的分析 入口 我们选择比较简单的模块(角色管理)进行分析. 进入角色管理模块入口,发现表格区封装到模块当前目录的 Table.js 中: // spug\src\pages\sy…

其他章节请看: react 高效高质量搭建后台系统 系列 权限 本系列已近尾声,权限是后台系统必不可少的一部分,本篇首先分析spug项目中权限的实现,最后在将权限加入到我们的项目中来. spug 中权限的分析 权限示例 比如我要将应用发布模块的查看权限分给某用户(例如 pjl),可以这样操作: 在角色管理中新建一角色(例如 demo),然后给该角色配置权限: 新建用户(pjl)并赋予其 demo 权限 pjl 登录后就只能看到自己有权限的页面和操作: 入口 上述示例中,以 pjl 登录成功后返回…

文章目录如下:项目效果预览地址项目开源代码基于vue模块化开发后台系统--准备工作基于vue模块化开发后台系统--构建项目基于vue模块化开发后台系统--权限控制 前言 本文章是以学习为主,练习一下vue的操作,可能存在一些不足,首先明确功能: 要有权限控制 存在会话记录 不使用第三方插件,从而自定义通用组件 在开始撸代码之前,先准备一下项目所需求的一些工具,俗话说:工欲善其事必先利其器. Mock.js 由于本文没有后台做支撑,那么问题来了,如何去模拟数据?难道打算一个个去写模拟的json数据…

其他章节请看: react 高效高质量搭建后台系统 系列 脚手架搭建 本篇主要创建新项目 myspug,以及准备好环境(例如:安装 spug 中用到的包.本地开发和部署.自定义配置 react-app-rewired.代理 http-proxy-middleware.babel),为后续搭建真正的框架打好基石. 注:许多细节前面我们已经研究过,这部分就不在冗余介绍,请看相关链接. 创建新项目 详情请看 这里 Create React App 是一个用于学习 React 的舒适环境,也是用 Rea…

其他章节请看: react 高效高质量搭建后台系统 系列 请求数据 后续要做登录模块(主页),需要先和后端约定JSON数据格式,将 axios 进行封装,实现本地的数据模拟 mockjs. Tip:spug 中后端返回 json 通常有 data 和 error两个 key.就像这样:{data: [,-], error: ""} axios spug 中的 axios spug 中对 axios 的封装主要在 http.js 文件中.核心是请求拦截器和返回拦截器.源码如下: // s…

其他章节请看: react 高效高质量搭建后台系统 系列 antd 后续要做登录模块(主页),不仅要解决请求数据的问题,还需要完成 antd 配置以及样式的准备. antd 多种主题风格 详情请看 这里 spug 没有提供多种主题风格. 笔者还是决定稍作研究,万一公司需要呢. 步骤如下: 安装 less less-loader.前文已经安装 修改 config-overrides.js // config-overrides.js -const { override, fixBabelImpor…