.net Core3.1 WebAPI+Vue 前后端調用的一些問題

本人小白，如果你對此沒啥了解，可以先搜索某個大神的教程看看：

Asp.netCore3.0 WebApi從0到1手摸手教你寫【1】簡單的webapi接口

說實話講的真不錯，只是我水平有限，看到實體類就暈了，只好將就着做個自己能用的就行了，至於怎么保存數據，以后再說。

需要的開發工具：

1、VS 2019 用以開發后端webapi

2、VS Code 用以前端開發，使用vue來做為前端框架，不懂的可以看看技術胖的教程，講的很不錯還免費，地址為 https://space.bilibili.com/165659472/channel/detail?cid=76803

3、Postman，用於調試你開發的接口，現在只有安裝版了，可以在你沒有使用vue時調試下所做的接口

 

---

 

一、控制器的路由設置問題

1、在項目中新建控制器，注釋掉控制器中的路由

 

 然后在startup.cs文件的Configureg事件中增加動態路由

 

 

          app.UseEndpoints(endpoints =>
            {
                //endpoints.MapControllers();
                endpoints.MapControllerRoute(
                    name: "defalut",
                    pattern: "api/{controller=Home}/{action=Index}/{id?}"
                 );
            });

 

二、項目中依賴項中包的安裝問題

使用NuGet包管理器來安裝所需要的包，如果你不會EF，不會LinQ，那么就不需要安裝那些包了，我們可以使用以前的方法來保存數據到數據庫的，我安裝了三個

 

 

 

 安裝的時候比較慢，system.data.SqlClinet就是以前.net 4.0中我們用來保存數據到數據庫時引用的包，現在需要單獨引入。

 

三、Post數據傳輸時接口接收的問題

通過 Post來向接口傳遞數據后端接收一共有四種方法，可以參考下面這位大神寫的

.NET Core WebAPI post參數傳遞時后端的接收方式

我們使用第一種方法：實體類，個人感覺容易理解。

在項目中新建一個類，用於存放定義的實體類，你也可以定義到控制器中。

 

 在控制器中使用定義好的實體類

 

 四、使用postman測試接口

按F5啟動你的項目，然后打開postman

 

 就算你body中的json數據和后端定義的實體類不一致，后端也能接收到， 但是后端實體類中有的在json中一定要有。

 

五、使用Vue調用后端的接口

需要使用vue-cli來創建前端項目，如果你是單頁面引用的話，那么在使用方法上會有所不同。

1、安裝axios包

2、在main.js文件中引用axios

 

 

 3、在vue文件中使用axios，為了方便使用，需要做個簡單的封裝。

 

 

 注釋掉的部分起的作用是把json轉成字符串，因為所要調用的post接口參數就是json的，所以不需轉換了

 axiosPost:function(url,params){
          return new Promise((resolve, reject) => {
                  this.$axios({
                  url: url,
                  method: 'post',
                  data: params,
                  // transformRequest: [function(data) {
                  //     let ret = ''
                  //     for(let it in data) {
                  //         ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                  //     }
                  //     console.log(ret)
                  //     return ret
                  // }],
                  headers: {
                      'Content-Type':'application/json'
                  }
              })
              .then(res=>{
                  resolve(res.data);
              })
          });
      },

4、在vue文件中使用封裝好的axios

 

 

 

login(){
          var params={
              user:this.yhm,
              pwd:this.pwd,
          };
          var url='http://192.168.3.111:5000/api/user/userlogin';
          this.axiosPost(url,params)
          .then(res=>{
              if (res===401){
                  //window.location.href='login.htm';
                  console.log(res);
              }else{
                  console.log(res);
              }
          })
          //return ''
      },

res中就是返回的數據，在這里接收到以后可以自已處理一下。

5、跨域請求錯誤的處理

調用后發現出錯了，

跨域請求錯誤： Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin'

可以參照下面的這個貼子來進行處理

https://www.cnblogs.com/jidanfan/p/11177509.html

在后端webapi項目中的startup.cs文件的Configure事件中增加以下的代碼

app.UseCors(cfg =>
{
cfg.AllowAnyOrigin(); //對應跨域請求的地址
cfg.AllowAnyMethod(); //對應請求方法的Method
cfg.AllowAnyHeader(); //對應請求方法的Headers
//cfg.AllowCredentials(); //對應請求的withCredentials 值
});

好了，到此一個最基本的前端調用后端的例子就做好了。

水平很差，不會寫貼子，寫的東西自己公司內部將就着能用用就行了