基于Vue实现简单的用户管理系统(新手必会)

用户信息管理模块：

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

---

---

前言

用户管理模块非常适合新手入门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、项目只是实现了用户信息的增删该查，并没有更多的功能，后续会添加更多的功能，如登录用户等。