@Author：Runsen
@Date：2020/7/8

人生最重要的不是所站的位置，而是內心所朝的方向。只要我在每篇博文中寫得自己體會，修煉身心；在每天的不斷重復學習中，耐住寂寞，練就真功，不畏艱難，奮勇前行，不忘初心，砥礪前行，人生定會有所收獲，不留遺憾 （作者：Runsen ）

作者介紹：Runsen目前大三下學期，專業化學工程與工藝，大學沉迷日語，Python， Java和一系列數據分析軟件。導致翹課嚴重，專業排名中下。.在大學60%的時間，都在CSDN。決定今天比昨天要更加努力。我的征途是星辰大海！

今天是高考第二天，當年我就是一個辣雞，現在還是一個辣雞，祝高考的個個清華北大。

我看了下高考的導數最后一題，挺簡單的。

（1）第一問比較簡單，求個導數就行

（2）首先變量分離

下面直接考慮x>0的情況。

標準答案

廢話不多說，繼續學前端。

連接接口

上次完成到這里，搭建了模板

在之前，利用json-server，搭建了3000端口的API，這里需要同時的運行起來。

可以訪問http://localhost:3000/users，具體結果如下所示。

現在的目標很簡單了，就是通過Customers.vue中的customers一個空列表變成接口里面的東西。

我們可以在組件中定義一個方法來連接數據，這里需要涉及vue-resource插件

vue-resource是Vue.js的一款插件，它可以通過XMLHttpRequest或JSONP發起請求并處理響應。

C:\Users\YIUYE\Desktop\project\customers>npm install vue-resource --save

安裝成功后，在main.js導入

import VueResource from 'vue-resource' Vue.use(VueResource)

導入完成后，那么this.$http.get就可以用了。現在直接打印http://localhost:3000/users的response，然后定義一個created執行函數。

下圖就是效果，這樣就可以看見http://localhost:3000/users的接口數據。

拿到數據渲染

下面就是 拿到數據渲染，使用v-for遍歷，this.customers = response.body，這樣customers 就有值了。

<template><div class="customers container"><h1 class="page-header">用戶管理系統</h1><table class="table table-striped"><thead><tr><th>姓名</th><th>電話</th><th>郵箱</th><th></th></tr></thead><tbody v-for="customer in customers"><tr><td>{{customer.name}}</td><td>{{customer.phone}}</td><td>{{customer.email}}</td><td></td></tr></tbody></table></div> </template> <script> export default {name: 'customers',data() {return {customers :[],}},methods: {// 連接數據fetchCustomers(){this.$http.get("http://localhost:3000/users").then(function(response){console.log(response)this.customers = response.body})}},created() {this.fetchCustomers();},} </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> </style>

具體效果如下所示。

添加用戶

下面實現一個添加用戶的功能，其實一個功能就是一個組件，這是我發現的。于是就寫一個Add.vue的組件。

<template><div class="add container">添加用戶</div> </template><script> export default {name: 'add',data() {return {}} } </script><!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> </style>

下面就是在main.js設置添加的路由。

下面是main.js全部代碼

// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import VueRouter from 'vue-router' import VueResource from 'vue-resource' import App from './App' import Customers from './components/Customers.vue' import About from './components/About.vue' import Add from './components/Add.vue' Vue.config.productionTip = false Vue.use(VueRouter) Vue.use(VueResource) // 設置路由 const router = new VueRouter({mode:"history",base: __dirname,routes:[{path:'/',component:Customers},{path:'/about',component:About},{path:'/add',component:Add}] }) /* eslint-disable no-new */ new Vue({router,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>` }).$mount("#app")

下圖就是添加用戶的頁面。

下面就是實現添加用戶的組件，具體代碼如下。這里就是添加一個用戶傳3000接口。

<template><div class="add container"><h1 class="pag-header">添加用戶</h1><form v-on:submit="addCustomer"><div class="well"><h4>用戶信息</h4><div class="form-group"><label>姓名</label><input type="text"class="form-control"placeholder="name"v-model="customer.name"></div><div class="form-group"><label>電話</label><input type="text"class="form-control"placeholder="phone"v-model="customer.phone"></div><div class="form-group"><label>郵箱</label><input type="text"class="form-control"placeholder="email"v-model="customer.email"></div><div class="form-group"><label>學歷</label><input type="text"class="form-control"placeholder="education"v-model="customer.education"></div><div class="form-group"><label>畢業學校</label><input type="text"class="form-control"placeholder="graduationschool"v-model="customer.graduationschool"></div><div class="form-group"><label>職業</label><input type="text"class="form-control"placeholder="profession"v-model="customer.profession"></div><div class="form-group"><label>個人簡介</label><!-- <input type="text" class="form-control" placeholder="profile" v-model="customer.profile"> --><textarea class="form-control"rows="10"v-model="customer.profile"></textarea></div><button type="submit"class="btn btn-primary">添加</button></div></form></div> </template><script> export default {name: 'add',data() {return {customer:{}}},methods:{addCustomer(e){// console.log(123);if (!this.customer.name || !this.customer.phone || !this.customer.email) {// console.log("請添加對應的信息!");this.alert = "請添加對應的信息!";}else{let newCustomer = {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.post("http://localhost:3000/users",newCustomer).then(function(response){// console.log(response);this.$router.push({path:"/",query:{alert:"用戶信息添加成功!"}});})e.preventDefault();}e.preventDefault();}}, } </script><!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> </style>

下面是測試結果

總結

以上是生活随笔為你收集整理的三十九、Vue项目上手 | 用户管理系统 实现添加用户功能（中篇）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。