SpringBoot Web开发体验

来源：互联网发布：c linux sleep 编辑：程序博客网时间：2024/05/21 11:12

转载请注明来源-作者@loongshawn：http://blog.csdn.net/loongshawn/article/details/72473775，建议读者阅读原文，确保获得完整的信息

1 前言

本文记录SpringBoot搭建Web平台的开发经验，以备后续更近一步实践。

先来看看搭建的页面效果，如下图：

这里写图片描述

打开safari的开发者工具框，如下图，可以再控制台中看到浏览器执行日志-点击获取名字时就会打出日志。
这里写图片描述

附图为MVC框图，对于开发者理解构架有益。

这里写图片描述

2 步骤

接下来，介绍搭建步骤，总共分为3步：

创建maven工程
配置springboot项目
spring web配置

2.1 创建maven工程

通过Idea中的“Create New Project”功能创建工程。

这里写图片描述

选择maven项目。

这里写图片描述

填写Groupid、Artifactid、Version内容。至此，Maven工程新建完毕。

这里写图片描述

2.2 配置springboot项目

pom.xml文件配置，使用到了spring-boot-starter-parent、spring-boot-starter-web两依赖。

<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0"         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">    <modelVersion>4.0.0</modelVersion>    <groupId>com.amap.openapi</groupId>    <artifactId>openapi-web</artifactId>    <version>1.0-SNAPSHOT</version>    <!-- Inherit defaults from Spring Boot -->    <parent>        <groupId>org.springframework.boot</groupId>        <artifactId>spring-boot-starter-parent</artifactId>        <version>1.5.3.RELEASE</version>    </parent>    <!-- Add typical dependencies for a web application -->    <dependencies>        <dependency>            <groupId>org.springframework.boot</groupId>            <artifactId>spring-boot-starter-web</artifactId>        </dependency>    </dependencies></project>

创建application.properties文件：

################################################################################# embedded servlet containerserver.port=7000# sessionTimeout in secondsserver.sessionTimeout=30000# tomcat compressionserver.tomcat.compression=on

创建applicationContext.xml文件：

<?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans"    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"    xsi:schemaLocation="http://www.springframework.org/schema/beans     http://www.springframework.org/schema/beans/spring-beans.xsd">    <bean id="properties" class="org.springframework.beans.factory.config.PropertyPlaceholderConfigurer">        <property name="locations">            <list>                <value>classpath:spring/config/application.properties</value>            </list>        </property>        <property name="ignoreUnresolvablePlaceholders" value="true" />    </bean></beans>

文件初始化配置：

@SpringBootApplication@EnableAutoConfigurationpublic class App {    @Value("${server.port}")    private int port;    @Value("${server.sessionTimeout}")    private int sessionTimeout;    public static void main(String[] args) throws Exception {        SpringApplication.run(App.class, args);    }    @Bean    public EmbeddedServletContainerFactory servletContainer() {        TomcatEmbeddedServletContainerFactory factory = new TomcatEmbeddedServletContainerFactory();        factory.setPort(port);        factory.setSessionTimeout(sessionTimeout, TimeUnit.SECONDS);        return factory;    }    @Bean    public MultipartConfigElement multipartConfigElement() {        // 配置最大上传文件大小为100M        MultipartConfigFactory factory = new MultipartConfigFactory();        factory.setMaxFileSize("102400KB");        factory.setMaxRequestSize("102400KB");        return factory.createMultipartConfig();    }}@Configuration@ImportResource("/spring/*.xml")class XmlImportingConfiguration {}

2.3 spring web配置

本例中使用thymeleaf作为web模版引擎，因此首先需要在pom中加入依赖及插件，更新后的依赖如下：

<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0"         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">    <modelVersion>4.0.0</modelVersion>    <groupId>com.amap.openapi</groupId>    <artifactId>openapi-web</artifactId>    <version>1.0-SNAPSHOT</version>    <!-- Inherit defaults from Spring Boot -->    <parent>        <groupId>org.springframework.boot</groupId>        <artifactId>spring-boot-starter-parent</artifactId>        <version>1.5.3.RELEASE</version>    </parent>    <!-- Add typical dependencies for a web application -->    <dependencies>        <dependency>            <groupId>org.springframework.boot</groupId>            <artifactId>spring-boot-starter-web</artifactId>        </dependency>        <dependency>            <groupId>org.springframework.boot</groupId>            <artifactId>spring-boot-starter-thymeleaf</artifactId>        </dependency>    </dependencies>    <build>        <plugins>            <plugin>                <groupId>org.springframework.boot</groupId>                <artifactId>spring-boot-maven-plugin</artifactId>            </plugin>        </plugins>    </build></project>

在application.properties文件添加thymeleaf的相关配置（模版默认路径、后缀、模式、编码、缓存），更新后的配置文件如下：

################################################################################# embedded servlet containerserver.port=7000# sessionTimeout in secondsserver.sessionTimeout=30000# tomcat compressionserver.tomcat.compression=on################################################################################# THYMELEAF (ThymeleafAutoConfiguration)spring.thymeleaf.check-template-location=truespring.thymeleaf.prefix=classpath:/templates/spring.thymeleaf.suffix=.htmlspring.thymeleaf.mode=HTML5spring.thymeleaf.encoding=UTF-8# charset=<encoding> is addedspring.thymeleaf.content-type=text/html# set to false for hot refreshspring.thymeleaf.cache=true

创建Controller控制器，对应的视图模型为index。其中@RequestMapping(value = “/user”)属性值”/user”表示访问路径，如http://localhost:7000/user，函数index返回类型为String，其返回值为”index”，这里需要区分的是不是返回”index”字符串。工程默认模版路径为”resources/templates”。

@Controllerpublic class SampleController {    @RequestMapping(value = "/user")    public String index(ModelMap model){        User user = new User("loongshawn","12345678");        List<User> list = new ArrayList<User>();        User user1 = new User("user1","12345678");        User user2 = new User("user2","12345678");        User user3 = new User("user3","12345678");        list.add(user1);        list.add(user2);        list.add(user3);        model.addAttribute("user",user);        model.addAttribute("list",list);        System.out.println("index");        return "index";    }}

既然视图模型为index，创建index.html，将其存放在templates路径下。

这里写图片描述

<!DOCTYPE html><html lang="en" xmlns:th="http://www.thymeleaf.org"><head>    <meta charset="UTF-8" />    <title>首页</title>    <link th:href="@{bootstrap/css/bootstrap.min.css}" rel="stylesheet" />    <link th:href="@{bootstrap/css/bootstrap-theme.min.css}" rel="stylesheet" /></head><body><div class="panel panel-primary">    <div class="panel-heading">        <h3 class="panel-title">访问Model</h3>    </div>    <div class="panel-body">        <span th:text="${user.name}"></span>    </div></div><div th:if="${not #lists.isEmpty(list)}">    <div class="panel panel-primary">        <div class="panel-heading">            <h3 class="panel-title">列表</h3>        </div>        <div class="panel-body">            <ul class="list-group">                <li class="list-group-item" th:each="person:${list}">                    <span th:text="${person.name}"></span>                    <span th:text="${person.password}"></span>                    <button class="btn" th:onclick="'getName(\''+${person.name}+'\');'">获得名字</button>                </li>            </ul>        </div>    </div></div><script th:src="@{jquery-3.2.1.js}" type="text/javascript"></script><script th:src="@{bootstrap/js/bootstrap.min.js}" type="text/javascript"></script><script th:inline="javascript">    var single = [[${user}]];    console.log(single.name+"/"+single.password);    function getName(name) {        console.log(name);    }</script></body></html>

出于显示效果考虑，用到了bootstrap及jquery两个库，在resources路径下创建static文件夹，将bootstrap、jquery库存放在此，官方均提供最新版本库下载地址。至此，所用配置工作完成。

这里写图片描述

3 总结

本文仅仅记录了利用SpringBoot如何搭建一个Web平台，配置比较简易。但没有涉及数据库操作，因此你也可以在此基础上自行配置MyBatis，可以参考之前的文章《SpringBoot、MyBatis配置多数据源》。上述配置过程如有问题，请吐槽。

4 附件

工程源码下载

阅读全文

0 0