当前位置: 首页 > news >正文

.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(匿名函数)

        


http://www.mrgr.cn/news/60980.html

相关文章:

  • 【形态学 - 击中-击不中变换(很多都讲得不直观不清楚,甚至是错的,我来个通俗易懂的)】
  • java项目分层开发中,真的有必要定义 VO 吗?
  • 除了`ROW_NUMBER()`,还有哪些SQL函数适合处理大型数据集?
  • java final字段使用
  • shell脚本一键部署-tomcat安装部署
  • 聊聊公众号联动扫码登录功能如何实现
  • 【C++】深入C++的STL:如何编写高效的自定义容器
  • 多态的优缺点
  • 线下台球自助小程序:解锁台球娱乐新体验
  • 【计算机网络 - 基础问题】每日 3 题(五十九)
  • 医院信息化与智能化系统(12)
  • 公路水运工程企业安全员A类题库分享
  • (免费领源码)基于java#springboot#mysql微信小程序的鲜花商城84731-计算机毕设 原创
  • 计算机专业就业方向和前景,零基础入门到精通,收藏这篇就够了
  • 地球上的中国:世界地图概览
  • 基于微信小程序的公务员考试信息查询系统+LW示例参考
  • 期货海龟策略,年化27.67% | 健康无碍,财富可解千愁
  • 您的ip地址不在允许范围内怎么解决
  • 短信登录的实现-redis和session的比较
  • JVM—类加载器、双亲委派机制