.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 值
});

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

水平很差，不会写贴子，写的东西自己公司内部将就着能用用就行了