vue+element-ui后台管理系统模板
vue+element-ui后台管理系统模板
前端：基于vue2.0+或3.0+加上element-ui组件框架
后端：springboot+mybatis-plus写接口
通过Axios调用接口完成数据传递
通过router路由完成各页面的跳转
全局配置
App.vue
<template>
<div>
<router-view></router-view>
</div>
</template>
<script>
import Login from '@/views/Login.vue'
export default {
name: 'app',
components: {
Login
}
}
</script>
<style>
body {
margin: 0px auto;
padding: 0px;
}
</style>
第一种页面集合在一个页面
登录界面
注册界面
vue页面实现
LogReg.vue
<template>
<el-form class="login-box">
<el-tabs stretch="true">
<el-tab-pane label="登录用户" value="first"><Login></Login></el-tab-pane>
<el-tab-pane label="注册用户" name="second"><Register></Register></el-tab-pane>
</el-tabs>
</el-form>
</template>
<script>
import Register from '../Register.vue';
import Login from '../Login.vue';
export default {
components: {
Register,
Login
},
data() {
return {
activeName: 'first'
};
},
methods: {
}
};
</script>
<style>
.login-box {
border: 1px solid #DCDFE6;
width: 350px;
margin: 180px auto;
padding: 35px 35px 15px 35px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
box-shadow: 0 0 25px #909399;
}
</style>
Login.vue
<template>
<div>
<el-form ref="loginForm" :model="loginform" :rules="rules" label-width="80px" >
<h3 class="login-title">欢迎登录</h3>
<el-form-item label="账号" prop="user">
<el-input type="text" placeholder="请输入账号" v-model="loginform.user"/>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" placeholder="请输入密码" v-model="loginform.password"/>
</el-form-item>
<el-form-item>
<el-button type="primary" :loading="logining" v-on:click="onSubmit()">登录</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import Axios from 'axios';
export default{
components: {
},
name: "Login",
data() {
return {
activeName: 'first',
logining:false,
loginform: {
user: '',
password: ''
},
// 表单验证，需要在 el-form-item 元素中增加 prop 属性
rules: {
user: [
{required: true, message: '账号不可为空', trigger: 'blur'}
],
password: [
{required: true, message: '密码不可为空', trigger: 'blur'}
]
},
// 对话框显示和隐藏
// dialogVisible: false
}
},
methods: {
onSubmit() {
// console.log(this.form)
// 为表单绑定验证功能
this.$refs.loginForm.validate((valid) => {
if (valid) {
this.logining=true
let _this = this
if (_this.logining == true) {
Axios.get("http://localhost:8181/admin/login",{params:this.loginform}).then(function (res) {
_this.logining=false
// console.log(res.data.code)
if (res.data.code == -1) {
_this.$message.error('用户名不存在');
}
if (res.data.code == -2) {
_this.$message.error('密码错误');
}
if (res.data.code == 0) {
_this.$message({
message: '恭喜你，登录成功',
type: 'success'
});
localStorage.setItem('main',JSON.stringify(res.data.data));
_this.$router.replace({path:'/main'})
}
})
}
}
// 使用 vue-router 路由到指定页面，该方式称之为编程式导航
// this.$router.push("/main");
// } else {
// // return false;
// }
});
}
}
}
</script>
<style scoped>
.login-box {
border: 1px solid #DCDFE6;
width: 350px;
margin: 180px auto;
padding: 35px 35px 15px 35px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
box-shadow: 0 0 25px #909399;
}
.login-title {
text-align: center;
margin: 0 auto 40px auto;
color: #303133;
}
</style>
Register.vue
<template>
<div>
<el-form ref="registerForm" :model="registerform" :rules="rules" label-width="80px" >
<h3 class="register-title">注册用户</h3>
<el-form-item label="账号" prop="user">
<el-input type="text" placeholder="请输入账号" v-model="registerform.user"/>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" placeholder="请输入密码" v-model="registerform.password"/>
</el-form-item>
<el-form-item>
<el-button type="primary" :loading="logining" v-on:click="onSubmit()">注册</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import Axios from 'axios';
export default{
data() {
return {
logining:false,
registerform: {
user: '',
password: ''
},
// 表单验证，需要在 el-form-item 元素中增加 prop 属性
rules: {
user: [
{required: true, message: '账号不可为空', trigger: 'blur'}
],
password: [
{required: true, message: '密码不可为空', trigger: 'blur'}
]
},
}
},
methods: {
onSubmit() {
// console.log(this.form)
// 为表单绑定验证功能
this.$refs.registerForm.validate((valid) => {
if (valid) {
this.logining=true
let _this = this
if (_this.logining == true) {
Axios.get("http://localhost:8181/admin/register",{params:this.registerform}).then(function (res) {
_this.logining=false
// console.log(res.data.code)
if (res.data.code == -1) {
_this.$message.error('用户名已存在');
}
if (res.data.code == 0) {
_this.$message({
message: '恭喜你，注册成功',
type: 'success'
});
localStorage.setItem('login',JSON.stringify(res.data.data));
_this.$router.push({path:'/'})
}
})
}
}
// 使用 vue-router 路由到指定页面，该方式称之为编程式导航
// this.$router.push("/main");
// } else {
// // return false;
// }
});
}
}
}
</script>
<style>
.register-title {
text-align: center;
margin: 0 auto 40px auto;
color: #303133;
}
</style>
首页界面
Main.vue
<template >
<el-container class="homecontainer">
<el-header >
<div class="head" >
<div class="div1" >XXXXX管理系统</div>
<div class="div2" >
<el-dropdown >
<span class="el-dropdown-link" >
下拉菜单<i class="el-icon-arrow-down el-icon--right" style="margin-right: 15px" ></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>个人信息</el-dropdown-item>
<el-dropdown-item>修改密码</el-dropdown-item>
<el-dropdown-item>退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
</el-header>
<el-container>
<el-aside width="200px">
<el-menu router
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose">
<el-submenu index="1">
<template slot="title"><i class="el-icon-platform-eleme"></i><span>导航一</span></template>
<el-menu-item index="/manage">商品管理</el-menu-item>
<el-menu-item index="/add">添加商品</el-menu-item>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-eleme"></i>
<span slot="title">导航二</span>
</el-menu-item>
</el-menu>
</el-aside>
<el-container>
<el-main height="300px" >
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
<el-breadcrumb-item v-text="this.$router.currentRoute.name"></el-breadcrumb-item>
</el-breadcrumb>
<router-view></router-view>
</el-main>
<el-footer height="60px">2022-Spring Boot-Vue-Element-ui-Mabtis-Plus</el-footer>
</el-container>
</el-container>
</el-container>
</template>
<script>
export default {
methods: {
handleClick(row) {
console.log(row);
},
handleOpen() {
},
handleClose() {
}
},
data() {
return {
}
}
}
</script>
<style scoped>
.homecontainer{
height: 763px;
width: 100%;
}
.head{
display: flex ;
flex-direction: row;
}
.div1{
align-items: center;
margin-top: 25px;
}
.div2{
margin-left: 1270px;
margin-top: 30px;
float: right;
font-size: 12px;
}
.el-header{
background-color: #1b7cfbbb;
color: #333;
text-align: center;
line-height: 10px;
}
.el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
}
.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 10px;
}
.el-dropdown-link {
cursor: pointer;
color: #010e1b;
}
.el-icon-arrow-down {
font-size: 12px;
}
</style>
路由设置
index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Main from "@/views/Main"
import Manage from '@/views/Manage'
import Add from '@/views/Add'
import LogReg from '@/views/LogAndReg/LogReg'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: '入口',
component: LogReg
},
{
path: '/main',
name: '首页',
component: Main,
// redirect:'/manage',
children:[
{
path: '/manage',
name: '商品管理',
component: Manage
},
{
path: '/add',
name: '添加商品',
component: Add
},
]
},
]
const router = new VueRouter({
routes
})
export default router
第二种页面独立分开
登录界面
注册页面
vue实现
Login.vue
<template>
<div>
<el-form ref="loginForm" :model="loginform" :rules="rules" label-width="80px" class="login-box" >
<h3 class="login-title">欢迎登录</h3>
<el-form-item label="账号" prop="user">
<el-input type="text" placeholder="请输入账号" v-model="loginform.user"/>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" placeholder="请输入密码" v-model="loginform.password"/>
</el-form-item>
<div style="text-align: center;">
<router-link :to="{path: '/register'}">还没有账号？去注册</router-link>
<el-form-item>
<el-button type="primary" :loading="logining" v-on:click="onSubmit()">登录</el-button>
</el-form-item>
</div>
</el-form>
</div>
</template>
<script>
import Axios from 'axios';
export default{
components: {
},
name: "Login",
data() {
return {
activeName: 'first',
logining:false,
loginform: {
user: '',
password: ''
},
// 表单验证，需要在 el-form-item 元素中增加 prop 属性
rules: {
user: [
{required: true, message: '账号不可为空', trigger: 'blur'}
],
password: [
{required: true, message: '密码不可为空', trigger: 'blur'}
]
},
// 对话框显示和隐藏
// dialogVisible: false
}
},
methods: {
onSubmit() {
// console.log(this.form)
// 为表单绑定验证功能
this.$refs.loginForm.validate((valid) => {
if (valid) {
this.logining=true
let _this = this
if (_this.logining == true) {
Axios.get("http://localhost:8181/admin/login",{params:this.loginform}).then(function (res) {
_this.logining=false
// console.log(res.data.code)
if (res.data.code == -1) {
_this.$message.error('用户名不存在');
}
if (res.data.code == -2) {
_this.$message.error('密码错误');
}
if (res.data.code == 0) {
_this.$message({
message: '恭喜你，登录成功',
type: 'success'
});
localStorage.setItem('main',JSON.stringify(res.data.data));
_this.$router.replace({path:'/main'})
}
})
}
}
// 使用 vue-router 路由到指定页面，该方式称之为编程式导航
// this.$router.push("/main");
// } else {
// // return false;
// }
});
}
}
}
</script>
<style scoped>
.login-box {
border: 1px solid #DCDFE6;
width: 350px;
margin: 180px auto;
padding: 35px 35px 15px 35px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
box-shadow: 0 0 25px #909399;
}
.login-title {
text-align: center;
margin: 0 auto 40px auto;
color: #303133;
}
</style>
register.vue
<template>
<div>
<el-form ref="registerForm" :model="registerform" :rules="rules" label-width="80px" class="register-box">
<h3 class="register-title">注册用户</h3>
<el-form-item label="账号" prop="user">
<el-input type="text" placeholder="请输入账号" v-model="registerform.user"/>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" placeholder="请输入密码" v-model="registerform.password"/>
</el-form-item>
<el-form-item>
<el-button type="primary" :loading="logining" v-on:click="onSubmit()">注册</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import Axios from 'axios';
export default{
data() {
return {
logining:false,
registerform: {
user: '',
password: ''
},
// 表单验证，需要在 el-form-item 元素中增加 prop 属性
rules: {
user: [
{required: true, message: '账号不可为空', trigger: 'blur'}
],
password: [
{required: true, message: '密码不可为空', trigger: 'blur'}
]
},
}
},
methods: {
onSubmit() {
// console.log(this.form)
// 为表单绑定验证功能
this.$refs.registerForm.validate((valid) => {
if (valid) {
this.logining=true
let _this = this
if (_this.logining == true) {
Axios.get("http://localhost:8181/admin/register",{params:this.registerform}).then(function (res) {
_this.logining=false
// console.log(res.data.code)
if (res.data.code == -1) {
_this.$message.error('用户名已存在');
}
if (res.data.code == 0) {
_this.$message({
message: '恭喜你，注册成功',
type: 'success'
});
localStorage.setItem('login',JSON.stringify(res.data.data));
_this.$router.push({path:'/'})
}
})
}
}
// 使用 vue-router 路由到指定页面，该方式称之为编程式导航
// this.$router.push("/main");
// } else {
// // return false;
// }
});
}
}
}
</script>
<style>
.register-box {
border: 1px solid #DCDFE6;
width: 350px;
margin: 180px auto;
padding: 35px 35px 15px 35px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
box-shadow: 0 0 25px #909399;
}
.register-title {
text-align: center;
margin: 0 auto 40px auto;
color: #303133;
}
</style>
路由设置
index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/login',
name: '登录',
component: ()=>import('../views/Login/LoginView.vue')
},
{
path: '/register',
name: '注册',
component: ()=>import('../views/Register/registerView.vue')
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
}
]
const router = new VueRouter({
routes
})
export default router
vue+element-ui后台管理系统模板的更多相关文章
- Vue3 + Element ui 后台管理系统
Vue3 + Element ui 后台管理系统 概述:这是一个用vue3.0和element搭建的后台管理系统界面. 项目git地址: https://github.com/whiskyma/vu ...
- SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 后端篇（五）： 数据表设计、使用 jwt、redis、sms 工具类完善注册登录逻辑
(1) 相关博文地址: SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇(一):搭建基本环境:https://www.cnblogs.com/l-y-h/p ...
- SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 后端篇（一）： 搭建基本环境、整合 Swagger、MyBatisPlus、JSR303 以及国际化操作
相关 (1) 相关博文地址: SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇(一):搭建基本环境:https://www.cnblogs.com/l-y- ...
- vue+element-ui JYAdmin后台管理系统模板-集成方案【项目搭建篇2】
项目搭建时间:2020-06-29 本章节:讲述基于vue/cli, 项目的基础搭建. 本主题讲述了: 1.跨域配置 2.axios请求封装 3.eslint配置 4.环境dev,test,pro(开 ...
- Vue+element搭建后台管理系统-二、安装插件
我们继续上一章的内容,上一章讲到我们已经能将项目成功跑起来了,那么我们接下来把项目必用的东西完善一下. 一.安装elementUI 终于到了我们的男二了,继续在VSCode中新建一个终端,然后通过这个 ...
- vue+element ui后台遇到的坑
今天在用elementui做后台系统,遇到第一个坑:分页显示的是英文 按照官网组件复制下来的代码: <el-row :gutter="0" style="margi ...
- vue3项目后台管理系统模板
Vue3.0 发布第一个版本至今有一段时间了,到现在一直在更新优化,在性能方面,对比 Vue2.x ,性能的提升比较明显,打包后体积更小 来看下 Vue3.x 新增了哪些功能和特性. Performa ...
- Vue + Element UI 实现权限管理系统
Vue + Element UI 实现权限管理系统 前端篇(一):搭建开发环境 https://www.cnblogs.com/xifengxiaoma/p/9533018.html
- 3YAdmin-专注通用权限控制与表单的后台管理系统模板
3YAdmin基于React+Antd构建.GitHub搜索React+Antd+Admin出来的结果没有上百也有几十个,为什么还要写这个东西呢? 一个后台管理系统的核心我认为应该是权限控制,表单以及 ...
随机推荐
- Prometheus+Grafana+钉钉部署一个单机的MySQL监控告警系统
GreatSQL社区原创内容未经授权不得随意使用,转载请联系小编并注明来源. GreatSQL是MySQL的国产分支版本,使用上与MySQL一致. 目录 一.Prometheus 二.exporter ...
- Apache DolphinScheduler 使用文档（4/8）：软件部署
本文章经授权转载,原文链接: https://blog.csdn.net/MiaoSO/article/details/104770720 目录 4. 软件部署 4.1 为 dolphinschedu ...
- LuoguP5201 [USACO19JAN]Shortcut(最短路树)
字典序?建树时从小枚举,用\(Dijkstra\)的血泪建好树,\(size\)大小决定贡献 #include <iostream> #include <cstdio> #in ...
- poi生成表格自动合并单元格
直接复制这个工具类即可使用: /** * 合并单元格 * @author tongyao * @param sheet sheet页 * @param titleColumn 标题占用行 * @par ...
- QQ国际版V8.0.11.4530
简洁,快速,无广告,好用! 预览图 下载地址 QQ国际版.apk 其他简洁版本如下 在线观看 视频地址[灰常简洁占用超低!]
- PHP实现获取本地视频进行随机播放
创建一个文件夹,里面随便方视频文件即可 列如文件夹名字是assets代码如下 <? $handler = opendir('./assets/mp4/');//当前目录中的文件夹下的文件夹 需要 ...
- OpenDrop 这样的应用程序以及与当今流行的替代品的比较
由安全移动网络实验室 OpenDrop 创建的用 Python 编写的开放 Apple AirDrop 实现是一个命令行工具,允许直接通过 Wi-Fi 在设备之间共享文件.它的独特之处在于它与 App ...
- RHEL7从安装的字符界面转为桌面GUI图形化步骤
1.光驱装载原版光盘镜像 2.挂载光盘镜像 mount /dev/sr0 /media 3.配置本地yum源 vi /etc/yum.repos.d/local.repo [rhel] name=rh ...
- KingbaseES V8R3集群维护案例之---在线添加备库管理节点
案例说明: 在KingbaseES V8R3主备流复制的集群中 ,一般有两个节点是集群的管理节点,分为master和standby:如对于一主二备的架构,其中有两个节点是管理节点,三个数据节点:管理节 ...
- KingbaseES OUT 类型参数过程与函数的调用方法
对于含有 out 类型参数的过程或者函数,只能通过块方式调用,这是因为,ksql 还不支持类似 Oracle 那样通过 var 定义变量. 一.带OUT的procedure 调用 创建过程: crea ...