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

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

news 2026/2/10 3:43:02

一、前端界面小基础

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

【人工智能】神经网络的优化器optimizer（二）：Adagrad自适应学习率优化器

一.自适应梯度算法Adagrad概述 Adagrad&#xff08;Adaptive Gradient Algorithm&#xff09;是一种自适应学习率的优化算法&#xff0c;由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率&#xff0c;适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...

编程新知 2026/2/8 14:57:14

MFC内存泄露

1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...

编程新知 2026/1/22 15:14:25

全球首个30米分辨率湿地数据集(2000—2022)

数据简介 今天我们分享的数据是全球30米分辨率湿地数据集&#xff0c;包含8种湿地亚类&#xff0c;该数据以0.5X0.5的瓦片存储&#xff0c;我们整理了所有属于中国的瓦片名称与其对应省份&#xff0c;方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

编程新知 2026/1/31 17:15:25

《通信之道——从微积分到 5G》读书总结

第1章 绪 论 1.1 这是一本什么样的书 通信技术&#xff0c;说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号&#xff08;调制&#xff09; 把信息从信号中抽取出来&am…...

编程新知 2026/2/7 11:01:56

Device Mapper 机制

Device Mapper 机制详解 Device Mapper&#xff08;简称 DM&#xff09;是 Linux 内核中的一套通用块设备映射框架&#xff0c;为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程&#xff0c;并配以详细的…...

编程新知 2025/12/14 13:11:33

Mobile ALOHA全身模仿学习

一、题目 Mobile ALOHA&#xff1a;通过低成本全身远程操作学习双手移动操作 传统模仿学习&#xff08;Imitation Learning&#xff09;缺点&#xff1a;聚焦与桌面操作&#xff0c;缺乏通用任务所需的移动性和灵活性 本论文优点&#xff1a;&#xff08;1&#xff09;在ALOHA…...

编程新知 2026/1/27 14:18:20

重启Eureka集群中的节点，对已经注册的服务有什么影响

先看答案&#xff0c;如果正确地操作&#xff0c;重启Eureka集群中的节点&#xff0c;对已经注册的服务影响非常小&#xff0c;甚至可以做到无感知。 但如果操作不当&#xff0c;可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...

编程新知 2025/9/24 3:38:34

基于Java+MySQL实现（GUI）客户管理系统

客户资料管理系统的设计与实现 第一章 需求分析 1.1 需求总体介绍 本项目为了方便维护客户信息为了方便维护客户信息&#xff0c;对客户进行统一管理&#xff0c;可以把所有客户信息录入系统&#xff0c;进行维护和统计功能。可通过文件的方式保存相关录入数据&#xff0c;对…...

编程新知 2026/1/25 10:12:06

脑机新手指南（七）：OpenBCI_GUI：从环境搭建到数据可视化（上）

一、OpenBCI_GUI 项目概述 &#xff08;一&#xff09;项目背景与目标 OpenBCI 是一个开源的脑电信号采集硬件平台&#xff0c;其配套的 OpenBCI_GUI 则是专为该硬件设计的图形化界面工具。对于研究人员、开发者和学生而言&#xff0c;首次接触 OpenBCI 设备时&#xff0c;往…...

编程新知 2026/2/3 4:26:32

【Linux手册】探秘系统世界：从用户交互到硬件底层的全链路工作之旅

目录 前言 操作系统与驱动程序 是什么&#xff0c;为什么 怎么做 system call 用户操作接口 总结 前言 日常生活中&#xff0c;我们在使用电子设备时&#xff0c;我们所输入执行的每一条指令最终大多都会作用到硬件上&#xff0c;比如下载一款软件最终会下载到硬盘上&am…...

编程新知 2026/2/6 5:39:10