前言：
此刻各位老铁们对“spring访问js”大致比较重视，朋友们都想要分析一些“spring访问js”的相关知识。那么小编同时在网上搜集了一些对于“spring访问js””的相关资讯，希望小伙伴们能喜欢，兄弟们一起来学习一下吧！前面完成了API服务(虽然这个API没什么用)。接下去来个WEB服务，在前面项目中加上个页面。这章目标是通过访问一个URL展示一个界面，从服务端传递参数值到界面中展示动态数据。这里还会涉及到webjars的应用。
目录与文件
在项目src/main/resources目录下创建两个目录，分别是templates各static，templates 存放模板文件，static 存放静态文件。
目录
在static目录放入一张图片，图片名称为001.jpg，启动项目。打开浏览器访问
访问资源
spring boot会默认从static查找静态资源，在这里还可以放css，js，html等文件，都可以直接访问到。但是，这里的html文件只能是静态页面，服务端不能传值到界面中。
templates中加入一个index.html，内容如下<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title>这里是标题</title></head><body> <div> <p>这是首页</p> </div></body></html>
重启服务，浏览器中访问
404
找不到页面，如果index.html放到static目录中是可以访问的。templates目录中的文件是不能直接访问。下面讲到这么访问templates中的文件。
当前目录
目录
使用模板
访问templates文件，首先要引入模板引擎。这里使用thymeleaf，在pom.xml文件中包含thymeleaf组件。
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency>
如图
增加package：com.biboheart.demos.web，在package中创建class：PageController
package com.biboheart.demos.web;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;@Controllerpublic class PageController { @RequestMapping(value = {"/", "/home"}) public String home() { return "index"; }}@Controller表示这是一个SpringMVC的控制器
@RequestMapping(value = {"/", "/home"}) 表示访问路径"/"或"/home"都指向home函数，home返回"index"页面，即templates/index.html模板生成的页面。
重新启动服务，在浏览器中访问
home页面
这时候，页面展示的是index.html的内容。向页面传值
这里用Model对象传值到模板中
调整controller的实现
package com.biboheart.demos.web;import org.springframework.stereotype.Controller;import org.springframework.ui.Model;import org.springframework.web.bind.annotation.RequestMapping;@Controllerpublic class PageController { @RequestMapping(value = {"/", "/home"}) public String home(Model model, String name) { model.addAttribute("name", name); return "index"; }}在函数中增加两个参数，Model model用于向模板传递值，name用于接收请求参数。model.addAttribute("name", name);将接收到的值通过model传递到模板中。
模板文件index.html中接收并显示name的值。
<!DOCTYPE html><html lang="zh-CN" xmlns:th=""><head> <meta charset="UTF-8"> <title>这里是标题</title></head><body> <div> <p>这是首页</p> <p>欢迎你：<span th:text="${name}"></span></p> </div></body></html>重新启动服务，在浏览器中访问
参数
index.html中的<span th:text="${name}"></span>，展示Model中的name的值。使用webjars
在pom.xml中包含webjars，并且包含jquery，bootstrap
<dependency> <groupId>org.webjars</groupId> <artifactId>webjars-locator</artifactId> <version>0.34</version> </dependency> <dependency> <groupId>org.webjars</groupId> <artifactId>jquery</artifactId> <version>3.3.1</version> </dependency> <dependency> <groupId>org.webjars</groupId> <artifactId>bootstrap</artifactId> <version>3.3.7-1</version> </dependency>
界面中使用bootstrap
<!DOCTYPE html><html lang="zh-CN" xmlns:th=""><head> <meta charset="UTF-8"> <title>这里是标题</title> <script src="/webjars/jquery/jquery.min.js"></script> <script src="/webjars/bootstrap/js/bootstrap.min.js"></script> <link rel="stylesheet" href="/webjars/bootstrap/css/bootstrap.min.css"/></head><body> <div class="container"> <div class="jumbotron"> <h1>欢迎你：<span th:text="${name}"></span></h1> <p>这是首页</p> </div> </div></body></html>重新启动项目，在浏览器中访问
bootstrap效果
模板中包含静态资源
将静态资源001.jpg图片在模板中显示，修改后index.html文件如下
<!DOCTYPE html><html lang="zh-CN" xmlns:th=""><head> <meta charset="UTF-8"> <title>这里是标题</title> <script src="/webjars/jquery/jquery.min.js"></script> <script src="/webjars/bootstrap/js/bootstrap.min.js"></script> <link rel="stylesheet" href="/webjars/bootstrap/css/bootstrap.min.css"/></head><body> <div class="container"> <div class="jumbotron"> <h1>欢迎你：<span th:text="${name}"></span></h1> <p>这是首页</p> </div> <img src="/001.jpg" alt="封面" class="img-thumbnail"> </div></body></html> 标签： #spring访问js
