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】中粘贴以下代码：
代码语言：javascript复制<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) { //修改1
this.id = item.id;
this.createDate = item.createDate;
this.nickName = item.nickName;
this.introduce = item.introduce;
},
Setting: function() { //修改2
var 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脚手架解析接口】
