當前位置：首頁 > 编程语言 > asp.net >内容正文

asp.net

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

發布時間：2024/8/26 asp.net 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 ASP.NET Core微服务(四)——【静态vue使用axios解析接口】小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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><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解析接口】的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： ASP.NET Core微服务(三)——
下一篇： npm——安装教程、安装vue脚手架(A