项目训练营第四天

2024-06-24 00:20
文章标签 项目 训练营 第四天

本文主要是介绍项目训练营第四天,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

项目训练营第四天

前端部分修改

  • 前端用的是WebStorm和Ant Design Pro框架

Ant Design Pro是比较流行的一个前端登陆、注册、管理框架,能帮我们快速实现前端界面的开发

效果大致如图
在这里插入图片描述

  • 使用起来也极为方便,首先在WebStorm 控制台中输入如下命令
# 使用 npm
npm i @ant-design/pro-cli -g
pro create myapp
  • 安装过程中进行选择
    在这里插入图片描述
  • 再安装依赖即可使用
$ cd myapp && tyarn
// 或
$ cd myapp && npm install

之后再简单进行修改就能达到上图所示的效果,芜湖起飞~

前端界面修改

基本原则:按照程序员的直觉去删除无用逻辑,改动文字,链接即可

  • logo这里先不改,之后有时间回过头来思考对策
  • 我们需要修改的主要内容在这个文件中
    在这里插入图片描述
    其他没找到的的可以用如下的全局搜索方法找到并进行修改
  • 对于某些出现过很多次的变量或者数据可以用 Ctrl + Shift + R 全局搜索替换,效果如下
    ![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/656f53cc5c36486fbb0756b62b1b5011.png

前后端联调

正向代理、反向代理

这里我们由于是在本地运行前后端,前端后端各占一个端口,就算是跨域了,所以我们需要用到代理的功能。

  • 代理分为正向代理和反向代理两种。其中正向代理是浏览器经由代理服务器访问到服务器,反向代理是有多个服务器,经代理服务器统一接收来自浏览器的请求
    在这里插入图片描述
实际代理实现

Ant Design Pro中已经内置了代理功能
在这里插入图片描述
1、先在api.ts中修改登录接口对应的链接如下:
在这里插入图片描述

  • 这个文件中放的就是前端界面对应的一些接口,比如登录、注销等等

2、在config.ts中找到proxy,并修改为如下代码即可实现代理
在这里插入图片描述

  • 这段配置的意思是在给定链接中找到/api参数后将链接代理到目标端口+/api+原本请求链接中/api后面的内容,比如说8080/api/user/login会被代理到8081/api/user/login

3、与之相对应的,在后端IDEA中的application.yml文件中也要添加如下代码:
在这里插入图片描述
4、实际代理过程中有超时限制,我们需要在WebStorm中添加超时时间的配置如下:
在这里插入图片描述
后端IEDA中超时时间的配置如3中所示,即可完成代理的配置

前后端联调

在这里插入图片描述
前端点击登陆后,后端立刻进入调试断点状态,接收到了来自前端的数据!
在这里插入图片描述
一步步往下,最后会完成前后端数据联调,具体可自行尝试。

  • 注意超时后登陆会失败
    可以在login负载中看到实际执行的效果
    在这里插入图片描述
前后端联调及踩坑历程

之前登陆时一直没有返回用户信息,即便我们输入的登录账户和密码数据库中已经有了。
血泪调试了两天多,今晚发现是queryWrapper没起作用。于是将queryWrapper替换成UserMapper中原始的查询语句,并利用MyBatisX插件让其自动生成对应的查询语句分别如下:

  • UserMapper:
public interface UserMapper extends BaseMapper<User> {List<User> selectAllByUserAccount(@Param("userAccount") String userAccount);List<User> selectAllByUserAccountAndPassword(@Param("userAccount") String userAccount, @Param("password") String password);List<User> searchAllByUsername(@Param("username") String username);
}
  • UserMapper.xml
    <select id="selectAllByUserAccount" resultMap="BaseResultMap">select<include refid="Base_Column_List"/>from userwhereuserAccount = #{userAccount,jdbcType=VARCHAR}</select><select id="selectAllByUserAccountAndPassword" resultMap="BaseResultMap">select<include refid="Base_Column_List"/>from userwhereuserAccount = #{userAccount,jdbcType=VARCHAR}AND password = #{password,jdbcType=VARCHAR}</select><select id="searchAllByUsername" resultMap="BaseResultMap">select<include refid="Base_Column_List"/>from userwhereusername = #{username,jdbcType=VARCHAR}</select>

三个函数分别对应注册、登录、用户查找中的数据库查找实现

替换后,控制层的searchUsers函数也要修改下。因为查询函数是UserMapper的内部方法,我们要在UserService中才能使用userMapper的内部方法达到解耦合的目的,因此我们要在UserServiceImpl中写一个searchUsers函数,供控制层UserController中的searchUsers函数调用。
代码如下:

  • UserServiceImpl中
    public List<User> searchUsers(String username) {List<User> list = new ArrayList<>();if (StringUtils.isNotBlank(username)) {list = userMapper.searchAllByUsername("%" + username + "%");}return list;}
  • UserCtroller
@GetMapping("/search")public List<User> searchUsers(String username, HttpServletRequest request) {Object userObj = request.getSession().getAttribute(userService.USER_LOGIN_STATE);User user = (User)userObj;if (user == null || user.getUserRole() != 1) {return new ArrayList<>();}return userService.searchUsers(username);}

可自行将之前用queryWrapper的地方也进行下替换,逻辑比较简单,相信看到这里的小伙伴很聪明,一定能够自己实现完成出来。

  • 最后展示下联调效果:
    在这里插入图片描述
    可以看到后端确实返回了我们想要的用户信息。

这篇关于项目训练营第四天的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1088696

相关文章

一文教你如何将maven项目转成web项目

《一文教你如何将maven项目转成web项目》在软件开发过程中,有时我们需要将一个普通的Maven项目转换为Web项目,以便能够部署到Web容器中运行,本文将详细介绍如何通过简单的步骤完成这一转换过程... 目录准备工作步骤一:修改​​pom.XML​​1.1 添加​​packaging​​标签1.2 添加

tomcat多实例部署的项目实践

《tomcat多实例部署的项目实践》Tomcat多实例是指在一台设备上运行多个Tomcat服务,这些Tomcat相互独立,本文主要介绍了tomcat多实例部署的项目实践,具有一定的参考价值,感兴趣的可... 目录1.创建项目目录,测试文China编程件2js.创建实例的安装目录3.准备实例的配置文件4.编辑实例的

springboot集成Deepseek4j的项目实践

《springboot集成Deepseek4j的项目实践》本文主要介绍了springboot集成Deepseek4j的项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价... 目录Deepseek4j快速开始Maven 依js赖基础配置基础使用示例1. 流式返回示例2. 进阶

SpringBoot项目启动报错"找不到或无法加载主类"的解决方法

《SpringBoot项目启动报错找不到或无法加载主类的解决方法》在使用IntelliJIDEA开发基于SpringBoot框架的Java程序时,可能会出现找不到或无法加载主类com.example.... 目录一、问题描述二、排查过程三、解决方案一、问题描述在使用 IntelliJ IDEA 开发基于

SpringBoot项目使用MDC给日志增加唯一标识的实现步骤

《SpringBoot项目使用MDC给日志增加唯一标识的实现步骤》本文介绍了如何在SpringBoot项目中使用MDC(MappedDiagnosticContext)为日志增加唯一标识,以便于日... 目录【Java】SpringBoot项目使用MDC给日志增加唯一标识,方便日志追踪1.日志效果2.实现步

Ubuntu中Nginx虚拟主机设置的项目实践

《Ubuntu中Nginx虚拟主机设置的项目实践》通过配置虚拟主机,可以在同一台服务器上运行多个独立的网站,本文主要介绍了Ubuntu中Nginx虚拟主机设置的项目实践,具有一定的参考价值,感兴趣的可... 目录简介安装 Nginx创建虚拟主机1. 创建网站目录2. 创建默认索引文件3. 配置 Nginx4

SpringBoot项目启动错误:找不到或无法加载主类的几种解决方法

《SpringBoot项目启动错误:找不到或无法加载主类的几种解决方法》本文主要介绍了SpringBoot项目启动错误:找不到或无法加载主类的几种解决方法,具有一定的参考价值,感兴趣的可以了解一下... 目录方法1:更改IDE配置方法2:在Eclipse中清理项目方法3:使用Maven命令行在开发Sprin

Nginx实现高并发的项目实践

《Nginx实现高并发的项目实践》本文主要介绍了Nginx实现高并发的项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录使用最新稳定版本的Nginx合理配置工作进程(workers)配置工作进程连接数(worker_co

Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

《Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)》文章介绍了如何使用dhtmlx-gantt组件来实现公司的甘特图需求,并提供了一个简单的Vue组件示例,文章还分享了一... 目录一、首先 npm 安装插件二、创建一个vue组件三、业务页面内 引用自定义组件:四、dhtmlx

SpringBoot项目注入 traceId 追踪整个请求的日志链路(过程详解)

《SpringBoot项目注入traceId追踪整个请求的日志链路(过程详解)》本文介绍了如何在单体SpringBoot项目中通过手动实现过滤器或拦截器来注入traceId,以追踪整个请求的日志链... SpringBoot项目注入 traceId 来追踪整个请求的日志链路,有了 traceId, 我们在排