ASP.NET Core微服务(二)——【ASP.NET Core Swagger配置】:
环境：win10专业版 vs2019 sqlserver2014/2019 vsCode 在线资源
bootstrap-css：【<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">】
JQuery：【<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>】
bootstrap：【<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>】
vue：【<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>】
axios：【<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>】
后台接口请参照：ASP.NET Core微服务(三)——【跨域配置】：【https://blog.csdn.net/feng8403000/article/details/113756352】
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ASP.NET Core微服务(四)——【静态vue使用axios解析接口】</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div id="app">
<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">
<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>
<!--用于bootstrap-->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!--用于样式-->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--用于基础操作-->
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<!--用于数据解析-->
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script>
var urlBase = "http://localhost:5000/api/";
new Vue({
el: "#app",
data: {
list: [],
selectKey: "",
id: "",
createDate: "",
nickName: "",
introduce: ""
},
created() { //获取数据
var _this = this;
var url = urlBase "Test/GetInfo";
axios.get(url).then(function(retult) {
console.log(retult.data);
_this.list = retult.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>
</body>
</html>样式效果：
总结：
由于是静态处理，很容易，并且未进行路由设置，我就直接上代码了。
a）、css与js的引入顺序。1、css2、jquery3、bootstrap4、vue5、axios
b）、Vue区分大小写
c）、别忘记每个需要使用的数据都需要在data中声明
d）、【<tr v-for="item in newlist">】遍历的是【computed】计算后的新集合
希望此文对大家有所帮助，后续会编写
ASP.NET Core微服务(五)——【vue脚手架解析接口】、
ASP.NET Core微服务(六)——【redis操作】、
ASP.NETCore微服务(七)——【docker部署linux上线】
等文章。
此文标题为ASP.NET Core微服务(四)——【静态vue使用axios解析接口】
