该demo由前端请求后台服务器获取数据进行渲染

  • 使用到的技术点
  • 1.使用到的vue指令:{{}} v-if v-for v-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">&times;</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>

- 效果
![](https://img2018.cnblogs.com/blog/1135647/201908/1135647-20190824125327587-1470630044.gif)

vue入门:用户管理demo1的更多相关文章

  1. 练习vue(用户管理)1

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. 使用vue实现用户管理 添加及删除功能

    简单的管理系统-增删改查 添加及删除功能 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...

  3. vue入门:用户管理demo

    该demo纯前端实现 使用到vue技术点: 1.在该demo中使用到的vue指令:{{}}. v-if. v-model. @click v-for 2.在该demo中使用到的事件修饰符: .prev ...

  4. 一步步使用SpringBoot结合Vue实现登录和用户管理功能

    前后端分离开发是当今开发的主流.本篇文章从零开始,一步步使用SpringBoot结合Vue来实现日常开发中最常见的登录功能,以及登录之后对用户的管理功能.通过这个例子,可以快速入门SpringBoot ...

  5. 基于vue.js的简单用户管理

    功能描述:添加.修改.搜索过滤 效果图: <!DOCTYPE html> <html lang="en"> <head> <title&g ...

  6. vue学习笔记—bootstrap+vue用户管理

    vue,读音view,简单易用的前端框架.特点如下: 1.一个mvvm的前端框架,内部做好了html中dom对象和后台用js语言定义的变量的双向绑定 2.中国人尤雨溪维护的个人项目,中文资料多,和go ...

  7. Vue + Element UI 实现权限管理系统 前端篇(十二):用户管理模块

    用户管理模块 添加接口 在 http/moduls/user.js 中添加用户管理相关接口. import axios from '../axios' /* * 用户管理模块 */ // 保存 exp ...

  8. 循序渐进VUE+Element 前端应用开发(15)--- 用户管理模块的处理

    在前面随笔介绍了ABP+Vue前后端的整合处理,包括介绍了ABP的后端设计,以及前端对ABP接口API的ES6的封装,通过JS的继承类处理,极大减少了重复臃肿的代码,可以简化对后端API接口的封装,而 ...

  9. (大数据工程师学习路径)第一步 Linux 基础入门----用户及文件权限管理

    用户及文件权限管理 实验介绍 1.Linux 中创建.删除用户,及用户组等操作. 2.Linux 中的文件权限设置. 一.Linux 用户管理 Linux 是一个可以实现多用户登陆的操作系统,比如“李 ...

随机推荐

  1. Spring Boot2(十四):单文件上传/下载,文件批量上传

    文件上传和下载在项目中经常用到,这里主要学习SpringBoot完成单个文件上传/下载,批量文件上传的场景应用.结合mysql数据库.jpa数据层操作.thymeleaf页面模板. 一.准备 添加ma ...

  2. python函数知识三 函数名的使用、格式化、递归

    12.函数名的使用 函数是第一类对象 函数名可以当做值被赋值给变量 def func(): print(1) return a = func print(func) print(a) a() 函数名可 ...

  3. 题解 P5367 【【模板】康托展开】

    P5367 [模板]康托展开 感觉这题难度大概在绿题到蓝题之间qwq 一.洛谷日报[yummy]浅谈康托展开 如我想知道321是{1,2,3}中第几个小的数可以这样考虑 : 第一位是3,当第一位的数小 ...

  4. springBean生命周期----来自spring实战总结

    1.Spring对bean进行实例化 2.Spring将值和bean的引用注入到bean对应的属性中(比如说注入到被依赖的bean的方法中或属性里) 3.如果bean实现了BeanNameAware接 ...

  5. TCP协议传输大文件读取时候的问题

    TCP协议传输大文件读取时候的问题 大文件传不完的bug 我们在定义的时候定义服务端每次文件读取大小为10240, 客户端每次接受大小为10240 我们想当然的认为客户端每次读取大小就是10240而把 ...

  6. 利用TCP协议,实现基于Socket的小聊天程序(初级版)

    TCP TCP (Transmission Control Protocol)属于传输层协议.其中TCP提供IP环境下的数据可靠传输,它提供的服务包括数据流传送.可靠性.有效流控.全双工操作和多路复用 ...

  7. mpvue的使用,包含axios、router的集成等完美结合小程序

    mpvue开发微信小程序框架的使用注意事项: 1.路由跳转,引用mpvue-router-patch 在main.js文件中引入控件:import MpvueRouterPatch from 'mpv ...

  8. CIDR的介绍

    CIDR的介绍: CIDR(Classless Inter-Domain Routing,无类域间路由选择)它消除了传统的A类.B类和C类地址以及划分子网的概念,因而可以更加有效地分配IPv4的地址空 ...

  9. docker跨主机通信扁平化网络的设计与实现

    端口映射.ovs. fannel,weave 1.使用网桥实现跨主机容器连接 使用Open vSwitch实现跨主机容器连接

  10. java - tcp如何保证传输的可靠性和有序性

    TCP提供的是一种面向连接的,可靠性的字节流服务. 可靠性: 1.应用数据被TCP划分为最适合发送的数据包: 2.在TCP发送一个数据块后,将启动一个定时器,用以接收目的端的确认信息,若不能及时得到确 ...