基于vue-router vuex+Element ui+echarts+axios +mysql的后台管理系统

目录

前言

一、使用HBuilderX新建项目

二、安装依赖

三、文件创建

1.引入插件

2.APP.vue文件

3.注册路由

4.Main.vue文件

5.侧边栏实现

6顶部导航条实现

四、首页制作

1.管理用户登录信息模块

2.平台数据展示信息模块

3.用户信息表格实现

4.echarts插件使用实现

总结

---

---

前言

技术栈：vue-router vuex axios bootstrap element-ui 二次封装 mock echarts

项目搭建：项目结构分析、项目模块搭建、脚手架搭建配置、组件初始化、vuex初始化

模块分配：登录页、后台首页、用户管理页、分页处理、用户crud、路由守卫、权限管理

页面效果：

 

---

一、使用HBuilderX新建项目

       1. 在nodejs官网下载对应需要的版本。下载地址Node.js 中文网。

        2.HBuilderX新建项目，选择“vue项目”（我这里使用的是2.6版本）。

        3在HBuilderX的设置——>“运行配置”——>找到“node运行配置”———>运行终端类型选择"外部命令"

        4.选择创建vue项目，右键选择“外部命令”分别执行 npm run build 和npm run server。显示下图为运行成功：

 在浏览器输入http://localhost:8080/ ​​​​​

二、安装依赖

        在外部资源管理器打开项目所在路径，在地址栏输入cmd。

        首次安装一般不会出现问题，如果出现 npm ERR Cannot read properties of null (reading ‘pickAlgorithm‘)报错可以尝试使用

npm cache clear --force //清除npm的缓存

1.安装bootstrap依赖

npm install bootstrap

2.安装vue-router依赖

npm i vue-router@3.2.0 

3.安装less、less-loader依赖

npm install --save-dev less-loader@4.1.0 less@3.9.0

4.安装echarts 依赖

npm install echarts

安装好后在项目的package.json文件下也会有相应的版本号，表示安装好了

{
  "name": "default",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "axios": "^0.27.2",
    "bootstrap-vue": "^2.22.0",
    "core-js": "^2.6.5",
    "echarts": "^5.3.3",
    "element-ui": "^2.15.9",
    "jquery": "^3.6.0",
    "popper.js": "^1.16.1",
    "vue": "^2.6.10",
    "vue-router": "^3.2.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.8.0",
    "@vue/cli-service": "^3.8.0",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "vue-template-compiler": "^2.6.10"
  }
}

三、文件创建

1.引入插件

在vue的项目下找到main.js文件：

import Vue from 'vue'
import App from './App.vue'
// 全部引入element ui组件，这里的引入可以有两种（按需引入和全部引入），按需引入可以减少文件大小
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// 全部引入bootstrap，bootstrap是依赖于jquery的所以还需要引入juqery
import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import $ from 'jquery'
import 'bootstrap/dist/js/bootstrap.min'
import router from './router'
Vue.config.productionTip = false
Vue.use(ElementUI)
Vue.use(BootstrapVue)
Vue.use(BootstrapVueIcons)
Vue.prototype.$http=http
new Vue({
	router,
	render: h => h(App),
  
}).$mount('#app')

2.APP.vue文件

        src文件下app.vue代码如下

<template>
  <div id="app">
	<router-view></router-view>//页面入口
  </div>
</template>

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

<style>
html,body{
	margin: 0;
	padding: 0;
}
#app{
	height: 100vh;
}
</style>

3.注册路由

        src文件下新建文件夹router，在新建index.js文件，在该文件下创建路由

        1.首先导入import Vue from 'vue' ，import VueRouter from 'vue-router'插件，使用Vue.use(VueRouter );通过全局添加一些VueRouter插件，创建VueRouter实例。

        2.在项目目录创建新的文件夹,名为views,改文件夹下存放路由对应的vue文件，这些vue文件作为项目侧边栏选项的页面。

view下先创建四个vue文件，分别为Home.vue、Main.vue、mall.vue、User.vue。后面就可以在index.js注册路由。

index.js:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Main from '../../views/Main.vue'
import User from '../../views/User.vue'
import Home from '../../views/Home.vue'
import Mall from '../../views/Mall.vue'
Vue.use(VueRouter);
export default new VueRouter({
	mode:"history",
	base:process.env.BASE_URL,
	routes:[{
		path:"/",
		name:"Main",
		component:Main,
		children:[
			{
				path:"/user",
				name:"User",
				component:User
			},
			,{
				path:"/",
				name:"Home",
				component:Home
			},{
				path:"/mall",
				name:"Mall",
				component:Mall
			}
		]
	}
	]
	
});

4.Main.vue文件

        main.vue将作为整个项目的框架，跳转到element官方网站(Element - The world's most popular Vue UI framework)，选择一个布局容器，找到相应代码复制到main.vue template标签下

 mian.vue文件代码:

<template>
	<el-container style="height:100% ;">//布局容器
	  <el-aside width="auto">
		  <common-aside></common-aside>
	  </el-aside>
	  <el-container>
	    <el-header>
			<common-header/>
		</el-header>
	    <el-main>
			<router-view></router-view>
		</el-main>
	  </el-container>
	</el-container>
</template>

<script>
	import CommonAside from