通用后台管理系统-前端搭建

一 背景

基于vue+springboot 搭建一套通用管理后台
主要包括用户管理模块、权限模块、菜单模块,
项目代码 https://gitee.com/weiwei20180921/commonadmin-front

二 环境信息

2.1 前端工具版本

2.1.1 npm 版本

PS D:\front> npm -v
8.5.0

PS D:\front> npm config get 'registry'
https://registry.npm.taobao.org/
PS D:\front>

2.1.2 vue 版本

PS D:\front\commonadmin-front> vue -V
@vue/cli 5.0.8
PS D:\front\commonadmin-front>

2.1.3 nodejs 版本

PS D:\front\commonadmin-front> node -v
v16.14.2
PS D:\front\commonadmin-front>

三 前端搭建

3.1 初始搭建

3.1.1 新建vue 项目

使用vue cli 在你想要创建的目录创建项目

PS D:\front> vue create commonadmin-front


Vue CLI v5.0.8
? Please pick a preset: Default ([Vue 2] babel, eslint)

3.1.2 上传gitee

在gitee 上新建项目，然后按着命令 push即可。

注意1. 要过滤掉node_modules 目录，该目录无需推送到gitee 上。
我是直接删除的。

3.1.3 启动项目

PS D:\front\commonadmin-front> npm install

added 947 packages in 49s

102 packages are looking for funding
  run `npm fund` for details
PS D:\front\commonadmin-front> npm run serve

> [email protected] serve
> vue-cli-service serve

 INFO  Starting development server...


 DONE  Compiled successfully in 5604ms                                                                                                                       15:01:17


  App running at:
  - Local:   http://localhost:8080/
  - Network: http://10.3.28.61:8080/

  Note that the development build is not optimized.
  To create a production build, run yarn build.

3.2 基础引入

3.2.1 引入element-ui

首先在项目目录下使用npm 安装element-ui ，然后在main.js 里引入

PS D:\front\commonadmin-front> npm i element-ui -S
npm WARN deprecated [email protected]: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.

added 9 packages in 7s

102 packages are looking for funding
  run `npm fund` for details
PS D:\front\commonadmin-front>

配置文件修改

import Vue from 'vue'
import App from './App.vue'

import ElementUI from 'element-ui'

Vue.config.productionTip = false

Vue.use(ElementUI)

new Vue({
  render: h => h(App),
}).$mount('#app')

3.2.2 引入路由

我这里引入的路由是3.5.1 版本

PS D:\front\commonadmin-front> npm install [email protected]

added 1 package in 3s

102 packages are looking for funding
  run `npm fund` for details

修改app.vue

关键要增加该行

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

main.js 添加路由配置

import Vue from 'vue'
import App from './App.vue'

//导入路由
import router from './router'

//导入element
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false

Vue.use(ElementUI)

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

添加三个新页面 放到src/views 下面

添加路由src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'

import Login from '@/views/Login'
import Home from '@/views/Home'
import NotFound from '@/views/404'

Vue.use(Router)

export default new Router({
    routes: [
        {
            path: '/',
            name: 'Home',
            component: Home
        },
        {
            path: '/login',
            name: 'Login',
            component: Login
        },
        {
            path: '/404',
            name: 'notFound',
            component: NotFound
        }
    ]
})

3.2.3 引入sass

主要是引入npm install sass-loader node-sass

PS D:\front\commonadmin-front> npm install sass-loader node-sass
npm WARN deprecated @npmcli/[email protected]: This functionality has been moved to @npmcli/fs
npm WARN deprecated @npmcli/[email protected]: This functionality has been moved to @npmcli/fs

added 132 packages in 2m

100 packages are looking for funding
  run `npm fund` for details
PS D:\front\commonadmin-front>

执行如上命令后package.json 文件会自动添加

    "node-sass": "^8.0.0",
    "sass-loader": "^13.2.0",

在页面里 style 处要添加lang=“scss”

<style lang="scss">

</style>

3.2.4 引入axios

安装

PS D:\front\commonadmin-front> npm install axios

added 6 packages in 3s

100 packages are looking for funding
  run `npm fund` for details
PS D:\front\commonadmin-front>

安装后package.json

  "dependencies": {
    "axios": "^1.3.4",
    "core-js": "^3.8.3",
    "element-ui": "^2.15.13",
    "node-sass": "^8.0.0",
    "sass-loader": "^13.2.0",
    "vue": "^2.6.14",
    "vue-router": "^3.5.1"
  },

测试

<template>
    <div class="page">
        <h2>Home Page</h2>
        <el-button type="primary" @click="testAxios()">测试Axios调用</el-button>
    </div>
</template>

<script >
import axios from 'axios'
    export default{
        name: 'Home',
        methods:{
            testAxios(){
                axios.get('http://localhost:8080').then(res => {alert(res.data)})
            }
        }
    }
</script>

注意：这里浏览器访问地址是http://localhost:8080/#/，而不是本地IP 地址，否则会出现跨域报错问题

3.2.5 引入mock

3.2.5.1安装

PS D:\front\commonadmin-front> npm install mockjs

added 1 package in 2s

100 packages are looking for funding
  run `npm fund` for details
PS D:\front\commonadmin-front>

package.json

  "dependencies": {
    "axios": "^1.3.4",
    "core-js": "^3.8.3",
    "element-ui": "^2.15.13",
    "mockjs": "^1.1.0",
    "node-sass": "^8.0.0",
    "sass-loader": "^13.2.0",
    "vue": "^2.6.14",
    "vue-router": "^3.5.1"
  },

3.2.5.2验证

新建src/mock/mock.js

import Mock from 'mockjs'

Mock.mock('http://localhost:8080/user',{
    'name': '@name', //随机生成用户名
    'name': '@email', //随机生成邮箱
    'age|1-10': 5, //年龄1-10 之间
})

Mock.mock('http://localhost:8080/menu',{
    'id': '@increment', //id 自增
    'name': 'menu', //名称为menu
    'order|1-20': 5, //排序1-20 之间
})

修改home.vue 代码，验证结果如下图

3.3 工具封装

3.3.1 axios 封装

3.3.1.1 目的

减少代码冗余，复用axios

3.3.1.2 目录结构

在src 目录下 新建http 子目录，在该目录下新增如下文件

config.js : axios 默认配置，包含基础路径等信息。
axios.js : 二次封装axios 模块，包含拦截器等信息。
api.js : 请求接口汇总模块，聚合所有模块API.
index.js: 将axios封装成插件，按插件方式引入。
modules: 用户管理，菜单管理等子模块api

3.3.1.3 代码说明

3.3.1.4 验证

3.3.2 封装mock

3.3.2.1 目的

1.为了统一管理和集中控制数据模拟接口
2.方便定制模拟接口统一开关和个体开关

3.3.2.2 目录结构

3.3.2.3 代码说明

3.3.2.4 验证

3.4 引入第三方

3.4.1 引入fontawesome.com 图标库（失败）

官网:https://fontawesome.com/

3.4.1.1 安装依赖

我这边装的是4.7.0 ,更高版本怎么安装，待查

PS D:\front\commonadmin-front> npm install font-awesome

added 1 package in 4s

100 packages are looking for funding
  run `npm fund` for details
PS D:\front\commonadmin-front>

package.json

  "dependencies": {
    "axios": "^1.3.4",
    "core-js": "^3.8.3",
    "element-ui": "^2.15.13",
    "font-awesome": "^4.7.0",
    "js-cookie": "^3.0.1",
    "mockjs": "^1.1.0",
    "node-sass": "^8.0.0",
    "sass-loader": "^13.2.0",
    "vue": "^2.6.14",
    "vue-router": "^3.5.1"
  },

3.4.2 多语言

3.4.2.1 安装依赖

PS D:\front\commonadmin-front> npm install [email protected]

added 1 package in 3s

100 packages are looking for funding
  run `npm fund` for details
PS D:\front\commonadmin-front>

  "dependencies": {
    "axios": "^1.3.4",
    "core-js": "^3.8.3",
    "element-ui": "^2.15.13",
    "js-cookie": "^3.0.1",
    "mockjs": "^1.1.0",
    "node-sass": "^8.0.0",
    "sass-loader": "^13.2.0",
    "vue": "^2.6.14",
    "vue-i18n": "^8.7.0",
    "vue-router": "^3.5.1"
  },

3.4.2.2 新增目录

3.4.2.3 新增关键代码

/src/i18n/index.js
代码如下，引入多语言

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)
 
// 注册i18n实例并引入语言文件，文件格式等下解析
const i18n = new VueI18n({
  locale: 'zh_cn',
  messages: {
    'zh_cn': require('@/assets/languages/zh_cn.json'),
    'en_us': require('@/assets/languages/en_us.json')
  }
})

export default i18n

/src/main.js
将多语言引入到项目里

import Vue from 'vue'
import App from './App.vue'

//导入路由
import router from './router'

import api from './http'
//导入国际化 多语言
import i18n from './i18n'

import global from '@/utils/global'


//导入element
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'



Vue.use(api) //注册使用api 模块

Vue.use(ElementUI)

Vue.prototype.global = global // 挂载全局配置模块

new Vue({
  el: '#app',
  i18n,
  router,
  render: h => h(App)
})

3.4.2.4 验证