对于javaweb前后端分离开发的思考和实现

最新推荐文章于 2022-05-18 18:45:57 发布

毅航同学

最新推荐文章于 2022-05-18 18:45:57 发布

阅读量729

点赞数 2

分类专栏： java 文章标签： java html

本文链接：https://blog.csdn.net/qq_40272978/article/details/105149611

版权

java 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文重在阐明对于前后端分离设计的一些小思考，同时利用ajax结合SSM框架,实现的一个简单的交互案例。
ps:笔者仅仅是一名学生，观点不免有些局限性，如果您读后有有更好的实现方式。欢迎在文末留言，笔者感激不尽。

提出问题

我们在平时学习javaweb开发时经常是页面展示信息和后台逻辑代统统在idea或者eclipse进行编写，笔者今天突然有了这样的思考：在实际工作中我们往往会各司其职，在开发一个项目时不可能一直等待前端开发将页面写好，然后在交由后端开发人员进行后台逻辑的编写。所以笔者产生了疑问：前后端如何进行分离？前台如何调用后台接口信息？

思考问题

笔者结合所学的计算网络知识想到，在网络通信的过程中网际信息往往会跋山涉水，网线的对面可能是来自五湖四海的朋友。如此庞大的网络通过什么来标定资源地址呢？答案显而易见：就是通过资源的ip地址。由此笔者想到完全可以可以用url（统一资源定位符）来实现前台界面对后端接口的访问。

初步构想

前端有一种ajax异步请求的方式可以实现对后台信息的访问，平时我们在集成开发环境下时使用ajax发送请求仅仅写资源的相对访问路径即能完成交互，但是此时由于页面开发同后台逻辑代码编写分离，此时不能在使用原先相对路径的方式来进行资源的访问了而必须使用绝对路径的方式。

此时后端代码逻辑同原先的开发并不会有大浮动的变动，要做的依旧是通过三层架构的设计所有处理逻辑在Controller中完成。

动手实践

补充知识

跨域是指从一个域名的网页去请求另一个域名的资源。比如从www.baidu.com 页面去请求 www.google.com 的资源。跨域的严格一点的定义是：只要 协议，域名，端口有任何一个的不同，就被当作是跨域。

此时我们的开发便相当于跨域开发，所以在开发过程要注意跨域的处理请求头的设置：

如果在后端页面请求设置响应头信息如下：
 response.setHeader("Access-Control-Allow-Origin","*");
前端页面访问时会在控制台抛出：No 'Access-Control-Allow-Origin' header is present的问题

错误信息~~~

错误信息

实现

前端代码： ps：(利用jquery封装后的ajax请求)

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="js/jquery.js"></script>
</head>

<body>
    <div>
        前后端交互处理
    </div>

</body>
<script>
    $.ajax({
        url: 'http://localhost:8080/data/hello',  //后端访问地址信息
        crossDomain: true, //跨域设置
        type: 'GET',
        success: function(data) {
            console.log(data);  //在控制输出服务器端的响应信息
        }

    });
</script>

</html>

后台逻辑

package cn.itcast.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@Controller
@RequestMapping("/data")
public class Data {

    /***
     * 检查页面请求，完成数据响应
     */
    @RequestMapping("/hello")
    public void sendData(HttpServletRequest request, HttpServletResponse response) throws IOException {

        //设置响应头信息
        response.setHeader("Access-Control-Allow-Origin","*");
        response.setContentType("text/json; charset=utf-8");
        response.setHeader("Access-Control-Allow-Methods","GET,POST,OPTIONS,DELETE");
        response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
        response.setHeader("Access-Control-Max-Age","3600");//关键:设置信息存活时间
        System.out.println("访问时间" + new Data().toString());
        response.getWriter().print("hello word");
    }
}

效果

结语

通过ajax技术实现了前后端接口的交互，实现原理其实挺简单的就是前台就是前端利用axaj像后端接口发送请求，并且获取到后台接口提供的数据，最终在页面渲染到前台界面。由此类推当渲染数据信息时完全可以在后端传回json数据信息，之后在前台界面解析json数据信息。

我们在最初学习javaWeb基础是或多少或少的都曾有过用jsp作为视图层的开发体验，我们有过这样的经历：利用jsp提供的jsel/el表达式独自作完成后台数据在前台界面的显示。随着前后端的分离我们不在这样繁琐的考虑页面，而专注于后台数据的提供。

我觉得随着技术的更迭，jsp技术会渐渐被取代，随着分工的逐渐细化，后端程序员应该更加专注于后台逻辑的实现，而淡化数据在前端渲染工作。这也导致了前端工作任务的加重和后端逻辑功能的复杂化，对于编程提出了很大的挑战。

程序员就是在不断地发现问题，不断的解决问题。在不断的自我突破中，实现自身的价值，或许此时博客前的您有更好的实现方案，欢迎您在博客下留言，一起学习，一起进步。

毅航同学

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
对于javaweb前后端分离开发的思考和实现

本文重在阐明对于前后端分离设计的一些小思考，同时利用ajax结合SSM框架,实现的一个简单的交互案例。 ps:笔者仅仅是一名学生，观点不免有些局限性，如果您读后有有更好的实现方式。欢迎在文末留言，笔者感激不尽。提出问题我们在平时学习javaweb开发时经常是页面展示信息和后台逻辑代统统在idea或者eclipse进行...
复制链接

扫一扫