登录功能
- 创建分支 git checkout -b login(login是新建分支名)
- git branch 是查看所有的分支 带*号的是你目前所在的分支名
- element-ui实现登录页面
- 开发依赖中安装less-loader和less,注意重新启动项目才会生效
- src/assets/css下面添加全局css样式配置
- main.js把全局css样式文件导入
2.1 Login实现基本布局
- src/components/Login.vue代码如下：
<!-- 登录页面 -->
<template>
<div class="login">
<div class="login_box">
<h3>登录页面</h3>
</div>
</div>
</template>
<script>
export default {
data() {
return {};
},
components: {}
};
</script>
<style lang='less' scoped>
.login {
width: 100%;
height: 100%;
background-color: #1bd1a5;
.login_box {
width: 768px;
height: 484px;
background-color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
</style>
- 依赖中安装开发依赖less和less-loader
注意
如果我们安装好less和less-laoder以后启动项目报这个错误
TypeError: this.getOptions is not a function
是因为我们的less-loader安装版本过高，我们用
npm uninstall less-laoder 卸载默认安装的10.0的版本
npm install less-loader@6.0.0
- src/assets/css/global.css
新建上面的css文件，样式代码如下：
* {
margin: 0;
padding: 0;
}
html,
body,
#app {
width: 100%;
height: 100%;
}
src/main.js导入样式文件并刷新，样式才会生效
// 导入全局样式文件
import "./assets/css/global.css";
-
src/router/index.js代码如下：
-
src/App.vue中添加路由占位符
<router-view></router-view>
此时页面显示效果如下：
2.2表单处理
把element-ui中提供的form组件粘贴过来，注意我们初识化项目的时候是按需导入，所以我们得plugins/element.js导入并注册你需要的element-ui中的组件。
import {Button, Form, FormItem, Input } from "element-ui";
Vue.use(Button);
Vue.use(Form);
Vue.use(FormItem);
Vue.use(Input);
结构如下：
<el-form ref="form" class="login_form" label-width="80px">
<el-form-item label="用户名">
<el-input></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input></el-input>
</el-form-item>
<el-form-item class="login_btn">
<el-button type="primary">登录</el-button>
<el-button type="success">重置</el-button>
</el-form-item>
</el-form>
样式代码如下：
.login_form {
width: 80%;
margin: 80px auto;
.login_btn {
text-align: center;
margin-top: 80px;
}
}
2.3字体图标
我们一般是把element-ui中提供的icon实现效果。
需要注意的是如果是input的icon在前面，添加如下类名
<el-input prefix-icon="el-icon-search"></el-input>
如果input的icon在后面，添加如下类名：
<el-input suffix-icon="el-icon-date"></el-input>
但是如果满足不了需求，可以从第三方库阿里巴巴的iconfont图标库中去获取图标。
- iconfont官网选择需要的图标，下载压缩包
- 把解压的文件夹重命名为fonts文件夹放在vue项目的assets文件夹中。
- main.js引入iconfont.css
// 导入字体图标样式
import "./assets/fonts/iconfont.css";
- vue页面使用字体图标，格式为
prefix-icon='iconfont xx'
或者
suffix-icon="iconfont xx"
此时页面显示如下:
2.4表单数据绑定
- form添加:model="loginForm"
- 每个el-input添加
<el-input v-model="loginForm.username" prefix-icon="iconfont icon-mima"></el-input>
<el-input v-model="loginForm.password" prefix-icon="iconfont icon-yonghuming"></el-input>
- data模型中初始化用户名和密码
data() {
return {
loginForm: {
username: "11",
password: "11"
}
};
2.5表单数据验证
- data定义验证规则对象
export default {
data() {
return {
loginForm: {
username: "",
password: ""
},
loginRules: {
username: [
{ required: true, message: "请输入用户名", trigger: "blur" },
{ min: 3, max: 8, message: "长度在 3 到 8个字符", trigger: "blur" }
],
password: [
{ required: true, message: "输入密码", trigger: "blur" },
{ min: 3, max: 8, message: "长度在 3 到 8 个字符", trigger: "blur" }
]
}
};
},
- 表单绑定验证规则对象
<el-form ref="form" :model="loginForm" :rules="loginRules" class="login_form" label-width="80px">
- el-form-item绑定验证属性
<el-form-item label="用户名" prop="username">
....
</el-form-item>
<el-form-item label="密码" prop="password">
....
</el-form-item>
2.6表单重置
- el-form添加ref属性
<el-form ref="loginForm">
....
</el-form>
- 重置按钮绑定事件
<el-button type="success" @click="resetInfo">重置</el-button>
- 事件处理逻辑
methods: {
resetInfo: function() {
this.$refs.loginForm.resetFields();
}
},
我们点击重置按钮的时候可以把用户输入的内容重置清空
- 我们的密码这时还是可见的，添加show-password属性
<el-input show-password v-model="loginForm.password" prefix-icon="iconfont icon-yonghuming"></el-input>
2.7请求登录接口
- main.js引入配置axios(前提确保自己安装了这个包)
// 导入并配置axios
import axios from "axios"; //导入axios
axios.defaults.baseURL = "http://127.0.0.1:8888/api/private/v1/"; //配置请求的根地址
Vue.prototype.$http = axios; //把axios通过$http属性挂载到Vue原型上，每一个vue实例都可以使用
- 登录按钮绑定事件，验证数据合法性
<el-button type="primary" @click="loginHandle">登录</el-button>
loginHandle中方法如下：
loginHandle: function() {
this.$refs.loginForm.validate(async valid => {
// 如果验证数据不合法，就不用请求后端接口了
if (!valid) {
return false;
}
const res = await this.$http.post("login", this.loginForm);
let { data, meta: { msg, status } } = res.data;
if (status != 200) {
return alert("登录失败");
}
alert("登录成功");
});
}
备注
登录成功的账号是admin，密码是123456
2.8弹窗组件
我们不管是登录成功还是登录失败都需要有消息提示弹窗，我们可以选择element-ui中的message组件。
- plugin/element.js引入并挂载Message组件
import { Message } from "element-ui";
// 把message挂载到vue原型对象上面
Vue.prototype.$msg = Message;
- 登录功能中使用弹窗
loginHandle: function() {
this.$refs.loginForm.validate(async valid => {
// 如果验证数据不合法，就不用请求后端接口了
if (!valid) {
return false;
}
const res = await this.$http.post("login", this.loginForm);
let { data, meta: { msg, status } } = res.data;
if (status != 200) {
return this.$msg({
message: "登录失败",
showClose: true,
type: "error"
});
}
this.$msg({
message: "登录成功",
showClose: true,
type: "success"
});
});
}
2.9 登录成功保存token
- 保存token
我们打印成功以后后台返回的内容：
token就是node服务后台给我们返回的token值，所以我们登录成功以后把它保存到sessionStorage中，方便下次验证。
// 保存token
sessionStorage.setItem("token", res.data.data.token);
- 新建首页Home.vue
src/components下面新建Home.vue,代码如下：
<!-- 首页内容 -->
<template>
<div>
<h3>我是首页内容</h3>
</div>
</template>
<script>
export default {
data() {
return {};
}
};
</script>
<style lang='less' scoped>
</style>
router/index.js中导入home并注册
- 编程路由跳转至首页
Login.vue登录成功的逻辑中添加页面跳转
// 跳转到首页
this.$router.push("home");
3.0导航守卫
我们希望用户登录成功以后再能访问home页面，如果他没有登录成功是不允许直接访问home页面的，此时我们需要用路由导航守卫来实现。
。。。。
const router = new VueRouter({
routes
});
// 设置路由导航守卫
router.beforeEach((to, from, next) => {
if (to.path === "/login") {
next(); //如果用户访问的是login页面，让用户正常访问。
} else {
// 如果用户访问的不是登录页，先去获取token，看看是否登录过
let token = sessionStorage.getItem("token");
if (!token) {
return next("/login"); //如果没有token，代表未登录，强制跳转到登录页让用户登录
} else {
next(); //如果有token，代表登录过，正常放行即可
}
}
});
export default router;
备注
我们测试的时候直接访问home页面（确保application中没有token值），此时会自动跳转到登录页。直接访问登录页面没有问题。
3.1退出功能
Home.vue中代码如下：
<!-- 首页内容 -->
<template>
<div>
<h3>我是首页内容</h3>
<el-button @click="logout">退出</el-button>
</div>
</template>
<script>
export default {
data() {
return {};
},
methods: {
logout: function() {
sessionStorage.clear(); //清空sessionStorage中的token信息
this.$router.push("/login"); //路由跳转到登录页面
}
}
};
</script>
<style lang='less' scoped>
</style>
3.2代码提交到远程仓库
- git status 查看代码状态（这个不是必须操作的，是为了方便查看你代码的状态）
- git add . （把刚才写的登录的所有代码提交到暂存区）
- git commit -m 'xxx' (把暂存区代码提交到本地仓库)
- git branch (查看你在哪个分支上，这个不是必须的，是为了方便查看你现在所处的分支)
- git checkout master (切换到主分支)
- git merge login (在主分支上合并了login的代码)
- git push 把本地主分支代码推送到远程的主分支上(我们上次用 git push -u origin master是为了在远程仓库也创建主分支master)
- git checkout login (本地还切换回来login分支)
- git push -u origin login(把本地login分支上的代码推送到远程login分支上，这样远程的login分支上也就有代码了)
三、首页内容
3.1首页布局
我们参照element-ui中的container布局容器实现下面的内容
- 复制element-ui中container组件结构
home.vue中结构如下：
<!-- 首页内容 -->
<template>
<el-container class="home_container">
<el-header>Header<el-button @click="logout">退出</el-button></el-header>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-main>Main</el-main>
</el-container>
</el-container>
</template>
<script>
export default {
data() {
return {};
},
methods: {
logout: function() {
sessionStorage.clear(); //清空sessionStorage中的token信息
this.$router.push("/login"); //路由跳转到登录页面
}
}
};
</script>
<style lang='less' scoped>
.home_container {
width: 100%;
height: 100%;
background-color: red;
.el-header {
background-color: #36c5d3;
}
.el-aside {
background-color: #304254;
}
.el-main {
background-color: #eff2f5;
}
}
</style>
- plugin/element.js导入所需的组件
import {
Container,
Header,
Aside,
Main
} from "element-ui";
Vue.use(Container);
Vue.use(Header);
Vue.use(Aside);
Vue.use(Main);
此时页面显示效果如下：
3.2首页头部布局
el-header中添加内容和样式如下：
<el-header>
<img src="../assets/logo2.png" alt="" class="logo">
<span>河软零食小铺</span>
<el-button @click="logout">退出</el-button>
</el-header>
.el-header {
background-color: #36c5d3;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 900;
.logo {
width: 50px;
height: 50px;
border-radius: 50%;
}
}
显示效果如下：
3.3左侧菜单区域
3.3.1布局实现
我们参照element-ui中的这个组件进行改造
- 根据element-ui复制模板
<el-aside width="200px">
<!-- 左侧菜单的内容开始 -->
<el-menu
background-color="#545c64"
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 index="1-4-1">选项1</el-menu-item>
</el-submenu>
/el-menu>
<!-- 左侧菜单的内容结束 -->
</el-aside>
- plugin/element.js中导入使用的组件标签
3.3.2 axios添加请求拦截器
因为我们的页面除了login页面可以直接登录，其他页面都需要保证登录以后有了token权限才可以直接访问，我们与其一个个的设置，可以直接在axios绑定token的请求头，这样就设置好了访问权限。
我们在main.js添加
// 导入并配置axios
import axios from "axios";
axios.defaults.baseURL = "http://127.0.0.1:8888/api/private/v1/";
// 配置请求头 这是这次配置的
axios.interceptors.request.use(config => {
config.headers.Authorization = sessionStorage.getItem("token");
return config;
});
Vue.prototype.$http = axios;
以后我们每次发起请求的时候，发下自动帮我们添加了token
3.3.3 请求后台渲染菜单
备注：
- 请求地址:menu
- 请求方式:get
我们定义一个方法
获取后端的数据内容如下：
所有Home.vue代码如下：
<!-- 首页内容 -->
<template>
<el-container class="home_container">
<el-header>
<img src="../assets/logo2.png" alt="" class="logo">
<span>河软零食小铺</span>
<el-button @click="logout">退出</el-button>
</el-header>
<el-container>
<el-aside width="200px">
<!-- 左侧菜单的内容开始 -->
<el-menu
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<!-- 一级菜单的内容 -->
<el-submenu :index="item.id+''" v-for="(item,index) in menuList" :key="item.id">
<template slot="title">
<i class="el-icon-location"></i>
<span>{{item.authName}}</span>
</template>
<!-- 二级菜单的内容 -->
<el-menu-item :index="subItem.id+''" v-for="(subItem,index) in item.children" :key="subItem.id">
{{subItem.authName}}
</el-menu-item>
</el-submenu>
</el-menu>
<!-- 左侧菜单的内容结束 -->
</el-aside>
<el-main>Main</el-main>
</el-container>
</el-container>
</template>
<script>
export default {
data() {
return {
menuList: []
};
},
methods: {
logout: function() {
sessionStorage.clear(); //清空sessionStorage中的token信息
this.$router.push("/login"); //路由跳转到登录页面
},
getMenuList: async function() {
const res = await this.$http.get("menus"); //请求后端接口获取所有的菜单信息
const { data, meta: { msg, status } } = res.data;
if (status != 200) {
return this.$msg({
message: "获取菜单信息失败",
showClose: true,
type: "error"
});
}
this.menuList = data;
console.log(status, data);
}
},
created: function() {
this.getMenuList(); //调用获取菜单列表信息方法
}
};
</script>
<style lang='less' scoped>
.home_container {
width: 100%;
height: 100%;
background-color: red;
.el-header {
background-color: #36c5d3;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 900;
.logo {
width: 50px;
height: 50px;
border-radius: 50%;
}
}
.el-aside {
background-color: #304254;
// 设置左侧导航颜色
.el-menu-item.is-active {
background: #36c5d3 !important;
color: #fff !important;
}
.el-submenu__title.is-active {
background: #36c5d3 !important;
color: #fff !important;
}
}
.el-main {
background-color: #eff2f5;
}
}
</style>
此时左侧菜单显示效果如下：
3.3.4解决小问题
- 每次菜单点击只展开一项
el-menu标签添加unique-opened属性
<el-menu unique-opened> </el-menu>
- 菜单右侧有突出
去掉el-memu的右侧边框
.el-aside {
background-color: #304254;
.el-menu {
去除右侧的边框
border-right: 0;
。。。
}
}
3.4 右侧主体内容
思路：
我们应该是点击左侧的菜单导航跳转到右侧对应的页面内容中，我们把右侧的内容当成一个子组件嵌套在每一个路由中。
比如home首页右侧新建一个子组件welcome页面，然后这个页面在首页进行展示和渲染即可。
3.4.1 左侧导航路由跳转
- 我们给el-menu添加路由模式
<el-menu router></el-menu>
- 修改el-menu-item的index为请求地址
<el-menu-item :index="'/'+subItem.path" v-for="(subItem,index) in item.children" :key="subItem.id">
{{subItem.authName}}
</el-menu-item>
此时点击左侧导航菜单，地址栏会显示对应的路由地址
- src/components下面新建Welcome欢迎界面
<!-- 欢迎页面 -->
<template>
<div>
欢迎页面内容
</div>
</template>
<script>
export default {
data() {
return {};
}
};
</script>
<style lang='less' scoped>
</style>
- router/index.js中把欢迎页面当成子路由注册
- home页面添加路由占位符
<el-main>
<router-view></router-view>
</el-main>
此时访问home页面，显示效果如下：
3.5用户内容
3.5.1用户内容布局
- 1、新建User.vue
src/components下面新建user文件夹，里面新建User.vue,随意希写入一些测试内容
- 2、配置路由
router/index.js导入User.vue并注册
import User from "../components/user/User.vue";
....
{
path: "/home",
name: "Home",
component: Home,
redirect: "/welcome",
children: [
{ path: "/welcome", component: Welcome },
{ path: "/users", component: User }
]
}
备注：上面的path必须定义成/users，因为我们点击左侧导航菜单的时候，它设定的路由跳转链接地址就是/users
- 3、完善用户列表内容
首先使用element-ui中的面包屑组件
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item><a href="/">用户管理</a></el-breadcrumb-item>
<el-breadcrumb-item>用户列表</el-breadcrumb-item>
</el-breadcrumb>
注意在plugins/element.js中把依赖的组件标签导入并注册
import { Breadcrumb,BreadcrumbItem } from "element-ui";
Vue.use(Breadcrumb);
Vue.use(BreadcrumbItem);
- 4、实现右侧卡片布局
此部分用到了卡片组件、layout布局等，别忘了导入相应的组件并注册
layout
layout布局是把横向的一行分成24份，:gutter设置的是每个子板块之间的间距，:span是每个子内容占据的宽度。
<!-- 底部内容区域 -->
<el-card class="box-card">
<el-row :gutter="20">
<el-col :span="8">
<el-input placeholder="请输入内容" class="input-with-select">
<el-button slot="append" icon="el-icon-search"></el-button>
</el-input>
</el-col>
<el-col :span="16">
<el-button type="primary">添加</el-button>
</el-col>
</el-row>
</el-card>
显示效果如下：
- 5 请求后台获取用户列表
后端接口信息如下：
后端响应的结果如下：
我们把获取的数据在上面遍历生成表格
<el-table
:data="userList"
border
style="width: 100%">
<el-table-column
prop="username"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="email"
label="邮箱"
width="180">
</el-table-column>
<el-table-column
prop="mobile"
label="电话">
</el-table-column>
<el-table-column
prop="role_name"
label="角色">
</el-table-column>
<el-table-column
label="状态">
<template slot-scope="scope">
<el-switch
v-model="scope.row.mg_state"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
</template>
</el-table-column>
<el-table-column
label="操作">
<template slot-scope="scope">
<el-button type="primary">编辑</el-button>
<el-button type="danger">删除</el-button>
</template>
</el-table-column>
</el-table>
<script>
export default {
data() {
return {
userList: [],
queryInfo: {
// 请求的其他信息内容
query: "",
// 请求第几页数据
pagenum: 1,
// 每页显示多少条数据
pagesize: 5
},
// 后端返回的总页数默认是0
total: 0
};
},
methods: {
getUserList: async function() {
// get请求原来讲过有三种请求方式，我们选择的其中一种
const res = await this.$http.get("users", {
params: this.queryInfo
});
const {
data: { total, pagenum, users },
meta: { msg, status }
} = res.data;
if (status != 200) {
// 代表没有获取用户信息成功，报错提示
this.$msg({
showClose: true,
message: "获取用户信息失败",
type: "error"
});
} else {
// 获取后端内容成功，把users数组的内容赋值给data中的userList数组
this.userList = users;
// 把用户请求的总页数也绑定到data中的total中
this.total = total;
}
}
},
created() {
// 调用获取用户信息列表方法
this.getUserList();
}
};
</script>
显示效果如下：
需要注意的是
- 上面用到的组件都需要按需导入和注册
- template标签中嵌套标签，slot-scope="scope",是把一行的信息保存到scope对象中，scope.row.xx属性名可以获取固定的内容
- 6、实现分页效果
根据element-ui中的分页组件实现用户列表的分页显示效果
第一步：element/index.js导入pagination组件
第二步：修改结构标签
<!-- 分页显示效果 -->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryInfo.pagenum"
:page-sizes="[1, 5, 10, 15]"
:page-size="queryInfo.pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
第四步：js中数据变化
<script>
export default {
data() {
return {
userList: [],
queryInfo: {
// 请求的其他信息内容
query: "",
// 请求第几页数据
pagenum: 1,
// 每页显示多少条数据
pagesize: 5
},
// 后端返回的总页数默认是0
total: 0
};
},
methods: {
getUserList: async function() {
。。。。
},
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.queryInfo.pagesize = val;
// 页码发生变化了 重新请求后端数据
this.getUserList();
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.queryInfo.pagenum = val;
// 页码发生变化了 重新请求后端数据
this.getUserList();
}
},
created() {
// 调用获取用户信息列表方法
this.getUserList();
}
};
此时页面效果如下：
3.5.2用户状态修改
用户在点击switch开关进行切换的时候可以更换用户的状态，后台请求接口描述如下：
注意这个开关更换状态触发的change时间，可以参考官网描述。
- 模板添加change事件
<el-switch
@change="changeState(scope.row)"
v-model="scope.row.mg_state"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
- js中事件代码如下：
// 更换用户状态的方法
changeState: async function(userInfo) {
// userInfo代表上面传递的scope.row的一行的信息 put方法执行完毕就直接更新了
const res = await this.$http.put(
`users/${userInfo.id}/state/${userInfo.mg_state}`
);
const { data, meta: { msg, status } } = res.data;
if (status != 200) {
// 如果更改失败，页面上面的开关状态还得给人家恢复原位
userInfo.mg_state = !userInfo.mg_state;
// 代表设置状态失败
this.$msg({
showClose: true,
message: "更改状态失败",
type: "error"
});
} else {
// 代表设置状态失败
this.$msg({
showClose: true,
message: "更改状态成功",
type: "success"
});
}
}
请求成功的返回结果如下:
3.5.3实现搜索功能
说明
<el-row :gutter="20">
<el-col :span="8">
<el-input placeholder="请输入内容" v-model="queryInfo.query"
class="input-with-select">
<el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>
</el-input>
</el-col>
<el-col :span="6">
<el-button type="primary">添加用户</el-button>
</el-col>
</el-row>
js中queryInfo数据为：
data() {
return {
userList: [],
queryInfo: {
query: "",
// 请求第几页数据
pagenum: 1,
// 每页显示多少条数据
pagesize: 5
},
// // 后端返回的总页数默认是0
total: 0
};
},
此时点击小搜索图标可以实现搜索功能，点击关闭按钮就会显示全部的信息内容。
3.5.4实现添加功能
页面结构如下：
<el-row>
<el-col :span="12">
<el-form ref="form" :model="userForm" label-width="80px">
<el-form-item label="用户名">
<el-input v-model="userForm.username"></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input v-model="userForm.password"></el-input>
</el-form-item>
<el-form-item label="手机号">
<el-input v-model="userForm.mobile"></el-input>
</el-form-item>
<el-form-item label="邮箱">
<el-input v-model="userForm.email"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="addUser">添加用户</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
添加逻辑如下：
export default {
data() {
return {
。。。。
// 添加用户的表单绑定内容
userForm: {
username: "",
password: "",
mobile: "",
email: ""
},
};
},
methods: {
getUserList: async function() {
。。。
},
handleSizeChange(val) {
。。。。
},
handleCurrentChange(val) {
。。。。
},
// 添加用户的逻辑
addUser: async function() {
const res = await this.$http.post("users", this.userForm);
console.log(res.data.meta.status);
if (res.data.meta.status != 201) {
return this.$message("添加用户失败");
} else {
this.$message("添加用户成功");
}
}
},
3.5.5实现待编辑功能
我们点击编辑按钮的时候还可以像我们实现图书管理一样，把编辑的内容显示在上面的输入框中，我们也可以使用element-ui中的dialog对话框。
(1)根据id查询编辑的用户的信息
后端接口如下：
- 添加编辑页面对话框
<!-- 待编辑页面的对话框 -->
<el-dialog
title="要编辑的内容"
:visible.sync="dialogVisible"
width="30%">
<el-form ref="form" :model="editeForm" label-width="80px">
<el-form-item label="用户名">
<el-input v-model="editeForm.username"></el-input>
</el-form-item>
<el-form-item label="邮箱">
<el-input v-model="editeForm.email"></el-input>
</el-form-item>
<el-form-item label="手机号">
<el-input v-model="editeForm.mobile"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
- data中添加模型数据、
data() {
return {
。。。
// 是否显示编辑对话框的变量
dialogVisible: false,
// 编辑用户的表单内容
editeForm: {
username: "",
email: "",
mobile: ""
}
};
},
- 编辑按钮绑定事件
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="primary" @click="showDialog(scope.row.id)">编辑</el-button>
<el-button type="danger" @click="scope.row.id">删除</el-button>
</template>
</el-table-column>
- 实现待编辑逻辑
// 显示待编辑对话框
showDialog: async function(id) {
this.dialogVisible = true;
// 请求后端接口实现查询待编辑的用户的信息
const res = await this.$http.get("users/" + id);
const { data, meta: { msg, status } } = res.data;
if (status != 200) {
return this.$message({
message: "获取编辑用户信息成功",
showClose: true,
type: "error"
});
} else {
this.editeForm = data;
}
console.log(res);
}
},
3.5.6实待编辑功能
我们点击对话框的确定按钮实现对话框的消失，同时实现编辑功能。
后端接口如下：
- 给确定按钮绑定事件
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="editeUser">确 定</el-button>
</span>
- 实现事件逻辑
// 实现编辑功能
editeUser: async function() {
this.dialogVisible = false; //点击确定按钮的时候实现对话框的消失
// 获取用户编辑的id可以从this.editeForm中获取 因为获取待编辑的内容的时候给它赋值了
const res = await this.$http.put("users/" + this.editeForm.id, {
email: this.editeForm.email,
mobile: this.editeForm.mobile
});
const { data, meta: { msg, status } } = res.data;
if (status != 200) {
return this.$msg("更新失败");
} else {
this.$msg("更新成功");
}
}
- 给用户名输入框添加禁用属性
<el-form-item label="用户名">
<el-input v-model="editeForm.username" disabled></el-input>
</el-form-item>
3.5.6实现删除功能
我们实现删除之前先加个确认删除语句
confirm('你确定要删除信息吗？')
删除用户的后端接口如下：
- 给删除按钮绑定事件
<el-table-column
label="操作">
<template slot-scope="scope">
<el-button type="primary">编辑</el-button>
<el-button type="success" @click="delUser(scope.row.id)">删除</el-button>
</template>
</el-table-column>
- 事件逻辑代码如下：
// 删除当前用户信息
delUser: async function(id) {
const result = confirm("你确定姚删除用户信息吗？");
if (result) {
const res = await this.$http.delete(`users/${id}`);
if (res.data.meta.status == 200) {
this.$message("删除成功了");
this.getUserList();
} else {
this.$message("删除失败");
}
}
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
