(实战)WebApi第13讲:怎么把不同表里的东西,包括同一个表里面不同的列设置成不同的实体,所有的给整合到一起?【前端+后端】、前端中点击标签后在界面中显示

一、实现全局跨域:新建一个Controller,其它的controller都继承它

1、新建BaseController

2、在后端配置,此处省略【详情见第12讲四、3、】

3、其它的控制器继承BaseController,这个时候就能够完成全局的跨域

        【向后台传cookie和GWT的验证的话,不支持】

二、怎么把不同表里面的东西,包括同一个表里面不同列设置的不同的实体,给整合到一起?

1、上一讲结束,还有如下红框内的东西没替换掉

1>想要变成如下界面,包含工作经验、工作福利、所在城市

2>工作经验、工作福利:Recruitment表里面的两个列Educations和Welfares

需要Recruitment表里面的两个列Educations和Welfares分别成为两个单独的实体,即工作经验和工作福利。

3>在1>的基础上结合所在城市:另外一张表Cities

同时,所在城市它是另外一张表Cities,也要结合在一起。

2、创建RequriementViewModel,把工作经验、工作福利、所在城市都结合在一起。

1>意义:想要把同一张表的两个实体写进来,与它不同的单独列表的城市也想写进来。让它们都存在于RequriementViewModel的实体里面。

2>{列,列里的内容}={RKey,RItems}

RKey指工作经验、工作福利、所在城市。

RItems指工作经验、工作福利、所在城市里面的具体内容

1)小技巧:C#很方便:输入属性prop直接出来右边的

3>增加“当前选中的具体内容”的变量Selected【使用见四、】

1)要看“工作经验、工作福利、所在城市”里面的具体内容有没有被选中。

想实现如下功能: 前端中点击标签后在界面中显示

2)加Selected来存储当前选中的是哪一个具体内容:是“一年”、“五险一金”,还是“无锡”

4>准备两个构造函数:一个是无参的供我们实例化【使用new时】,一个是有参的接收上下文。

5>获取到具体的某一列用select。再接where进行筛选。

注意,此处使用where把为空的东西筛选掉,比如下图中NULL在前端展示会是一个空框。

        在5>6>中where筛选为什么使用IsNullorEmpty()?——其实也可以写不等于NULL,但是万一我有一个空的字符串,也不需要展示在前端。

6>获取工作经验、工作福利

        最下面的是”当前选中的具体内容Selected“,当然为一个null就可以了。

复制粘贴上面的代码,获取所有的工作经验

7>获取所在城市

除了工作经验和工作福利,我们还有所在城市。

所在城市它是另外的单独的一张表Cities。单独一张表要跟我们这个结合在一起也是差不多的。

注意要在前面加!,要的是不为空的字符串

3、创建RequriementController,调用RequriementViewModel

1>继承上面一、中自己写的BaseController,能够完成全局的跨域

2>调用RequriementViewModel模型的时候,参数中需要传入一个上下文_context进去

4、运行代码,确认后端在数据库中取到了想要的数据

三、编写前端代码:工作经验、工作福利、所在城市都在前端界面中显示出来

想要实现下面的这个界面

通过后端显示的界面看得到要的是rKey、rItems

1、按照第12讲的内容,通过axios.get().then()获取后端中的数据

1>注意,此时有两个axios.get().then()请求,要在startup.cs使用 Scoped 生命周期

1》报错的原因:两个axios.get().then()是并发请求,这两个请求顺序不分先后。

        有两次请求,当第一次请求的数据库还在跟我的上下文交互时,第二个请求就立马过来了。导致同一个实例里会发生这种问题。

         但是在statup.cs中创建这个上下文的依赖注入的时候用的是单例,当多个请求到来时就容易报错。

2》解决方案:使用 Scoped 生命周期,在startup.cs里把AddSingleton换为AddScopes

        ASP.NET Core 的依赖注入(DI)容器支持多种服务生命周期:Transient(每次请求都创建新实例)、Scoped(每个请求一个实例)和 Singleton(整个应用程序生命周期内只有一个实例)。

        对于 DbContext,推荐使用 Scoped 生命周期,因为这样可以确保每个 HTTP 请求都有一个自己的 DbContext 实例,从而避免跨请求的数据污染和并发问题。

2、按照第12讲六、里面的内容,利用v-for进行绑定

1>第一次循环是在外面的<li>里循环rKey

 把相同的“工作区域”全部收起来并注释掉,因为后面直接用v-for循环赋值

2>第二次循环在里面的<li>循环item

3>编写运行代码,工作经验、工作福利、所在城市都在前端界面中显示出来

四、编写前端代码:增加二、2、3)中的Selected变量后,实现在前端中点击标签后在界面中显示的功能

1、功能: 前端中点击标签后在界面中显示

1>使用v-for绑定requriement,并使用v-if判断requriement.Selected是否为空

     

2> 增加@click点击方法SelectReq

3>编写方法SelectReq

2、功能:点“不限”之后把所有标签全取消掉

1>增加@click点击方法SelectReq【方法即上3>】,只是传进去的第二个参数是null

3、注意:没有实现根据标签进行岗位筛选的功能!

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

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

相关文章

【计算机基础——数据结构——红黑树】

1. 红黑树&#xff08;RBTree&#xff09; 为什么HashMap不直接使用AVL树&#xff0c;而是选择了红黑树呢&#xff1f; 由于AVL树必须保证左右子树平衡&#xff0c;Max(最大树高-最小树高) < 1&#xff0c;所以在插入的时候很容易出现不平衡的情况&#xff0c;一旦这样&…

【MatLab手记】 --从0到了解超超超详过程!!!

文章目录 MatLab笔记一、命令行窗口二、变量命名规则三、数据类型1. 数字2. 字符与字符串3. 矩阵3.1 矩阵创建3.2 矩阵的修改和删除3.3 矩阵的拼接与重构重排3.4 矩阵的运算方法3.5 矩阵的下标 4. 元胞数组&#xff08;类似数据容器&#xff09;5. 结构体 四、逻辑与流程控制五…

Qt_day5_常用类

常用类 目录 1. QString 字符串类&#xff08;掌握&#xff09; 2. 容器类&#xff08;掌握&#xff09; 2.1 顺序容器QList 2.2 关联容器QMap 3. 几种Qt数据类型&#xff08;熟悉&#xff09; 3.1 跨平台数据类型 3.2 QVariant 统一数据类型 3.3 QStringList 字符串列表 4. QD…

【THM】linux取证 DisGruntled

目录 0x00 房间介绍 0x01 连接并简单排查 0x02 让我们看看做没做坏事 0x03 炸弹已埋下。但何时何地&#xff1f; 0x04 收尾 0x05 结论 0x00 房间介绍 嘿&#xff0c;孩子&#xff01;太好了&#xff0c;你来了&#xff01; 不知道您是否看过这则新闻&#xff0c;我…

MFC中Excel的导入以及使用步骤

参考地址 在需要对EXCEL表进行操作的类中添加以下头文件&#xff1a;若出现大量错误将其放入stdafx.h中 #include "resource.h" // 主符号 #include "CWorkbook.h" //单个工作簿 #include "CRange.h" //区域类&#xff0c;对Excel大…

智能化温室大棚控制系统设计(论文+源码)

1 系统的功能及方案设计 本次智能化温室大棚控制系统的设计其系统整体结构如图2.1所示&#xff0c;整个系统在器件上包括了主控制器STC89C52&#xff0c;温湿度传感器DHT11&#xff0c;LCD1602液晶&#xff0c;继电器&#xff0c;CO2传感器&#xff0c;光敏电阻&#xff0c;按…

一篇文章教会你使用Linux的‘sed‘基础命令

Linux sed 命令详解 Linux sed 命令详解1、基本语法2、常用命令2.1 替换2.2 删除行2.3 查找并打印行2.4 插入与追加2.5 多命令组合 3、高级用法3.1 替换并保存结果到新文件3.2 在范围内替换3.3 正则表达式匹配 4、小结 Linux sed 命令详解 sed 是 Linux 系统中非常强大的流编辑…

集群化消息服务解决方案

目录 集群化消息服务解决方案项目概述架构图使用说明服务端通过API接口推送消息给客户端调用方式 请求参数返回参数 客户端推送消息连接websocket或发送消息 接收消息项目地址作者信息 集群化消息服务解决方案 项目概述 集群化消息服务解决方案是一种用于处理大量消息的高可用…

elementUI 点击弹出时间 date-picker

elementUI的日期组件&#xff0c;有完整的UI样式及弹窗&#xff0c;但是我的页面不要它的UI样式&#xff0c;点击的时候却要弹出类似的日期选择器&#xff0c;那怎么办呢&#xff1f; 以下是elementUI自带的UI风格&#xff0c;一定要一个输入框来触发。 这是我的项目中要用到的…

【go从零单排】go中的三种数据类型array、slices、maps

Don’t worry , just coding! 内耗与overthinking只会削弱你的精力&#xff0c;虚度你的光阴&#xff0c;每天迈出一小步&#xff0c;回头时发现已经走了很远。 array数组 package mainimport "fmt"func main() {var a [5]int //var关键字定义数组&#xff0c;[5]表…

科技改变阅读习惯:最新研究揭示电子阅读器的普及趋势

据QYResearch调研团队最新报告“全球电子阅读器市场报告2023-2029”显示&#xff0c;预计2029年全球电子阅读器市场规模将达到6.9亿美元&#xff0c;未来几年年复合增长率CAGR为0.4%。 如上图表/数据&#xff0c;摘自QYResearch最新报告“全球电子阅读器市场研究报告2023-2029.…

解决 VSCode 中 C/C++ 编码乱码问题的两种方法

解决 VSCode 中 C/C 编码乱码问题的两种方法 在中国地区&#xff0c;Windows 系统中的 cmd 和 PowerShell 默认编码是 GBK&#xff0c;但 VSCode 默认使用 UTF-8 编码。这种编码不一致会导致在 VSCode 终端中运行 C/C 程序时出现乱码。以下介绍两种方法来解决这一问题。 方法…

UE5遇到问题记录

问题描述&#xff1a; 在让敌人自动追踪玩家的时候一开始运行就会播放攻击的动画 解决方法&#xff1a; 这样是因为敌人一开始就检测到自己了&#xff0c;所以触发动画。 方式一&#xff1a;加一个条件 方式二&#xff1a;改一下碰撞预设

内网对抗-信息收集篇SPN扫描DC定位角色区域定性服务探针安全防护凭据获取

知识点&#xff1a; 1、信息收集篇-网络架构-出网&角色&服务&成员 2、信息收集篇-安全防护-杀毒&防火墙&流量监控 3、信息收集篇-密码凭据-系统&工具&网站&网络域渗透的信息收集&#xff1a; 在攻防演练中&#xff0c;当完成边界突破后进入内…

基于Matlab 疲劳驾驶检测

Matlab 疲劳驾驶检测 课题介绍 该课题为基于眼部和嘴部的疲劳驾驶检测。带有一个人机交互界面GUI&#xff0c;通过输入视频&#xff0c;分帧&#xff0c;定位眼睛和嘴巴&#xff0c;通过眼睛和嘴巴的张合度&#xff0c;来判别是否疲劳。 二、操作步骤 第一步&#xff1a;最…

11.11 代码块

一 java 1.代码块 1&#xff09; 理解 使用构造器时&#xff1a;先默认 调用代码块内容 再调用 构造器内容【代码块 > 构造器】 1.1 细节 1&#xff09;静态代码块 只能加载一次 2&#xff09;先调用父类代码块 再子类代码块 3&#xff09;静态代码块是随着类加载而执行…

在gitlab,把新分支替换成master分支

1、备份master分支&#xff0c;可以打tag 2、删除master分支 正常情况下&#xff0c;master分支不允许删除&#xff0c;需要做两个操作才能删除 a、变更项目默认分支为非master分支&#xff0c;可以先随便选择 b、取消master为非保护分支 操作了上述两步&#xff0c;就可以删…

在使用element中的抽屉<el-drawer>页签<el-tabs/>组合时,echarts图表宽度显示异常问题

类似这种情况&#xff0c;宽度异常 原因&#xff1a;在展示出抽屉时&#xff0c;图表的组件一件初始化了&#xff0c;导致他的宽度提前设定好了&#xff08;我默认的style"width: 100%; height: 300px;"&#xff09;&#xff0c;我得解决方法有2个&#xff1a; 1、第…

《大模型应用开发极简入门》笔记

推荐序 可略过不看。 初识GPT-4和ChatGPT LLM概述 NLP的目标是让计算机能够处理自然语言文本&#xff0c;涉及诸多任务&#xff1a; 文本分类&#xff1a;将输入文本归为预定义的类别。自动翻译&#xff1a;将文本从一种语言自动翻译成另一种语言&#xff0c;包括程序语言。…

Unicode字符集(万国码)

1.三种编码方式&#xff1a; UTF-16&#xff1a;16个bit位&#xff08;2个字节&#xff09;存储 UTF-32&#xff1a;32个bit位&#xff08;4个字节&#xff09;存储 UTF-8&#xff1a;可变长度字符编码。1-4个字节存储&#xff0c;只需记住&#xff1a;英文字母1个字节表示&…