html5用户管理页面,vue-用户管理

一、JSON Server

1. 全局安装JSON Server

npm install -g json-server

2. 创建一个文件夹JSONSERVER

3. 初始化文件夹

npm init --yes，进行一些配置后，文件夹会多出package.json文件

4. 安装json server

npm install json-server --save (--save 保存到package.json)

5. 修改scripts

scripts.png

6. 编写db.json文件

7. npm run json:server

二、Main.js(没使用app.vue)

import Vue from 'vue'

import VueRouter from 'vue-router'

import App from './App'

import Customers from './components/Customers'

import About from './components/About'

import Add from './components/add'

import CustomerDetails from './components/CustomerDetails'

import VuesResouce from 'vue-resource'

import Edit from './components/Edit'

Vue.config.productionTip = false

Vue.use(VueRouter)

Vue.use(VuesResouce)

// 设置路由

const router = new VueRouter({

mode:"history",

base:__dirname,

routes:[

{path:"/",component:Customers},

{path:"/about",component:About},

{path:"/add",component:Add},

{path:"/customer/:id",component:CustomerDetails},

{path:"/edit/:id",component:Edit}

]

})

/* eslint-disable no-new */

new Vue({

router,

template: `

Toggle navigation

用户管理系统

• 主页
• 关于

• 添加用户

`

}).$mount("#app")

三、使用bootstrap(index.html中)

vcustomers

四、Customers.vue(用户信息展示)

1559270161(1).png

1559270287(1).png

五、add.vue(用户添加)

1559271051(1).png

1559274389(1).png

六、Alert.vue(提示框，在主页，添加，编辑用到)

1559287418(1).png1.在Customers.vue中

1559288721.png

1559288848(1).png

七、CustomerDetails.vue(用户详细信息)

返回

{{customer.name}}

编辑

删除

• {{customer.phone}}

• {{customer.email}}

export default {

name: 'customerdetials',

data () {

return {

customer:""

}

},

methods:{

fetchCustomers(id){

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

.then(function(response){

console.log(response)

this.customer=response.body

})

},

deleteCustomer(id){

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

.then(function(response){

this.$router.push({path : "/", query:{alert:"用户删除成功"}});

})

}

},

created() {

this.fetchCustomers(this.$route.params.id);

},

}

七、Edit.vue(编辑页面)

1559290105(1).png

1559290691(1).png

$route.path字符串，等于当前路由对象的路径，会被解析为绝对路径，如 "/home/news" 。

$route.params对象，包含路由中的动态片段和全匹配片段的键值对

$route.query 对象，包含路由中查询参数的键值对。例如，对于 /home/news/detail/01?favorite=yes ，会得到$route.query.favorite == 'yes' 。

$route.router 路由规则所属的路由器(以及其所属的组件)。

$route.matched 数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。

$route.name 当前路径的名字，如果没有使用具名路径，则名字为空。

八、搜索功能

1559293219(1).png

其中filter和match为es6语法

1559293326(1).png

八、axios

用axios代替vue-resource

1559295405(1).png

=>代替function，为了取到this

body变成data

1559295586(1).png