idea创建ssm 工程骨架（4）关于前端的访问方式

最新推荐文章于 2022-07-27 16:48:06 发布

lettuce_

最新推荐文章于 2022-07-27 16:48:06 发布

阅读量424

点赞数

分类专栏： Java 文章标签： ssm 接口访问

本文链接：https://blog.youkuaiyun.com/lettuce_/article/details/99940511

版权

Java 专栏收录该内容

31 篇文章

订阅专栏

本文探讨了前后端项目分离的优势及实现方法，强调了解决跨域问题的重要性，并通过具体实例介绍了如何在SSM框架下配置静态资源，以实现前端页面直接访问后端接口获取JSON数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 前后端项目分离

整个项目工程可以分为前端项目和后端项目，前端只需要访问后端接口，就可以拿到json数据。

但前端项目访问后端接口时注意跨域问题。

2. 使用ssm骨架的的web模块

使用ssm_web模块时注意：当html，css，js等静态资源放WEB-INF 文件夹下面时，如果直接使用相对路径访问时，会访问不到。

例如：

index.html 中添加

<a href="content/test.html"><h3>跳转测试页面</h3></a>

原因是：WEB-INF 下面的静态文件得走springMVC，html页面的跳转得走Controller。

如果不想考虑安全性，直接使用页面之间的相对路径访问，操作如下：

在ssm_web 模块的webapp 下面创建存放静态资源的文件夹，如下图所示：

注意：不在WEB-INF 里

因为test.html 不在WEB-INF 下面，所以 index.html可以直接访问test.html

页面想获取后台的json数据，则可以直接在该页面使用ajax 来调用接口

test.html 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.min.js?v=2.1.4"></script>
    <script type="application/javascript">
        $(document).ready(function () {
            var bookVO={
                bookId: 1
            };
            $.ajax({
                url: "http://localhost:8080/lecture/findBookById",
                type: "post",
                contentType: "application/json;charset=UTF-8",
                data: JSON.stringify(bookVO),
                dataType: "json",
                success: function (data) {
                    console.log(data);
                    if (data.respCode === "0") {
                        $("#test").html("<pre>"+JSON.stringify(data)+"</pre>" );
                    } else {
                        alert("失败");
                    }
                }
            });
        });
    </script>
</head>
<body>

<div id="test">

</div>

</body>
</html>

页面显示效果：