.NET Core WebApi第6讲:WebApi的前端怎么派人去拿数据?(区别MVC),理解axios.get(网址).then(匿名函数)

一、前端界面小基础

head:引入CSS, 引入JS是写在head里面。

body:眼睛肉眼能看到的用户展示的界面是写在body里面。

二、前端怎么派人去拿数据?

1、MVC【Model+Controller+View】:前后端不分离,MVC相比WebApi只是多了一个views的文件夹

(1)MVC里有一个叫Razor引擎的东西,它能够将我在后端写的东西,直接通过一个包给它拎到前端来。

(2)新建MVC项目

(3)MVC里面的前端如何拿到后端的数据?——可以直接把后端数据拿到前端来展示

1>具体操作:用包(ViewBag.任意名)传递数据

        准备一个手提包,把我们的这个数据放到包里面,然后拎到前端去展示。

2>注意:看到返回值是return view();的,就知道这个行为对应的是一个页面。

        (如下图中,这个控制器里面有一个index页面。)

当然!在ASP.NET Core 6中,你可以使用Web API特性路由和前后端调用分离技术来构建灵活的Web API。下面是一个示例,演示如何实现这些功能。 首先,创建一个新的ASP.NET Core 6 Web API项目。在Visual Studio 2022中,选择"创建新项目",然后选择"ASP.NET Core Web API"模板,并点击"下一步"。 接着,给你的项目命名,并选择合适的位置进行保存。点击"创建"。 默认情况下,ASP.NET Core 6使用控制器类名作为路由的一部分。为了使路由更加灵活,我们可以使用Web API特性路由。 打开`Controllers`文件夹,创建一个新的控制器,命名为`ValuesController.cs`。在控制器中,添加以下代码: ```csharp using Microsoft.AspNetCore.Mvc; namespace YourProject.Controllers { [ApiController] [Route("api/[controller]")] public class ValuesController : ControllerBase { [HttpGet] public IActionResult Get() { return Ok(new string[] { "value1", "value2" }); } [HttpGet("{id}")] public IActionResult Get(int id) { return Ok($"value{id}"); } [HttpPost] public IActionResult Post([FromBody] string value) { // 处理POST请求 return Ok(value); } [HttpPut("{id}")] public IActionResult Put(int id, [FromBody] string value) { // 处理PUT请求 return Ok(value); } [HttpDelete("{id}")] public IActionResult Delete(int id) { // 处理DELETE请求 return Ok($"Deleted value{id}"); } } } ``` 在上述代码中,我们使用`[ApiController]`特性来指示控制器是一个Web API控制器,并使用`[Route("api/[controller]")]`特性来指定路由模板。这里的`[controller]`将被替换为控制器类名的小写形式(即"values")。 在控制器中,我们定义了五个动作方法:`Get`、`Get(id)`、`Post`、`Put(id)`和`Delete(id)`。这些方法分别对应于HTTP的GET、POST、PUT和DELETE请求,并通过`HttpGet`、`HttpPost`、`HttpPut`和`HttpDelete`特性进行标记。 在这个示例中,我们简单地返回一些字符串作为响应。你可以根据自己的需求在这些方法中添加逻辑。 接下来,我们需要实现前后端调用分离技术。在这里,我们可以使用JavaScript的Axios库来发起HTTP请求。 在wwwroot文件夹下创建一个新的文件夹,命名为"js"。在该文件夹中创建一个新的JavaScript文件,命名为"api.js",并添加以下代码: ```javascript import axios from 'axios'; const baseUrl = '/api/values'; // Web API的基本URL export const getValues = async () => { const response = await axios.get(baseUrl); return response.data; }; export const getValue = async (id) => { const response = await axios.get(`${baseUrl}/${id}`); return response.data; }; export const postValue = async (value) => { const response = await axios.post(baseUrl, value); return response.data; }; export const putValue = async (id, value) => { const response = await axios.put(`${baseUrl}/${id}`, value); return response.data; }; export const deleteValue = async (id) => { const response = await axios.delete(`${baseUrl}/${id}`); return response.data; }; ``` 在上述代码中,我们定义了几个函数,分别对应于GET、POST、PUT和DELETE请求。这些函数使用Axios库来发送HTTP请求,并返回响应数据。 最后,在HTML文件中引入这个JavaScript文件,并调用相应的函数来实现前后端交互。 这就是一个使用ASP.NET Core 6的Web API特性路由和前后端调用分离技术的示例。希望对你有帮助!如果还有其他问题,请随时提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小吴同学·

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值