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

客官°小女子只卖身不卖艺 2021-10-13 02:45 440阅读 0赞

### 1.  前后端项目分离 ###

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xldHR1Y2Vf_size_16_color_FFFFFF_t_70][]

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

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

例如：

index.html 中添加

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xldHR1Y2Vf_size_16_color_FFFFFF_t_70 1][]

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

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

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

注意：不在WEB-INF 里

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xldHR1Y2Vf_size_16_color_FFFFFF_t_70 2][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xldHR1Y2Vf_size_16_color_FFFFFF_t_70 3][]

页面想获取后台的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>

页面显示效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xldHR1Y2Vf_size_16_color_FFFFFF_t_70 4][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xldHR1Y2Vf_size_16_color_FFFFFF_t_70]: /images/20211013/2404b28407664ba58a9dcd53c10374c4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xldHR1Y2Vf_size_16_color_FFFFFF_t_70 1]: /images/20211013/68ba7a740f1942c991898867f1817a91.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xldHR1Y2Vf_size_16_color_FFFFFF_t_70 2]: /images/20211013/9c4b5eced6784ad1b0bfdf09c7f08d8c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xldHR1Y2Vf_size_16_color_FFFFFF_t_70 3]: /images/20211013/4ac637852d8c4a33b5ca2c9074ea430d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xldHR1Y2Vf_size_16_color_FFFFFF_t_70 4]: /images/20211013/5b799c208ae34929a785a3432231cb81.png