准备工作:
确保Idea和Hbulider正常工作之外,还要安装好数据库软件,比如MySQL,后台测试接口软件Postman(提前注册好)
前后端分离开发的意义:
一、后台部分
大致顺序总览
1.根据需求,分析数据库,建库,建表,准备数据
2.建立web模块,webapp类型的maven项目
3.手动创建src(蓝色),resources,test(绿色)—java目录
4.建立package,entity,dao,service,controller
5.添加pom依赖:web模块依赖,webmvc模块依赖,jackson相关依赖
6.创建entity实体类
7.dao接口,用注解的方式增加自定义的复杂关联语句
8.service接口,注入dao,调用相关方法
9.用Junit对service做单元测试
10.controller,使用RESTful风格请求,完成控制层
11.用postman对controller进行测试,杜绝一切404,500
建立数据库db_spring,分别建立表t_sys_user,t_course
![](https://img.haomeiwen.com/i15294853/310585d567ed4a55.png)
t_sys_user
![](https://img.haomeiwen.com/i15294853/4a7aafa081f960f8.png)
t_course
表建完之后,自己添加几条数据
在idea中创建好web项目以及相应的包
![](https://img.haomeiwen.com/i15294853/d4da12bc8ce27616.png)
结构如图
按照顺序一步步完成代码,代码已经上传到github的web项目中,地址如下:
配置tomacat服务器
![](https://img.haomeiwen.com/i15294853/aceed35856888733.png)
1
![](https://img.haomeiwen.com/i15294853/0bf7be749e42db7c.png)
2
![](https://img.haomeiwen.com/i15294853/0ccde53f861ee842.png)
3
![](https://img.haomeiwen.com/i15294853/47390a688320cb72.png)
4
![](https://img.haomeiwen.com/i15294853/2b4d65719a75b730.png)
5
设置完记得先aply,再点击ok
![](https://img.haomeiwen.com/i15294853/de88e39924438fd1.png)
6
![](https://img.haomeiwen.com/i15294853/635b0f7ee5aa60e1.png)
测试
![](https://img.haomeiwen.com/i15294853/b47514f2150ecd8c.png)
配置成功
service单元测试通过之后,开始进行controller测试,使用postman
![](https://img.haomeiwen.com/i15294853/0c4a595bbca8645d.png)
测试
到这里,后台工作大致也结束了
二、前端部分
![](https://img.haomeiwen.com/i16517955/4e444f6569d37a2c.png)
![](https://img.haomeiwen.com/i16517955/adf13c665ac5a392.png)
![](https://img.haomeiwen.com/i16517955/43f0e20be1088d64.png)
![](https://img.haomeiwen.com/i16517955/acbe0352efbc351a.png)
效果演示:
![](https://img.haomeiwen.com/i16517955/fc8e0feabe9e0153.png)
演示
![](https://img.haomeiwen.com/i15294853/b55d5daf64701d26.png)
修改数据库
注意点:
1、文件命名要符合规范,存放位置一定要保证正确合理
2、数据库中主键属性为bignit,在idea中为Long(L要大写)
3、要按照步骤来编写后台代码,单元测试要保证通过,结果合理
4、一定要保证Tomcat服务器配置正确
5、postman测试要杜绝404等一切错误
6、在写完前端代码进行测试时,tomacat服务器不能关闭,不然数据跳转不过去
网友评论