目录
项目介绍
项目名称:人力资源管理系统。是企业的后台管理系统,对企业内部信息进行管理。
技术栈:vue-admin-template 二次开发(不是从0开始)
业务亮点:权限控制(不同的人进入系统可以看到的菜单是不同的),复杂数据处理,excel导入导出,国际化
一、了解vue-element-admin
目标:了解和熟悉通用的基于vue技术栈的后台系统社区解决方案 vue-element-admin
1.本地运行体验
代码如下(示例):
i# git clone https://github.com/panjiachen/vue-element-admin.git # 从github上拉取代码
$ git clone https://gitee.com/mirrors/vue-element-admin.git # 从码云上拉取
$ cd vue-element-admin # 切换到具体目录下
$ npm install # 安装所有依赖
$ npm run dev # 启动开发调试模式 查看package.json文件的scripts可知晓启动命令
[注]
如果git clone 速度过慢或者报错,可以:直接下载代码的压缩包运行(https://gitee.com/mirrors/vue-element-admin )如果安装依赖特别慢,可以使用淘宝镜像:
npm config set registry https://registry.npm.taobao.org
2.运行效果
下载安装包完成之后,通过npm run dev
来启动项目。
vue-element-admin
内置了后台管理业务场景下大部分的解决方案,我们可以在左侧的导航栏里看到它们。这些方案不是每一个项目都需要的,如果我们实际的业务中需要,可以拿来参考,所以它起到的作用更多的是一个参考价值,而不适合直接使用进行二次开发,为啥,因为要删除的内容太多了。
小结
二开项目:在已有项目的基础之上做开发;
vue-element-admin 是一套功能非常强大的库;
该处使用的url网络请求的数据。
二、了解vue-admin-template
目标:vue-element-admin是一个非常全面的系统,提供了很多现成的方案,我们可以在写项目的时候过来参考,但是也有缺点:不太好进行二次开发,因为要删减的东西太多了。
我们可以采取另外一个子系统,叫做vue-admin-template ,它提供了最基础的模板,非常方便来做二次开发。
在线运行效果:Vue Admin Template
1.运行体验
# 从码云拉取代码
git clone https://gitee.com/panjiachen/vue-admin-template.git
# 切换到具体目录下
cd vue-admin-template
# 安装所有依赖
npm install
# 启动开发调试模式 查看package.json文件的scripts可知晓启动命令
npm run dev
运行效果
小结
vue-admin-template
是在vue-element-admin
的基础上做了大量的删减,只保留了后台管理系统最关键的框架部分,非常适合我们在此基础上做二次开发- 市面上使用vue技术栈开发的PC后台管理项目很大一部分都是基于
vue-admin-template
进行的二次开发,我们的人资项目也基于它来实现。 - 克隆仓库代码时,可能网络不好,可以直接CV
2.创建本地项目并关联远程仓库
将vue-admin-template项目改成我们自己的项目,并关联到远程仓库进行管理
由于我们前边下载的项目是直接从 vue-admin-template 克隆
而来,里面拥有原项目的提交记录,为了避免冲突,我们要先删除掉之前的提交,再做初始化。
步骤有三步:
- 先将vue-admin-template下原来的
.git
文件夹删除掉 (这个文件夹默认情况下是隐藏的,如果你看不到这个文件夹,则需要去设置一下显示隐藏文件夹) - 修改项目信息
-
- 重命名项目文件夹,把vue-admin-template的改成vue-hr(或者其它的名字)
- 修改package.json中的name,description等属性。
- 项目进行git初始化
$ git init # 初始化项目, 这句命令会新建一个.git文件夹
$ git add . # 将修改添加到暂存
$ git commit -m "人资项目初始化" # 将暂存提到本地仓库
5.建立远程仓库
在gitee上创建一个与本地同名的、 空的远程仓库。
6.推送到远程仓库
小结
- 二次开发:把别人做的半成品改成自己的项目
- 删除git提交记录
- 修改项目信息
2.关联远程仓库:
- 创建同名的、空的远程仓库
- 运行两句命令
git命令拓展
3.认识vue-admin-template的目录
目标
认识vue-admin-template的目录,了解每个目录的基本内容
目录结构
本项目已经生成了一个基本的开发框架,提供了涵盖中后台开发的各类功能和现成目录,下面是整个项目的目录结构
├── build # 构建相关
├── mock # 项目mock 模拟数据,在接口服务器没有就绪时,临时充当接口├── public # 静态资源
│ ├── favicon.ico # favicon图标
│ └── index.html # html模板
├── src # 源代码
│ ├── api # 所有请求
│ ├── assets # 主题 字体等静态资源 不会参与打包 直接直出
│ ├── components # 全局公用组件 和业务不相关 上传组件
│ ├── icons # 项目所有 svg icons
│ ├── layout # 全局 layout 负责搭建项目的整体架子结构 html结构
│ ├── router # 路由
│ ├── store # store管理 vuex管理数据的位置 模块化开发 全局getters
│ ├── styles # 全局样式
│ ├── utils # 全局公用方法 request.js
│ ├── vendor # 公用vendor
│ ├── views # views 所有页面 路由级别的组件
│ ├── App.vue # 入口页面 根组件
│ ├── main.js # 入口文件 加载组件 初始化等
│ └── permission.js # 权限管理 (路由守卫)
│ └── settings.js # 配置文件
├── tests # 测试
├── .env.xxx # 环境变量配置
├── .eslintignore # eslint 忽略文件
├── .eslintrc.js # eslint 配置项
├── .gitignore # git 忽略文件
├── .travis.yml # 自动化CI配置
├── .babel.config.js # babel-loader 配置
├── jest.config.js # 测试配置
├── vue.config.js # vue-cli 配置
├── postcss.config.js # postcss 配置
└── package.json # package.json
- src目录:在做项目时,最关注的就是
src
目录, 里面是所有的源代码和资源
- 非src目录:一般都是对项目的环境和工具的配置
4.认识src目录回顾项目的运行机制
目标:认识心目中的src下的关键文件,熟悉项目的运行机制
目录结构
├── src # 源代码
│ ├── api # 所有请求
│ ├── assets # 主题 字体等静态资源
│ ├── components # 全局公用组件
│ ├── icons # 项目所有 svg icons
│ ├── layout # 全局 layout
│ ├── router # 路由
│ ├── store # 全局 store管理
│ ├── styles # 全局样式
│ ├── utils # 全局公用方法
│ ├── vendor # 公用vendor
│ ├── views # views 所有页面
│ ├── App.vue # 入口页面
│ ├── main.js # 入口文件 加载组件 初始化等
│ └── permission.js # 权限管理
│ └── settings.js # 配置文件
整体运行方式
- webpack的入口是main.js
- 在main.js中引入其他文件
5.重点文件介绍
main.js
main.js是整个项目的入口文件(webpack中学习的入口文件)
App.vue
App.vue是根组件。它还会继续引入其他的文件
permission.js控制访问权限
permission.js
是控制页面登录权限的文件,在main.js中引入了它。
代码
效果
此处的代码没有经历构建过程会很难理解, 所以先将此处的代码进行注释,等我们构建权限功能时,再从0到1进行构建。请直接注释代码即可
settings.js
对于一些项目信息的配置,里面有三个属性 title
(项目名称),fixedHeader
(固定头部),sidebarLogo
(显示左侧菜单logo)
settings.js
中的文件在其他的位置会引用到,我们不用动它
Vuex
当前的Vuex结构采用了模块形式进行管理共享状态,其架构如下
其中:
- app.js模块,功能已经完备,不需要再进行修改。
- settings.js模块,功能已经完备,不需要再进行修改。
- user.js模块是我们后期需要重点开发的内容
scss
该项目还使用了scss作为css的扩展语言,在styles
目录下,我们可以发现scss的相关文件,相关用法 我们会在下一小节进行详细讲解
icons
项目中也使用图标字体,整体的icons的结构如下
07. 关于两个文件的操作
- 清空user.js,
这里我们将user.js里面的内容删除,并且导出一个默认配置。
export default { namespaced: true, state: {}, mutations: {}, actions: {} }
- 清空permission.js
目前不需要路由守卫。可以把所有的内容直接注释掉
08.SCSS-了解和基本使用
目标
了解scss的作用;
sass、scss、less、css的区别
less, sass, scss都是css预处理语言(也是对应的文件后缀名),它们的语法功能比css更强大。
预处理语言使用是:开发时用预处理语言,在打包上线时,用webpack再配合loader工具给转成css(Cascading Style Sheets)给浏览器使用。
细节:
- 后缀名:SASS(Syntactically Awesome StyleSheets)版本3.0之前的后缀名为.sass,而版本3.0之后的后缀名.scss
- 语法规范:
sass没有{}
和;
, 有严格的缩进规范 ;
scss和css的缩进规范是一致的
我们在实际开发过程中,scss是常用写法
搭建小型测试环境
单独创建一个文件夹来学习scss的使用,为了方便应用scss,我们可以在vscode中安装一个名为easy sass
的插件,它会自动的帮助我们把.scss => .css
目标结构
根目录learn-scss ├── index.html └── scss └── test.scss
步骤
- 新建一个文件夹learn-scss
- 在learn-scss下新建一个index.html
<link rel="stylesheet" href="./scss/test.css"> <div id="app"> <div class="container">container</div> </div>
- 新建一个scss文件夹,里面新建一个 test.scss
vscode的插件会自动把.scss文件翻译成.css文件
小结
scss和less一样,是预处理语言;
在vscode中有现成的工具可以把它转成css(在vue项目中不需要用这个功能---webpack会帮我们做);
09.SCSS-基本语法
目标
学习scss预处理器的基础语法 ;
内容
嵌套语法; &父选择器;变量;mixins;模块
嵌套语法
和less一样,scss同样支持嵌套型
的语法
// scss语法 $highlight-color: #f90; $basic-border: 1px solid black; #app{ background-color: $highlight-color; border:$basic-border; .container{ font-size:30px; } }
转化成css后
#app { background-color: #f90; border: 1px solid black; } #app .container { font-size: 30px; }
&父选择器
假如你想针对某个特定子元素 进行设置
$highlight-color: #f90; $basic-border: 1px solid black; #app{ background-color: $highlight-color; border:$basic-border; .container{ font-size:30px; } a{ color:blue; &:hover{ color: red; } } }
变量
定义变量
sass
使用$
符号来标识变量
$highlight-color: #f90; $basic-border: 1px solid black;
上面我们声明了名为$highlight-color
和$basic-border
的变量, 随后我们就可以使用变量了。
使用变量
#app { background-color: $highlight-color; border: $basic-border; }
我们再来看一下模板中的 styles/variables.scss
,这个文件中就是我们本次项目用到的所有scss变量
mixins
mixins混入,是代码复用的方式
定义格式
@mixin 名称 { 代码 }
使用格式
include 名称
示例
定义样式
@mixin container { width: 1200px; background-color: green; } @mixin clearfix { &:after { content: ""; display: table; clear: both; } }
使用mixins
.div { width: 200px; @include clearfix; @include container; }
模块
一个.scss文件就是一个模块,多个.scss文件之间可以相互引用。
例如:在base.scss定义变量,然后在test.scss中引入这个文件,就可以使用其中定义的变量了
格式
@import './xxxx.scss';
示例
新建base.scss
,并定义变量
$base-color: green;
在test.scss
中引入base.scss
@import './base.scss'; $highlight-color: #f90; $basic-border: 1px solid black; #app{ background-color: $base-color; border:$basic-border; .container{ font-size:30px; } a{ color:blue; &:hover{ color: red; } } }
小结
- scss与less类似,只是一种css样式的预处理语言 (浏览器不能直接使用的,需要转成css)
- 很多用法都与less类似(变量,嵌套,模块化)不需要花太多精力去学习它。
小结
- 所有vue项目的关键文件都基本相同,可以理解为都是用vue脚手架工具创建出来的;
- vue-admin-template额外做了一些配置,我们可以直接使用;
10.复习axios模块的封装(重置代码)
在当前项目中,axios的封装已经基本完成,后续我们还会对它进行少量修改。项目关于axios的封装在 utils/request.js
中,我们先去熟悉一下。
目标
复习axios的统一封装处理
内容
- 回顾前边学习axios的封装内容
- 整理项目中关于axios部分的代码
创建axios实例
create创建新的axios实例
// 创建了一个新的axios实例 const service = axios.create({ // http://ihrm-java.itheima.net baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url timeout: 5000 // 超时时间 })
axios的拦截器
参考:拦截器 | Axios 中文文档 | Axios 中文网
请求拦截器
请求拦截器主要完成 token的统一注入
// 添加请求拦截器 axios.interceptors.request.use(function (config) { // 在发送请求之前做些什么 return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); }); |
响应拦截器
响应拦截器主要处理 返回的数据异常
和数据结构
问题
// 添加响应拦截器 axios.interceptors.response.use(function (response) { // 对响应数据做点什么 return response; }, function (error) { // 对响应错误做点什么 return Promise.reject(error); });
重置代码
这里为了后续更清楚的书写代码,我们将原有代码注释掉,换成如下代码utils/request.js
// 导出一个axios的实例 而且这个实例要有请求拦截器 响应拦截器 import axios from 'axios' const service = axios.create() // 创建一个axios的实例 // service.interceptors.request.use() // 请求拦截器 // service.interceptors.response.use() // 响应拦截器 export default service // 导出axios实例
小结
- axios的封装是一个必须要做的操作,在前边的项目中我们是手动自己封装的,而在这个项目中已经集成好了;
- 一般来讲封装的内容有三个:
-
- axios.create
-
- 请求拦截器
-
- 响应拦截器
11.复习理解api模块的单独封装(重置代码)
在项目文件中,它已经帮我们封装好了各个模块功能对应的api(后端接口)操作,为了后边操作方便,我们先来学习一下它的封装方式。
目标
理解api模块封装的方法
目录结构
src # 源代码 └── api # 所有请求 └── user.js # 与用户相关的请求
我们习惯性的将所有的网络请求 放置在api目录下统一管理,然后进一步按照模块功能来进行划分api目录
代码分析
api/user.js
import request from '@/utils/request' export function login(data) { return request({ url: '/vue-admin-template/user/login', method: 'post', data }) } export function getInfo(token) { return request({ url: '/vue-admin-template/user/info', method: 'get', params: { token } }) } export function logout() { return request({ url: '/vue-admin-template/user/logout', method: 'post' }) }
上面代码中使用了封装的request工具,每个接口的请求都单独导出
了一个方法,这样做的好处就是:
- 每一个文件就是一个业务对应的所有服务请求接口汇总,清晰明了,查找方便 (方便维护)
- 任何一个业务组件中如果想使用哪个接口直接导入即可 (方便复用)
- 语义化清晰,维护方便 (命名即注释)
- 分工合作
示意图
操作-重置api
为了后续更好的开发,我们可以先将user.js代码的方法设置为空,后续在进行修改
api/user.js
import request from '@/utils/request' export function login(data) { } export function getInfo(token) { } export function logout() { }
12.mock功能-了解mock的作用及使用场景
目标
- 了解mock的作用及使用场景;
mock使用场景
mock:假的
前端程序员提到的mock数据的含义是:真的假数据
- 真的:符合接口规范要求的。
- 假数据:数据是人为创建出来的,不是真正的业务数据。
什么时候需要mock?
后端接口的开发速度跟不上前端的进度, 而前端要实现业务还必须依赖数据,前端为了保证开发进度就需要自己mock数据 ,保证业务能正常开发
mock的实现方式
- 本地启mock服务器:
- 自己用express写接口
- 本地用专门的mock服务
- 线上的mock服务器
小结
- mock 的功能是真的假数据;
- 可以在本地自己写接口,也可以采用web接口;
13.mock功能-使用项目中的mock功能
目标
写一个获取新闻列表的接口。url: /news/getList
思路
分析现有的代码功能,仿写一个。
目前已有的接口:http://localhost:9528/dev-api/vue-admin-template/table/list
创建mock文件
在mock目录下创建一个news.js文件
仿照table.js的写法,写入news.js的内容如下
module.exports = [ { url: '/news/getList', type: 'get', response: config => { return { code: 20000, data: ['第一条新闻', '第二条新闻', '第三条新闻'] } } } ]
引用mock文件
在mock/index.js中,引入news.js
const Mock = require('mockjs') const { param2Obj } = require('./utils') const user = require('./user') const table = require('./table') + const news = require('./news') const mocks = [ ...user, ...table, + ...news ]
重启项目
调用mock接口
由于上面写的是get类型的接口,可以直接通过在地址栏中写:http://localhost:9528/dev-api/news/getList
来访问。
在项目中的组件中正常使用ajax发请求即可,或者采用测试工具来做测试
小结
- mock是在前端中就是表示实现真接口&假数据;
- 本项目中已经集成了,可以直接使用;
- 一般在开发阶段时使用,上线之后就不会用了;
14.mock功能-从项目中删除mock(修改两个文件)
目标
移除mock:由于我们本项目有配套的后端接口,所以不需要用到模拟数据,这里将mock部分删除掉。
两步
- 注释掉
mock数据
的代码
(1)main.js中删除(或注释)mock部分的功能
(2)vue.config.js
中删除(或注释)掉
before: require('./mock/mock-server.js')
- 删除
src/mock
文件夹
注意
- 由于修改了vue.config.js需要重启项目
- 由于删除了mock功能,项目中原来的ajax请求会报404错误
15.处理公共资源图片和样式
以上我们已经将整体的基础模块进行了简单的介绍,接下来,我们需要将该项目所用到的图片和样式进行统一的处理
目标
从给定的资源目录中导入项目用到的公共资源(图片资源和样式资源)
思路
按项目目录约定,将相关资源拷贝进来即可(cv)。
添加图片资源
图片资源在课程资料的图片文件中,我们只需要将common
文件夹拷贝放置到 assets
目录即可
assets目录下的图片不会经过打包的过程 直接产出
添加样式资源
样式资源在 项目资源/样式
目录下,复制过来覆盖即可:
- 替换
variables.scss
- 新增
common.scss
我们提供了 一份公共的common.scss
样式,里面内置了一部分内容的样式,在开发期间可以帮助我们快速的实现页面样式和布局;
将两个文件放置到src/styles
目录下,然后在index.scss
中引入该样式
@import './common.scss'; //引入common.scss样式表
注:每个网站都有自己的专业的配色风格,这是由设计统一设计的,我们前端需要做的,就是按照设计的要求定义好全局配色变量,网站中使用即可,如果需要替换设计风格,其实也就是替换全局配色变量
总结
了解vue-admin-template,搭建相关环境