基于Vue从头搭建后台管理系统

2021-03-02 本文已影响0人小小鱼yyds

模板地址

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

基于Vue从头搭建后台管理系统

模板地址

模板截图

技术框架：

开发前准备

1.导入sass的方式：

2.导入Element UI的方式：

3.normalize可以适配各种浏览器，使其样式保持一致：

开发过程

1.项目整体布局文件：

2.工具类存放文件：

3.建立页面路由，router.js：

4.搭建完登录页面之后进入管理后台首页，需要注意：

5.admin.vue为主体框架页，包含：左侧菜单栏和顶部状态栏

5.首页的统计图表使用的是v-chanrt，分为：纯数字统计、折线图、条形图、饼图、环形图几种常用图表

6.顶部tags标签记录导航

7.表格高度动态计算

6.产品列表页

7.权限管理

项目结构：

可以使用的小技巧

1.快速删除node_modules：

猜你喜欢

热点阅读