水果项目2—后端、解决跨域请求问题

最新推荐文章于 2025-12-28 17:35:25 发布

原创最新推荐文章于 2025-12-28 17:35:25 发布 · 278 阅读

0 ·

CC 4.0 BY-SA版权

前后端分离springboot+mybatisplus项目专栏收录该内容

2 篇文章

订阅专栏

一、搭建

直接新建一个springboot的项目，不用maven了
在这里插入图片描述

二、注意事项

1.1如果你只写Controller的话，又没写ResponseBoby的话，那么就是页面跳转：
在这里插入图片描述

1.2如果在方法上加上@ResponseBoby就返回json到页面了：

2.如果嫌麻烦在方法加@ResponseBoby的话，可以直接声明@RestController就好，也是直接返回字符串的

在这里插入图片描述

三、解决跨域请求问题

3.前端vue调用我们后端的接口时，由于端口啥的不一样，出现跨域问题：在这里插入图片描述
解决：
在后端加上一个类：

package com.yuan.configuration;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
/**
 * @author QLBF
 * @version 1.0
 * @date 2021/5/11 11:27
 */
@Configuration
public class CrosConfiguration implements WebMvcConfigurer{
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOriginPatterns("*")
                .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS")
                .allowCredentials(true)
                .maxAge(3600)
                .allowedHeaders("*");
    }
}

四、用到VO（重点看分析）：

4.1 BarVo

如果你要返回的是这样的一个集合+另一个集合含map+属性：
在这里插入图片描述分析：1.{}表示控制层要返回一个对象，然后name[]再{}里面表示这是一个对象的集合，vueles也是对象的集合，名字不要变。

2.然后再看name[]这个集合里面是名字，可以直接用一个String。
3.看values[]，里面有{属性，属性：{}},因为vaules[]还有{}，这时候我们就得再创建DataVO类，里面就放属性value用Integer表示，然后属性:{}很明显用map来做。

4.封装完后前端调用就返回对象就行，自动转为json的

那么你的实现类就得这个样子了：首先一个类含两个集合：

在这里插入图片描述然后另一个类是包含map+属性的：

在这里插入图片描述然后在serviceimpl封装：

Autowired
    private FruitMapper fruitMapper;
    @Override
    public BarVO barVOList() {
        BarVO barVO=new BarVO();
        List<String> names=new ArrayList<>();
        List<DataVO> values=new ArrayList<>();
        //先查出数据
        List<Fruit> fruits = fruitMapper.selectList(null);
        for (Fruit fruit : fruits) {
            names.add(fruit.getName());
            DataVO dataVO=new DataVO();
            dataVO.setValue(fruit.getSale());
            dataVO.setItemStyle(DataUtil.createItemStyle(fruit.getSale()));
            values.add(dataVO);
        }
        barVO.setNames(names);
        barVO.setValues(values);
        return barVO;
    }

最后控制层返回一个对象就好：
在这里插入图片描述

4.2 PieVO:

如果前端要求是这样的：
在这里插入图片描述
分析：
1.[]表示控制层要返回一个集合，
2.{}表示这个是一个对象，所以我们得创建一个类表示对象，value、表示对象的属性，然后还有一个itemStyle的map。

然后在serviceimpl写封装成对象：

@Override
    public List<PieVO> pieVOList() {
        List<PieVO> pieVOList=new ArrayList<>();
        List<Fruit> fruits = fruitMapper.selectList(null);
        for (Fruit fruit : fruits) {
            PieVO pieVO=new PieVO();
            pieVO.setValue(fruit.getSale());
            pieVO.setName(fruit.getName());
            pieVO.setItemStyle(DataUtil.createItemStyle(fruit.getSale()));
            pieVOList.add(pieVO);
        }
        return pieVOList;
    }

最后控制层返回一个集合：
在这里插入图片描述
完事，慢慢体会！

五、项目中遇到的问题：

1.edit（更新操作）一般用@PutMapping
add一般用@PostMapping

2.mybatis-plus普通的crud也不需要在serviceImpl写方法调用mapper的，但扩展的业务可以使用serviceimpl封装，mapper接口可以用@Param定义传参的，（但是如果没有你想的，可以在serviceimpl调用mapper来实现一些复杂的，如果mapper都没有对应的sql方法，则需要在xml配置了），

mybatis-plus和通用mapper有点区别的，通用mapper需要在serviceimpl封装方法调用mapper层，自定sql在mapper层。

5.2项目演示：

在这里插入图片描述

六、总结

学到了前后端的知识，重要的是VO对象的封装，也了解了mybatis-plus的用法与通用mapper的区别在上面写了，还有Vue3.0的使用，前端调用后端的时候，要在后端使用cros解决跨域问题，才能解决问题。学到了很多，最后项目地址放在这：
https://gitee.com/alla11/springboot_fruit

项目来源：【神级框架】前后端分离极简上手：Spring Boot+MyBatis Plus+Vue+Element UI+ECharts