用户信息管理模块：

主要实现功能：
所有用户信息的展示、关于我们、搜索用户功能、添加用户、展示用户个人详情、修改跟人信息、删除个人信息

前言

用户管理模块非常适合新手入门Vue学习的练手项目

项目是基于对用户信息的展示，以及增删该查，进行实现

一、项目主要技术

1. 首先要搭建本地数据接口（就是为了模拟用户信息的数据）jsonserver
   ①新建文件夹（jsonserver）
   ②在jsonserver中初始化操作，进入文件，打开cmd中端输入npm init
   ③jsonserver中会出现一个json文件，然后再继续安装json-server。
   ④npm install json-server –save
   ⑤可以看到初始化文件中增加了json-server的版本信息。
2. 启动json server
   ①json-server –watch db.json（当然db.json是自己创建的数据文件）
   ②也可以直接在初始化文件中配置命令。
   然后再中端中输入：npm run json:server等于执行了1的命令
   ③可以安装google插件postman来获取数据，也可以再浏览器窗口手动获取
   ④常用的请求方式：post，get，delete，patch
3. Vue-resource
4. Vue-cli
5. Vue-router
6. Bootstrap

二、首屏包含内容

1. 导航栏部分：主页、关于我们、添加用户
2. 主体部分：所有用户信息展示、用户搜索框、用户详情

三、其余页面

1. 弹框提示页面
2. 编辑用户个人信息页面

四、页面内容实现

1. 首页用户信息展示页面：
   主要说一下：调用接口的和搜索框部分实现：

methods:{
fetchCustomers(){
this.$http.get("http://localhost:3000/users")
.then((response) => {
//
console.log(response);
this.customers = response.body;
})
},
//搜索部分用的是过滤匹配的方式
//搜索框实现：通过双向绑定，进行数据匹配value为输入查询的值
//过滤后匹配到需要的值进行返回
filterBy(customers,value){
return customers.filter(function(customer){
return customer.name.match(value);
})
}
},

2.用户信息详情展示
①同时可以进行用户个人信息的删除和修改
删除是根据用户路由获取得到用户的id直接通过delete方法进行删除

this.$http.delete("http://localhost:3000/users/"+id)

②用户信息的获取
根据用户的id在进入页面的同时进行用户的信息的渲染

this.$http.get("http://localhost:3000/users/"+id)

3.用户信息的修改：
通过路由传参的形式，在进行页面跳转的时候将用户的id传入。同时根据id获取单个用户的信息。
v-model在input标签上进行数据双向数据绑定：

<div class="form-group">
<label>姓名</label>
<input type="text" class="form-control" placeholder="name" v-model="customer.name">
</div>

注意：
修改完数据后进行数据提交，如果不监听自己的提交方法，默认提交的是系统默认的submit，所以要在form表单上监听自己的提交方法，并且在最后阻止系统默认行为。

updateCustomer(e){
//
console.log(e);
if(!this.customer.name || !this.customer.phone || !this.customer.email){
// console.log("请添加对应的信息！");
this.alert = "请添加对应的信息！";
}else{
let updateCustomer ={
name:this.customer.name,
phone:this.customer.phone,
email:this.customer.email,
education:this.customer.education,
graduationschool:this.customer.graduationschool,
profession:this.customer.profession,
profile:this.customer.profile
}
this.$http.put("http://localhost:3000/users/"+this.$route.params.id,updateCustomer)
.then((response)=>{
// console.log(response);
this.$router.push({path:"/",query:{alert:"用户信息更新成功！"}});
})
e.preventDefault();
}
e.preventDefault();
}

总结

1、项目只是实现了用户信息的增删该查，并没有更多的功能，后续会添加更多的功能，如登录用户等。

最后

以上就是飘逸服饰为你收集整理的基于Vue实现简单的用户管理系统(新手必会)用户信息管理模块：前言一、项目主要技术二、首屏包含内容三、其余页面四、页面内容实现总结的全部内容，希望文章能够帮你解决基于Vue实现简单的用户管理系统(新手必会)用户信息管理模块：前言一、项目主要技术二、首屏包含内容三、其余页面四、页面内容实现总结所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。