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

news2024/12/26 23:49:41

一、实现全局跨域:新建一个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.coloradmin.cn/o/2238281.html

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

相关文章

【C++】map和set的介绍及使用

前言&#xff1a; map和 set 是 C STL&#xff08;标准模板库&#xff09;中的两种非常重要的容器&#xff0c;它们基于一种叫做平衡二叉搜索树&#xff08;通常是红黑树&#xff09;的数据结构来实现。在 C 中&#xff0c;map 是一个键值对容器&#xff0c;set 只存储唯一的键…

Python的函数(补充浅拷贝和深拷贝)

一、定义 函数的定义&#xff1a;实现【特定功能】的代码块。 形参&#xff1a;函数定义时的参数&#xff0c;没有实际意义 实参&#xff1a;函数调用/使用时的参数&#xff0c;有实际意义 函数的作用&#xff1a; 简化代码提高代码重用性便于维护和修改提高代码的可扩展性…

el-input 正则表达式校验输入框不能输入汉字

<el-form :model"data1" :rules"rules" ref"ruleForm" label-width"210px" class"demo-ruleForm"><el-form-item label"锯路&#xff1a;" prop"sawKref"><el-input class"inptWid…

嵌入式linux系统中I2C控制实现AP3216C传感器方法

大家好,今天主要给大家分享一下,如何使用linux系统里面的I2C进行控制实现。 第一:Linux系统中I2C简介 Linux 内核开发者为了让驱动开发工程师在内核中方便的添加自己的 I2C 设备驱动程序,更容易的在 linux 下驱动自己的 I2C 接口硬件,进而引入了 I2C 总线框架。与 Linux 下…

OceanBase 应用实践:如何处理数据空洞,降低存储空间

问题描述 某保险行业客户的核心系统&#xff0c;从Oracle 迁移到OceanBase之后&#xff0c;发现数据存储空间出现膨胀问题&#xff0c;数据空间 datasize9857715.48M&#xff0c;实际存储占用空间17790702.00M。根据 required_mb - data_mb 值判断&#xff0c;数据空洞较为严重…

【flask开启进程,前端内容图片化并转pdf-会议签到补充】

flask开启进程,前端内容图片化并转pdf-会议签到补充 flask及flask-socketio开启threading页面内容转图片转pdf流程前端主js代码内容转图片-browser端browser端的同步编程flask的主要功能route,def 总结 用到了pdf,来回数据转发和合成,担心flask卡顿,响应差,于是刚好看到threadi…

QT栅格布局的妙用

当groupBox中只有一个控件时&#xff0c;我们想要它满格显示可以对groupBox使用栅格布局

MyBatis快速入门(上)

MyBatis快速入门&#xff08;上&#xff09; 一、MyBatis 简介1、概述2、JDBC、Hibernate、MyBatis 对比 二、MyBatis 框架搭建1、开发环境2、创建maven工程3、创建MyBatis的核心配置文件4、创建mapper接口5、创建MyBatis的映射文件6、通过junit测试功能7、加入log4j2日志功能 …

在Pybullet中加载Cinema4D创建的物体

首先明确我们的目标&#xff0c;是希望在cinema4D中创建自己想要的模型&#xff0c;并生成.obj文件&#xff0c;然后在pybullet中加载.obj文件作为静态物体&#xff0c;可以用于抓取物体&#xff0c;避障物体。&#xff08;本文提到的方法只能实现静态物体的建模&#xff0c;如…

第十三届交通运输研究(上海)论坛┆智能网联汽车技术现状与研究实践

0.简介 交通运输研究&#xff08;上海&#xff09;论坛&#xff08;简称为TRF&#xff09;是按照国际会议的组织原则&#xff0c;为综合交通运输领域学者们构建的良好合作交流平台。交通运输研究&#xff08;上海&#xff09;论坛已经成功举办了十二届&#xff0c;凝聚了全国百…

Pr:视频过渡快速参考(合集 · 2025版)

Adobe Premiere Pro 自带七组约四十多个视频过渡 Video Transitions效果&#xff0c;包含不同风格和用途&#xff0c;可在两个剪辑之间创造平滑、自然的转场&#xff0c;用来丰富时间、地点或情绪的变化。恰当地应用过渡可让观众更好地理解故事或人物。 提示&#xff1a; 点击下…

stm32 踩坑笔记

串口问题&#xff1a; 问题&#xff1a;会改变接收缓冲的下一个字节 串口的初始化如下&#xff0c;位长度选择了9位。因为要奇偶校验&#xff0c;要选择9位。但是接收有用数据只用到1个字节。 问题原因&#xff1a; 所以串口接收时会把下一个数据更改

昇思大模型平台打卡体验活动:项目4基于MindSpore实现Roberta模型Prompt Tuning

基于MindNLP的Roberta模型Prompt Tuning 本文档介绍了如何基于MindNLP进行Roberta模型的Prompt Tuning&#xff0c;主要用于GLUE基准数据集的微调。本文提供了完整的代码示例以及详细的步骤说明&#xff0c;便于理解和复现实验。 环境配置 在运行此代码前&#xff0c;请确保…

后悔没早点知道,Coze 插件 + Cursor 原来可以这样赚钱

最近智能体定制化赛道异常火爆。 打开闲鱼搜索"Coze 定制",密密麻麻的服务报价直接刷屏,即使表明看起来几十块的商家,一细聊,都是几百到上千不等的报价。 有趣的是,这些智能体定制化服务背后,最核心的不只是工作流设计,还有一个被很多人忽视的重要角色 —— …

基于STM32的节能型路灯控制系统设计

引言 本项目基于STM32微控制器设计了一个智能节能型路灯控制系统&#xff0c;通过集成多个传感器模块和控制设备&#xff0c;实现对路灯的自动调节。该系统能够根据周围环境光照强度、车辆和行人活动等情况&#xff0c;自动控制路灯的开关及亮度调节&#xff0c;从而有效减少能…

Qml 模型-视图-代理(贰)之 动态视图学习

目录 动态视图 动态视图用法 ⽅向&#xff08;Orientation&#xff09; 键盘导航和⾼亮 页眉与页脚 网格视图 动态视图 动态视图用法 Repeater 元素适合有限的静态数据&#xff0c; QtQuick 提供了 ListView 和 GridView, 这两个都是基于 Flickable(可滑动) 区域的元素…

新标准大学英语综合教程1课后习题答案PDF第三版

《新标准大学英语&#xff08;第三版&#xff09;综合教程1 》是“新标准大学英语&#xff08;第三版&#xff09;”系列教材之一。本书共包含6个单元&#xff0c;从难度和话题上贴近大一上学生的认知和语言水平&#xff0c;包括与学生个人生活领域和社会文化等相关内容&#x…

Python闭包|你应该知道的常见用例(下)

引言 在 Python 编程语言中&#xff0c;闭包通常指的是一个嵌套函数&#xff0c;即在一个函数内部定义的另一个函数。这个嵌套的函数能够访问并保留其外部函数作用域中的变量。这种结构就构成了一个闭包。 闭包在函数式编程语言中非常普遍。在 Python 中&#xff0c;闭包特别有…

Rocky、Almalinux、CentOS、Ubuntu和Debian系统初始化脚本v9版

Rocky、Almalinux、CentOS、Ubuntu和Debian系统初始化脚本 Shell脚本源码地址&#xff1a; Gitee&#xff1a;https://gitee.com/raymond9/shell Github&#xff1a;https://github.com/raymond999999/shell脚本可以去上面的Gitee或Github代码仓库拉取。 支持的功能和系统&am…

AUTOSAR OS模块详解(一) 概述

AUTOSAR OS模块详解(一) 概述 本文主要介绍AUTOSAR架构下的OS概述。 文章目录 AUTOSAR OS模块详解(一) 概述1 前言1.1 操作系统1.2 嵌入式操作系统1.3 AUTOSAR操作系统 2 AUTOSAR OS2.1 AUTOSAR OS组成2.2 AUTOSAR OS类别2.3 任务管理2.4 调度表2.5 资源管理2.6 多核特性2.7 …