.NET Core WebApi第6讲:WebApi的前端怎么派人去拿数据?(区别MVC)

一、前端界面小基础

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

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

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

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

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

(2)新建MVC项目

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

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

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

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

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

3>Views文件夹下的Home文件夹,对应上图中Homecontrolles.cs下面所有的页面。
4>前端展示后端:加一个@

这是Razor引擎的一个关键的一个标记。加了@之后,这个里面写的东西就是后端的值了。

2、WebApi:前后端分离,views的文件夹在桌面(即UI文件夹)

(1)创建前端文件夹

1>在桌面新建文件夹,叫做"UI"
2>通过VS打开,新建文件叫做"index.html"

1)敲一个"!",按回车键,有智能提示。

2)点击"Open in Default Browser",在浏览器中打开。

(2)WebApi里面的前端如何拿到后端的数据?------必须通过webAPI接口去请求数据

1>前端的具体操作:使用Ajax请求【即axios工具包】,注意js语言操作的区间必须在<script>里面

axios工具包:在前端里面,有一个专门的工具包帮我们封装好了Ajax请求,这个工具包叫axios。

1)导入axios.js文件
2)在index.html文件的<head>中引入axios.js文件配置
3)理解axios.get(括号中是网址).then(括号中是匿名函数)

注意:下面1》到4》所有的运行结果都和上图一样,都是如下图。

1》如下图,去掉上图中快递的打包盒子value。

2》如下图,给**匿名函数(没有名字的函数)**传值:参数加上name。

【调用匿名函数function的时候,给它传一个值"Ace"】

3》如下图,将上图中的mainFunc函数改名为then

4》在then方法中有一系列非常复杂的过程,然后产生一个func值"Ace!!!"传到function匿名函数中

5》理解axios.get(网址).then(匿名函数)

相关推荐
EdisonZhou1 天前
使用MCP C# SDK开发MCP Server + Client
llm·aigc·asp.net core·.net core
黑贝是条狗6 天前
对.net 的改变
.net core
小吴同学·10 天前
NET6 WebApi第5讲:中间件(源码理解,俄罗斯套娃怎么来的?);Web 服务器 (Nginx / IIS / Kestrel)、WSL、SSL/TSL
中间件·c#·.net·.netcore·.net core
坐望云起11 天前
ASP.NET Web的 Razor Pages应用,配置热重载,解决.NET Core MVC 页面在更改后不刷新
前端·后端·asp.net·mvc·.net core·razor pages
代码拾光23 天前
.NET Core 中如何实现缓存的预热?
.net core
EdisonZhou1 个月前
基于Microsoft.Extensions.AI核心库实现RAG应用
llm·aigc·.net core
时光追逐者1 个月前
一个开源且免费的 .NET CMS 和应用程序框架
开源·c#·.net·cms·.net core
EdisonZhou1 个月前
基于Microsoft.Extensions.VectorData实现语义搜索
llm·aigc·.net core
时光追逐者1 个月前
推荐几款开源免费的 .NET MAUI 组件库
microsoft·开源·c#·.net·.net core·maui