SpringBootWeb-案例

最新推荐文章于 2024-09-17 18:17:10 发布

原创最新推荐文章于 2024-09-17 18:17:10 发布 · 1.9k 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #springboot #后端 #mybatis

JavaWeb 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了前后端分离开发模式下的后端准备工作，包括Controller如何处理请求、Service与Mapper的接口实现以及如何利用SpringBoot进行依赖注入。还探讨了如何通过Nginx的反向代理解决前端与后端的跨域问题。

前后端分离开发模式

在这里插入图片描述

后端准备工作

在这里插入图片描述

开发流程

在这里插入图片描述

业务一：部门管理

1.查询部门

1.思路分析

Controller接收前端请求，调用Service层处理数据
Serivice调用mapper接口查询数据
Mapper请求数据库数据，并将数据返回给Service层
Service处理数据之后返回给Controller
Controller拿到Service处理的数据之后，响应给前端

在这里插入图片描述

2.Controller开发

@slf4j注释简化定义日志，直接可以调用log.info()函数输出日志
@RestController
@Autowired 运行时IOC容器会提供该类型的bean对象并赋值给该对象 -> 依赖注入
@GetMapping注释简化@RequestMapping，强调请求方式为GET方式

@Slf4j // Logger
@RestController
public class DeptController {

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

    @Autowired
    private DeptService deptService;

    //@RequestMapping(value = "/depts", method = RequestMethod.GET)
    @GetMapping("/depts")
    public Result list() {
        log.info("查询全部部门数据");

        // 调用Service
        List<Dept> deptList = deptService.list(); // 将service返回的数据拿到，响应给前端

        return Result.success(deptList);
    }
}

3.Service开发

面向接口编程，将需求和实现分离，便于项目的开发与维护

public interface DeptService {
    /*
    * 查询全部部门信息*/
    List<Dept> list();
}

实现接口
@Service 是@Component衍生注解，将当前类交给IOC容器管理，成为IOC容器中的bean -> 控制反转

@Service
public class DeptServiceImpl implements DeptService {

    @Autowired
    private DeptMapper deptMapper;

    @Override
    public List<Dept> list() {
        List<Dept> deptList = deptMapper.list(); // 将mapper返回的list数据返回给controller
        return deptList;
    }
}

4.Mapper开发

@Select 查询数据库，由于语句简单，不需要配置xml文件映射
通过Select语句查询所有部门信息，并将信息封装到List中

@Mapper
public interface DeptMapper {
    /**
     * 查询全部部门信息
     * @return
     */
    @Select("select * from tlias.dept")
    List<Dept> list();
}

5.测试

1.后端测试

访问localhost:8080/depts通过GET方式成功从数据库请求到数据并封装为json格式

在这里插入图片描述

2.前后端联调

前端已经开发完毕，通过nginx部署，端口设置为localhost:90
后端springboot已经集合了Tomcat，运行自动将服务放置在Tomcat，端口设置为localhost:8080
前端访问到部门管理页面时，自动发送请求到后端，后端将数据加载到前端页面

6.思考

为什么前端访问的是http://localhost:90/#/system/dept，后端的数据发送到localhost:8080/depts,但前端可以拿到后端的数据？
回答：前端在nginx.conf文件配置通过反向代理机制允许前端通过localhost:90与后端（localhost:8080）通信，同时解决了跨域问题，因为所有请求都通过同一个域和端口发出。如果你的前端应用需要通过API与后端通信，这样配置后，就可以在不修改前端代码的情况下，直接通过替换API路径前缀/api/来访问后端服务。

server {
        listen       90;  // 监听90端口
        server_name  localhost;

        location / {
            root   html;
            index  index.html index.htm;
        }

        location ^~ /api/ {
			rewrite ^/api/(.*)$ /$1 break;
			proxy_pass http://localhost:8080;
        }

针对以/api/开头的请求，这部分配置定义了一个反向代理，将这些请求转发给http://localhost:8080。rewrite ^/api/(.*)$ /$1 break;这一行是将请求的URL中的/api/部分重写掉，然后将修改后的请求转发给后端服务器。例如，如果前端请求http://localhost:90/api/depts，那么这个请求会被转发到http://localhost:8080/depts。
查看网页源码验证

2.删除部门

未完待续