Vue.js 搭建用户管理系统

目录一、前言二、搭建项目过程2.1配置json-server2.2新建vue项目2.3项目目录解析2.4 初探组件,搭建导航2.5 获取并展示用户信息2.6 添加用户2.7 弹窗及详情2.7.1 弹窗 alert.vue组件2.7.2 详情组件 customersdetails.vue2.8 编辑和删除2.8.1 编辑Edit. vue组件...

We_jia

5333人浏览 · 2019-04-10 11:30:27

We_jia · 2019-04-10 11:30:27 发布

2.7.2 详情组件 customersdetails.vue

一、前言

通过编写一个简单的用户管理系统，实现用户信息的增删改查，熟悉Vue的开发流程。整个项目的实现基于Vue全家桶技术及bootstrap页面布局。

二、搭建项目过程

2.1 配置json-server

开始之前我们要做一个准备工作，在做项目中我们常常无法获取后端的数据，此时就要配置mock数据来模拟请求以及请求回来的过程。json-server是一个很好的可以替我们完成这一工作的工具。我们只需要提供一个json文件，或者写几行简单的js脚本就可以模拟出RESTful API的接口

安装json-server

cnpm install -g json-server --save

创建db.json文件

这是我们在项目中用到的数据

{
  "users": [
    {
      "name": "Alice",
      "phone": "333-444-555",
      "email": "canidy@ewsdsd.com",
      "education": "dsds",
      "graduationschool": "dsds",
      "profession": "dsds",
      "profile": "dsds",
      "id": "1"
    },
    {
      "name": "Back",
      "phone": "333-444-555",
      "email": "canidy@ewsdsd.com",
      "education": "dsds",
      "graduationschool": "dsds",
      "profession": "dsds",
      "profile": "dsds",
      "id": "2"
    },
    {
      "name": "json",
      "phone": "333-444-555",
      "email": "canidy@ewsdsd.com",
      "education": "dsds",
      "graduationschool": "dsds",
      "profession": "dsds",
      "profile": "dsds",
      "id": "3"
    },
    {
      "name": "cookie",
      "phone": "333-444-555",
      "email": "canidy@ewsdsd.com",
      "education": "dsds",
      "graduationschool": "dsds",
      "profession": "dsds",
      "profile": "dsds",
      "id": "4"
    },
    {
      "name": "小惠惠",
      "phone": "15829705916",
      "email": "1269146785@qq.com",
      "education": "博士",
      "graduationschool": "交通大学",
      "profession": "MBA",
      "profile": "真好看",
      "id": "5"
    }
  ]
  
}

在浏览器中运行 JSON Server

json-server --watch db.json

如果我们每次查看json文件，都这样输一次就比较麻烦，所以我们进行改进，在package.json 文件中的"scripts"内容中添加

 "scripts": {
    "json": "json-server --watch db.json",
  },

这样我们就可以使用 cnpm run json 运行

关于json-server具体内容可参考https://www.npmjs.com/package/json-server

2.2 新建vue项目

下载Node.js
安装淘宝镜像

 npm install -g cnpm --registry=https://registry.npm.taobao.org
 cnpm install cnpm -g   //升级淘宝镜像

安装脚手架

cnpm install –g vue-cli

开启新项目

vue init webpack-simple vcustomers

cd vcustomers

cnpm install

cnpm run dev

2.3 项目目录解析

2.4 初探组件,搭建导航

利用vue的页面组件化思想，将页面切换成几个部分，从而有利于页面的拼装以及代码的维护

App.vue组件

App.vue是我们的主组件，所有页面都是在App.vue下进行切换的，在主组件中搭建导航部分

<template>
  <div id="app">
  <nav class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">用户管理系统</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li><router-link to="/">主页</router-link></li>
            <li><router-link to="/about">关于我们</router-link></li>
          </ul>
            <ul class="nav navbar-nav navbar-right">
               <li><router-link to="/add">添加用户</router-link></li>
             </ul>
        </div>
      </div>
    </nav>
    <router-view></router-view>
  </div>
</template>

<script>
import customers from "./Components/Customers.vue";
import about from "./Components/About.vue";
export default {
  name: "app",
  components: {
    customers: customers,
    about: about
  },
  data() {
    return {
      msg: "我是App组件"
    };
  }
};
</script>

<style lang="scss">
</style>

安装及封装路由

具体就不介绍啦，在之前的博客中有详细的路由配置，传参，封装的文章

import Vue from "vue";
import vueRouter from "vue-router"
// 引入组件
import customers from "../Components/Customers.vue";
import about from "../Components/About.vue";
import add from "../Components/add.vue";
import detail from "../Components/Customersdetail.vue";
import edit from "../Components/Edit.vue"
//使用路由
Vue.use(vueRouter)
///配置路由
const routes=[
{
    path:'/',
    component:customers
},
{
    path:'/about',
    component:about
},
{
    path:'/add',
    component:add
},
{
    path:'/detail/:id',
    component:detail
},
{
    path:'/edit/:id',
    component:edit
},
]
//实例化路由
var router=new vueRouter({
    routes:routes
})
//暴露路由
export default router;

vue-resource请求数据

在main.js中引入使用vue-resource，要记得先安装哦 cnpm install vue-resource --save

// 1.使用路由模块化封装
import Vue from 'vue'
import App from './App.vue'

//导入vue-resource
import vueResource from 'vue-resource'
//使用resource
Vue.use(vueResource)

//导入路由
import router from ".//Router/Router.js"

//实例挂载路由
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

2.5 获取并展示用户信息

使用vue-resource提供的this.$http.get（url）方法来获取用户信息，通过循环遍历绑定，将数据显示在界面中

<template>
  <div id="customers" class="container">
   <!--弹窗组件 -->   <!-- :message  父组件给子组件传值 -->
    <alert v-if="content" :message="content"></alert>
    
    <h1 class="page-header">用户管理系统</h1>
  <!--v-model 数据双向绑定 -->
    <input type="text" class="form-control" placeholder="搜索" v-model="search">
    <table class="table table-striped">
      <thead>
        <tr>
          <th>姓名</th>
          <th>电话</th>
          <th>邮箱</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
    <!--循环遍历数组 绑定信息 -->
        <tr v-for="(customer,index) in filterBy(customers,search)" :key="index">
          <td>{{customer.name}}</td>
          <td>{{customer.phone}}</td>
          <td>{{customer.email}}</td>
          <td>

            <router-link class="btn btn-default" :to="'/detail/'+customer.id">详情</router-link>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import alert from "./Alert.vue";
import detail from "./Customersdetail.vue";
export default {
  components: {
    alert: alert,
    detail: detail
  },
  data() {
    //这里存放数据
    return {
      msg: "我是customers组件",
      customers: [],
      content: "",
      search: ""
    };
  },
  methods: {
    filterBy(customers, value) {
      return customers.filter(function(customer) {
        return customer.name.match(value);
        //有就返回，没有就不显示    什么都不输就显示所有
        //filter（）过滤 只能用于数组
      });
    },
      //获取用户信息
    fetchCustomers() {
      this.$http.get("http://localhost:3000/users").then(res => {
        this.customers = res.body;
      });
    }
  },

  // 页面加载以后直接调用函数   挂载数据，绑定事件等等
  created() {
    if (this.$route.query.content) {
      this.content = this.$route.query.content;
    }
    this.fetchCustomers();
  },
//信息更新以后，再重新获取用户信息进行绑定
  updated() {
    this.fetchCustomers();
  },

  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {}
};
</script>
<style lang='scss'>
</style>

2.6 添加用户

v-model实现数据双向绑定

使用vue-resource 提供的this.$http.post(url,[data])方法来请求添加数据

<template>
  <div id="add" class="container">
     <alert v-if="content" :message="content"></alert>
    <form v-on:submit="addCustomer">
      <div class="well">
        <h4>用户信息</h4>
        <div class="form-groups">
          <lable>姓名</lable>
          <input type="text" class="form-control" placeholder="name" v-model="customer.name">
        </div>
        <div class="form-group">
          <lable>电话</lable>
          <input type="text" class="form-control" placeholder="phone" v-model="customer.phone">
        </div>
        <div class="form-group">
          <lable>邮箱</lable>
          <input type="text" class="form-control" placeholder="email" v-model="customer.email">
        </div>
        <div class="form-group">
          <lable>学历</lable>
          <input
            type="text"
            class="form-control"
            placeholder="education"
            v-model="customer.education"
          >
        </div>
        <div class="form-group">
          <lable>毕业学校</lable>
          <input
            type="text"
            class="form-control"
            placeholder="graduationschool"
            v-model="customer.graduationschool"
          >
        </div>
        <div class="form-group">
          <lable>职业</lable>
          <input
            type="text"
            class="form-control"
            placeholder="profession"
            v-model="customer.profession"
          >
        </div>
        <div class="form-group">
          <lable>个人简介</lable>
          <textarea class="form-control" rows="10" placeholder="profile" v-model="customer.profile"></textarea>
        </div>
        <button type="submit" class="btn btn-primary">添加</button>
        <span class="pull-right">
         <router-link  class="btn btn-primary" to="/">返回</router-link>
        </span>
      </div>
    </form>
  </div>
</template>

<script>
import alert from "./Alert.vue"

export default {
  components: {
    alert:alert
  },
  data() {
    //这里存放数据
    return {
      msg: "我是add组件",
      customer: {},
      content:""
    };
  },
  methods: {
    addCustomer(e) {
      //  判断这三项内容是否有值 
      if (!this.customer.name || !this.customer.phone || !this.customer.email) {
        this.content="请添加对应的信息！";
      } else {
         //定义对象 设置对象属性
        let newCuetomer = {
          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
        };


        //使用vue-resource post请求 添加数据
        this.$http.post("http://localhost:3000/users",newCuetomer).then(res => {
          this.$router.push({path:"/",query:{content:"用户信息添加成功！"}})
          //路由的编程式导航
          //子组件给父组件传值
        });
      }
      e.preventDefault();
      //阻止表单提交默认事件
     
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
  }
};
</script>
<style lang='scss'>
</style>

js阻止表单提交的默认行为

有时候我们在表单进行提交前需要进行表单验证，如果验证不通过，那么就需要阻止表单提交的默认行为，我们介绍俩种方式：
第一种方式就是在按钮上绑定click事件，return false就会阻止默认行为
第二种通过submit事件，通过调用event.preventDefault();方法来阻止默认行为。

2.7 弹窗及详情

2.7.1 弹窗 alert.vue组件

在父组件中调用alert.vue组件,用v-if判断是否有值，若有值则显示弹窗

<alert v-if="content" :message="content"></alert>
<!-- :message  父组件给子组件传值 -->

在父组件中定义变量content ,来接收从其他组件传的值,

  created() {
    if (this.$route.query.content) {
      this.content = this.$route.query.content;
    }
    this.fetchCustomers();
  },

<template>
  <div class="alert alert-warning alert-dismissible" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
    <!-- 弹窗输出的内容-->
     {{message}}
  </div>
</template>

<script>
export default {
  props: ["message"],
  name: "",
  components: {},
  data() {
    //这里存放数据
    return {
      alert: "用户信息添加成功！"
    };
  },
  methods: {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {}
};
</script>
<style lang='scss'>
</style>

2.7.2 详情组件 customersdetails.vue

这个组件中有用户的详细信息以及编辑和删除功能

在父组件customers.vue中跳转详情路由时要传递用户id，并且在配置详情路由是也要绑定id

//customers.vue组件循环绑定数据   filterBy()是一个方法
<tbody>
        <tr v-for="(customer,index) in filterBy(customers,search)" :key="index">
          <td>{{customer.name}}</td>
          <td>{{customer.phone}}</td>
          <td>{{customer.email}}</td>
          <td>
            <router-link class="btn btn-default" :to="'/detail/'+customer.id">详情</router-link>
          </td>
        </tr>
      </tbody>

//配置路由
{
    path:'/detail/:id',
    component:detail
},

<template>
  <div class="details container">
    <router-link to="/" class="btn btn-default">返回</router-link>
    <h1 class="page-header">
      {{customers.name}}
      <span class="pull-right">
        <router-link class="btn btn-primary" :to="'/edit/'+customers.id">编辑</router-link>
        <button class="btn btn-danger" @click="deleteCustomer(customers.id)">删除</button>
      </span>
    </h1>

    <ul class="list-group">
      <li class="list-group-item">
        <span class="glyphicon glyphicon-user"> {{customers.phone}}</span>
      </li>
      <li class="list-group-item">
        <span class="glyphicon glyphicon-envelope"> {{customers.email}}</span>
      </li>
    </ul>
    <ul class="list-group">
      <li class="list-group-item">
        <span class="glyphicon glyphicon-star"> {{customers.education}}</span>
      </li>
      <li class="list-group-item">
        <span class="glyphicon glyphicon-cloud"> {{customers.graduationschool}}</span>
      </li>
      <li class="list-group-item">
        <span class="glyphicon glyphicon-th-list"> {{customers.profession}}</span>
      </li>
      <li class="list-group-item">
        <span class="glyphicon glyphicon-cloud"> {{customers.profile}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import edit from "./Edit.vue";
export default {
  name: "detail",
  components: {
    edit: edit
  },
  data() {
    //这里存放数据
    return {
      msg: "我是detail组件",
      customers: ""
    };
  },
  methods: {

  //获取用户的详细信息
    fetchCustomers(id) {
      this.$http.get("http://localhost:3000/users/" + id).then(res => {
        this.customers = res.body;
      });
    },
    deleteCustomer(id) {
      this.$http.delete("http://localhost:3000/users/" + id).then(res => {
        this.$router.push({
          path: "/",
          query: { content: "成功删除用户信息！" }
        });
      });
    }
  },
  created() {
  //接收路由跳转时传的id值
    this.fetchCustomers(this.$route.params.id);
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {}
};
</script>
<style lang='scss'>
</style>

2.8 编辑和删除

2.8.1 编辑Edit. vue组件

编辑用户信息与添加用户信息相类似，只需要注意id的问题，必须要传入id值来确认要修改信息的用户。

使用vue-resource put(url,[data])请求修改数据，并且在路由中使用params来接收用户id

<template>
  <div id="edit" class="container">
    <alert v-if="content" :message="content"></alert>
    <h1 class="page-header">编辑用户</h1>
    <form v-on:submit="updateCustomer">
      <div class="well">
        <h4>用户信息</h4>
        <div class="form-groups">
          <lable>姓名</lable>
          <input type="text" class="form-control" placeholder="name" v-model="customer.name">
        </div>
        <div class="form-group">
          <lable>电话</lable>
          <input type="text" class="form-control" placeholder="phone" v-model="customer.phone">
        </div>
        <div class="form-group">
          <lable>邮箱</lable>
          <input type="text" class="form-control" placeholder="email" v-model="customer.email">
        </div>
        <div class="form-group">
          <lable>学历</lable>
          <input type="text" class="form-control" placeholder="education" v-model="customer.education">
        </div>
        <div class="form-group">
          <lable>毕业学校</lable>
          <input type="text" class="form-control" placeholder="graduationschool" v-model="customer.graduationschool">
        </div>
        <div class="form-group">
          <lable>职业</lable>
          <input type="text" class="form-control" placeholder="profession" v-model="customer.profession">
        </div>
        <div class="form-group">
          <lable>个人简介</lable>
          <textarea class="form-control" rows="10" placeholder="profile" v-model="customer.profile"></textarea>
        </div>
        <button type="submit" class="btn btn-primary">确认</button>
        <span class="pull-right">
          <router-link class="btn btn-primary" to="/">返回</router-link>
        </span>
      </div>
    </form>
  </div>
</template>

<script>
import alert from "./Alert.vue"
export default {
  name: "edit",
  components: {
    alert:alert
  },
  data() {
    //这里存放数据
    return {
      msg: "我是edit组件",
      customer: {},
      content:""
    };
  },
 methods: {
     fetchCustomers(id) {
      this.$http.get("http://localhost:3000/users/"+id).then(res => {
        this.customer = res.body;
      });
    },
    updateCustomer(e) {
      //   console.log(123);
      if (!this.customer.name || !this.customer.phone || !this.customer.email) {
       this.content="请正确修改信息！";
      } else {
        let newCuetomer = {
          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
        };


        //使用vue-resource put(url,[data])请求 修改数据
        this.$http.put("http://localhost:3000/users/"+this.$route.params.id,newCuetomer).then(res => {
          this.$router.push({path:"/",query:{content:"用户信息更新成功！"}})
          //子组件给父组件传值
        });
      }
      e.preventDefault();
      //阻止默认事件
    }
  },
  mounted() {},
    created(){
        this.fetchCustomers(this.$route.params.id)
    }

};
</script>
<style lang='scss'>
</style>

2.8.2 删除用户信息

在customers.vue 组件中添加删除按钮，并绑定点击事件，传入要删除用户的id值

<button class="btn btn-danger" @click="deleteCustomer(customers.id)">删除</button>

 deleteCustomer(id) {
      this.$http.delete("http://localhost:3000/users/" + id).then(res => {
        this.$router.push({
          path: "/",
          query: { content: "成功删除用户信息！" }
        });
      });
    }

2.9 实现搜索功能

实现的效果是边搜索边显示

在customers.vue 组件中添加搜索文本框，并且使用v-model实现数据双向，要在data中定义 search:"" 为空

 <input type="text" class="form-control" placeholder="搜索" v-model="search">

在绑定数据时要循环遍历，filterBy（）方法用来过滤用户信息

 <tbody>
        <tr v-for="(customer,index) in filterBy(customers,search)" :key="index">
          <td>{{customer.name}}</td>
          <td>{{customer.phone}}</td>
          <td>{{customer.email}}</td>
          <td>
            <router-link class="btn btn-default" :to="'/detail/'+customer.id">详情</router-link>
          </td>
        </tr>
/tbody>

使用ES6的filter()和match()方法来过滤匹配用户信息，如果有符合搜索框内的内容就返回，没有就什么都不显示；若搜索框中什么都不输入则显示所有。

注意：filter只能用于数组，所有将customers定义为数组

   filterBy(customers, value) {
      return customers.filter(function(customer) {
        return customer.name.match(value);
        //filter只能用于数组
      });
    },

三、总结

这个项目从完成到写博客用了俩天半的时间。第一次接触json-server，学会使用模拟数据，实现前后端分离。搭配vue-resource可以实现数据的增删改查，这是最大的收货超开心！

回顾vue的基础知识点，包括路由的封装、传值以及编程式路由的写法，子父组件之间传值，理解掌握vue的生命周期函数等知识点。

使用bootstrap框架不用花费大量的时间画页面，缩短做项目的时间，可以用更多的时间来学习vue。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^