Table of contents
foreword
3. Focus on explaining how to build a complete background management system
4. Pagination components (mainly switch between different components in the lower right corner)
Summarize
foreword
With the continuous progress of software development, the front-end and back-end framework technologies have also made significant progress. The front-end mainly includes the classic Layui framework, as well as Google flutter and the popular Vue framework. The back-end mainly includes the Spring framework, especially SpringBoot, which is widely used, and the front-end This technology is becoming more and more important. Many people have started to learn Vue technology. This article introduces the basic content of Vue and the sharing of background management system projects.
1. What is Vue?
Vue is a popular lightweight JavaScript framework for building user interfaces and single-page applications. Vue was created by Evan You and first released in 2014. Its main open source is You Yuxi, a former Google front-end developer. Vue is designed to be simple, flexible and easy to use, while being performant and extensible.
Vue uses declarative rendering and componentized architecture to enable developers to split the application into multiple small components and form modules from the components, which greatly reduces the complexity of development, eases the work difficulty of front-end developers, and combines them in Build complex user interfaces together. Vue also provides a set of tools and plugins that make it easier for developers to manage application state and routing, while supporting dynamic and lazy loading.
Vue also provides a large number of documents and tutorials. It can be said that the development of Vue's ecological field is very complete, and the current version has been updated to Vue3.0. It is an active community, making it one of the favorite frameworks for developers.
2. Steps to use Vue
- Building an application with Vue.js can follow the following steps: (here we use VScode)
- Install Vue.js: First, you need to install Vue.js. It can be installed using npm or yarn.
- Create a Vue instance: Create a Vue instance in a file, usually set in index.html or webpack.config.js.
- Create a component: Create a component and define data, methods, life cycle hooks, etc. in the component. Components can be public or private.
- Component communication: Components need to communicate, and you can use state management and routing management tools such as Vuex and Vue Router.
- Create a route: create a route, and define navigation guards, dynamic routes, etc. in the route.
- Create dynamic loading: Use Vue Router's dynamic loading feature to load data into the application.
- Create lazy loading: use Vuex or other state management tools to implement lazy loading, and only load data when needed.
- Write tests: Write unit and integration tests to verify the performance and functionality of components and applications.
- Care and maintenance: The application is regularly maintained and updated to keep it functioning properly and up to date.
- The above are the basic steps to build an application with Vue.js. Of course, in actual development, it needs to be adjusted and optimized according to specific needs.
3. Focus on explaining how to build a complete background management system
This project mainly uses Vue2.0 to build a management system. In addition, I use ElementUi component library + webpack + ES6/7 + axios and other technologies. Its main functions are as follows:
- Login authentication
- route interception
- company management
- Order transaction
- commodity management
- role management
- System Management
- payment management
- User Management
- payment configuration
- big data chart
- system environment variable
- authority management
- menu management
- personal center
Main management page display
log in page
big data page
4. Main source code sharing
1. Display error components
/**
* 404
*/
<template>
<div class="page-404">
<h1>404!</h1>
<h2>Sorry, page not found</h2>
</div>
</template>
<style scoped>
.page-404 {
text-align: center;
}
.page-404 h1 {
font-size: 98px;
font-weight: 700;
line-height: 150px;
text-shadow: rgba(61, 61, 61, 0.3) 1px 1px, rgba(61, 61, 61, 0.2) 2px 2px,
rgba(61, 61, 61, 0.3) 3px 3px;
}
.page-404 h2 {
line-height: 30px;
font-size: 30px;
}
</style>2. Left menu component
<template>
<el-menu default-active="2" :collapse="collapsed" collapse-transition router :default-active="$route.path" unique-opened class="el-menu-vertical-demo" background-color="#334157" text-color="#fff" active-text-color="#ffd04b">
<div class="logobox">
<img class="logoimg" src="../assets/img/logo.png" alt="">
</div>
<el-submenu v-for="menu in allmenu" :key="menu.menuid" :index="menu.menuname">
<template slot="title">
<i class="iconfont" :class="menu.icon"></i>
<span>{
{menu.menuname}}</span>
</template>
<el-menu-item-group>
<el-menu-item v-for="chmenu in menu.menus" :index="'/'+chmenu.url" :key="chmenu.menuid">
<i class="iconfont" :class="chmenu.icon"></i>
<span>{
{chmenu.menuname}}</span>
</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</template>
<script>
import { menu } from '../api/userMG'
export default {
name: 'leftnav',
data() {
return {
collapsed: false,
allmenu: []
}
},
// 创建完毕状态(里面是操作)
created() {
// 获取图形验证码
let res = {
success: true,
data: [
{
menuid: 1,
icon: 'li-icon-xiangmuguanli',
menuname: '公司管理',
hasThird: null,
url: null,
// 多级路由嵌套
menus: [
{
menuid: 2,
icon: 'icon-cat-skuQuery',
menuname: '商品销售',
hasThird: 'N',
url: 'goods/Goods',
menus: null
}
]
},
{
menuid: 33,
icon: 'li-icon-dingdanguanli',
menuname: '订单交易',
hasThird: null,
url: null,
menus: [
{
menuid: 34,
icon: 'icon-order-manage',
menuname: '交易订单',
hasThird: 'N',
url: 'pay/Order',
menus: null
}
]
},
{
menuid: 71,
icon: 'li-icon-xitongguanli',
menuname: '系统管理',
hasThird: null,
url: null,
menus: [
{
menuid: 72,
icon: 'icon-cus-manage',
menuname: '用户管理',
hasThird: 'N',
url: 'system/user',
menus: null
},
{
menuid: 174,
icon: 'icon-cms-manage',
menuname: '菜单管理',
hasThird: 'N',
url: 'system/Module',
menus: null
},
{
menuid: 73,
icon: 'icon-news-manage',
menuname: '角色管理',
hasThird: 'N',
url: 'system/Role',
menus: null
},
{
menuid: 74,
icon: 'icon-cs-manage',
menuname: '公司管理',
hasThird: 'N',
url: 'system/Dept',
menus: null
},
{
menuid: 75,
icon: 'icon-promotion-manage',
menuname: '系统环境变量',
hasThird: 'N',
url: 'system/Variable',
menus: null
},
{
menuid: 76,
icon: 'icon-cms-manage',
menuname: '权限管理',
hasThird: 'N',
url: 'system/Permission',
menus: null
}
]
},
{
menuid: 128,
icon: 'li-icon-shangchengxitongtubiaozitihuayuanwenjian91',
menuname: '支付管理',
hasThird: null,
url: null,
menus: [
{
menuid: 129,
icon: 'icon-provider-manage',
menuname: '支付配置信息',
hasThird: 'N',
url: 'machine/MachineConfig',
menus: null
},
{
menuid: 175,
icon: 'icon-provider-manage',
menuname: '支付配置',
hasThird: 'N',
url: 'pay/Config',
menus: null
}
]
},
{
menuid: 150,
icon: 'li-icon-shangchengxitongtubiaozitihuayuanwenjian91',
menuname: '图表',
hasThird: null,
url: null,
menus: [
{
menuid: 159,
icon: 'icon-provider-manage',
menuname: '数据可视化',
hasThird: 'N',
url: 'charts/statistics',
menus: null
}
]
}
],
msg: 'success'
}
this.allmenu = res.data
menu(localStorage.getItem('logintoken'))
.then(res => {
console.log(JSON.stringify(res))
if (res.success) {
this.allmenu = res.data
} else {
this.$message.error(res.msg)
return false
}
})
.catch(err => {
this.$message.error('菜单加载失败，请稍后再试！')
})
监听
this.$root.Bus.$on('toggle', value => {
this.collapsed = !value
})
}
}
</script>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 240px;
min-height: 400px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
border: none;
text-align: left;
}
.el-menu-item-group__title {
padding: 0px;
}
.el-menu-bg {
background-color: #1f2d3d !important;
}
.el-menu {
border: none;
}
.logobox {
height: 40px;
line-height: 40px;
color: #9d9d9d;
font-size: 20px;
text-align: center;
padding: 20px 0px;
}
.logoimg {
height: 40px;
}
</style>3. Navigation area components
/**
* 头部菜单 这个组件就是导航区
*/
<template>
<el-menu class="el-menu-demo" mode="horizontal" background-color="#334157" text-color="#fff" active-text-color="#fff">
<el-button class="buttonimg">
<img class="showimg" :src="collapsed?imgsq:imgshow" @click="toggle(collapsed)">
</el-button>
<el-submenu index="2" class="submenu">
<!-- <template slot="title">{
{user.userRealName}}</template> -->
<template slot="title">个人信息中心</template>
<el-menu-item index="2-1">set</el-menu-item>
<el-menu-item @click="content()" index="2-2">person</el-menu-item>
<el-menu-item @click="exit()" index="2-3">exit</el-menu-item>
</el-submenu>
</el-menu>
</template>
<script>
import { loginout } from '../api/userMG'
export default {
name: 'navcon',
data() {
return {
collapsed: true,
imgshow: require('../assets/img/show.png'),
imgsq: require('../assets/img/sq.png'),
user: {}
}
},
// 创建完毕状态(里面是操作)
created() {
this.user = JSON.parse(localStorage.getItem('userdata'))
},
methods: {
// 退出登录
exit() {
this.$confirm('退出登录, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
setTimeout(() => {
this.$store.commit('logout', 'false')
this.$router.push({ path: '/login' })
this.$message({
type: 'success',
message: '已退出登录!'
})
}, 1000)
loginout()
.then(res => {
if (res.success) {
//如果请求成功就让他2秒跳转路由
setTimeout(() => {
this.$store.commit('logout', 'false')
this.$router.push({ path: '/login' })
this.$message({
type: 'success',
message: '已退出登录!'
})
}, 1000)
} else {
this.$message.error(res.msg)
this.logining = false
return false
}
})
.catch(err => {
// 获取图形验证码
this.getcode()
this.logining = false
this.$message.error('退出失败，请稍后再试！')
})
})
.catch(() => {
this.$message({
type: 'info',
message: '已取消'
})
})
},
// 切换显示
toggle(showtype) {
this.collapsed = !showtype
this.$root.Bus.$emit('toggle', this.collapsed)
}
}
}
</script>
<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
border: none;
}
.submenu {
float: right;
}
.buttonimg {
height: 60px;
background-color: transparent;
border: none;
}
.showimg {
width: 26px;
height: 26px;
position: absolute;
top: 17px;
left: 17px;
}
.showimg:active {
border: none;
}
</style>4. Pagination components (mainly switch between different components in the lower right corner)
<template>
<el-pagination class="page-box" @size-change="handleSizeChange" @current-change="handleCurrentChange" background :current-page="childMsg.currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="childMsg.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="childMsg.total">
</el-pagination>
</template>
<script>
export default {
name: 'Pagination',
props: ['childMsg'],
data() {
return {
pageparm: {
currentPage: this.childMsg.currentPage,
pageSize: this.childMsg.pageSize
}
}
},
created() {},
methods: {
handleSizeChange(val) {
this.pageparm.pageSize = val
this.$emit('callFather', this.pageparm)
},
handleCurrentChange(val) {
this.pageparm.currentPage = val
this.$emit('callFather', this.pageparm)
}
}
}
</script>
<style>
.page-box {
margin: 10px auto;
}
</style>
5. Template components
<template>
<div>
</div>
</template>
<script>
import headerComponent from "./head.vue";
export default {
name: "template",
data() {
return {};
},
components: {
headerComponent
},
watch: {},
methods: {
addFun() {},
submitFun() {}
},
beforeCreate() {},
created() {},
beforeMount() {},
mounted() {},
beforeUpdate() {},
updated() {},
beforeDestroy() {},
destroyed() {}
};
</script>
<style scoped>
</style>
6. Main View Components
Big Data Visualization Page Components
<template>
<!-- 组件主盒子 -->
<div class="stbox">
<!-- 面包屑导航 -->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>数据可视化</el-breadcrumb-item>
</el-breadcrumb>
<!-- 搜索，切换 -->
<el-row :gutter="23">
<el-col :span="18">
<div class="stbgc">
<el-row :gutter="23">
<el-col :span="7">
<el-input size="small" v-model="machineNo" placeholder="请输入所属公司"></el-input>
</el-col>
<el-col :span="7">
<el-input size="small" v-model="machineNo" placeholder="请输入资产编号"></el-input>
</el-col>
<el-col :span="7">
<el-input size="small" v-model="machineNo" placeholder="请输入"></el-input>
</el-col>
<el-col :span="3" class="stsearch">
<el-button size="small" type="primary">搜索</el-button>
</el-col>
</el-row>
</div>
</el-col>
<el-col :span="6">
<div class="stbgc">
<el-row>
<el-col :span="8" class="text-c">
<el-radio v-model="type" label="day">日</el-radio>
</el-col>
<el-col :span="8" class="text-c">
<el-radio v-model="type" label="month">月</el-radio>
</el-col>
<el-col :span="8" class="text-c">
<el-radio v-model="type" label="years">年</el-radio>
</el-col>
</el-row>
</div>
</el-col>
</el-row>
<!-- 统计图 -->
<el-row :gutter="23">
<el-col :span="8" class="text-c">
<div class="st-gbox">
<div class="cavasbox" ref="SCEchart"></div>
</div>
</el-col>
<el-col :span="8" class="text-c">
<div class="st-gbox">
<div class="cavasbox" ref="SUMEchart"></div>
</div>
</el-col>
<el-col :span="8" class="text-c">
<div class="st-gbox">
<div class="cavasbox" ref="ClickEchart"></div>
</div>
</el-col>
</el-row>
<!-- 统计图 -->
<div>
<el-row :gutter="23">
<el-col :span="12" class="text-c">
<div class="paybox">
<div class="cavasbox" ref="payEchart"></div>
</div>
</el-col>
<el-col :span="12" class="text-c">
<div class="paybox">
<div class="cavasbox" ref="payNumEchart"></div>
</div>
</el-col>
</el-row>
</div>
</div>
</template>
<script type="text/ecmascript-6">
import Chart from 'echarts'
export default {
name: "welcome",
data() {
return {
machineNo: '',
type: 'day',
// 销售总笔数
SCEoption: {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}月 : {c}"
},
legend: {
data: [{
name: '销售总笔数',
icon: 'rect'
}],
top: 1,
left: 1,
itemGap: 10,
itemWidth: 12,
itemHeight: 12,
textStyle: {
fontSize: 12,
color: "#323232"
}
},
grid: {
left: 50,
right: 10,
top: 30,
bottom: 30,
borderWidth: 1
},
xAxis: {
type: 'category',
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
axisLine: {
lineStyle: {
color: "#999999",
width: 1
}
},
axisLabel: {
margin: 14,
height: 70,
interval: 0,
textStyle: {
fontSize: 10,
color: "#999999"
}
}
},
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: "#999999",
width: 1
}
},
axisLabel: {
margin: 14,
textStyle: {
fontSize: 10,
color: "#999999"
}
}
},
series: [{
name: '销售总笔数',
type: 'bar',
barGap: 0,
data: [50000, 70000, 80000, 40000, 50000, 30000, 40000, 60000, 50000, 40000, 60000, 40000],
barWidth: 10,
itemStyle: {
normal: {
color: new Chart.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: '#83bff6' },
{ offset: 0.5, color: '#188df0' },
{ offset: 1, color: '#188df0' }
]
)
},
emphasis: {
color: new Chart.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: '#2378f7' },
{ offset: 0.7, color: '#2378f7' },
{ offset: 1, color: '#83bff6' }
]
)
}
}
}]
},
// 销售总金额
SUMoption: {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}月 : {c}"
},
legend: {
data: [{
name: '销售总金额',
icon: 'rect'
}],
top: 1,
left: 1,
itemGap: 10,
itemWidth: 12,
itemHeight: 12,
textStyle: {
fontSize: 12,
color: "#323232"
}
},
grid: {
left: 50,
right: 10,
top: 30,
bottom: 30,
borderWidth: 1
},
xAxis: {
type: 'category',
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
axisLine: {
lineStyle: {
color: "#999999",
width: 1
}
},
axisLabel: {
margin: 14,
height: 70,
interval: 0,
textStyle: {
fontSize: 10,
color: "#999999"
}
}
},
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: "#999999",
width: 1
}
},
axisLabel: {
margin: 14,
textStyle: {
fontSize: 10,
color: "#999999"
}
}
},
series: [{
name: '销售总金额',
// type: 'bar',
type: 'line',
barGap: 0,
data: [50000, 70000, 80000, 40000, 50000, 30000, 40000, 60000, 50000, 40000, 60000, 40000],
barWidth: 10,
itemStyle: {
color: "#108ff9"
}
}]
},
// 总点击量
Clickoption: {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}月 : {c}"
},
legend: {
data: [{
name: '总点击量',
icon: 'rect'
}],
top: 1,
left: 1,
itemGap: 10,
itemWidth: 12,
itemHeight: 12,
textStyle: {
fontSize: 12,
color: "#323232"
}
},
grid: {
left: 50,
right: 10,
top: 30,
bottom: 30,
borderWidth: 1
},
xAxis: {
type: 'category',
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
axisLine: {
lineStyle: {
color: "#999999",
width: 1
}
},
axisLabel: {
margin: 14,
height: 70,
interval: 0,
textStyle: {
fontSize: 10,
color: "#999999"
}
}
},
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: "#999999",
width: 1
}
},
axisLabel: {
margin: 14,
textStyle: {
fontSize: 10,
color: "#999999"
}
}
},
series: [{
name: '总点击量',
type: 'bar',
barGap: 0,
data: [50000, 10000, 80000, 30000, 50000, 60000, 40000, 80000, 50000, 20000, 60000, 40000],
barWidth: 10,
itemStyle: {
color: "#48cefd"
}
}]
},
// 支付方式统计
payoption: {
backgroundColor: '#2c343c',
title: {
text: '支付方式统计(金额)',
left: 10,
top: 5,
textStyle: {
fontSize: 12,
color: '#ccc'
}
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
visualMap: {
show: false,
min: 80,
max: 600,
inRange: {
colorLightness: [0, 1]
}
},
series: [
{
name: '支付方式统计(金额)',
type: 'pie',
radius: '55%',
center: ['50%', '50%'],
data: [
{ value: 335, name: '支付宝' },
{ value: 310, name: '银商二维码' },
{ value: 274, name: '会员' },
{ value: 235, name: '微信支付' },
{ value: 100, name: 'Pos通' }
].sort(function (a, b) { return a.value - b.value; }),
roseType: 'radius',
label: {
normal: {
textStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
}
},
labelLine: {
normal: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
},
smooth: 0.2,
length: 10,
length2: 20
}
},
itemStyle: {
normal: {
color: '#c23531',
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
animationType: 'scale',
animationEasing: 'elasticOut',
animationDelay: function (idx) {
return Math.random() * 200;
}
}
]
},
payNumoption: {
backgroundColor: '#2c343c',
title: {
text: '支付方式统计(笔数)',
left: 10,
top: 5,
textStyle: {
fontSize: 12,
color: '#ccc'
}
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
visualMap: {
show: false,
min: 80,
max: 600,
inRange: {
colorLightness: [0, 1]
}
},
series: [
{
name: '支付方式统计(笔数)',
type: 'pie',
radius: '55%',
center: ['50%', '50%'],
data: [
{ value: 335, name: '支付宝' },
{ value: 310, name: '银商二维码' },
{ value: 274, name: '会员' },
{ value: 235, name: '微信支付' },
{ value: 100, name: 'Pos通' }
].sort(function (a, b) { return a.value - b.value; }),
roseType: 'radius',
label: {
normal: {
textStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
}
},
labelLine: {
normal: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
},
smooth: 0.2,
length: 10,
length2: 20
}
},
itemStyle: {
normal: {
color: '#c23531',
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
animationType: 'scale',
animationEasing: 'elasticOut',
animationDelay: function (idx) {
return Math.random() * 200;
}
}
]
},
}
},
// 导入组件
components: {
// 点聚合组件
},
// 创建完毕状态(里面是操作)
created() { },
// 挂载结束状态(里面是操作)
mounted() {
this.getSCE()
this.getSUM()
this.getClick()
this.getpay()
this.getpayNum()
},
// 里面的函数只有调用才会执行
methods: {
// 交易总笔数
getSCE() {
this.chart = Chart.init(this.$refs.SCEchart)
this.chart.setOption(this.SCEoption)
},
// 交易总金额
getSUM() {
this.chart = Chart.init(this.$refs.SUMEchart)
this.chart.setOption(this.SUMoption)
},
// 总点击量
getClick() {
this.chart = Chart.init(this.$refs.ClickEchart)
this.chart.setOption(this.Clickoption)
},
// 支付方式统计
getpay() {
this.chart = Chart.init(this.$refs.payEchart)
this.chart.setOption(this.payoption)
},
// 支付方式统计
getpayNum() {
this.chart = Chart.init(this.$refs.payNumEchart)
this.chart.setOption(this.payNumoption)
}
}
};
</script>
<style>
.stbox {
width: 100%;
height: 100%;
box-sizing: border-box;
}
.stbgc {
background-color: #fff;
height: 60px;
line-height: 60px;
border-radius: 5px;
padding: 0px 16px;
}
.stsearch {
text-align: center;
}
.text-c {
text-align: center;
}
.st-gbox {
background-color: #fff;
margin-top: 20px;
border-radius: 5px;
height: 30vh;
box-sizing: border-box;
padding: 10px;
}
.cavasbox {
box-sizing: border-box;
width: 100%;
height: 100%;
}
.paybox {
width: 100%;
background-color: #fff;
box-sizing: border-box;
border-radius: 5px;
margin-top: 20px;
height: 32vh;
}
</style>commodity management component
<template>
<div>
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>商品管理</el-breadcrumb-item>
</el-breadcrumb>
<el-form :inline="true" :model="formInline" class="user-search">
<el-form-item label="搜索：">
<el-input size="small" v-model="formInline.deptName" placeholder="输入部门名称"></el-input>
</el-form-item>
<el-form-item label="">
<el-input size="small" v-model="formInline.deptNo" placeholder="输入部门代码"></el-input>
</el-form-item>
<el-form-item>
<el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
<el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()">添加</el-button>
</el-form-item>
</el-form>
<!--列表-->
<el-table size="small" :data="listData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
<el-table-column align="center" type="selection" width="60">
</el-table-column>
<el-table-column sortable prop="deptName" label="部门名称" width="300">
</el-table-column>
<el-table-column sortable prop="deptNo" label="部门代码" width="300">
</el-table-column>
<el-table-column sortable prop="editTime" label="修改时间" width="300">
<template slot-scope="scope">
<div>{
{scope.row.editTime|timestampToTime}}</div>
</template>
</el-table-column>
<el-table-column sortable prop="editUser" label="修改人" width="300">
</el-table-column>
<el-table-column align="center" label="操作" min-width="300">
<template slot-scope="scope">
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页组件 -->
<Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
<!-- 编辑界面 -->
<el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click="closeDialog">
<el-form label-width="120px" :model="editForm" :rules="rules" ref="editForm">
<el-form-item label="部门名称" prop="deptName">
<el-input size="small" v-model="editForm.deptName" auto-complete="off" placeholder="请输入部门名称"></el-input>
</el-form-item>
<el-form-item label="部门代码" prop="deptNo">
<el-input size="small" v-model="editForm.deptNo" auto-complete="off" placeholder="请输入部门代码"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button size="small" @click="closeDialog">取消</el-button>
<el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm('editForm')">保存</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { deptList, deptSave, deptDelete } from '../../api/userMG'
import Pagination from '../../components/Pagination'
export default {
data() {
return {
nshow: true, //switch开启
fshow: false, //switch关闭
loading: false, //是显示加载
editFormVisible: false, //控制编辑页面显示与隐藏
title: '添加',
editForm: {
deptId: '',
deptName: '',
deptNo: '',
token: localStorage.getItem('logintoken')
},
// rules表单验证
rules: {
deptName: [
{ required: true, message: '请输入部门名称', trigger: 'blur' }
],
deptNo: [{ required: true, message: '请输入部门代码', trigger: 'blur' }]
},
formInline: {
page: 1,
limit: 10,
varLable: '',
varName: '',
token: localStorage.getItem('logintoken')
},
// 删除部门
seletedata: {
ids: '',
token: localStorage.getItem('logintoken')
},
userparm: [], //搜索权限
listData: [], //用户数据
// 分页参数
pageparm: {
currentPage: 1,
pageSize: 10,
total: 10
}
}
},
// 注册组件
components: {
Pagination
},
/**
* 数据发生改变
*/
/**
* 创建完毕
*/
created() {
this.getdata(this.formInline)
},
/**
* 里面的方法只有被调用才会执行
*/
methods: {
// 获取公司列表
getdata(parameter) {
this.loading = true
// 模拟数据开始
let res = {
code: 0,
msg: null,
count: 5,
data: [
{
addUser: null,
editUser: null,
addTime: 1521062371000,
editTime: 1526700200000,
deptId: 2,
deptName: 'XX分公司',
deptNo: '1',
parentId: 1
},
{
addUser: null,
editUser: null,
addTime: 1521063247000,
editTime: 1526652291000,
deptId: 3,
deptName: '上海测试',
deptNo: '02',
parentId: 1
},
{
addUser: null,
editUser: null,
addTime: 1526349555000,
editTime: 1526349565000,
deptId: 12,
deptName: '1',
deptNo: '11',
parentId: 1
},
{
addUser: null,
editUser: null,
addTime: 1526373178000,
editTime: 1526373178000,
deptId: 13,
deptName: '5',
deptNo: '5',
parentId: 1
},
{
addUser: null,
editUser: null,
addTime: 1526453107000,
editTime: 1526453107000,
deptId: 17,
deptName: 'v',
deptNo: 'v',
parentId: 1
}
]
}
this.loading = false
this.listData = res.data
this.pageparm.currentPage = this.formInline.page
this.pageparm.pageSize = this.formInline.limit
this.pageparm.total = res.count
deptList(parameter)
.then(res => {
this.loading = false
if (res.success == false) {
this.$message({
type: 'info',
message: res.msg
})
} else {
this.listData = res.data
// 分页赋值
this.pageparm.currentPage = this.formInline.page
this.pageparm.pageSize = this.formInline.limit
this.pageparm.total = res.count
}
})
.catch(err => {
this.loading = false
this.$message.error('菜单加载失败，请稍后再试！')
})
},
callFather(parm) {
this.formInline.page = parm.currentPage
this.formInline.limit = parm.pageSize
this.getdata(this.formInline)
},
search() {
this.getdata(this.formInline)
},
handleEdit: function(index, row) {
this.editFormVisible = true
if (row != undefined && row != 'undefined') {
this.title = '修改'
this.editForm.deptId = row.deptId
this.editForm.deptName = row.deptName
this.editForm.deptNo = row.deptNo
} else {
this.title = '添加'
this.editForm.deptId = ''
this.editForm.deptName = ''
this.editForm.deptNo = ''
}
},
submitForm(editData) {
this.$refs[editData].validate(valid => {
if (valid) {
deptSave(this.editForm)
.then(res => {
this.editFormVisible = false
this.loading = false
if (res.success) {
this.getdata(this.formInline)
this.$message({
type: 'success',
message: '公司保存成功！'
})
} else {
this.$message({
type: 'info',
message: res.msg
})
}
})
.catch(err => {
this.editFormVisible = false
this.loading = false
this.$message.error('公司保存失败，请稍后再试！')
})
} else {
return false
}
})
},
// 删除公司
deleteUser(index, row) {
this.$confirm('确定要删除吗?', '信息', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
deptDelete(row.deptId)
.then(res => {
if (res.success) {
this.$message({
type: 'success',
message: '公司已删除!'
})
this.getdata(this.formInline)
} else {
this.$message({
type: 'info',
message: res.msg
})
}
})
.catch(err => {
this.loading = false
this.$message.error('公司删除失败，请稍后再试！')
})
})
.catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
})
})
},
closeDialog() {
this.editFormVisible = false
}
}
}
</script>
<style scoped>
.user-search {
margin-top: 20px;
}
.userRole {
width: 100%;
}
</style> 7. App.vue component
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
<style>
html,
body {
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 0px;
margin: 0px;
}
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
widows: 100%;
height: 100%;
}
</style>8. main.js (core code)
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App';
// 引入路由
import router from './router';
// 引入状态管理
import store from './vuex/store';
import './assets/icon/iconfont.css'
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
import axios from 'axios';
Vue.prototype.$axios = axios;
Vue.config.productionTip = false;
// 使用element UI
Vue.use(ElementUI);
import * as custom from './utils/util'
Object.keys(custom).forEach(key => {
Vue.filter(key, custom[key])
})
router.beforeEach((to, from, next) => {
if (to.matched.length != 0) {
if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
if (Boolean(localStorage.getItem("userInfo"))) { // 通过vuex state获取当前的user是否存在
next();
} else {
next({
path: '/login',
query: { redirect: to.fullPath } // 将跳转的路由path作为参数，登录成功后跳转到该路由
})
}
} else {
if (Boolean(localStorage.getItem("userInfo"))) { // 判断是否登录
if (to.path != "/" && to.path != "/login") { //判断是否要跳到登录界面
next();
} else {
/**
* 防刷新，如果登录，修改路由跳转到登录页面，修改路由为登录后的首页
*/
next({
path: '/goods/Goods'
})
}
} else {
next();
}
}
} else {
next({
path: '/login',
query: { redirect: to.fullPath } // 将跳转的路由path作为参数，登录成功后跳转到该路由
})
}
})
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>',
data: {
Bus: new Vue()
}
})Summarize
The above is what I will talk about today. This article mainly introduces the usage tutorial of Vue, and shares the background commodity management system built with Vue. It is very important for software developers to learn Vue technology well, not only because Vue technology is popular, but also Vue's ecological technology is relatively complete, can be applied to different scenarios, reduce the difficulty of enterprise development, and greatly improve work efficiency. Vue's official technicians are also constantly maintaining and updating Vue technology. I will introduce it here today. I hope it can be helpful to everyone. , Friends who like it, please support it three times in a row ! More excellent projects are waiting for you!