.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》如下图,去掉上图中快递的打包盒子value。

         2》如下图,给匿名函数(没有名字的函数)传值:参数加上name。

                【调用这个匿名函数的时候,给它传一个值name】

       3》如下图,将上图中的mainFunc函数改名为then

        4》理解axios.get().then(匿名函数)

        

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

(蓝桥杯C/C++)—— 编程基础

文章目录 一、C基础格式 1.打印hello, world 2.基本数据类型 二、string 1.string简介 2.string的声明和初始化 3.string其他基本操作 (1)获取字符串长度 (2) 拼接字符串( 或 append) (3&#xff09;字符串查找&#xff08;find&#xff09; (4)字符串替换 (5)提取子字符串…

Spring boot 配置文件的加载顺序

Spring Boot 在启动时会扫描以下位置的 application.properties 或者 application.yml 文件作为全局配置文件&#xff1a; –file:./config/–file:./–classpath:/config/–classpath:/以下是按照优先级从高到低的顺序&#xff0c;如下所示&#xff1a; Spring Boot 会全部扫…

分类预测|基于GWO灰狼优化K近邻KNN的数据分类预测Matlab程序 多特征输入多类别输出GWO-KNN

文章目录 一、基本原理原理流程总结 二、实验结果三、核心代码四、代码获取五、总结 一、基本原理 灰狼优化&#xff08;GWO&#xff0c;Grey Wolf Optimization&#xff09;是一种基于灰狼社会行为的优化算法&#xff0c;常用于解决各种优化问题。将GWO应用于K近邻&#xff0…

『完整代码』宠物召唤

创建脚本并编写&#xff1a;PetFollowTarget.cs using UnityEngine; public class PetFollowTarget : MonoBehaviour{Transform target;float speed 2f;Animator animator;void Start(){target GameObject.Find("PlayerNormal/PetsSmallPos").gameObject.transform…

Redis 基础 问题

前言 相关系列 《Redis & 目录》&#xff08;持续更新&#xff09;《Redis & 基础 & 源码》&#xff08;学习过程/多有漏误/仅作参考/不再更新&#xff09;《Redis & 基础 & 总结》&#xff08;学习总结/最新最准/持续更新&#xff09;《Redis & 基础…

C++ 魔法三钥:解锁高效编程的封装、继承与多态

快来参与讨论&#x1f4ac;&#xff0c;点赞&#x1f44d;、收藏⭐、分享&#x1f4e4;&#xff0c;共创活力社区。 目录 &#x1f4af;前言 &#x1f4af;封装 1.封装概念 2.封装格式 3.封装的原理 4.封装的作用 &#x1f4af;继承 1.继承的概念 2.继承格式 3.继承的…

情感咨询小程序的市场需求大吗?

情感咨询小程序的市场需求较大&#xff0c;主要体现在以下几个方面&#xff1a; 情感问题普遍存在5&#xff1a; 恋爱关系困扰&#xff1a;在恋爱过程中&#xff0c;人们经常会遇到诸如沟通不畅、争吵频繁、信任危机等问题。例如&#xff0c;年轻人在恋爱初期可能会因为不了解…

【现代C++】常量求值

现代C&#xff08;特别是C11及以后的版本&#xff09;增强了对编译时常量求值的支持&#xff0c;包括constexpr函数、constinit和consteval关键字。这些特性允许在编译时进行更多的计算&#xff0c;有助于优化运行时性能并确保编译时的数据不变性。 1. constexpr - 编译时常量…

震惊!总环On Hold之后,这些期刊也正在被调查!涉及Nature旗下、WR、JCLP....

On Hold期刊 总环被Oh Hold应该是学术圈最近最热的新闻了。相关的调查团队5GH 也发布了相关的推送报道此事&#xff1a; 在该推送的留言区&#xff0c;该团队也透露了一些后续的调查进展&#xff0c;涉及了Nature旗下期刊以及多个中科院一区TOP。评论中大家对于期刊的热议度很高…

Kmeans聚类算法简述

Kmeans聚类算法 1、概述 是一种无监督学习算法&#xff0c;根据样本之间的相似性将样本划分到不同的类别中&#xff0c;不同的相似度计算方式&#xff0c;会得到不同的聚类结果&#xff0c;常用的相似度计算方式有欧式距离。 目的是在没有先验条件知识的情况下&#xff0c;自…

算法设计与分析:大整数的加减乘除运算

第1关&#xff1a;大整数的加减乘除运算 任务描述 本关任务&#xff1a;掌握大整数的基本思想&#xff0c;并运用大整数的基本运算计算出常规整数n的阶乘&#xff0c;然后统计大整数n!中数字0的个数。 相关知识 为了完成本关任务&#xff0c;你需要掌握&#xff1a;1.大整数的…

医学影像学基础:理解CT、MRI、X射线和超声等医学影像设备的基本工作原理和成像技术

目录 医学影像学基础 1. X射线成像 2. 计算机断层扫描&#xff08;CT&#xff09; 3. 磁共振成像&#xff08;MRI&#xff09; 4. 超声成像 综合对比 1、成像原理对比 2、安全性对比 3、应用领域对比 4、设备特点对比 总结 医学影像学基础 在医学影像学中&#xff0…

super和this

相同点&#xff1a; 1.都是Java中的关键字 2.都只可以在非静态方法中使用 3.在构造方法中使用必须是第一条语句并且二者不可以同时存在不同点&#xff1a; 1.this是当前对象的引用&#xff0c;super是子类对象从父类继承下来部分成员的引用 2.在非静态成员方法中&#xff0c;…

CSS、Less、Scss

CSS、Less和SCSS都是用于描述网页外观的样式表语言&#xff0c;但它们各自具有不同的特点和功能。以下是对这三者的详细阐述及区别对比&#xff1a; 详细阐述 CSS&#xff08;Cascading Style Sheets&#xff09; 定义&#xff1a;CSS是一种用来表现HTML或XML等文件样式的计算机…

etcd之etcd分布式锁及事务(四)

1、etcd分布式锁及事务 1.1 前言 分布式锁是控制分布式系统之间同步访问共享资源的一种方式。在分布式系统中&#xff0c;常常需要协调他们的动作。如 果不同的系统或是同一个系统的不同主机之间共享了一个或一组资源&#xff0c;那么访问这些资源的时候&#xff0c;往往需要…

计算机网络-CSMA/CD协议笔记及“争用期”的理解

假设a和b是总线型网络上相距最远的两个节点。 从零这个时刻a节点会往信道上发送数据&#xff0c;那么a节点发送的第一个比特&#xff0c;需要经过τ这么长的时间&#xff0c;也就是经过一个单向的传播时延之后。它的这个信号才可以被最远的这个节点检测到。那如果b结点在τ这个…

六、深度剖析 Hadoop 分布式文件系统(HDFS)的数据存储机制与读写流程

深度剖析 Hadoop 分布式文件系统&#xff08;HDFS&#xff09;的数据存储机制与读写流程 在当今大数据领域当中&#xff0c;Hadoop 分布式文件系统&#xff08;HDFS&#xff09;作为极为关键的核心组件之一&#xff0c;为海量规模的数据的存储以及处理构筑起了坚实无比的根基。…

android aild 传递多个参数, in ,out,inout

在 HIDL 和 AIDL 中&#xff0c;方法参数的传递方式有所不同。HIDL 使用 generates 关键字来表示方法的返回值&#xff0c;而 AIDL 使用 in、out 和 inout 关键字来表示参数的传递方向。 HIDL 中的 generates 在 HIDL 中&#xff0c;generates 关键字用于指定方法的返回值。例…

https://huggingface.co/上的模型无法用linux服务器clone怎么办(只需要稍微改一下网址,就可以切换到镜像下载)

问题描述&#xff1a; 在ubuntu系统上&#xff0c;使用如下命令&#xff0c;克隆仓库&#xff0c;报无法访问错误&#xff1a; git clone https://huggingface.co/distilbert/distilroberta-base通用解决方案&#xff1a; 把下面部分更换&#xff1a; https://huggingface.…

内存泄漏的隐形陷阱:console.log

console.log 本身不会直接导致内存泄漏&#xff0c;但在特定的场景下&#xff0c;其使用方式可能间接引发内存泄漏问题&#xff0c;特别是在以下情况&#xff1a; 1. console.log 引用闭包或对象 console.log 输出的数据如果包含引用类型&#xff08;例如&#xff1a;对象、数…