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

.NET Core WebApi第6讲：WebApi的前端怎么派人去拿数据？（区别MVC）

news 文章来源：https://blog.csdn.net/weixin_54966200/article/details/143306920 2025/1/18 3:31:28

一、前端界面小基础

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

        

相关文章：

.NET Core WebApi第6讲：WebApi的前端怎么派人去拿数据？（区别MVC）

一、前端界面小基础 head&#xff1a;引入CSS, 引入JS是写在head里面。 body&#xff1a;眼睛肉眼能看到的用户展示的界面是写在body里面。 二、前端怎么派人去拿数据&#xff1f; 1、MVC&#xff1a;前后端不分离&#xff0c;MVC相比WebApi只是多了一个views的文件夹 &am…...

编程日记 2024/10/29 11:05:51

Chromium HTML5 新的 Input 类型date 对应c++

一、Input 类型: date date 类型允许你从一个日期选择器选择一个日期。 <!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title>test</title> </head> <body><form action"demo-form.php"…...

编程日记 2024/10/29 11:01:45

ZooKeeper的应用场景：深入探讨分布式系统中的多样化应用

Apache ZooKeeper 是一个开源的分布式协调服务&#xff0c;专为确保分布式系统中的高可用性和一致性而设计。在现代分布式应用程序中&#xff0c;协调、同步和管理是实现高效和可靠服务的关键部分&#xff0c;而 ZooKeeper 通过提供这些基础功能而成为许多分布式系统不可或缺的…...

编程日记 2024/10/29 11:00:44

【Vue3】第四篇

Vue3学习第四篇 01. 插槽Slots02. 插槽Slots&#xff08;续集&#xff09;03. 插槽Slots&#xff08;再续集&#xff09;04. 组件生命周期05. 生命周期应用06. 动态组件07. 组件保持存活08. 异步组件09. 依赖注入10. Vue应用 01. 插槽Slots 模板内容&#xff1a;html结构&#…...

编程日记 2024/10/29 10:58:40

Chromium HTML5 新的 Input 类型tel对应c++

一、Input 类型: tel <!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title>test</title> </head> <body><form action"demo-form.php">电话号码: <input type"tel" name…...

编程日记 2024/10/29 10:57:39

JVM—类加载器、双亲委派机制

目录 什么是类加载器 类加载器的分类 Bootstrap启动类加载器 通过启动类加载器加载用户jar包 Extension扩展类加载器和Application应用程序类加载器 通过扩展类加载器加载用户jar包 双亲委派机制 打破双亲委派机制 自定义类加载器 线程上下文类加载器 Osgi框架的类加…...

编程日记 2024/10/29 10:54:33

笔试题 求空格分割的英文句子中，最大单词长度。

求空格分割的英文句子中&#xff0c;最大单词长度。例如:“this is a word”&#xff0c;最大单词长度为4。要求:不能用 split 函数对字符串进行切分&#xff0c;算法复杂度为o(n) public class MaxWordLength { public static int maxWordLength(String sentence) { if (se…...

编程日记 2024/10/29 10:50:24

【笔记】大模型长度外推技术 NTK-Aware Scaled RoPE

NTK-Aware Scaled RoPE 正弦编码(Sinusoidal)旋转位置编码RoPE编码步骤&#xff1a;旋转位置编码的优势 NTK-Aware Scaled RoPE直接外推线性内插进制转换高频外推、低频内插的理解位置编码 总结参考&#xff1a; 长度外推技术是自然语言处理&#xff08;NLP&#xff09;领域中&…...

编程日记 2024/10/29 10:49:22

前端 eslint 配置，以及在git提交之前自动format

目录 1、配置eslint步骤 1、eslint安装配置步骤 2、配置scripts步骤 3、测试eslint 2、配置git-hook1、安装环境2、最终效果 众所周知&#xff0c;前端项目可以在报很多error的情况下运行。但是良好的代码规范仍然有利于项目的开发维护&#xff0c;这里提供我的规范&#xff0c…...

编程日记 2024/10/29 10:48:20

2024.10.9华为留学生笔试题解

第一题无线基站名字相似度 动态规划 考虑用动态规划解决 char1=input().strip() char2=input().strip() n,m=len(char1),len(char2) dp=[[0]*(m+1) for _ in range(n+1)] #dp[i][j]定义为以i-1为结尾的char1 和以 j-1为结尾的char2 的最短编辑距离 setA = set(wirel@com) set…...

编程日记 2024/10/29 10:45:17

利用ADPF性能提示优化Android应用体验

Android Dynamic Performance Framework(ADPF)是google推广的一套用于优化散热以及CPU性能的动态性能框架。本文主要介绍其中的performance hint的部分。 1、为何引入ADPF 我们都知道&#xff0c;在大多数设备上&#xff0c;Android 会动态调整CPU的频率和核心类型。如果work l…...

编程日记 2024/10/29 10:43:15

论文阅读 - Pre-trained Online Contrastive Learning for Insurance Fraud Detection

Pre-trained Online Contrastive Learning for Insurance Fraud Detection| Proceedings of the AAAI Conference on Artificial Intelligence 目录 摘要 Introduction Methodology Problem Formulation Pre-trained Model for Enhanced Robustness Detecting Network a…...

编程日记 2024/10/29 10:38:10

【最全基础知识2】机器视觉系统硬件组成之工业相机镜头篇--51camera

机器视觉系统中，工业镜头作为必备的器件之一，须和工业相机搭配。工业镜头是机器视觉系统中不可或缺的重要组成部分，其质量和性能直接影响到整个系统的成像质量和检测精度。 目录 一、基本功能和作用 二、分类 1、按成像方式分 2、按焦距分 3、按接口类型分 4、按应用…...

编程日记 2024/10/29 10:35:06

虚拟机WIN7安装PADS VX24 出现脚本故障 IPW213

用虚拟机安装WIN7&#xff0c;再开始安装PADS V24出现脚本故障IPW213 有去.NetFramework3.5 仍然没有效果 Download Microsoft .NET Framework 3.5 from Official Microsoft Download Center 最终用360驱动大师检测了下 发现有些必备组件没有安装&#xff0c;安装之后重启。 …...

编程日记 2024/10/29 10:30:01

Java正则表达式详解万字笔记内容丰富

正则表达式 1.1 正则表达式的概念及演示 在Java中&#xff0c;我们经常需要验证一些字符串&#xff0c;例如&#xff1a;年龄必须是2位的数字、用户名必须是8位长度而且只能包含大小写字母、数字等。正则表达式就是用来验证各种字符串的规则。它内部描述了一些规则&#xff0c…...

编程日记 2024/10/29 10:28:57

文件属性与目录

⚫ Linux 系统的文件类型&#xff1b; 普通文件&#xff1a;存储数据&#xff0c;如文本文件、可执行文件等。 目录&#xff1a;用于组织文件和其他目录的特殊文件。 符号链接&#xff1a;指向另一个文件或目录的引用&#xff0c;类似于 Windows 中的快捷方式。 硬链接&#x…...

编程日记 2024/10/29 10:27:56

5G 基站SCTP

如何实现SCTP多归属链路对接 文章目录 ​​前言​​​​一、SCTP是什么&#xff1f;​​​​二、lksctp​​​​三.sctp初始化​​​​四.绑定本端两个IP​​​​ 五.与对端建链​​​​六.设置主要路径​​​​七.设置是否启用心跳​​​​八.关于防火墙的配置​ ​总结​​ …...

编程日记 2024/10/29 10:26:55

MFC的SendMessage与PostMessage的区别

一、SendMessage 同步操作&#xff1a; SendMessage 是一个同步函数&#xff0c;它会将消息发送到指定的窗口&#xff0c;并等待该窗口的消息处理过程完成&#xff0c;然后返回。这意味着它会阻塞当前线程&#xff0c;直到消息处理完成。 直接调用&#xff1a; SendMessage 会…...

编程日记 2024/10/29 10:25:53

学习虚幻C++开发日志——基础案例（持续更新中）

官方文档&#xff1a;虚幻引擎C编程教程 | 虚幻引擎 5.5 文档 | Epic Developer Community | Epic Developer Community 1.物体上下起伏并旋转 1.1第一种写法 创建一个继承于Actor的类&#xff0c;并为新的Actor命名为FloatingActor&#xff0c;然后点击Create Class 重新…...

编程日记 2024/10/29 10:23:48

【CUDA代码实践03】m维网格n维线程块对二维矩阵的索引

文章目录 一、数据存储方式二、二维网格二维线程块三、二维网格一维线程块四、一维网格一维线程块 为了方便下次找到文章&#xff0c;也方便联系我给大家提供帮助&#xff0c;欢迎大家点赞&#x1f44d;、收藏&#x1f4c2;和关注&#x1f514;&#xff01;一起讨论技术问题&am…...

编程日记 2024/10/29 10:21:44

VSCode Qt6安装OpenSSL

报错 Could NOT find OpenSSL, try to set the path to OpenSSL root folder in thesystem variable OPENSSL_ROOT_DIR (missing: OPENSSL_CRYPTO_LIBRARYOPENSSL_INCLUDE_DIR SSL Crypto) (Required is at least version "3.0")问题确认 这个错误显示在Windows环境…...

编程日记 2024/10/29 10:18:40

JAVA学习-练习试用Java实现“定义一个用户类，包含用户名和密码”

问题&#xff1a; 定义一个用户类&#xff08;User&#xff09;&#xff0c;包含用户名&#xff08;username&#xff09;和密码&#xff08;password&#xff09;属性&#xff0c;提供静态方法验证密码是否有效&#xff08;长度至少为6&#xff09;&#xff0c;并提供getter和…...

编程日记 2024/10/29 10:17:38

大数据之VIP（Virtual IP，虚拟IP）负载均衡

VIP&#xff08;Virtual IP&#xff0c;虚拟IP&#xff09;负载均衡是一种在计算机网络中常用的技术&#xff0c;用于将网络请求流量均匀地分散到多个服务器上&#xff0c;以提高系统的可扩展性、可靠性和性能。以下是对VIP负载均衡的详细解释&#xff1a; 一、VIP负载均衡的基…...

编程日记 2024/10/29 10:16:36

鸿蒙网络编程系列38-Web组件文件下载示例

1. web组件文件下载能力简介 在本系列的第22篇文章&#xff0c;介绍了web组件的文件上传能力&#xff0c;同样的&#xff0c;web组件也具备文件下载能力&#xff0c;鸿蒙API提供了处理web组件下载事件的委托类型WebDownloadDelegate&#xff0c;该类型包括四个下载事件的回调接…...

编程日记 2024/10/29 10:15:35

Cisco Packet Tracer 8.0 路由器的基本配置和Telnet设置

文章目录 构建拓扑图配置IP地址配置路由器命令说明测试效果 构建拓扑图 1&#xff0c;添加2811路由器。 2&#xff0c;添加pc0。 3&#xff0c;使用交叉线连接路由器和pc&#xff08;注意线路端口&#xff09;。 4&#xff0c;使用配置线连接路由器和pc&#xff08;注意线路…...

编程日记 2024/10/29 10:14:32

Flink系列之：学习理解通过状态快照实现容错

Flink系列之&#xff1a;学习理解通过状态快照实现容错 状态后端检查点存储状态快照状态快照如何工作&#xff1f;确保精确一次&#xff08;exactly once&#xff09;端到端精确一次 状态后端 由 Flink 管理的 keyed state 是一种分片的键/值存储&#xff0c;每个 keyed state…...

编程日记 2024/10/29 10:13:29

Linux 读者写者模型

1.背景概念 在编写多线程的时候&#xff0c;有一种情况是十分常见的。那就是&#xff0c;有些公共数据修改的机会比较少。相比较改写&#xff0c;它们读的机会反而高的多。这样就衍生出了读者写者模型&#xff0c;在这个模型中&#xff0c;有两类线程&#xff1a;读者和写者。读…...

编程日记 2024/10/29 10:11:26

JavaScript 的 axios 实现文件下载功能

用 JavaScript 的 axios 实现文件下载功能&#xff0c;咱们要分几个步骤来搞定它&#xff01;最主要的部分是处理 二进制数据&#xff0c;可以生成一个进度检测&#xff0c;然后把它保存为文件。 文件名的获取二进制数据获取创建下载链接 const axios require(axios);const g…...

编程日记 2024/10/29 10:09:24

合合信息亮相2024中国模式识别与计算机视觉大会，用AI构建图像内容安全防线

近日&#xff0c;第七届中国模式识别与计算机视觉大会&#xff08;简称“PRCV 2024”&#xff09;在乌鲁木齐举办。大会由中国自动化学会&#xff08;CAA&#xff09;、中国图象图形学学会&#xff08;CSIG&#xff09;、中国人工智能学会&#xff08;CAAI&#xff09;和中国计…...

编程日记 2024/10/29 10:06:18

深度学习：匿名函数lambda函数的使用与numerical_gradient函数

背景&#xff1a; 假设我们有一个简单的线性回归模型&#xff0c;其损失函数是均方误差&#xff08;MSE&#xff09;&#xff1a; class LinearModel:def __init__(self):self.W np.random.randn(1, 1) # 初始化权重def predict(self, x):return np.dot(x, self.W) # 线性预…...

编程日记 2024/10/29 10:05:16

成都网站建设优惠活动/网站友情链接交易平台

在浏览器支持的 CSS position: fixed (大多数的桌面浏览器, iOS5, Android 2.2, BlackBerry 6, 和其他)。工具栏使用“固定工具栏”插件将被固定在视图的顶部或底部&#xff0c;当页面自由滚动&#xff0c;固定栏始终浮动在屏幕的顶部或者底部。在浏览器不支持固定定位&#xf…...

编程日记 2025/1/18 1:39:07

成都网站建设 川icp备/网站软件免费下载

【答案】&#xff1a;C B B B A ①你是公司某项目的项目经理。在项目过程中&#xff0c;你发现公司不具备自主研发某一项可交付成果的能力&#xff0c;并寻求了采购部门的支持。采购部门现在召开一个面向潜在供应商的会议&#xff0c;针对需要采购的内容进行澄清&#xff0c;请…...

编程日记 2025/1/18 1:17:46

手机windows wordpress/app推广代理去哪里找

前几天&#xff0c;我去一家电脑专卖店买笔记本电脑&#xff0c;销售热情地给我讲产品如何好&#xff0c;哪些优越的性能其他品牌根本无法与之相提并论&#xff0c;并且还有限时促销。看到我不为所动&#xff0c;销售人员急切地问我&#xff1a;“您今天是想看看还是想买呢&…...

编程日记 2025/1/18 0:36:15

宁波网站制作流程/宁波seo优化外包公司

[hadoopmaster1 ~]$ cat zookeeper/conf/zoo.cfg # The number of milliseconds of each tick 每个心跳的时长 单位为毫秒 tickTime2000 # The number of ticks that the initial # synchronization phase can take 初始化同步时期的心跳数 initLimit10 # The number of tick…...

编程日记 2025/1/17 23:14:00

w3cschool wordpress/搜索引擎营销的案例

Flink提供了两种在yarn上运行的模式&#xff0c;分别为Session-Cluster和Per-Job-Cluster模式。 Session-cluster 模式&#xff1a; Session-Cluster模式需要先启动集群&#xff0c;然后再提交作业&#xff0c;接着会向yarn申请一块空间后&#xff0c;资源永远保持不变。如果…...

编程日记 2025/1/17 23:07:54

dz可以做门户网站吗/seo培训机构排名

ID&#xff1a;黄海广公众号&#xff1a;机器学习初学者前些日子推荐了一个仓库&#xff0c;是知名开源apachecn组织翻译的《面向机器学习的特征工程》英文版&#xff0c;可以说是特征工程的宝典&#xff0c;值得推荐。仓库说明知名开源apachecn组织翻译了《面向机器学习的特征…...

编程日记 2025/1/17 20:37:47