(实战)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、注意:没有实现根据标签进行岗位筛选的功能!

上一篇:「Mac玩转仓颉内测版5」入门篇5 - Cangjie控制结构(上)


下一篇:减少 try...catch,定义全局统一异常处理器!