模板地址
https://gitee.com/yurunfei/jiuwei-manager
模板截图
53D02B27-7057-4f06-B5BF-5503FE8E94F0.png
0E5ABC26-A2C9-47b5-8C94-79E1F66098BA.png
E9E6101D-B46D-4c3c-BEE1-D65F9DE756A6.png
58FAAF85-92FB-48fa-8B26-5066490FAF4B.png
技术框架：
vue-router+axios +vuex +sass+md5 + element ui
开发前准备
使用yarn来管理和导入组件
1.导入sass的方式：
高版本可能会导致未知问题，以下面的版本为主，可以正常导入和运行：
1. yarn add sass-loader@7.1.0 --dev
2. yarn add node-sass@4.12.0 --dev
引入其他scss文件的时候需要导入：
3. yarn add sass-resources-loader@2.0.1 --dev
全部导入完成后，打开webpack.base.conf.js： 在rules下面添加：
{
test: / \.scss$ / ,
loaders: [ 'style' , 'css' , 'sass' ]
}
scss使用测试：如下测试修改字体颜色
< style lang = "scss" >
$color : red ;
div { color : $color ;}
</ style >
2.导入Element UI的方式：
yarn add element-ui
main.js
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI, { size: 'small', zIndex: 3000 });
3.normalize可以适配各种浏览器，使其样式保持一致：
yarn add normalize.css
在main.js里面引入：
import 'normalize.css/normalize.css'
开发过程
1.项目整体布局文件：
可以copy现有的style文件，去除原有样式布局。
在static文件夹下建立icon文件夹存放图标文件，img文件夹存放png图片。如果使用阿里巴巴图标库的图标，可以从图标库获取链接地址，比如：
image.png
拷贝至index.html里面：
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>樱花后台管理系统</title>
<link rel="stylesheet" href="//at.alicdn.com/t/font_2385466_0zl4ktn7ehhl.css">
</head>
用的时候：
<i class="iconfont icon-weibo"></i>
在App.vue里面导入自定义样式文件：
<style lang="scss">
@import "./style/style";
@import "../static/icon/iconfont.css";
</style>
2.工具类存放文件：
建立utils文件夹，存放内容为：
公共类方法
json文件
路由文件router.js（为了统一管理，摒弃router文件）
全局状态管理文件store.js（为了方便管理放在此处）
image.png
3.建立页面路由，router.js：
将登陆页设置为根路由:
import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/page/index' // 登录页
Vue.use(Router)
export default Router({
routes: [
{
path:'/',
component: Index
}
]
})
image.png
4.搭建完登录页面之后进入管理后台首页，需要注意：
- 首页左侧的菜单项、右侧顶部的状态栏是一直存在的，所以，作为主体框架，切换的每个功能页都为主体框架的子路由。
import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/page/index' // 登录页
import Admin from '@/page/admin' // 主体框架
Vue.use(Router)
export default Router({
routes: [
{
path:'/',
component: Index
},
{
path:'/admin',
component: Admin,
children:[ // 子路由
// 产品页
{ path: '/home', component: () => import('@/page/home/home') },
]
}
]
})
这里使用了懒加载的方式，为了避免以后页面越来越多，打包后加载缓慢的问题，懒加载路由可以使页面按需加载，进行首屏优化
5.admin.vue为主体框架页，包含：左侧菜单栏和顶部状态栏
左侧菜单栏单独封装成组件，放在components文件夹下，是为了方便做权限管理，使结构看起来更清晰。
如果想让admin下的子路由显示出来，需要添加
<router-view class="content" :class="{ 'side-hide': collapse }"></router-view>
让子路由有一个入口可以添加进当前路由。
5.首页的统计图表使用的是v-chanrt，分为：纯数字统计、折线图、条形图、饼图、环形图几种常用图表
注意：1.数字显示千分位可以使用方法：.toLocaleString()
2.适配手机，需要设置css当屏幕宽度小于500的时候，改变内容宽度
.tl1-item {
width: calc((100% - 60px) / 4);
}
@media screen and (max-width: 768px) {
.tl1-item {
width: 100%;
}
}
具体用法可以参考这篇博客：https://blog.csdn.net/piano9425/article/details/99283830
image.png
6.顶部tags标签记录导航
每次打开新的页面，顶部自动增加tags标签，点击跳转到对应的路由。
因为不在一个页面，需要用到vuex状态管理。最好对不同功用的状态单独建立modules模块，然后统一导入，导入方式为：
inddex.js:
import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
Vue.use(Vuex)
// https://webpack.js.org/guides/dependency-management/#requirecontext
const modulesFiles = require.context('./modules', true, /\.js$/)
// you do not need `import app from './modules/app'`
// it will auto require all vuex module from modules file
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
// set './app.js' => 'app'
const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
const value = modulesFiles(modulePath)
modules[moduleName] = value.default
return modules
}, {})
const store = new Vuex.Store({
modules,
getters
})
export default store
在标签组件的watch里面对 $route进行监听，每当 $route发生改变时就调用vuex里面添加路由的方法。首次运行页面，路由还没有发生改变，需要在mounted里面调用一次添加路由的方法
image.png
需要注意的是关闭图标在tag里面，点击的时候容易遇到冒泡，需要使用@click.stop阻止冒泡，关闭标签的方法写在vuex里面。
deleteTagsAction: (state, view) => {
state.visitedViews.splice(state.visitedViews.indexOf(view), 1)
},
如果是把当前页关掉了，就加载标签数组的最后一个路由
const lastView = visitedViews.slice(-1)[0]
if (lastView) {
this.$router.push(lastView.path)
} else {
this.$router.push('/')
}
删除数组元素的时候用splice，而获取数组某个元素的时候使用slice，-1表示从最后数起的第一个元素，因为获取到的是一个数组，所以需要[0]取值
7.表格高度动态计算
this.$nextTick(() => {
let windowHeight =
document.documentElement.clientHeight || document.body.clientHeight;
let topHeight =
64 + 54 + 20 + 56 + 40 + this.$refs.searchv.clientHeight;
let tableH = windowHeight - topHeight - 75;
this.tableH = tableH ;
});
- 顶部状态栏高度：64
- 路由标签高度：54
- 导航文字距离固定栏距离：20
- 导航文字高度：56
- 正文与导航文字的总间距：40
- 随着菜单栏收缩可变搜索栏高度： this.$refs.searchv.clientHeight
- 预留给底部分页器的高度：75
目前存在的bug：可以监听到菜单栏的收缩，但是再重新计算高度的时候，ref获取到的搜索栏高度没变，实际已经发生改变，导致表格下移，有一部分分页器淹没在页面下面
6.产品列表页
- 添加了切换表格和卡片的功能，点击查看详情可以跳转到详情页，并从详情页返回；
- 点击查询可以打印出搜索参数，便于数据请求；
- 新增按钮添加了常用的表单选项，因为ant-design-vue可以提供更为炫酷的动画效果，所以此处采取按需导入的方式，导入了ant-design-vue的Model组件，与Element ui的Form组件搭配使用
image.png
7.权限管理
大致说一下权限管理的思路：
左侧菜单栏的路由已经在本地配置好了，但不是所有人都有权限看见，比如在管理后台创建三种角色，分别为：管理员、商务、临时用户，管理员可以添加用户，但是商务不能，就得对商务这个角色隐藏权限管理的模块。
因此，给每个角色配置好权限后，再由后台返回该角色能够看到的菜单项，与本地做比对，如果后台没有返回就不显示，返回才显示。
一般的权限管理分为三级，比如权限管理模块为一级，其下所包含的用户管理为二级，用户管理页面的修改密码按钮为三级。
一级和二级都可以在el-menu里面处理，三级需要另写方法。
全局状态管理可以使用vuex存储后台返回的数据。
模拟权限管理：使用账号1登录是管理员权限，可以看到所有菜单，使用其他账号登录，看不到权限管理菜单
项目结构：
- 登录
- 首页统计
- 商品列表
- 商品详情
- 菜单权限
- 权限组
- 权限分配
- 401/403/404错误页面
- 个人中心
可以使用的小技巧
1.快速删除node_modules：
在碰到node_modules包出现问题报错，这种事情经常发生╮(╯▽╰)╭，可能装包的时候没装好就会报这种错，如果是把node_modules整个删除到垃圾桶里，需要等待超级长的时间，实在是太麻烦啦，所以只需要安装一个管理工具，敲一行代码，几秒钟就可以删掉：
1、安装npm包–rimraf
npm install rimraf -g
2、在cmd指令下，进入所需删除的node_modules文件夹的位置
3、输入以下指令进行删除
rimraf node_modules
这样就可以简单粗暴得秒删。O(∩_∩)O~~
附带yarn清除缓存命令：
yarn cache clean
网友评论