当前位置: 首页 > 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.lryc.cn/news/471447.html

相关文章:

  • Chromium HTML5 新的 Input 类型date 对应c++
  • ZooKeeper的应用场景:深入探讨分布式系统中的多样化应用
  • 【Vue3】第四篇
  • Chromium HTML5 新的 Input 类型tel对应c++
  • JVM—类加载器、双亲委派机制
  • 笔试题 求空格分割的英文句子中,最大单词长度。
  • 【笔记】大模型长度外推技术 NTK-Aware Scaled RoPE
  • 前端 eslint 配置,以及在git提交之前自动format
  • 2024.10.9华为留学生笔试题解
  • 利用ADPF性能提示优化Android应用体验
  • 论文阅读 - Pre-trained Online Contrastive Learning for Insurance Fraud Detection
  • 【最全基础知识2】机器视觉系统硬件组成之工业相机镜头篇--51camera
  • 虚拟机WIN7安装PADS VX24 出现脚本故障 IPW213
  • Java正则表达式详解万字笔记内容丰富
  • 文件属性与目录
  • 5G 基站SCTP
  • MFC的SendMessage与PostMessage的区别
  • 学习虚幻C++开发日志——基础案例(持续更新中)
  • 【CUDA代码实践03】m维网格n维线程块对二维矩阵的索引
  • VSCode Qt6安装OpenSSL
  • JAVA学习-练习试用Java实现“定义一个用户类,包含用户名和密码”
  • 大数据之VIP(Virtual IP,虚拟IP)负载均衡
  • 鸿蒙网络编程系列38-Web组件文件下载示例
  • Cisco Packet Tracer 8.0 路由器的基本配置和Telnet设置
  • Flink系列之:学习理解通过状态快照实现容错
  • Linux 读者写者模型
  • JavaScript 的 axios 实现文件下载功能
  • 合合信息亮相2024中国模式识别与计算机视觉大会,用AI构建图像内容安全防线
  • 深度学习:匿名函数lambda函数的使用与numerical_gradient函数
  • PHP数据类型