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

已于 2023-03-14 16:20:47 修改
阅读量1.2k 收藏 2
点赞数
文章标签： 前端 vue.js npm
于 2023-03-10 16:56:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nasooo/article/details/129441846
版权

一 背景

基于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

> commonadmin-front@0.1.0 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 core-js@2.6.12: 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 vue-router@3.5.1

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/move-file@2.0.1: This functionality has been moved to @npmcli/fs
npm WARN deprecated @npmcli/move-file@1.1.2: 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 vue-i18n@8.7.0

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 验证

在这里插入图片描述在这里插入图片描述

tobias.b
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
后台管理系统前端框架
09-25
前端框架, 包含各种样式介绍, 使用angular.js实现的后台管理的框架, 用面向对象的思想搭建的web前端框架,可用于大型网站后台管理系统
前端后台管理系统模板
07-05
我精心挑选的三个后台管理系统的模板，都是我自己用的，非常好用的，你们可以试试，我敢保证你们绝对满意！学习使用也是很好的，我自己就是！
电商后台管理系统（前端）
2201_75474092的博客
04-25 1682
电商后台管理系统（前端）前言一、配置环境在vue2中引入element-ui、axios、router① 引入element-ui②引入axios③引入router二、登录组件的实现登录布局与实现①登录布局②登录组件表单的数据绑定③实现表单的重置④登录前的校验⑤路由导航守卫控制访问权限三、主页面的实现主页面的布局①主页菜单布局②通过接口获取菜单数据③实现退出功能④通过接口获取菜单数据⑤用户列表开发⑥实现添加功能⑦实现修改功能⑧实现删除功能实现权限管理功能①实现权限列表功能②角色列表 前言 跟着编写电商后台管
通用后台管理系统（一）——项目介绍
最新发布
m0_71233415的博客
06-26 659
通用后台管理是采用vue2+cli开发的项目，通过mock模拟后端数据，前端完成数据的渲染。本项目使用vue router实现各个页面的路由跳转，采用vuex状态管理器管理各个页面之间的数据传递问题，采用axios技术发出请求和接收请求。
基础前端后台管理系统——完整版权限开发（附带教程及代码）
NanChen的博客
11-26 7876
最详细的后台管理系统布局以及成品代码
后台管理系统前端模块
04-26
一直使用eclipse，个人习惯选用Eclipse+spring-tool-suite进行开发，特别注意Eclipse要选用对应的spring-tool-suite进行安装，这点笔者浪费了好长时间，以下为对应的版本。 eclipse-kepler.4.3.1–>springsource-tool-suite-RELEASE-e4.3.1-updatesite.zip eclipse-Mars.4.5.1–>springsource-tool-suite-3.7.2RELEASE-e4.5.1-updatesite.zip eclipse-Mars.4.5.2–>springsource-tool-suite-3.7.3RELEASE-e4.5.2-updatesite.zip eclipse-neno.4.6–>springsource-tool-suite-3.7.3RELEASE-e4.6-updatesite.zip 直接百度Eclipse和对应的spring-tool-suite，切记版本要对应。
前端后台管理系统————01版权限开发（附带教程及代码）
NanChen的博客
11-23 9170
前端后台管理系统的基本实现
vue3使用element-plus搭建后台管理系统---菜单管理
07-01
在本项目中，我们主要探讨的是如何利用Vue3框架与Element-Plus库来构建一个后台管理系统，特别是关于菜单管理的部分。Vue3是Vue.js的最新版本，它带来了许多性能优化和开发体验提升的新特性，如Composition API、...
基于VUE3+Layui从头搭建通用后台管理系统（前端篇）
12-25
基于VUE3+Layui从头搭建通用后台管理系统（前端篇）开发，提供源码。包括前端常用功能、基础框架等； 使用express实现模拟后端，提供前端功能接口； 使用echarts实现系统统计图表功能演示； 使用datav实现大屏监控...
简单通用文章系统后台管理模板
05-04
这款“简单通用文章系统后台管理模板”是一款基于前端技术栈构建的轻量级网页模板，主要面向需要构建文章管理系统后台的开发者。...通过理解并利用这些技术，可以快速构建出符合特定业务场景的文章后台管理系统。
springboot通用后台管理系统
04-16
主要定位于后台管理系统学习交流，已内置后台管理系统的基础功能和高效的代码生成工具， 包括：系统权限组件、数据权限组件、数据字典组件、核心工具组件、视图操作组件、工作流组件、代码生成等。 前端界面风格...
汽车前端系统加后台管理3
01-10
汽车网1html为前台页面懂车帝100%分布式框架如有不懂可联系
通用后台管理系统（web）
08-15
改工程为maven工程，使用maven的方式导入。包括登录页面、主界面、用户管理、角色管理、日志管理、菜单管理
通用后台管理模板
03-21
采用Spring、MyBatis、Shiro框架，开发的一套权限系统，极低门槛，拿来即用 支持分布式部署、Quartz分布式集群调度、部门管理、数据权限、云存储等功能
前端 后台管理
05-21
一些前台的设计和后台模板的页面 搭顺风车大赛
vue前端 后台管理
12-27
vue前端 后台管理
java通用后台管理系统.rar
02-20
Java通用后台管理系统是一款基于Java编程语言开发的管理平台，它为各类企业和组织提供了一套高效、灵活且可扩展的后台解决方案。系统的核心设计理念是模块化和组件化，以实现高度的定制性和重用性，从而满足不同业务...
通用后台管理
vly521的博客
07-30 108
一，使用了RBAC权限管理，将权限分给角色，然后再给用户赋予角色 二，数据库表设计，创建用户表，创建角色表，创建菜单表，因为用户对角色和角色对菜单都是一对多的关系，所以还要创建，用户角色表，角色菜单表，创建日志表，创建机构表 三，为什么又entity还要加vo：比如在链表查询的时候同时需要用户和机构信息entiy显然没有，这个时候就可以在vo中加上这么一个视图类来显示，这样可以保证entity只与数据库相对应不受污染 ...
Vue——后台管理系统前端
奔跑的狮子
11-18 1090
vue前端小项目 文章目录vue前端小项目项目展示使用技术代码链接 项目展示 下面链接是bilibili的，在视频简介里有教学原视频的链接 vue的前端小项目成果展示 vue的前端小项目成果展示 使用技术 vue、vue-cli、vuex、vue-router、组件开发 element-ui里的标签、下拉菜单、按钮、表格、布局、导航栏、面包屑导航 echarts制图 代码链接 代码里有
BaseAdmin：一套开源的简单通用后台管理系统
"开源一套基于SpringBoot的简单通用后台管理系统，包括权限管理、菜单管理、用户管理等功能，采用layui作为前端框架，后端技术栈包括SpringBoot、Thymeleaf、WebSocket、Spring Security、SpringData-Jpa和MySql。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值