.Net Core 教程 Part4 – (16)(17)(18)(19) Web API

Part4-16 ASP.NET Core Web API 控制器及返回值

ControllerBase VS COntroller

  • ControllerBase与Controller, MVC 继承自 Controller, 增加了MVC View等功能 , API是直接继承ControllerBase;
  • 控制器类可以不显式地继承自任何类。

Action方法的异步

  • Action方法既可以同步也可以异步。
  • 异步Action方法的名字一般不需要以Async结尾。
  • Web API中Action方法的返回值如果是普通数据类型,那么返回值就会默认被序列化为Json格式。
  • Web API中的Action方法的返回值同样支持IActionResult类型,不包含类型信息,因此Swagger等无法推断出类型,所以推荐用ActionResult<T>,它支持类型转换,从而用起来更简单。对于有可能返回报错信息的,可使用ActionResult<T>
[HttpGet]
public ActionResult<Person> GetPerson(int id)
{
	if (id <= 0)
		return BadRequest("id必须是正数");
	else if (id == 1)
		return new Person(1, "chaoqiang", 18);//如果使用ActionResult<T>,就可以自动转换Person
    //return Ok(person);//如果使用ActionResult 需要Ok转换一下
	else if (id == 2)
		return new Person(2, "superman", 8);
	else
		return NotFound(“人员不存在”);//自定义消息也重要
}

Part4-17 ASP.NET Core Web API Action方法参数

捕捉URL占位符

  • 在[HttpGet]、[HttpPost]等中使用占位符,比如{schoolName},捕捉路径中的内容,从而供Action方法的参数使用。
    • /Students/GetAll/school/MIT/class/A001
    • [HttpGet(“school/{schoolName}/class/{classNo}”)]
  • 捕捉的值会被自动赋值给Action中同名的参数;如果名字不一致,可以用[FromRoute(Name=”名字”)]
  • 演示混用。
.Net Core 教程 Part4 - (16)(17)(18)(19) Web API

捕捉QUERYSTRING的值

  • 使用[FromQuery]来获取QueryString中的值。如果名字一致,只要为参数添加[FromQuery]即可;而如果名字不一致,[FromQuery(Name = 名字)]。
  • QueryString和Route可以混用。
[HttpGet("{i1}/{i2}")]
public int Plus(int i1, int i2)
{ 
    return i1 + i2; 
}

[HttpGet("students/school/{schoolName}/class/{classNo}")]
public Person GetStudents(string schoolName, [FromRoute(Name ="classNo")]long classNum)
{
     return new Person ( classNum + 6, schoolName + "的扛把子", 9 );
}

[HttpPost]
public int Save([FromQuery(Name ="aaa")]int i1, int i2)
{
    return i1 + i2;
}

JSON报文体

  • Web API的开发模式下,Json格式的请求体是主流。
  • 只要声明一个模型类和Json请求的格式一致即可。
  • 也是可以把从URL获取参数、从请求报文体获取数据等这些混合使用。
    •  [HttpPost(“classId/{classId}”)]
    •  public ActionResult<long> AddNew(long classId, StudentModel s)
  • 一定要设定请求头中的Content-Type为application/json,而且数据必须是合法的json格式。
.Net Core 教程 Part4 - (16)(17)(18)(19) Web API

其他方式,Web API中很少用的方式:

  • 从Content-Type为multipart/form-data的请求中获取数据的[FromForm]
  • 从请求报文头中获取值的[FromHeader]。
[HttpPut("{id}")]
public string UpdatePerson([FromRoute(Name = "id")] int id, Person p1,[FromHeader(Name ="User-Agent")]string agent)
{
    var a = agent;
    return "更新" + id +"成功" + p1.Name +"agent:"+a;
}

Part4-18 前后端分离开发(1)

1、传统MVC开发模式:前后端的代码被放到同一个项目中,前端人员负责编写页面的模板,而后端开发人员负责编写控制器和模型的代码并且“套模板”。缺点:互相依赖;耦合性强责任划分不清

2、主流的“前后端分离” :前端开发人员和后端开发人员分别负责前端和后端代码的开发,各自在自己的项目中进行开发;后端人员只写Web API接口,页面由前端人员负责。

为什么“前后端分离” 更流行:需求变动越来越大、交付周期越来越短、多端支持

优点:独立开发,不互相依赖;耦合性低;责任划分清晰;前后端分别部署,可以针对性运维(扩容等)

缺点:对团队的沟通能力要求更高,提前沟通好接口和通知接口变更;不利于SEO(可以用“服务器端渲染”SSR);对运维要求更高。

3、只有大项目才需要前后端分离吗?小项目也可以前后端分离。

后端登陆实例

.Net Core 教程 Part4 - (16)(17)(18)(19) Web API
后端登陆API

Part4-19 前后端分离开发(2)

前端登陆实例

  • 1、Web API做后端开发,不绑定前端技术,也支持其他客户端。
  • 2、Vue搭建步骤:
    • 1)安装Node.js
    • 2)设定国内镜像 npm config set registry https://registry.npm.taobao.org
    • 3)安装yarn:npm install -g yarn
    • 4)创建Vue项目:yarn create @vitejs/app  项目名字
    • 5)按照提示运行项目。
.Net Core 教程 Part4 - (16)(17)(18)(19) Web API
npm安装与taobao镜像源配置
.Net Core 教程 Part4 - (16)(17)(18)(19) Web API
创建vue项目并启动项目
.Net Core 教程 Part4 - (16)(17)(18)(19) Web API
Vue3 项目界面

Part4-20 前后端分离开发(3)

1、在src文件夹下创建views文件夹。

2、安装ajax库axios,项目根目录:yarn add axios

3、在views文件夹下创建Login.vue文件

<template>
用户名: <input type="text" v-model="state.loginData.userName" />
密码:<input type="submit" value="登录" @click="loginSubmit"/>
<tr v-for="p in state.processes" :key="p.id">
    <td>{{(p.workingSet64/1024)}}K</td>
</tr>
</template>

<script setup>
import axios from 'axios';
import {reactive,onMounted} from 'vue' 
export default {  name: 'Login',
  setup(){
    const state=reactive({loginData:{},processes:[]});
    const loginSubmit=async ()=>{
      const payload = state.loginData;
      if(!data.isOK)
      const resp = await axios.post('https://localhost:44360/api/Login/Login',payload);
      const data = resp.data;
      state.processes = data.processes;
    }
    return {state,loginSubmit};
  },

</script>

4、使用vue-router来做前端的页面路由。在前端的项目根目录执行:yarn add vue-router@4

5、在src下创建route文件夹,并且在route文件夹下创建index.js文件

import { createRouter,createWebHashHistory} from "vue-router";
import Test from "../views/Test.vue";
import Login from "../views/Login.vue";
const routes = [{path: "/", redirect: "/Test"},
  {path: "/Test",name:"Test",component: Test},
  {path: "/Login",name:"Login",component: Login}]
const router = createRouter({history: createWebHashHistory(),routes: routes});
export default router

6、编辑src/main.js,增加import router from ‘./route’以及use(router),修改main.js:

import { createApp } from 'vue'
import App from './App.vue'
import router from './route'
createApp(App).use(router).mount('#app’);

7、src/App.vue中增加指向Login视图的链接以及显示路由视图的<router-view/>

<template>
  <div><router-link to="Login">Login</router-link></div><router-view />
</template>

CORS

1、跨域通讯的问题。解决方案:JSONP、前端代理后端请求、CORS等。

2、CORS原理:在服务器的响应报文头中通过access-control-allow-origin告诉浏览器允许跨域访问的域名。

3、在Program.cs的“var app=builder.Build()”这句代码之前注册

4、在Program.cs的app.UseHttpsRedirection()这句代码之前增加一行app.UseCors()

string[] urls = new[] { "http://localhost:3000" };
builder.Services.AddCors(options =>
    options.AddDefaultPolicy(builder => builder.WithOrigins(urls)
    .AllowAnyMethod().AllowAnyHeader().AllowCredentials()));

本文版权归Chaoqiang's Blog站点所有,发布者:chaoqiang,转转请注明出处:https://www.zhengchaoqiang.com/1372.html

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

近期个人博客正在迁移中,原博客请移步此处,抱歉!