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

        

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/906712.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

虚拟现实与增强现实:重塑娱乐和教育的边界!

内容概要 在这个瞬息万变的时代&#xff0c;虚拟现实&#xff08;VR&#xff09;和增强现实&#xff08;AR&#xff09;正如两位魔法师&#xff0c;腾云驾雾间掀起了一场教育与娱乐的革命。虚拟现实带我们飞跃平凡&#xff0c;进入一个充满奇迹的数字宇宙&#xff0c;仿佛我们…

Win10搭建SFTP服务器

1、下载安装 Release v9.5.0.0p1-Beta PowerShell/Win32-OpenSSH GitHub 下载OpenSSH-Win64.zip 解压之后放入到&#xff1a;C:\Program Files (x86)\OpenSSH-Win64以管理员身份打开CMD进入到 C:\Program Files (x86)\OpenSSH-Win64 文件夹执行命令 powershell.exe -Exec…

NNLM——预测下一个单词

一、原理篇 NNLM&#xff08;Neural Network Language Model&#xff0c;神经网络语言模型&#xff09;是一种通过神经网络进行语言建模的技术&#xff0c;通常用于预测序列中的下一个词。 NNLM的核心思想是使用词嵌入&#xff08;word embedding&#xff09;将词转换为低维向…

移植 AWTK 到 纯血鸿蒙 (HarmonyOS NEXT) 系统 (4) - 平台适配

在移植 AWTK 到 HarmonyOS NEXT 系统之前&#xff0c;我们需要先完成平台适配&#xff0c;比如文件、多线程&#xff08;线程和同步&#xff09;、时间、动态库和资源管理。 1. 文件 HarmonyOS NEXT 支持标准的 POSIX 文件操作接口&#xff0c;我们可以直接使用下面的代码&am…

TON 区块链开发的深入概述#TON链开发#DAPP开发#交易平台#NFT#Gamefi链游

区块链开发领域发展迅速&#xff0c;各种平台为开发人员提供不同的生态系统。其中一个更有趣且越来越相关的区块链是TON&#xff08;开放网络&#xff09;区块链。TON 区块链最初由 Telegram 构思&#xff0c;旨在提供快速、安全且可扩展的去中心化应用程序 (dApp)。凭借其独特…

【机器学习】27. 马尔科夫链和隐马模型HMM

马尔科夫链和隐马模型HMM 1. Markov chain2. 计算3. Hidden Markov Model4. 两个假设5. 问题1&#xff1a;evaluation6. Forward 算法7. 问题2&#xff1a;Decoding8. Viterbi算法9. 问题3&#xff1a;Learning10. 期望最大化算法Expectation Maximization 1. Markov chain 马…

向量和矩阵的范数

一般&#xff0c;实数的绝对值来表示“实数”的大小&#xff1b;复数的模来表示复数的大小。这在实际应用中&#xff0c;带来了非常大的便利。 对于一个平面向量 a a a ,当其在直角坐标系中的分量分别为 x 0 x_0 x0​和 y 0 y_0 y0​时&#xff0c;我们常用 x 0 2 y 0 2 \sq…

树莓派开发相关知识七 -串口数码管

1、概述 一个普通的数码管实际上为71个LED灯。 上图可知&#xff0c;A-G加上DP点8个LED&#xff0c;通过不同的亮暗来显示出所需的数字。 如果同时要控制多个数码管&#xff0c;则需要的GPIO未免太多。 我们选择控制4个数码管&#xff0c;通过串行转并行的方式实现控制。 所…

基于IMX6ULL的电子产品量产工具

参考博客&#xff1a; https://blog.csdn.net/m0_63168877/article/details/138545059一、设计思路 软件框架及目录 二、显示系统 2.1显示管理器框架 2.2DispOpr 结构体 在disp_manager.h这一层抽象出显示结构体 在底层显示模块分配、设置这个结构体&#xff0c;并且向本层…

React 中使用 Redux Toolkit 状态管理

在现代 React 应用程序中&#xff0c;状态管理是一个至关重要的部分。使用 Redux Toolkit 可以简化 Redux 的配置和管理。本文将通过三个文件的示例&#xff0c;详细讲解如何使用 Redux Toolkit 创建和管理一个简单的计数器状态&#xff0c;并通过类比源 store 和根 store 的概…

3、liunx系统网络配置

一、liunx网络配置 Linux服务器网卡默认配置文件在/etc/sysconfig/network-scripts/下&#xff0c;命名的名称一般为:ifcfg-eth0 ifcfg-eth1 &#xff0c;eth0表示第一块网卡&#xff0c;eth1表示第二块网卡&#xff0c;依次类推&#xff0c;例如DELL R720标配有4块千兆网卡&am…

【零售和消费品&存货】快递包裹条形码与二维码识别系统源码&数据集全套:改进yolo11-RFCBAMConv

改进yolo11-RVB等200全套创新点大全&#xff1a;快递包裹条形码与二维码识别系统源码&#xff06;数据集全套 1.图片效果展示 项目来源 人工智能促进会 2024.11.01 注意&#xff1a;由于项目一直在更新迭代&#xff0c;上面“1.图片效果展示”和“2.视频效果展示”展示的系统…

牛客网最新Java高频面试题汇总(2024最新含答案)

作为一名优秀的程序员&#xff0c;技术面试都是不可避免的一个环节&#xff0c;一般技术面试官都会通过自己的方式去考察程序员的技术功底与基础理论知识。 如果你参加过一些大厂面试&#xff0c;肯定会遇到一些这样的问题&#xff1a; 1、看你项目都用的框架&#xff0c;熟悉…

电科金仓(人大金仓)更新授权文件(致命错误: XX000: License file expired.)

问题:电科金仓(人大金仓)数据库链接异常,重启失败,查看日志如下: 致命错误: XX000: License file expired. 位置: PostmasterMain, postmaster.c:725 解决方法: 一、下载授权文件 根据安装版本在官网下载授权文件(电科金仓-成为世界卓越的数据库产品与服务提供商)…

Hadoop期末复习(完整版)

前言&#xff08;全部为语雀导出&#xff0c;个人所写&#xff0c;仅用于学习&#xff01;&#xff01;&#xff01;&#xff01;&#xff09; 复习之前我们要有目的性&#xff0c;明确考什么&#xff0c;不考什么。 对于hadoop来说&#xff0c;首先理论方面是跑不掉的&#x…

河北冠益荣信科技公司洞庭变电站工程低压备自投装置的应用

摘 要&#xff1a;随着电力需求增长&#xff0c;供电可靠性变得至关重要&#xff0c;许多系统已有多回路供电。备用电源自动投入装置能提升供电可靠性&#xff0c;它能在主电源故障时迅速切换到备用电源。本文介绍的AM5-DB低压备自投装置&#xff0c;为洞庭变电站提供多种供电方…

Spring Boot:打造动态定时任务,开启灵活调度之旅

一、描述 在 Spring Boot 中设置动态定时任务是一种非常实用的功能&#xff0c;可以根据实际需求在运行时动态地调整定时任务的执行时间、频率等参数。以下是对 Spring Boot 设置动态定时任务的简单介绍&#xff1a; 1、传统定时任务的局限性 在传统的 Spring Boot 定时任务…

Lua 从基础入门到精通(非常详细)

目录 什么是 Lua&#xff1f; Lua 环境安装 Lua基本语法 注释 数据类型 nil&#xff08;空&#xff09; Boolean number&#xff08;数字&#xff09; string&#xff08;字符串&#xff09; function&#xff08;函数&#xff09; userdata thread table&#xff…

PostgreSQL 到 PostgreSQL 数据迁移同步

简述 PostgreSQL 是一个历史悠久且广泛使用的数据库&#xff0c;不仅具备标准的关系型数据库能力&#xff0c;还具有相当不错的复杂 SQL 执行能力。用户常常会将 PostgreSQL 应用于在线事务型业务&#xff0c;以及部分数据分析工作&#xff0c;所以 PostgreSQL 到 PostgreSQL …

GESP4级考试语法知识(捕捉异常)

参考程序代码&#xff1a; #include <iostream> using namespace std;double divide(double a, double b) {if (b 0) {throw "Division by zero error"; // 抛出异常}return a / b; }int main() {double num1, num2;cout << "Enter two numbers:…