黑马程序员JavaWeb开发|案例:tlias智能学习辅助系统(1)准备工作、部门管理

一、准备工作

1.明确需求

根据产品经理绘制的页面原型,对部门和员工进行相应的增删改查操作。

2.环境搭建

将使用相同配置的不同项目作为Module放入同一Project,以提高相同配置的复用性。

  • 准备数据库表(dept, emp)=== 资料中包含了创建表的代码
  • 创建springboot工程,引入对应的起步依赖
  • 配置application.properties中引入mybatis的配置信息,准备对应的实体类
  • 准备对应的Mapper(Dao===数据访问),Service(接口,实现类===逻辑处理),Controller(接受请求、响应数据)基础结构

9fdda918179e46d59141581938e17d0b.png

b712fac9e01d4b509c6c1053773e16ba.png

👆添加相应依赖

IDEA:*.properties文件中文乱码解决方案_xx.properties注释中文乱码-CSDN博客https://blog.csdn.net/u010285974/article/details/107102644👆修改配置文件中的中文乱码情况

200a1fb6992a41dd93bbac76a9c6cd29.png

  • pojo:存放的是两个实体类,实体类中的属性(驼峰命名)和表结构的字段(下划线分割)是一一对应的;
  • controller:控制层,接受前端发送的请求,对请求进行处理,并响应数据;
  • service:业务逻辑层,准备两个接口,并准备了两个接口的实现类,在实现类上面加了注解@Service,表示将当前实现类交给IOC容器管理,成为IOC容器里的bean对象;
  • Mapper:在mapper接口上面加上注解@Mapper。

3.开发规范

基于当前最主流的前后端分离模式进行开发。

前端开发人员将打包好的前端工程部署在ngix服务器上运行,后端开发人员将打包好的服务端程序运行在Tomcat服务器上。

前端向后端请求数据,再有后端给前端响应数据。

所以前后端在开发过程中需要共同遵守【接口文档】(根据产品经理绘制的页面原型和需求制作)进行开发。

本案例的前后端交互是根据Restful风格的接口进行交互的。

  • REST(REpresentational State Transfer),表述性状态转换,是一种软件架构风格。
  • 前后端交互统一响应结果Result

整体开发流程:

查明页面原型明确需求==》阅读接口文档==》思路分析==》接口开发==》接口测试==》前后端联调


二、部门管理

1.查询部门

需求分析:

查询全部数据(由于部门数据比较少,不考虑分页)

思路流程⭐:

前端发起一个查询部门的请求

=====》

被DeptController处理

  1. 接收请求;
  2. 调用service查询部门;
  3. 响应(封装在统一响应结果Result中相应给前端)

=====》

DeptService进行逻辑处理(调用mapper接口查询)

=====》

DeptMapper数据处理(selec * from dept;)

=====》

查询访问数据库

代码编写:

1)@Slf4j:定义日志记录对象

4e15fb7d070541529c95ad6b333ee5ea.png

注意:项目开发过程中,尽量不要使用sout输出日志,使用日志记录框架记录日志。

private static Logger log = LoggerFactory.getLogger(DeptController.class);

固定代码,lombok为了简化代码书写,可以直接增加注释@Slf4j,定义日志记录对象

3a43cdc9702f4db08bd293f210f8a9cc.png

2)@GetMapping:限定接口请求方式为GET

a2d86a9ba3da42429572ed97d36fc9b5.png

3)@Autowird:依赖注入

当标注的属性是接口时,注入的是这个接口的实现类

查询操作:

07c1d3ab51f945698a1b73daba2e5581.png

691f5bf3fccd4716a718a88b0ce10cca.png

前后端联调:

解压打包文件到没有中文路径的目录下,双击ngix.exe运行,然后打开设备管理器==详细信息里面查看ngix是否正常运行==访问测试:localhost:90访问

95a87ae9b2b44b1e9e46e389ddcb5662.png

按下F12,打开浏览器的开发者工具,抓取这次网络请求

865918b7076c4503b548c2219281b355.png

d8015da1a253493db52fd45c3b08ba2a.png

2.删除部门

需求分析:

弹出确认框 , 提示 "您确定要删除该部门的信息吗 ?"  如果选择确定 , 则删除该部门 , 删除成功后 , 重新刷新列表页面。  如果选择了取消,则不执行任何操作。

代码编写:

1)@PathVariable:获取路径参数

将URL中占位符参数绑定到Controller处理方法的输入参数中

6e796b1c57524c4aa9f1df4d16dff0c0.png

表示获取路径变量中的id,然后绑定给方法中的id参数

DeptController(设置url,接收响应)==>DeptService(接口)==>DeptServiceImpl(实现类)==>DeptMapper(数据库操作)

删除操作:

29ce21b6925f42cba1685a5022e18f84.png

0cc040c5e2494443ae5759a3169a6ce6.png

前后端联调:

fc87b6c82c684b9c97c439632934dec6.png

3.新增部门

需求分析:

1.1 点击新增部门,会打开新增部门的页面。 

1.2 部门名称,必填,唯一,长度为2-10位。

代码编写:

1)@RequestBody:接收json参数

新增结果:

请求👇

11112bb1d2b2499ea08f9465de47adb3.png


响应👇

4432737e6cce429c82137d28d1d44db1.png

前后端联调:

c675ecd1dafc4137976379a011c5f459.png

ada5e73137c5465fab6b70ce0f3346b1.png

4.Controller优化

08ae4ea581184759b849ff0c3a337baf.png

1677b46bb8bb4f6b909d4ed534963520.png

3fdd4456f247496fa82f37f48d6dce49.png

可以看出上面的三种响应的地址有重复,可以将/depts抽取出来,变成公共地址,将后面的地址中有公共部分的地方进行删除

7e3383713d334aa2b1e6a93323b1c058.png

dc10362f36274e589a19b239a7b9fd38.png

6cdd5579c3d7438f92acbc22a363b59d.png

569ca71eea4a43b58448ca3a9f5b033d.png

5.修改部门(自行实现)

需求分析:

根据id查询到数据然后再修改部门

代码编写:

结合查询和删除操作

修改结果:

测试时,需要注意注释掉删除部门操作,因为二者的url一致,会有冲突。

14ebf9d8b51344d790c4bbc7e6f8c6c9.png

6025859f4fa54ae483a88d130455c725.png

前后端联调:

d90748ec1be548559bfa1e332a3d28d7.png

 

 

  • 29
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Buuuleven.(程序媛

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值