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】

<!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) { //修改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>
</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解析接口】

ASP.NET Core微服务(四)——【静态vue使用axios解析接口】相关推荐

npm——安装教程、安装vue脚手架(ASP.NET Core微服务(五)——【vue脚手架解析接口】过度章节)
npm:是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题. 比如常用的有: 1)允许用户从NPM服务器下载别人编写的第三方包到本地使用. 2)允许用户从NPM服务器下载并 ...
ASP.NET Core微服务(五)——【vue脚手架解析接口】
ASP.NET Core微服务(五)--[vue脚手架解析接口]: 后台接口请参照:ASP.NET Core微服务(三)--[跨域配置]:[https://blog.csdn.net/feng8403 ...
ASP.NET Core微服务(三)——【跨域配置】
ASP.NET Core微服务(三)--[跨域配置] 对应练习demo(跨域)下载路径(1积分):[https://download.csdn.net/download/feng8403000/151 ...
ASP.NET Core微服务(二)——【ASP.NET Core Swagger配置】
ASP.NET Core微服务(二)--[ASP.NET Core Swagger配置]: 环境:win10专业版+vs2019+sqlserver2014/2019 ASP.NET Core微服务( ...
ASP.NET Core微服务(一)——【完整API搭建及访问过程】
ASP.NET Core微服务(一)--[完整API搭建及访问过程]: 环境:win10专业版+vs2019+sqlserver2014/2019 对应练习demo下载路径(1积分):[https:/ ...
Asp.Net Core微服务再体验
Asp.Net Core微服务再体验原文:Asp.Net Core微服务再体验 ASP.Net Core的基本配置 .在VS中调试的时候有很多修改Web应用运行端口的方法.但是在开发.调试微服务应用 ...
javaweb k8s_K8S微服务核心架构学习指南 ASP.NET Core微服务基于K8S 架构师必备Kubernetes教程...
K8S微服务核心架构学习指南 ASP.NET Core微服务基于K8S 架构师必备Kubernetes教程课程内容是关于Kubernetes微服务架构学习课程,基于K8S开展ASP.NET核心进行微 ...
ASP.NET Core微服务(七)——【docker部署linux上线】(RDS+API接口测试部分)
ASP.NET Core微服务(七)--[docker部署linux上线]: 本文测试采用阿里云的RDS(sqlserver服务器)+ECS(linux服務器)进行测试,由于是测试,[按量付费]买个最 ...
ASP.NET Core微服务(六)——【redis操作】
ASP.NET Core微服务(六)--[redis操作]: Redis 是一个高性能的key-value数据库. redis的出现,很大程度补偿了memcached这类key/value存储的不足, ...

ASP.NET Core微服务(四)——【静态vue使用axios解析接口】