目录
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 vcustomerscd vcustomers
cnpm installcnpm run dev2.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">×</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。
923
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
