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

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

news 2026/2/6 22:22:57

一、前端界面小基础

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

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子&#xff0c;用于处理异步操作&#xff08;如数据加载&#xff09;中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误&#xff1a;捕获在 loader 或 action 中发生的异步错误替…...

编程新知 2025/11/25 10:36:53

地震勘探——干扰波识别、井中地震时距曲线特点

目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波&#xff1a;可以用来解决所提出的地质任务的波&#xff1b;干扰波&#xff1a;所有妨碍辨认、追踪有效波的其他波。 地震勘探中&#xff0c;有效波和干扰波是相对的。例如&#xff0c;在反射波…...

编程新知 2026/2/2 3:20:56

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下&#xff1a; struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

编程新知 2025/11/27 21:52:13

椭圆曲线密码学(ECC)

一、ECC算法概述 椭圆曲线密码学&#xff08;Elliptic Curve Cryptography&#xff09;是基于椭圆曲线数学理论的公钥密码系统&#xff0c;由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA&#xff0c;ECC在相同安全强度下密钥更短&#xff08;256位ECC ≈ 3072位RSA…...

编程新知 2025/10/1 22:26:06

边缘计算医疗风险自查APP开发方案

核心目标：在便携设备（智能手表/家用检测仪）部署轻量化疾病预测模型，实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

编程新知 2026/1/28 10:02:54

YSYX学习记录（八）

C语言&#xff0c;练习0&#xff1a; 先创建一个文件夹&#xff0c;我用的是物理机&#xff1a; 安装build-essential 练习1&#xff1a; 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件&#xff0c;随机修改或删除一部分&#xff0c;之后…...

编程新知 2026/1/24 14:31:01

HTML 列表、表格、表单

1 列表标签 作用&#xff1a;布局内容排列整齐的区域 列表分类&#xff1a;无序列表、有序列表、定义列表。 例如&#xff1a; 1.1 无序列表 标签&#xff1a;ul 嵌套 li&#xff0c;ul是无序列表&#xff0c;li是列表条目。 注意事项&#xff1a; ul 标签里面只能包裹 li…...

编程新知 2026/1/24 22:33:33

五年级数学知识边界总结思考-下册

目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解&#xff1a;由来、作用与意义**一、知识点核心内容****二、知识点的由来&#xff1a;从生活实践到数学抽象****三、知识的作用&#xff1a;解决实际问题的工具****四、学习的意义&#xff1a;培养核心素养…...

编程新知 2025/10/7 4:57:55

HTML前端开发：JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

编程新知 2025/11/10 10:45:11

20个超级好用的 CSS 动画库

分享 20 个最佳 CSS 动画库。 它们中的大多数将生成纯 CSS 代码&#xff0c;而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库&#xff0c;可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画&#xff0c;可以包含在你的网页或应用项目中。 3.An…...

编程新知 2026/1/25 11:46:42