用springboot 搭建一套简易的前后端代码

╰+攻爆jí腚メ 2022-05-19 00:19 136阅读 0赞

（1）先把spring 基础项目创建出来。参考文章（点击以下链接）：

[Intellij IDEA创建SpringBoot项目][Intellij IDEA_SpringBoot]

（2）前后端分离，为解决跨域问题，写一个过滤器设置header。注意，springboot 增加过滤器需要在启动类增加注解

@ServletComponentScan

@WebFilter(filterName = "accessFilter",urlPatterns = "/*")
    public class AccessFilter implements Filter {
    
        @Override
        public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
    
            //用过滤器这样设置header可以解决跨域问题
            HttpServletResponse response = (HttpServletResponse) servletResponse;
            response.setHeader("Access-Control-Allow-Origin", "*");
            filterChain.doFilter(servletRequest,servletResponse);
        }
    
    }

（3）现在开始写后端。

@Controller
    public class HellowordController {
    
        @GetMapping(path = "/testJson")
        @ResponseBody
        public User testJson(){
            //User是一个普通的Bean，有属性id和name，不贴出来了
            //注意加上@ResponseBody 才可以返回json到前端
            User userInfo = new User() ;
            userInfo.setId(Long.getLong("123"));
            userInfo.setName("zhihao");
            return userInfo;
        }
    }

（4）在前端用js发送ajax请求到后端。需要添加jQuery。

$(function(){
    	  var url = 'http://localhost:8080/testJson';	
    		$.ajax({
                url:url,
                type:"get",
                //dataType:"json",
                data:{
                    userID:"1"
                },
                success:function(response){
     				console.log('success back........')
     				console.log(response)
     				console.log("属性")
     				console.log(response.name)
                },
                error:function(response) {
                	console.log('error back........')
     				console.log(response)
                }
            });
    
    });

（5）在浏览器用F12打开调试面板，点击console界面。查看测试结果，成功！

![70][]

[Intellij IDEA_SpringBoot]: https://blog.csdn.net/xyc_csdn/article/details/67672198
[70]: /images/20220519/cea9180b8acf40b2a67627d3a3167e00.png