vue入门：用户管理demo1
该demo由前端请求后台服务器获取数据进行渲染
- 使用到的技术点
- 1.使用到的vue指令：
{{}}v-ifv-forv-model- 2.使用到的事件：
@click点击事件，@keyup.enter回车- 3.使用到的事件修饰符：
.prevent阻止事件默认行为- 4.使用
vue-resource发起请求获取服务端返回的数据- 5.使用生命周期函数
created()，即在页面渲染前请求用户列表- 6.自定义私有过滤器
- 7.js base64编码：
window.btoa()， base64解码：window.atob()
- 后台接口说明
获取用户信息列表
| key | value | 备注 |
|---|---|---|
| url | http://192.168.1.40:9001/hubtest/user/getUserList |
|
| method | get |
7 |
请求体
无
响应体
{
"code":0,
"data":[
{
"id":0,
"password":"123456",
"username":"macy"
}
],
"message":"success"
}
添加用户
| key | value | 备注 |
|---|---|---|
| url | http://192.168.1.40:9001/hubtest/user/addUser |
|
| method | post |
|
| Content-Type | application/json |
请求体
{
"username":"macy",
"password":"123"
}
响应体
{
"code":0,
"data":{
"id":1566550425674,
"password":"123",
"username":"macy"
},
"message":"success"
}
根据用户id删除用户
| key | value | 备注 |
|---|---|---|
| url | http://192.168.1.40:9001/hubtest/user/deleteUserById/{userId} |
|
| method | get |
请求体
无
响应体
{
"code":0,
"data":{
"id":0,
"password":"123456",
"username":"macy"
},
"message":"success"
}
- 实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户管理案例</title>
<link rel="stylesheet" href="./css/bootstrap-4.3.1.css">
<script src="./js/vue-2.4.0.js"></script>
<script src="./js//vue-resource.js"></script>
<style>
body{
font-size: 14px;
}
</style>
</head>
<body>
<div id = "app">
<!-- 提示信息 -->
<!-- 当提示信息不为空且昵称为空时，则显示 -->
<div class="alert alert-danger mt-2" v-if = "errMsg != ''">
<span>{{ errMsg }}</span>
<!-- 把提示信息置为空，则不显示 -->
<button type="button" class="close" @click = "errMsg = ''">
<span aria-hidden="true">×</span>
</button>
</div>
<!-- 添加用户 -->
<form class="form-inline mb-2 mt-2">
<div class="form-group ml-2">
<label>用户名：</label>
<input type="text" class="form-control" v-model = "username">
</div>
<div class="form-group ml-2">
<label>密码：</label>
<input type="text" class="form-control" v-model = "password">
</div>
<div class="form-group ml-2">
<input type="button" class="btn btn-primary btn-sm" value="添加" @click = "addUser">
</div>
<div class="form-group ml-2">
<!-- 回车搜索 -->
<input type="text" class="form-control" placeholder="search..." v-model = "keyword" @keyup.enter= "getFilterUserList">
</div>
</form>
<!-- 显示用户列表 -->
<table class="table table-bordered" >
<thead>
<tr>
<th>编号</th>
<th>用户名</th>
<th>密码</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for = "item in filterUserList" :key = "item.id">
<td>{{ item.id }}</td>
<td>{{ item.username }}</td>
<!-- 使用过滤器对密码进行格式化 -->
<td>{{ item.password | passwordFormat }}</td>
<td>
<!-- .prevent禁止默认行为，如果不加上，vue会报语法错误 -->
<a href="javascript:void()" class="btn btn-link btn-sm" @click.prevent = "delUser(item.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<script>
var vue = new Vue({
el : '#app',
data : {
errMsg : '',//错误提示信息
keyword : '',//搜索关键字
username : '',//用户名
password : '',//密码
userList : [],//用户列表
filterUserList :[]//过滤后的用户列表
},
// 生命周期函数，当创建vue实例后，调用获取用户列表的接口
created(){
this.getUserList();
},
methods : {
//查询用户列表
getUserList(){
//调用获取用户列表接口
this.$http.get("http://192.168.1.40:9001/hubtest/user/getUserList").then(
resp => {//成功时回调
// 获取服务端返回的数据赋值到data属性的userList中
this.userList = this.filterUserList = resp.body.data;
},
resp => {//失败时回调
}
);
},
//添加用户
addUser(){
//1.对字段进行判空
if (this.username === ''){
return this.errMsg = '用户名不为空';
}
if (this.password === ''){
return this.errMsg = '密码不为空';
}
//2.调用添加用户接口
this.$http.post("http://192.168.1.40:9001/hubtest/user/addUser",{username:this.username,password:this.password}).then(
resp => {
//当添加用户成功时，重新加载用户列表
this.getUserList();
},
resp => {}
);
//3.去除错误提示信息和用户信息
this.errMsg = this.username = this.password = '';
},
//删除用户
delUser(userId){
this.$http.get("http://192.168.1.40:9001/hubtest/user/deleteUserById/"+userId).then(
resp => {
//删除用户成功时，重新加载用户列表
this.getUserList();
},
resp => {}
);
},
// 根据关键字过滤用户
getFilterUserList(){
//过滤前把用户列表添加到过滤的列表，否则一次过滤后，该数组的记录不是最初的数据
this.filterUserList = this.userList;
//根据关键字过滤
this.filterUserList = this.filterUserList.filter((item) => {
if (item.username.includes(this.keyword)){
return item;
}
});
}
},
filters:{
// 定义密码base64编码过滤器
passwordFormat(input){
//把密码明文使用base64编码
//编码：window.btoa()
//解码：window.atob()
return btoa(input);
}
}
});
</script>
</body>
</html>
- 效果
vue入门：用户管理demo1的更多相关文章
- 练习vue（用户管理）1
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 使用vue实现用户管理 添加及删除功能
简单的管理系统-增删改查 添加及删除功能 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...
- vue入门：用户管理demo
该demo纯前端实现 使用到vue技术点: 1.在该demo中使用到的vue指令:{{}}. v-if. v-model. @click v-for 2.在该demo中使用到的事件修饰符: .prev ...
- 一步步使用SpringBoot结合Vue实现登录和用户管理功能
前后端分离开发是当今开发的主流.本篇文章从零开始,一步步使用SpringBoot结合Vue来实现日常开发中最常见的登录功能,以及登录之后对用户的管理功能.通过这个例子,可以快速入门SpringBoot ...
- 基于vue.js的简单用户管理
功能描述:添加.修改.搜索过滤 效果图: <!DOCTYPE html> <html lang="en"> <head> <title&g ...
- vue学习笔记—bootstrap+vue用户管理
vue,读音view,简单易用的前端框架.特点如下: 1.一个mvvm的前端框架,内部做好了html中dom对象和后台用js语言定义的变量的双向绑定 2.中国人尤雨溪维护的个人项目,中文资料多,和go ...
- Vue + Element UI 实现权限管理系统 前端篇（十二）：用户管理模块
用户管理模块 添加接口 在 http/moduls/user.js 中添加用户管理相关接口. import axios from '../axios' /* * 用户管理模块 */ // 保存 exp ...
- 循序渐进VUE+Element 前端应用开发(15）--- 用户管理模块的处理
在前面随笔介绍了ABP+Vue前后端的整合处理,包括介绍了ABP的后端设计,以及前端对ABP接口API的ES6的封装,通过JS的继承类处理,极大减少了重复臃肿的代码,可以简化对后端API接口的封装,而 ...
- （大数据工程师学习路径）第一步 Linux 基础入门----用户及文件权限管理
用户及文件权限管理 实验介绍 1.Linux 中创建.删除用户,及用户组等操作. 2.Linux 中的文件权限设置. 一.Linux 用户管理 Linux 是一个可以实现多用户登陆的操作系统,比如“李 ...
随机推荐
- 记一次java.lang.NoClassDefFoundError异常
前阵子做了个评论过滤敏感词的功能,本地测试没有任何问题,然后就部署到线上服务器,通知相关人员线上测试.大约过了十来天,那货和我说接口出问题了,当时一脸懵逼,用了十来天突然出问题了???好吧,出问题了咱 ...
- [leetcode] 62 Unique Paths (Medium)
原题链接 字母题 : unique paths Ⅱ 思路: dp[i][j]保存走到第i,j格共有几种走法. 因为只能走→或者↓,所以边界条件dp[0][j]+=dp[0][j-1] 同时容易得出递推 ...
- [leetcode] 134. Gas Station （medium）
原题 题意: 过一个循环的加油站,每个加油站可以加一定数量的油,走到下一个加油站需要消耗一定数量的油,判断能否走一圈. 思路: 一开始思路就是遍历一圈,最直接的思路. class Solution { ...
- 以for循环的方式了解var与let的区别
var是ES5定义变量的一种声明方式. let是ES6定义变量的一种声明方式---可定义局部变量,即定义块级作用域. 以下列简单的函数进行表现二者作用域的不同 在ES6之前,我们都是用var来声明变量 ...
- 什么是icmp协议？
英文原义:Internet Control Message Protocol 中文释义:(RFC-792)Internet控制消息协议 定义: ICMP协议是一种面向无连接的协议,用于传输出 ...
- python课堂整理21---初识装饰器
一.装饰器: 本质就是函数,功能:为其他函数添加附加功能 原则: 1.不能修改被装饰函数的源代码 2.不能修改被修饰函数的调用方式 一个简单的装饰器 import time def timmer(fu ...
- .net持续集成sonarqube篇之 sonarqube集成单元测试
系列目录 通过前面章节我们可以看到,不论怎么构建,单元测试覆盖率一栏总是0% 这是因为单元测试覆盖率报告需要额外集成.这一节我们就讲解如何在sonarqube里集成单元测试覆盖率报告. 这里需要借助O ...
- 你真的熟练使用webpack吗？
https://www.webpackjs.com/ 官网地址 当自己在简历中写着熟练使用webpack的时候,殊不知自己只是在vue脚手架,react脚手架的路上走着比较轻松而已. 当面试官问你这几 ...
- Centos7配置BIND开机自启动
Centos7上面已经把/etc/init.d/服务的启动方式更改为systemctl启动. 当然编译安装仍然可以/etc/init.d/手动启动但是chkconfig –add named就用不了. ...
- Spring MVC中的 权限拦截定义 以及 权限拦截的研发步骤
权限拦截 (拦截器: 对请求进行区分) 1 实现的价值(作用) 用户未登录:访问没用登录的URL,拦截到以后 跳转回登录 用户未登录:访问登录的URL,直接放行到后续流程处理框架,进行后续的操作 用户 ...