[人力资源管理平台vue项目]- -思路及功能点总结
目录
一、技术栈
- 项目主要技术栈: Vue + Vuex + Vue-Router + Vue-cli + Axios + Element-ui + ES2015+
- 环境:Node.js环境
- git版本控制: Gitee
- npm管理工具: 淘宝镜像
- 编辑器: Vscode+插件vetur+校验eslint
- css扩展语言: scss
- 集成模板: Vue-element-admin 官网地址 基础模板
- 主页面展示
二、主要功能
1.路由功能
(1) 静态路由
(2) 动态路由
(3) 路由导航守卫
主要的运用场景: 只有拥有某些权限之后才可以进入到某些页面中去
to：目标路由对象
from：即将离开的路由对象
next：路由跳转
next() 放行
next(false)中断路由
next('/')和next({path:'/'})指定到哪里去
例如
没有授权登录,地址栏输入对应的路由地址,也可以直接的跳转,这是我们就可以使用路由导航守卫来控制路由页面的跳转
// 前置导航守卫
router.beforeEach((to,from,next) => {
// 开启进度条
NProgress.start()
// 手动关闭进度条
NProgress.done()
})
// 后置导航守卫
router.afterEach(() => {
// 手动关闭进度条
NProgress.done()
})
2.权限功能
通过create创建axios实例
// 导入axios包
import axios from 'axios'
// 创建axios实例
const service = axios create({
baseURL: , // 基准url 这里区分生产环境和开发环境,也可直接写基准地址
timeout: // 此处 这是超时时间ms
})
// 导出axios实例
export default service
(1) 请求拦截器
axios的请求拦截器 请求拦截器的运用场景
1) 处理token的统一注入问题
2) 处理token是否过期主动和被动处理
service.interceptors.request.use(
// 请求成功做的事
config => {
// 如果有token 从vuex获取token
if(store.getters.token){
// 注定处理token过期
if(isTimeout()){
// token过期
store.dispatch('user/logout')
// 跳转到登录页面
router.push('/login')
// 弹出提示
return Promise.reject(new Error('token超时了'))
}
// 将token挂载到请求头的Authorization属性上
config.headers['Authorization'] = `Bearer ${store.getters.token}`
}
// 必须返回config
return config
},error => {
// token被动处理
if (error.response && error.response.data && error.response.data.code === 10002) {
// token过期
store.dispatch('user/logout')
// 跳转到登录页面
router.push('/login')
} else {
Message.error(error.message) // 提示错误信息
}
//返回错误消息
return Promise.reject(error)
})
(2) 相应拦截器
运用场景?
处理返回的数据以及响应回来的错误
// axios的响应拦截器
service.interceptors.response.use(response => {
// 此处处理返回来的数据信息
},error => {
// 返回响应错误信息
return Promise.reject(error)
})
3.其他功能
(1) 国际化(语言的改变)
安装国际化语言包i18n
npm i vue-i18n
import VueI18n from 'vue-i18n' // 引入国际化的包
import elementEN from 'element-ui/lib/locale/lang/en' // 引入element的英文包
import elementZH from 'element-ui/lib/locale/lang/zh-CN' // 引入element的中文包
Vue.use(VueI18n) // 全局注册国际化包
export default new VueI18n({
// 此处是用来控制变量的如何能获取到就使用其他语言,获取不到就使用中文 我们辞去将
locale: 获取en或者其他语言 || 'zh', // 从cookie中获取语言类型 获取不到就是中文
messages: {
en: {
...elementEN // 将element的英文语言包引入
},
zh: {
...elementZH // 将element的中文语言包引入
}
}
})
这里:我们同样只能修改element相关的语言,自定义的话可以采用类比方法进行修改
(2) 动态主题(更改背景颜色)
封装颜色选择组件 ThemePicker 代码地址
// 引入组件
import ThemePicker from './ThemePicker'
// 全局注册组件
Vue.component('ThemePicker', ThemePicker)
<!-- 放置全屏插件 -->
<theme-picker />
思路:此项目我们使用element组件库,使用此组件我们只会改变element本身的颜色,所以我们还需要改变自定义颜色 如何做呢?
1.既然是可变的,我们需要改变的颜色必然不能写死
2.我们需要一个变量,可以同时控制多个组件中的背景颜色 怎么可以实现呢?
3.一个中间人vuex可以很好地帮我们帮我们解决这个问题,并且在vuex的数据时可控的
4.因此我们就可以同是通过这个组件改变颜色,同时控制element的颜色和自定义的颜色
(3) 头像上传、浏览器的打印功能
对象存储使用文档地址
安装JavaScript SDK
npm i cos-js-sdk-v5 --save
思路：在这里，采用一个腾讯云的图片方案，就是利用腾讯云免费托管我们的图片，在自己的数据库中只保存一个地址。
创建完成后，我们可以获取自己的公钥和私钥，并且可以创建存储桶， 设置存储桶的权限为 公有读，私有写
1.如何上传到存储桶
// 上传sdk
var cos = new COS({
SecretId: ' ', // 身份识别 ID 密钥管理上面有直接cv即可
SecretKey: ' ', // 身份密钥
});
// 执行上传操作上传到存储桶中
cos.putObject({
Bucket: ' ', // 存储桶名称地址
Region: 'ap-beijing', // 地域
Key: params.file.name, // 文件名
Body: params.file, // 要上传的文件对象
StorageClass: 'STANDARD' // 上传的模式类型 直接默认 标准模式即可
// 上传到腾讯云 =》 哪个存储桶 哪个地域的存储桶 文件 格式 名称 回调
}, function(err, data) {
// data返回数据之后 应该如何处理
//data中有含有图片url的数据 'http://' + data.Location 标准的url地址
console.log(err || data)
})
2.上传之前的校验
beforeUpload(file) {
// 要开始做文件上传的检查了
// 文件类型 文件大小
const types = ['image/jpeg', 'image/gif', 'image/bmp', 'image/png']
if (!types.includes(file.type)) {
this.$message.error('上传图片只能是 JPG、GIF、BMP、PNG 格式!')
return false
}
// 检查大小
const maxSize = 5 * 1024 * 1024
if (maxSize < file.size) {
this.$message.error('图片大小最大不能超过5M')
return false
}
return true
}
那么,我们该如何上传图片呢? (业务需求)
1.我们需要一个上传的组件 使用element的upload的组件 (详情见element官方文档)
2.选择符合格式和规则的图片
3.要上传到哪里呢? (腾讯云)
4.实现什么功能 (图片的预览,上传成功后可以返回图片地址,删除,添加)
注意点,因为我们要上传到腾讯云,所以element的upload组件的action方法的参数要设置为#,禁止默认的跳转
因此我们就需要一个方法来进行自定义跳转 :http-request="upload"
(4) excel导入导出
excel导入
导入所需要的excel组件
npm i xlsx
如何实现?
1.上传文件的组件
2.选择一个符的excel文件
3.调整传入的数据格式
excel导出
由于 Export2Excel不仅依赖js-xlsx还依赖file-saver和script-loader。
npm install xlsx file-saver -S
npm install script-loader -S -D
excel导出 路由懒加载(因为并不常用)
import('@/vendor/Export2Excel').then(excel => {
excel.export_json_to_excel({
header: tHeader, //表头 必填
data, //具体数据 必填 格式 [[]] 双重数组
filename: 'excel-list', //非必填
autoWidth: true, //非必填 单元格是否要自适应宽度
bookType: 'xlsx' //非必填 导出文件类型
})
})
一个一转多维数组的方法
arrTrans(num, arr) {
const iconsArr = [] // 声明数组
arr.forEach((item, index) => {
const page = Math.floor(index / num) // 计算该元素为第几个素组内
if (!iconsArr[page]) { // 判断是否存在
iconsArr[page] = []
}
iconsArr[page].push(item)
})
return iconsArr
}
}
(5) 全屏
1、安装全局插件
npm i screenfull --save-dev
// 两种实现方式 1.通过screenfull插件完成 2.通过bom的api来实现requestFullscreen()
// 2、项目组件中引入
import screenfull from 'screenfull'
// 3、使用screenfull 插件 (例如)
//1）div中绑定点击事件
<div @click="changeScreen" />
// 2）实现事件方法
// 改变全屏
changeScreen() {
// 判断当前是否可以全屏
if (!ScreenFull.isEnabled) {
// 此时全屏不可用
this.$message.warning('此时全屏组件不可用')
return
}
// document.documentElement.requestFullscreen() 原生js调用
// 如果可用 就可以全屏
ScreenFull.toggle()
}
(6) Echarts的使用
echarts官网地址
需要注意的是,安装的版本可能比较新,也许不太契合所需!!!
(7) 二维码的生成 // 一个生成二维码的网站 [草料二维码](https://cli.im/)
- 安装生成二维码的插件
npm i qrcode
// 2) 引入
import QrCode from 'qrcode'
// 3) 使用 dom为一个canvas的dom对象,info为转为二维码的信息
// (例子) dom元素 <canvas ref="myCanvas" />
QrCode.toCanvas(dom, info)
三、其他功能
1.Vuex做了什么事？
- token的响应式保存,
- 用户登录请求操做
- 用户登出操做
- 获取用户资料
- 路由的操做
- tab多页签
2.将列表型的数据转化成树形数？
实现思路 递归路由
// list数组 rootValue通过什么来进行嵌套
export function tranListToTreeData(list, rootValue) {
var arr = []
list.forEach(item => {
if (item.pid === rootValue) {
// 找到之后 就要去找 item 下面有没有子节点
const children = tranListToTreeData(list, item.id)
if (children.length) {
// 如果children的长度大于0 说明找到了子节点
item.children = children
}
arr.push(item) // 将内容加入到数组中
}
})
return arr
}
3.如何封装公共组件？
通过插槽可以留坑位,这样我们就可以随意的我们指定的结构
如何封装组件 pagetools
<el-row type="flex" justify="space-between" align="middle">
<el-col>
<div v-if="showBefore" class="before">
<!-- 定义前面得插槽 -->
<slot name="before" />
</div>
</el-col>
<el-col>
<el-row type="flex" justify="end">
<!-- 定义后面的插槽 -->
<slot name="after" />
</el-row>
</el-col>
</el-row>
如何使用?
<page-tools :show-before="true">
<templete slot="before">
<span>共166条记录</span>
</templete>
<template slot="after">
<el-button>导入</el-button>
</template>
</page-tools>
4.自定义指令的使用？
示例:
el:绑定的元素
binding:一个对象，配置参数
// 指令的封装
export const imageerror = {
inserted(el,binding){},
// 此钩子可以多次执行 数据更新时 调用
componentUpdated(el, binding) {}
}
注册:
Vue.directive('指令名','指令对象')
使用:
<img v-imageerror="xxx" src='xxx' />
5.过滤器的使用？
封装: 格式化时间格式
Vue.filter('format', value => {
// 返回value时间到当前时间
// return dayjs(value).format('YYYY-MM-DD hh:mm:ss')
return dayjs(value).format('YYYY-MM-DD')
})
使用:
'需要过滤的对象' | '过滤器'