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】中粘贴以下代码：

<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脚手架解析接口】