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

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

1、創(chuàng)建vue項(xiàng)目

執(zhí)行時(shí)的選項(xiàng)：

安裝的時(shí)候可能會(huì)出現(xiàn)殺毒提示，允許即可。

安裝完畢。

引入npm環(huán)境：【npm install -g】

啟動(dòng)：【npm run dev】

安裝完成后項(xiàng)目下的文件：

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

2、編輯vue項(xiàng)目，使用我這里使用的是【vsCode】

需要引入內(nèi)容：【import axios from 'axios'】

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

需要停止當(dāng)前的vue項(xiàng)目【Ctrl+c停止】，執(zhí)行【npm install --save axios】后二次啟動(dòng)【npm run dev】即可。

二次啟動(dòng)【npm run dev】：

?在項(xiàng)目下的【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="請(qǐng)輸入搜索昵稱關(guān)鍵字" class="form-control" /></div><table class="table table-bordered table-hover"><tr class="info"><th>編號(hào)</th><th>創(chuàng)建時(shí)間</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">編號(hào):</span><input type="text" v-model="id" disabled class="form-control" /></div><div class="input-group"><span class="input-group-addon">創(chuàng)建時(shí)間:</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: { //過濾數(shù)據(jù)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、總結(jié)：

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

b）、搭建環(huán)境是難點(diǎn)，這章相對(duì)容易。

希望此文對(duì)大家有所幫助，后續(xù)會(huì)編寫

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

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

等文章。

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。