(实战)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.mzph.cn/news/886202.shtml

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

相关文章

前缀和技巧解析

前缀和技巧解析 前缀和&#xff08;Prefix Sum&#xff09;是一种常用的算法技巧&#xff0c;用于高效地处理一系列连续子数组和的问题。通过构建一个额外的数组来存储从数组起始位置到当前位置的累计和&#xff0c;可以在常数时间内快速计算任意区间的和。 前缀和应用的典型…

云安全之云计算基础

0x00 前言 本文主要是针对云计算相关的基础梳理和整理。 云计算 NIST 800-145ISO/IEC 17788ISO/IEC 17789云安全 NIST 500-299 云安全ISO / IEC FDIS 27017 云安全0x01 云计算基础 什么是云计算: 一种新的运作模式和一组用于管理计算资源共享池的技术。云计算是一种颠覆性的…

Mysql每日一题(行程与用户,困难※)

今天给大家分享一个截止到目前位置&#xff0c;我遇到最难的一道mysql题目&#xff0c;非常建议大家亲手做一遍 完整代码如下&#xff0c;这道题的主要难点是它有两个外键&#xff0c;以前没遇到过&#xff0c;我也没当回事&#xff0c;分享一下错误经验哈 当时我写的where判断…

离线 快速搭建 docker docker-compose k8s 环境

所需资源 sealos_5.0.1_linux_arm64.tar.gzkubernetes.tar等docker-compose-linux-aarch64 离线安装sealos&#xff0c;用于安装k8sdocker 首先安装sealos工具 tar zxvf sealos_5.0.1_linux_arm64.tar.gz sealos && chmod x sealos && mv sealos /usr/bin*…

Python的Web请求:requests库入门与应用

Python的Web请求&#xff1a;requests库入门与应用 在Python中&#xff0c;进行网络请求和获取数据是许多应用程序的基础功能。requests库是Python中最流行的HTTP库之一&#xff0c;它以简洁、易用、功能强大的特点著称&#xff0c;可以帮助开发者高效地进行各种类型的Web请求…

已解决:spark代码中sqlContext.createDataframe空指针异常

这段代码是使用local模式运行spark代码。但是在获取了spark.sqlContext之后&#xff0c;用sqlContext将rdd算子转换为Dataframe的时候报错空指针异常 Exception in thread "main" org.apache.spark.sql.AnalysisException: java.lang.RuntimeException: java.lang.Nu…

【Electron】Electron Forge如何支持Element plus?

在 Electron Forge 项目中集成 Element Plus 是一个相对直接的过程。Element Plus 是一个基于 Vue 3 的 UI 组件库&#xff0c;因此你需要确保你的 Electron 项目已经集成了 Vue 3。以下是集成 Element Plus 到 Electron Forge 项目的步骤&#xff1a; 1. 初始化 Electron For…

WebGIS四大地图框架:Leaflet、OpenLayers、Mapbox、Cesium

地理信息系统&#xff08;GIS&#xff09;已经成为现代应用开发中不可或缺的一部分&#xff0c;尤其在前端开发中。随着Web技术的快速发展&#xff0c;许多强大而灵活的GIS框架涌现出来&#xff0c;为开发人员提供了丰富的工具和功能&#xff0c;使他们能够创建交互式、高性能的…

cooladmin 后端 查询记录

查询记录&#xff1a;pageQueryOp中列表查询的group by node ts controller代码如下 import { CoolController, BaseController } from cool-midway/core; import { Inject, Post, Get, Param } from midwayjs/decorator; import { ComparePricesPlanInfoEntity } from ../../…

UE5运行时创建slate窗口

加入"Slate","SlateCore"模块 Actor.cpp // Fill out your copyright notice in the Description page of Project Settings.#include "MyWindowClass.h"// Sets default values AMyWindowClass::AMyWindowClass() {// Set this actor to call…

react 受控组件和非受控组件

在 React 中&#xff0c;受控组件和非受控组件是两种处理表单元素&#xff08;如输入框、选择框等&#xff09;值的方式。 1. 受控组件 受控组件是指 React 组件的表单元素的值是由 React 组件的 state 来管理的。换句话说&#xff0c;React 会全程控制表单元素的值&#xff…

cesium 3DTiles之pnts格式详解

Point Cloud 1 概述 点云&#xff08;Point Cloud&#xff09;瓦片格式用于高效流式传输大规模点云数据&#xff0c;常用于 3D 可视化中。每个点由位置&#xff08;Position&#xff09;和可选的属性定义&#xff0c;这些属性用来描述点的外观&#xff08;如颜色、法线等&…

基于STM32的智能家居安防系统设计

引言 本项目基于STM32微控制器设计了一个智能家居安防系统&#xff0c;通过集成多个传感器模块和远程报警系统&#xff0c;实现对家庭的安全监控和自动化报警功能。该系统能够实时监测家中的门窗状态、烟雾浓度、以及是否有非法入侵等状况&#xff0c;并在检测到异常时通过蜂鸣…

用枚举算法解决LeetCode第3348题最小可整除数位乘积II

3348.最小可整除数位乘积II 难度&#xff1a;困难 问题描述&#xff1a; 给你一个字符串num&#xff0c;表示一个正整数&#xff0c;同时给你一个整数t。 如果一个整数没有任何数位是0&#xff0c;那么我们称这个整数是无零数字。 请你返回一个字符串&#xff0c;这个字符…

F5全新报告揭示AI时代API安全面临严峻挑战

F5 《2024年应用策略现状报告:API安全》揭示了 API 保护中的漏洞以及对全面安全措施的迫切需求 西雅图,2024年11月11日 – F5(NASDAQ: FFIV)日前发布《2024年应用策略现状报告:API 安全》(以下简称为“报告”),揭示了跨行业API安全面临的严峻现状。该报告强调了企业API保护方面…

【SpringBoot】20 同步调用、异步调用、异步回调

Git仓库 https://gitee.com/Lin_DH/system 介绍 同步调用&#xff1a;指程序在执行时&#xff0c;调用方需要等待函数调用返回结果后&#xff0c;才能继续执行下一步操作&#xff0c;是一种阻塞式调用。 异步调用&#xff1a;指程序在执行时&#xff0c;调用方在调用函数后立…

ESLint 使用教程(五):ESLint 和 Prettier 的结合使用与冲突解决

系列文章 ESLint 使用教程&#xff08;一&#xff09;&#xff1a;从零配置 ESLint ESLint 使用教程&#xff08;二&#xff09;&#xff1a;一步步教你编写 Eslint 自定义规则 ESLint 使用教程&#xff08;三&#xff09;&#xff1a;12个ESLint 配置项功能与使用方式详解 ES…

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…

VBA学习笔记:基础知识

1.打开编辑器 工具-选项&#xff0c;可设置编辑器字体大小等 2. 运行 快捷键F5&#xff0c;或 运行-运行宏 若提示宏被禁止&#xff0c;解决办法之一&#xff1a;工具-宏-安全性-安全级-中&#xff0c;关闭excel重新打开&#xff0c;启用宏 保存文件格式为xla或xlam 3. 基本…

【CANOE】【学习】【DecodeString】字节转为中文字符输出

系列文章目录 文章目录 系列文章目录前言一、DecodeString 转为中文字节输出二、代码举例1.代码Demo2.DecodeString 函数说明函数语法&#xff1a;参数说明&#xff1a;返回值&#xff1a;使用示例&#xff1a;示例代码&#xff1a; 说明&#xff1a; 前言 有时候使用的时候&a…