Vue速成day10--后台管理项目需要项目图纸的童鞋，点击传送门umall后台管理

93 阅读 0 评论 62 点赞

我是靠谱客的博主可耐裙子，这篇文章主要介绍Vue速成day10--后台管理项目需要项目图纸的童鞋，点击传送门umall后台管理，现在分享给大家，希望可以做个参考。

需要项目图纸的童鞋，点击传送门

umall后台管理

1 、创建项目

复制代码

1
2
vue init webpack umall

2 、清空工作

1 、assets清空

2 、components清空

3 、router/index.js删除helloword相关的

复制代码

1
2
3
4
5
6
7
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: []
})

4 、App.vue重置

3 、项目搭建

1 、目录结构

src
-assets 静态资源
-css 存放css
-js 存放js
-components 公共组件
index.js 整合公共组件

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
-filters 过滤器
index.js 整合所有过滤器
-page 路由组件
-router 路由
index.js 所有路由信息
-store 仓库
index.js 创建仓库并导出
mutations.js 根级别下的state mutations getters
actions.js 根级别下的actions
-modules 模块
-util 工具类
alert.js 二次封装弹窗
request.js 数据交互
App.vue 根组件
main.js 入口文件

2 、assets

在main.js中引入reset.css

复制代码

1
2
import "./assets/css/reset.css"

3 、公共组件components

在components/index.js中

复制代码

1
2
3
4
5
6
7
import Vue from "vue"
let obj = {
}
for(let i in obj){
Vue.component(i,obj[i])
}

在main.js中引入components/index.js

复制代码

1
2
import "./components/index.js"

4 、路由组件的格式duck

pages
-home
home.vue
-components
banner.vue
list.vue
-detail
detail.vue
-components
pick.vue

5 、数据交互

1 、安装依赖包

复制代码

1
2
npm i axios qs --save

2 、在config/index.js中配置代理

复制代码

1
2
3
4
5
6
7
8
9
10
proxyTable: {
"/api":{
target:"http://localhost:3000",
changeOrigin:true,
pathRewrite:{
"^/api":"http://localhost:3000"
}
}
}

3 、在utils/request.js中

复制代码

1
2
3
4
5
6
7
8
9
10
11
import axios from "axios"
import qs from "qs"
let baseUrl = "/api"
// 响应拦截
axios.interceptors.response.use(res=>{
console.group("======本次请求的路径："+ res.config.url)
console.log(res)
console.groupEnd("请求结束")
return res
})

6 、过滤器filters

在filter/index.js中

复制代码

1
2
3
4
5
6
7
import Vue from "vue"
let obj = {
}
for(let i in obj){
Vue.filter(i,obj[i])
}

在main.js中

复制代码

1
2
3
import "./filters/index.js"

7 、vuex

1 、安装

复制代码

1
2
3
npm i vuex --save

2 、目录搭建

复制代码

1
2
3
4
5
6
7
-store 仓库
index.js 创建仓库并导出
mutations.js 根级别下的state getters mutations
actions.js 根级别下的actions
-modules 模块

3 、在store/index.js中

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
import {state,getters,mutations} from "./mutations"
import {actions} from "./actions"
export default new Vuex.Store({
state,
getters,
mutations,
actions,
modules:{
}
})

4 、在main.js中挂到vue的配置项中

复制代码

1
2
3
4
5
6
7
8
9
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})

8 、elementui

1 、安装依赖包

复制代码

1
2
3
npm i element-ui --save

2 、在main.js中

复制代码

1
2
3
4
5
import ElementUI from "element-ui"
import "element-ui/lib/theme-chalk/index.css"
Vue.use(ElementUI)

3 、在util/alert.js二次封装弹窗

先去elementui官网中找到弹窗的代码，复制到我们自己的文件中进行二次封装

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import Vue from "vue"
let vm = new Vue()
export const successAlert = (msg) => {
vm.$message({
message: msg,
type: 'success'
})
}
export const warningAlert = (msg) => {
vm.$message({
message: msg,
type: 'warning'
})
}

4 、配置一级路由

1 、在pages下创建了index和login文件夹，文件夹下分别创建了index.vue和login.vue

2 、在router/index.js中配置路由规则

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
routes: [
{
path:"/login",
component:()=>import("../page/login/login.vue")
},
{
path:"/",
component:()=>import("../page/index/index.vue")
}
]

3 、在App.vue中设置路由出口

复制代码

1
2
3
<router-view></router-view>

5 、login.vue

1 、html+css

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
<div class="login">
<div class="box">
<h3 class="center marginBottom">登录</h3>
<div class="marginBottom">
<el-input placeholder="请输入用户名"></el-input>
</div>
<div class="marginBottom">
<el-input placeholder="请输入密码"></el-input>
</div>
<div class="center">
<el-button type="primary">登录</el-button>
</div>
</div>
</div>
</template>
<style scoped>
</style>

2 、粘贴NavMenu导航

复制代码

<el-col :span="12">
<h5>自定义颜色</h5>
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
background-color="#545c64"
.login{
width: 100vw;
height: 100vh;
background: linear-gradient(to right,rgb(74,41,55),rgb(37,51,
5));
position: relative;
}
.box{
width: 400px;
padding: 20px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
background: white;
border-radius: 10px;
}
.center{
text-align: center;
}
.marginBottom{
margin-bottom: 20px;
}
text-color="#fff"
active-text-color="#ffd04b">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航一</span>
</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">选项 1 </el-menu-item>
<el-menu-item index="1-2">选项 2 </el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项 3 </el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项 4 </template>
<el-menu-item index="1-4-1">选项 1 </el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<i class="el-icon-document"></i>
<span slot="title">导航三</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">导航四</span>
</el-menu-item>
</el-menu>
</el-col>
</el-row>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<el-col :span="12">
<h5>自定义颜色</h5>
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
background-color="#545c64"
.login{
width: 100vw;
height: 100vh;
background: linear-gradient(to right,rgb(74,41,55),rgb(37,51,
5));
position: relative;
}
.box{
width: 400px;
padding: 20px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
background: white;
border-radius: 10px;
}
.center{
text-align: center;
}
.marginBottom{
margin-bottom: 20px;
}
text-color="#fff"
active-text-color="#ffd04b">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航一</span>
</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">选项 1 </el-menu-item>
<el-menu-item index="1-2">选项 2 </el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项 3 </el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项 4 </template>
<el-menu-item index="1-4-1">选项 1 </el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<i class="el-icon-document"></i>
<span slot="title">导航三</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">导航四</span>
</el-menu-item>
</el-menu>
</el-col>
</el-row>

3 、在中定义二级路由出口

复制代码

1
2
3
4
5
6
<el-main>
<!-- 二级路由出口 -->
<router-view></router-view>
</el-main>

4 、创建二级组件

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
首页 home
菜单管理 menu
角色管理 role
管理员管理 manage
商品分类 cate
商品规格 specs
商品管理 goods
会员管理 member
轮播图管理 banner
秒杀活动 seckill

5 、配置二级路由规则router/index.js

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
children:[
{
path:"menu",
component:()=>import("../page/menu/menu.vue")
},
{
path:"role",
component:()=>import("../page/role/role.vue")
},
{
path:"manage",
component:()=>import("../page/manage/manage.vue")
},
{
path:"cate",
component:()=>import("../page/cate/cate.vue")
},
{
path:"specs",
component:()=>import("../page/specs/specs.vue")
},
{
path:"goods",
component:()=>import("../page/goods/goods.vue")
},
{
path:"member",
component:()=>import("../page/member/member.vue")
},
{
path:"banner",
component:()=>import("../page/banner/banner.vue")
},
{
path:"seckill",
component:()=>import("../page/seckill/seckill.vue")
}
]

6 、实现侧边栏

复制代码

<el-aside width="200px" class="left">


<el-menu default-active="2" class="el-menu-vertical-demo" bac
kground-color="rgb(21,23,31)" text-color="#fff"
router unique-opened active-text-color="#ffd04b">

<el-menu-item index="1-1">
<i class="el-icon-location"></i>
<span>首页</span>
</el-menu-item>

<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>系统设置</span>
</template>
<el-menu-item-group>
<el-menu-item index="/menu">
<span>菜单管理</span>
</el-menu-item>
<el-menu-item index="/role">
<span>角色管理</span>
</el-menu-item>
<el-menu-item index="/manage">
<span>管理员管理</span>
</el-menu-item>
</el-menu-item-group>
</el-submenu>

<el-submenu index="2">
<template slot="title">
<i class="el-icon-location"></i>
<span>商城管理</span>
</template>
<el-menu-item-group>
<el-menu-item index="/cate">
<span>商品分类</span>
</el-menu-item>
<el-menu-item index="/specs">
<span>商品规格</span>
</el-menu-item>
<el-menu-item index="/goods">
<span>商品管理</span>
</el-menu-item>
<el-menu-item index="/member">
<span>会员管理</span>
</el-menu-item>
<el-menu-item index="/banner">
<span>轮播图管理</span>
</el-menu-item>
<el-menu-item index="/seckill">
<span>秒杀活动</span>
</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</el-aside>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<el-aside width="200px" class="left">
<!-- 左侧导航 -->
<!--
background-color 背景颜色
text-color 文字颜色
active-text-color 选中的那一个颜色
unique-opened 只保持一个打开
router 开启路由模式
-->
<el-menu default-active="2" class="el-menu-vertical-demo" bac
kground-color="rgb(21,23,31)" text-color="#fff"
router unique-opened active-text-color="#ffd04b">
<!-- 首页 -->
<el-menu-item index="1-1">
<i class="el-icon-location"></i>
<span>首页</span>
</el-menu-item>
<!-- 系统设置 -->
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>系统设置</span>
</template>
<el-menu-item-group>
<el-menu-item index="/menu">
<span>菜单管理</span>
</el-menu-item>
<el-menu-item index="/role">
<span>角色管理</span>
</el-menu-item>
<el-menu-item index="/manage">
<span>管理员管理</span>
</el-menu-item>
</el-menu-item-group>
</el-submenu>
<!-- 商城管理 -->
<el-submenu index="2">
<template slot="title">
<i class="el-icon-location"></i>
<span>商城管理</span>
</template>
<el-menu-item-group>
<el-menu-item index="/cate">
<span>商品分类</span>
</el-menu-item>
<el-menu-item index="/specs">
<span>商品规格</span>
</el-menu-item>
<el-menu-item index="/goods">
<span>商品管理</span>
</el-menu-item>
<el-menu-item index="/member">
<span>会员管理</span>
</el-menu-item>
<el-menu-item index="/banner">
<span>轮播图管理</span>
</el-menu-item>
<el-menu-item index="/seckill">
<span>秒杀活动</span>
</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</el-aside>

7 、设置面包屑，先完成第 8 步添加name

复制代码

1
2
3
4
5
6
7
8
9
10
11
<el-main>
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-ite
m>
<el-breadcrumb-item>{{$route.name}}</el-breadcrumb-item>
</el-breadcrumb>
<!-- 二级路由出口 -->
<router-view></router-view>
</el-main>

8 、给二级路由设置name

{

复制代码

1
2
3
4
5
6
7
8
9
10
11
path: "role",
name:"角色管理",
component: () => import("../page/role/role.vue")
},
{
path: "manage",
name:"管理员管理",
component: () => import("../page/manage/manage.vue")
}

6 、菜单管理menu.vue

1 、拆分。分成list.vue和add.vue

复制代码

1
2
3
4
5
6
7
8
9
<template>
<div>
<el-button type="primary">添加</el-button>
<v-list></v-list>
<v-add></v-add>
</div>
</template>

2 、list

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
//html
<template>
<div>
<template>
<el-table :data="tableData" border style="width: 100%">
<el-table-column prop="date" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
</template>
</div>
</template>
//模拟数据
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]

2 、add

复制代码

vue
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="菜单名称">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="上级菜单">
<el-select v-model="form.name" placeholder="请选择上级菜单">
<el-option label="顶级菜单" value="shanghai"></el-option>
</el-select>
</el-form-item>
<el-form-item label="菜单类型">
<el-radio v-model="form.name" label="1">目录</el-radio>
<el-radio v-model="form.name" label="2">菜单</el-radio>
</el-form-item>
<el-form-item label="菜单图标">
<el-select v-model="form.name" placeholder="请选择上级菜单">
<el-option v-for="item in icons" :key="item" :value="it
em">
<i :class="item"></i>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="菜单地址">
<el-select v-model="form.name" placeholder="请选择上级菜单">
<el-option
v-for="item in indexRoutes"
:key="item.path"
:label="item.name"
:value="'/' + item.path"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="状态">
<el-switch v-model="form.name" :active-value="1" :inactiv
e-value="2"></el-switch>
</el-form-item>
</el-form>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
vue
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="菜单名称">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="上级菜单">
<el-select v-model="form.name" placeholder="请选择上级菜单">
<el-option label="顶级菜单" value="shanghai"></el-option>
</el-select>
</el-form-item>
<el-form-item label="菜单类型">
<el-radio v-model="form.name" label="1">目录</el-radio>
<el-radio v-model="form.name" label="2">菜单</el-radio>
</el-form-item>
<el-form-item label="菜单图标">
<el-select v-model="form.name" placeholder="请选择上级菜单">
<el-option v-for="item in icons" :key="item" :value="it
em">
<i :class="item"></i>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="菜单地址">
<el-select v-model="form.name" placeholder="请选择上级菜单">
<el-option
v-for="item in indexRoutes"
:key="item.path"
:label="item.name"
:value="'/' + item.path"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="状态">
<el-switch v-model="form.name" :active-value="1" :inactiv
e-value="2"></el-switch>
</el-form-item>
</el-form>

data() {
return {
//图标
icons: [
“el-icon-s-tools”,
“el-icon-user”,
“el-icon-camera”,
“el-icon-message-solid”,
],
//路由
indexRoutes: indexRoutes,
form: {
name: “”,
},
};
},

4 、添加对话框

复制代码

1
2
3
4
5
6
7
8
9
10
11
<el-dialog title="添加菜单" :visible.sync="info.isshow">
<el-form ref="form" :model="form" label-width="80px">
...
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="cancel">取 消</el-button>
<el-button type="primary">添 加</el-button>
</div>
</el-dialog>

对话框需要一个变量isshow来控制出现和消失，将数据isshow定义在menu.vue中，传递过

来，但是dialog需要直接修改这个数据，所以不能传递简单类型，需要传递一个json格式的

数据，才可以实现父变子变，子变父变得要求。

menu.vue

复制代码

1
2
3
4
5
6
7
8
data() {
return {
//传递给add的数据
isShow: {
//添加弹框的状态
isShow: false,

},

};

},

复制代码

1
2
3
4
5
6
7
8
9
methods: {
//点击了添加按钮
willAdd() {
this.info.isShow = true;
},
},
<v-add :info="info"></v-add>

add.vue通过props接收

{

复制代码

1
2
3
4
5
props:["info"]
}
<el-dialog :visible.sync="info.isshow"></el-dialog>

5 、交互的接口 utils/request.js

// 添加

复制代码

1
2
3
4
5
6
7
8
9
export const reqMenuAdd = (form) => {
return axios({
url: baseUrl + "/api/menuadd",
method: "post",
data: qs.stringify(form)
})
}

6 、add.vue 添加交互

6.1、form的字段和后端保持一致，然后绑定到每个表单上

复制代码

1
2
3
4
5
6
7
8
9
10
form: {
pid: 0 ,
title: "",
icon: "",
type: 1 ,
url: "",
status: 1 ,
}

6.2、点击了添加按钮，开始添加交互

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
methods: {
...mapActions({}),
// 点击取消
cancel() {
this.info.isShow = false;
this.empty()
},
// 作用：用来重置form数据
empty() {
this.form = {
pid: 0 ,
title: "",
icon: "",
type: 1 ,
url: "",
status: 1 ,
};
},
// 点击提交
add() {
reqMenuAdd(this.form).then(res=>{
if(res.data.code === 200 ){
// 弹窗
successAlert(res.data.msg)
// 取消弹窗并重置form数据
this.cancel()
}else{
warningAlert(res.data.msg)
}
})
},
}

7 、list.vue 添加交互

7.1、铺页面

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
// html
<el-table
:data="list"
style="width: 100%; margin-bottom: 20px"
row-key="id"
border
:tree-props="{ children: 'children' }">
<el-table-column prop="id" label="菜单编号" sortable width="
0">
</el-table-column>
<el-table-column prop="title" label="菜单名称" sortable widt
h="180">
</el-table-column>
<el-table-column label="菜单图标">
<template slot-scope="scope">
<i :class="scope.row.icon"></i>
</template>
</el-table-column>
<el-table-column prop="url" label="菜单地址"> </el-table-colum
n>
<el-table-column label="状态">
<template slot-scope="scope">
<el-button type="primary" v-if="scope.row.status==1">启
用</el-button>
<el-button type="info" v-else>禁 用</el-button>
</template>
</el-table-column>
<el-table-column label="操作">
<template>
<el-button type="primary">编辑</el-button>
<el-button type="danger">删除</el-button>
</template>
</el-table-column>
</el-table>

7.2、在store/modules/menu.js

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import {reqMenuList} from "../../util/request"
// 存放数据
const state = {
list:[]
}
// 修改数据
const mutations = {
changeList(state,arr){
state.list = arr
}
}
// 请求
const actions = {
reqChangeList(context){
reqMenuList().then(res=>{
context.commit("changeList",res.data.list)
})

}

// 导出数据

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const getters = {
list(state){
return state.list
}
}
export default{
state,
mutations,
actions,
getters,
// 命名空间
namespaced: true
}

7.2、list.vue中

进到页面第一件事先请求数据

复制代码

1
2
3
4
5
mounted() {
this.reqChangeList()
}

7.3、页面需要改动的地方

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<el-table-column label="菜单图标">
<template slot-scope="scope">
<i :class="scope.row.icon"></i>
</template>
</el-table-column>
<el-table-column label="状态">
<template slot-scope="scope">
<el-button type="primary" v-if="scope.row.status==1">启 用</el-b
utton>
<el-button type="info" v-else>禁 用</el-button>
</template>
</el-table-column>
<template>
<el-button type="primary">编辑</el-button>
<el-button type="danger">删除</el-button>
</template>

7.4、回到add.vue中

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
// 1、取出仓库里面的list
computed: {
...mapGetters({
list:"menu/list"
}),
},
methods: {
...mapActions({
reqChangeList:"menu/reqChangeList"
})
}
// 2、使用list渲染页面中的上级菜单
<el-form-item label="上级菜单">
<el-select v-model="form.pid" placeholder="请选择上级菜单" @chang
e="changePid">
<el-option label="顶级菜单" :value="0"></el-option>
<!-- 这里需要再次改变 -->
<el-option v-for="item in list" :key="item.id" :label="item.tit
le" :value="item.id"></el-option>
</el-select>
</el-form-item>
// 3、当changePid改变的时候changePid(){
if(this.form.pid == 0 ){
this.form.type = 1
}else{
this.form.type = 2
}
}
// 4、点击提交之后再刷新一下页面
add() {
reqMenuAdd(this.form).then(res=>{
if(res.data.code === 200 ){
// 弹窗
successAlert(res.data.msg)
// 取消弹窗并重置form数据
this.cancel()
// 刷新list列表
this.reqChangeList()
}else{
warningAlert(res.data.msg)
}
})
}

8 、删除

8.1、删除按钮添加点击事件

复制代码

1
2
3
<el-button type="danger" @click="del(scope.row.id)">删除</el-button>

8.2、util/request.js中配置删除的接口

8.3、操作删除

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
del(id){
this.$confirm('确认删除吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 说明已经点击了确定
reqMenuDel(id).then(res=>{
if(res.data.code == 200 ){
successAlert(res.data.msg)
this.reqChangeList()
}else{
warningAlert(res.data.msg)
}
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
}

9 、编辑功能

9.1、list.vue 点击了编辑按钮

复制代码

1
2
3
4
5
6
7
8
<el-button type="primary" @click="update(scope.row.id)">编辑</el-but
ton>
update(id){
// 去通知父级做某些事
this.$emit("update",id)
}

9.2、menu.vue 触发自定事件 update,收到id，弹出弹框，让add.vue 的getOne函数执行

复制代码

1
2
3
4
<v-list @update="update"></v-list>
<v-add :info="isShow" ref="aaa"></v-add>

//编辑

复制代码

1
2
3
4
5
6
7
update(id) {
this.isShow.isShow = true;
this.isShow.isAdd = false;
this.$refs.aaa.getOne(id)
}

9.3、add.vue getOne函数开始请求一条数据，请求完成后，赋值给form,但是请求得到的数

据中没有id字段，但是一会儿修改是要id的，所以要补一个id

// 获取一条数据信息

复制代码

1
2
3
4
5
6
7
8
getOne(id){
reqMenuOne(id).then(res=>{
this.form = res.data.list
this.form.id = id
})
},

9.4、add.vue点击了修改按钮

// 修改

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
update(){
reqMenuUpdate(this.form).then(res=>{
if(res.data.code === 200 ){
successAlert(res.data.msg)
// 关闭弹窗并重置数据
this.cancel()
// 刷新list列表
this.reqChangeList()
}else{
warningAlert(res.data.msg)
}
})
}

封装删除按钮

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// delBtn.vue html
<el-button type="danger" @click="del">删除</el-button>
// delBtn.vue js
methods: {
del(id) {
this.$confirm("确认删除吗？", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
// 子传父 通过自定义事件，通知父组件执行某些事
this.$emit("del2")
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除",
});
});
},
}
// role.vue html
<del-btn @del2="del2(scope.row.id)"></del-btn>
// role.vue js
del2(id){
reqRoleDel(id).then((res) => {
if (res.data.code == 200 ) {
successAlert(res.data.msg);
// 重新刷新列表
this.reqChangeList();
} else {
warningAlert(res.data.msg);
}
});
}

7 、role角色管理

1 、拆分静态页(和menu页面一样)

2 、修改页面(注意add页面需要使用树形控件)

3 、统一设置接口

4 、vuex状态层设置列表请求接口(roleList，写完不要忘了在index.js中引用)

5 、add.vue添加功能

5.1、一进页面就要请求menu的list列表数据

复制代码

1
2
3
4
5
6
7
8
mounted() {
// 为什么需要请求menuList。因为list没有数据
if (this.list.length === 0 ) {
this.reqChangeList();
}
}

5.1、点击确定(发送请求，发送请求的时候不要忘了把树形控件的数据也加到form)

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
add() {
this.form.menus = JSON.stringify(this.$refs.tree.getCheckedKey
s());
reqRoleAdd(this.form).then((res) => {
if (res.data.code === 200 ) {
// 弹窗
successAlert(res.data.msg);
// 取消弹窗并重置form数据
this.cancel();
// 刷新list列表
this.reqRoleChangeList();
} else {
warningAlert(res.data.msg);
}
});
}

6 、list.vue列表渲染功能

6.1、直接请求状态层roleList的数据

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
computed: {
...mapGetters({
list: "role/list",
}),
},
methods: {
...mapActions({
reqChangeList: "role/reqChangeList",
})
}

7 、删除

7.1、点击删除(发送请求)

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
del2(id){
reqRoleDel(id).then((res) => {
if (res.data.code == 200 ) {
successAlert(res.data.msg);
// 重新刷新列表
this.reqChangeList();
} else {
warningAlert(res.data.msg);
}
});
}

8 、编辑

8.1、获取一条信息(注意，不要忘了把树形控件的数据渲染进去)

复制代码

1
2
3
4
5
6
7
8
9
10
11
getOne(id) {
reqRoleOne(id).then((res) => {
console.log(res);
this.form = res.data.list;
this.form.id = id;
// 设置树形控件
this.$refs.tree.setCheckedKeys(JSON.parse(res.data.list.menus))
});
}

8.2、点击确定(注意，不要忘了把树形控件的数据一起发送出去)

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
update() {
// 点击修改form的其他数据是加上了，但是menus需要重新设置一下
this.form.menus = JSON.stringify(this.$refs.tree.getCheckedKey
s());
reqRoleUpdate(this.form).then((res) => {
if (res.data.code === 200 ) {
successAlert(res.data.msg);
// 关闭弹窗并重置数据
this.cancel();
// 刷新RoleList列表
this.reqRoleChangeList();
} else {
warningAlert(res.data.msg);
}
});
}

8 、管理员管理

1 、拆分静态页(和menu页面一样)

2 、修改页面

3 、统一设置接口

4 、vuex状态层设置列表请求接口(manageList，写完不要忘了在index.js中引用)

5 、add.vue添加功能

5.1、一进页面就要请求role的list列表数据

复制代码

1
2
3
4
5
6
7
mounted() {
if(this.list.length=== 0 ){
this.reqChangeList()
}
}

5.2、点击确定

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
add() {
console.log(this.form)
reqManageAdd(this.form).then(res=>{
if(res.data.code === 200 ){
// 弹窗
successAlert(res.data.msg)
// 取消弹窗并重置form数据
this.cancel()
// 刷新list列表
this.reqManageList()
}else{
warningAlert(res.data.msg)
}
})
}

6 、列表渲染

6.1、注意接口需要的是uid而不是id

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
computed: {
...mapGetters({
list: "manage/list",
}),
},
methods: {
...mapActions({
reqChangeList: "manage/reqChangeList",
})
}

7 、删除

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
del2(uid) {
reqManageDel(uid).then((res) => {
if (res.data.code == 200 ) {
successAlert(res.data.msg);
this.reqChangeList();
} else {
warningAlert(res.data.msg);
}
});
}

8 、编辑功能

8.1、获取一条信息

复制代码

1
2
3
4
5
6
7
8
9
getOne(uid){
reqManageOne(uid).then(res=>{
this.form = res.data.list
this.form.roleid = res.data.list.roleid
this.form.password = ''
})
}

8.2、修改的功能

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
update(){
reqManageUpdate(this.form).then(res=>{
if(res.data.code === 200 ){
successAlert(res.data.msg)
// 关闭弹窗并重置数据
this.cancel()
// 刷新list列表
this.reqManageList()
}else{
warningAlert(res.data.msg)
}
})
}

分页

1 、在elementui中把分页的组件复制过来

复制代码

1
2
3
4
5
<el-pagination background layout="prev, pager, next" :total="total"
:page-size="size" @current-change="changePage">
</el-pagination>

2 、total数据的总条数，pagesize每页的数量

3 、在状态层定义size和tatal并导出。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
const state = {
// 列表数据
list:[],
// 每页显示的条数
size: 2 ,
// 总数据条数
total: 0
}
const mutations = {
// 修改总数据条数total
changeTotal(state,num){
state.total = num
},
}
const actions = {
// 请求总数据条数
reqChangeTotal(context){
reqManageCount().then(res=>{
context.commit("changeTotal",res.data.list[ 0 ].total)
})
}
const getters = {
// 导出总数据条数total
total(state){
return state.total
}
}

4 、在状态层定义了当前页码page

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
const state = {
// 当前页码数
page: 1
}
const mutations = {
// 修改当前页码page
changePage(state,num){
state.page = num
}
}
const actions = {
// 修改当前页码page
reqChangePage(context,num){
// 组件修改了页码
context.commit("changePage",num)
// 重新请求list数据
context.dispatch("reqChangeList")
}
}
const getters = {
// 导出当前页码
page(state){
return state.page
}
}

5 、在list.vue中如果修改了当前页码，就把状态层的page一起改掉

// 修改了当前页码

复制代码

1
2
3
4
5
changePage(e){
this.reqChangePage(e)
}

6 、在状态层reqChangePage中

6.1、修改当前页码

6.2、重新请求列表数据

复制代码

1
2
3
4
5
6
7
8
9
// 修改当前页码page
reqChangePage(context,num){
// 组件修改了页码
context.commit("changePage",num)
// 重新请求list数据
context.dispatch("reqChangeList")
}

7 、在添加、删除、页面一进来都需要先请求数据总数

8 、处理小BUG

复制代码

1
2
3
4
5
6
7
8
const actions = {
// 请求列表数据
reqChangeList(context){
reqManageList({page:context.state.page,size:context.state.size}).t
hen(res=>{
// 如果取list的时候，取到null，那么有可能是最后一页没数据，需要减一

页，再次请求list
let list = res.data.list?res.data.list:[]
// 如果取到的数据是null，并且不是第一页的时候，页码就减一，重新请求list
if(context.state.page > 1 && list.length== 0 ){
context.commit(“changePage”,context.state.page- 1 )
context.dispatch(“reqChangeList”)
return;
}
context.commit(“changeList”,list)
})
}
}

最后

以上就是可耐裙子最近收集整理的关于Vue速成day10--后台管理项目需要项目图纸的童鞋，点击传送门umall后台管理的全部内容，更多相关Vue速成day10--后台管理项目需要项目图纸的童鞋，点击内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：Vue
浏览次数：93 次浏览
发布日期：2023-12-19 12:25:26
本文链接：https://www.kaopuke.com/article/k-p-k_13_u_23_o_2_f0_13__23__2_w.html

Vue速成day10--后台管理项目需要项目图纸的童鞋，点击 传送门umall后台管理

需要项目图纸的童鞋，点击 传送门

umall后台管理

1 、创建项目

2 、清空工作

1 、assets清空

2 、components清空

3 、router/index.js删除helloword相关的

4 、App.vue重置

3 、项目搭建

1 、目录结构

2 、assets

在main.js中引入reset.css

3 、公共组件components

在components/index.js中

在main.js中引入components/index.js

4 、路由组件的格式duck

5 、数据交互

1 、安装依赖包

2 、在config/index.js中配置代理

3 、在utils/request.js中

6 、过滤器filters

在filter/index.js中

在main.js中

7 、vuex

1 、安装

2 、目录搭建

3 、在store/index.js中

4 、在main.js中挂到vue的配置项中

8 、element­ui

1 、安装依赖包

2 、在main.js中

3 、在util/alert.js二次封装弹窗

先去element­ui官网中找到弹窗的代码，复制到我们自己的文件中进行二次封装

4 、配置一级路由

1 、在pages下创建了index和login文件夹，文件夹下分别创建了index.vue和login.vue

2 、在router/index.js中配置路由规则

3 、在App.vue中设置路由出口

5 、login.vue

1 、html+css

2 、粘贴NavMenu导航

3 、在中定义二级路由出口

4 、创建二级组件

5 、配置二级路由规则router/index.js

6 、实现侧边栏

7 、设置面包屑，先完成第 8 步添加name

8 、给二级路由设置name

{

6 、菜单管理menu.vue

1 、拆分。分成list.vue和add.vue

2 、list

2 、add

4 、添加对话框

对话框需要一个变量isshow来控制出现和消失，将数据isshow定义在menu.vue中，传递过

来，但是dialog需要直接修改这个数据，所以不能传递简单类型，需要传递一个json格式的

数据，才可以实现父变子变，子变 父变得要求。

menu.vue

},

};

},

add.vue通过props接收

{

5 、交互的接口 utils/request.js

// 添加

6 、add.vue 添加交互

6.1、form的字段和后端保持一致，然后绑定到每个表单上

6.2、点击了添加按钮，开始添加交互

7 、list.vue 添加交互

7.1、铺页面

7.2、在store/modules/menu.js

}

}

// 导出数据

7.2、list.vue中

进到页面第一件事先请求数据

7.3、页面需要改动的地方

7.4、回到add.vue中

8 、删除

8.1、删除按钮添加点击事件

8.2、util/request.js中配置删除的接口

Vue速成day10--后台管理项目需要项目图纸的童鞋，点击传送门umall后台管理

需要项目图纸的童鞋，点击传送门

8 、elementui

先去elementui官网中找到弹窗的代码，复制到我们自己的文件中进行二次封装

数据，才可以实现父变子变，子变父变得要求。

9.2、menu.vue 触发自定事件 update,收到id，弹出弹框，让add.vue 的getOne函数执行

据中没有id字段，但是一会儿修改是要id的，所以要补一个id

1 、在elementui中把分页的组件复制过来

2 、total数据的总条数，pagesize每页的数量

发表评论取消回复