ASP.NET Core微服務(五)——【vue腳手架解析接口】：

后臺接口請參照：ASP.NET Core微服務(三)——【跨域配置】：【https://blog.csdn.net/feng8403000/article/details/113756352】

1、創建vue項目

執行時的選項：

安裝的時候可能會出現殺毒提示，允許即可。

安裝完畢。

引入npm環境：【npm install -g】

啟動：【npm run dev】

安裝完成后項目下的文件：

瀏覽器訪問【http://localhost:8080/#/】

2、編輯vue項目，使用我這里使用的是【vsCode】

需要引入內容：【import axios from 'axios'】

引入后【Ctrl+s】保存,可以看到服務的控制臺提示沒有【axios】，需要添加。

需要停止當前的vue項目【Ctrl+c停止】，執行【npm install --save axios】后二次啟動【npm run dev】即可。

二次啟動【npm run dev】：

?在項目下的【src】->【App.vue】中粘貼以下代碼：

<template> <div id="app"><!--樣式 --> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"><div class="input-group"><span class="input-group-addon">昵稱搜索:</span><input type="text" v-model="selectKey" placeholder="請輸入搜索昵稱關鍵字" class="form-control" /></div><table class="table table-bordered table-hover"><tr class="info"><th>編號</th><th>創建時間</th><th>昵稱</th><th>介紹</th><th>操作</th></tr><!--遍歷過濾后的集合--><tr v-for="item in newlist" v-bind:key="item.id"><td>{{item.id}}</td><td>{{item.createDate}}</td><td>{{item.nickName}}</td><td>{{item.introduce}}</td><td><button v-on:click="del(item.id)" class="btn btn-info">刪除</button><button v-on:click="SetInfo(item)" class="btn btn-info">修改</button></td></tr></table><hr/><div class="input-group"><span class="input-group-addon">編號:</span><input type="text" v-model="id" disabled class="form-control" /></div><div class="input-group"><span class="input-group-addon">創建時間:</span><input type="text" v-model="createDate" disabled class="form-control" /></div><div class="input-group"><span class="input-group-addon">昵稱:</span><input type="text" v-model="nickName" class="form-control" /></div><div class="input-group"><span class="input-group-addon">簡介:</span><input type="text" v-model="introduce" class="form-control" /></div><button v-on:click="Setting()" class="btn btn-info">完成修改</button></div></template> <script> import axios from 'axios' var urlBase = "http://localhost:5000/api/"; export default {name: 'App',data:function(){return{list:[],selectKey: "",id: "",createDate: "",nickName: "",introduce: ""}},created:function(){var _this = this;var url = "http://localhost:5000/api/Test/GetInfo";axios.get(url).then(function(res) {_this.list = res.data;});},computed: { //過濾數據newlist: function() {var _this = this;console.log(_this.list);return _this.list.filter(function(o) {return o.nickName.indexOf(_this.selectKey) != -1;});}},methods: { //方法集合del: function(o) {if (confirm("是否刪除此行")) {var url = urlBase + "Test/Del?id=" + o;axios.get(url).then(function(retult) {alert("刪除成功");location.reload();})}},SetInfo: function(item) { //修改1this.id = item.id;this.createDate = item.createDate;this.nickName = item.nickName;this.introduce = item.introduce;},Setting: function() { //修改2var url = urlBase + "Test/Update?id=" + this.id + "&nickName=" + this.nickName + "&introduce=" + this.introduce;axios.get(url).then(function(retult) {if (retult.data) {alert("修改成功");location.reload();}})}}} </script><style> table{ width:85%;border:1px solid black;margin: 20px auto; } td{border:1px solid black; } </style>

?樣式展示：

3、總結：

a）、由于不是專稿VUE，我就給大家寫個簡易的解析demo，讓大家知道解析方法就好，可以用vue的全家桶更換一下樣式，我還是用的bootstrap樣式。

b）、搭建環境是難點，這章相對容易。

希望此文對大家有所幫助，后續會編寫

ASP.NET Core微服務(六)——【redis操作】、

ASP.NETCore微服務(七)——【docker部署linux上線】

等文章。

此文標題為ASP.NET Core微服務(五)——【vue腳手架解析接口】

總結

以上是生活随笔為你收集整理的ASP.NET Core微服务(五)——【vue脚手架解析接口】的全部內容，希望文章能夠幫你解決所遇到的問題。

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