（实战）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、注意：没有实现根据标签进行岗位筛选的功能！