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

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

news 2025/9/14 19:50:51

一、前端界面小基础

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

业务系统对接大模型的基础方案：架构设计与关键步骤

业务系统对接大模型&#xff1a;架构设计与关键步骤 在当今数字化转型的浪潮中&#xff0c;大语言模型&#xff08;LLM&#xff09;已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中&#xff0c;不仅可以优化用户体验&#xff0c;还能为业务决策提供…...

编程新知 2025/9/14 10:14:39

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

编程新知 2025/9/14 1:53:04

【入坑系列】TiDB 强制索引在不同库下不生效问题

文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1：执行计划绑定问题？尝试：SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库，并对 SQL 进行优化了，添加了强制索引。 UAT 环境已经生效，但 PROD 环境强制索…...

编程新知 2025/9/13 17:43:37

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能，多端兼容

基于 ​UniApp + WebSocket​实现多端兼容的实时通讯系统，涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能，适配​微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

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

使用分级同态加密防御梯度泄漏

抽象 联邦学习 &#xff08;FL&#xff09; 支持跨分布式客户端进行协作模型训练&#xff0c;而无需共享原始数据&#xff0c;这使其成为在互联和自动驾驶汽车 &#xff08;CAV&#xff09; 等领域保护隐私的机器学习的一种很有前途的方法。然而&#xff0c;最近的研究表明&…...

编程新知 2025/9/7 2:01:52

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

编程新知 2025/8/22 4:33:54

反射获取方法和属性

Java反射获取方法 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;允许程序在运行时访问和操作类的内部属性和方法。通过反射&#xff0c;可以动态地创建对象、调用方法、改变属性值&#xff0c;这在很多Java框架中如Spring和Hiberna…...

编程新知 2025/7/5 23:14:36

相机Camera日志分析之三十一：高通Camx HAL十种流程基础分析关键字汇总（后续持续更新中）

【关注我，后续持续新增专题博文，谢谢！！！】 上一篇我们讲了：有对最普通的场景进行各个日志注释讲解，但相机场景太多，日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志，通过下列分类关键字搜索，即可清晰的分析不同场景的相机运行流程差异…...

编程新知 2025/7/25 23:24:13

汇编常见指令

汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX&#xff08;不访问内存&#xff09;XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...

编程新知 2025/7/20 13:23:05

爬虫基础学习day2

# 爬虫设计领域 工商&#xff1a;企查查、天眼查短视频&#xff1a;抖音、快手、西瓜 ---> 飞瓜电商&#xff1a;京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空&#xff1a;抓取所有航空公司价格 ---> 去哪儿自媒体&#xff1a;采集自媒体数据进…...

编程新知 2025/8/27 21:28:45