java轮子-使用springboot做一个带界面的web程序

来源：互联网发布：openwrt 网络摄像头编辑：程序博客网时间：2024/05/22 12:16

上次是按照官方文档简单的建立了一个spring boot 的项目，然而web工程不可避免的需要界面这种东西。所以这次，我们就来使用spring boot做一款带界面的web程序。查了一些资料，首先spring boot官方是已经不推荐使用jsp来做页面了，它们推荐以下几种引擎来进行页面的开发，它们是Thymeleaf，FreeMarker，Velocity，Groovy，Mustache。本萌新只见过FreeMarker，Velocity，尤其是FreeMarker，以前的公司就用的这个。据说这东西可以静态化页面，提高效率。目前得到了广泛的应用，很多HTML和jsp页面最后也要使用FreeMarker来静态化，从而提高效率，而且我也想学一学，那么，这次的例子就用FreeMarker来演示了。。。
首先，新建一个spring boot 项目，可以参见上一篇博文，比较简单。然后在pom文件中添加FreeMarker的依赖。

<dependency>  <groupId>org.springframework.boot</groupId>  <artifactId>spring-boot-starter-freemarker</artifactId></dependency>

    然后，启动类如下所示：

package com.xxjz;import org.springframework.boot.*;import org.springframework.boot.autoconfigure.*;import org.springframework.context.annotation.ComponentScan;import org.springframework.stereotype.*;import org.springframework.web.bind.annotation.*;@SpringBootApplicationpublic class RunMain {    public static void main(String[] args) throws Exception {        SpringApplication.run(RunMain.class, args);    }}

然后，就该写页面了。我们在src/main/resources下新建一个文件夹并命名为/templates，在这个文件夹下新建一个页面文件xxx.ftl。由于第一次，就写个比较简单的helloworld就好。

<!DOCTYPE html><html><body>Hello,world</body></html>

好了，至此，页面添加完毕。
接下来，我们需要写一个controller来将这个页面渲染出来，就跟你再springMVC中做的一样。好了，首先在源文件中建一个controller，然后在这个controller中渲染页面。

package com.xxjz.upload;import org.springframework.boot.autoconfigure.SpringBootApplication;import org.springframework.stereotype.Controller;import org.springframework.ui.ModelMap;import org.springframework.web.bind.annotation.GetMapping;import org.springframework.web.bind.annotation.RequestMapping;@Controllerpublic class LoadUploadFilePageController {    @GetMapping("/")    String home() {        return "uploadpic";    }}

好了，代码全部写完。我们可以看到，这个controller添加了@controller注解，并指明了访问路径为“/”，这代表了直接访问项目根目录就可以访问到这个controller。最后返回对应模板文件的文件名。现在的目录结构如下所示。

这里写图片描述

需要注意这么两个坑，如果你是直接用的官网的helloworld，上直接添加代码，很可能一运行就报错404。那是由于启动类的注解配置有误，spring扫描不到对应的类。helloworld中启动类的注解配置是

@Controller@EnableAutoConfiguration

而spring boot 提供了一个注解@SpringBootApplication，该注解 = (默认属性)@Configuration + @EnableAutoConfiguration + @ComponentScan，需要配置成这个注解，或者将这三个注解补全。

@Configuration：提到@Configuration就要提到他的搭档@Bean。使用这两个注解就可以创建一个简单的spring配置类，可以用来替代相应的xml配置文件。
@EnableAutoConfiguration：能够自动配置spring的上下文，试图猜测和配置你想要的bean类，通常会自动根据你的类路径和你的bean定义自动配置。
@ComponentScan：会自动扫描指定包下的全部标有@Component的类，并注册成bean，当然包括@Component下的子注解@Service,@Repository,@Controller。

第二个坑，写代码一般会习惯将不同的类分成不同的包，所以有人会将启动类单独放在一个包中，将controller，service，dao分别放在各自的包中。但是spring boot中，必须将启动类放在root包中，也就是，所有其他包都必须放在启动类所在包的子包下，spring boot才能扫描到。所以，如果不是这样，你只能得到一个错误页面。。。。
好了，现在，我们就可以启动spring boot了。
启动，然后在浏览器输入http://localhost:8080/
就可以得到如下页面：
这里写图片描述

之后，我们可以给这个简单界面加点儿东西，首先，在src/main/resources中建立一个配置文件application.properties，在这个配置文件中输入如下配置信息：

application.message: Hello, Andy
aaa: hello aaa
bbb: hello bbb

然后，我们稍微改一下，ftl文件，用来显示配置文件中的信息。

<!DOCTYPE html><html lang="en"><body>    eeeee                 </br>    Message: ${message}   </br>    aaa: ${aaa}           </br>    bbb: ${bbb}           </br></body></html>

其中，${message}表示会取请求中的参数message的值，直接显示在页面上。之后我们改一下controller文件，用来读取配置文件以及返回数据到页面。

package com.xxjz.upload;import java.util.Date;import java.util.Map;import org.springframework.beans.factory.annotation.Value;import org.springframework.boot.autoconfigure.SpringBootApplication;import org.springframework.stereotype.Controller;import org.springframework.ui.ModelMap;import org.springframework.web.bind.annotation.GetMapping;import org.springframework.web.bind.annotation.RequestMapping;@Controllerpublic class LoadUploadFilePageController {    @Value("${application.message:Hello World}")    private String message ;    @Value("${aaa:aaa}")    private String aaa ;    @Value("${bbb:bbb}")    private String bbb;    @GetMapping("/")    public String home(Map<String, Object> model) {        model.put("time", new Date());        model.put("message", this.message);        model.put("aaa", this.aaa);        model.put("bbb", this.bbb);        return "uploadpic";    }}

spring boot 读取配置文件比较容易，使用该注解就可实现。

@Value("${application.message:Hello World}")    private String message ;

其中application.message为配置文件中定义的变量名，冒号后面的值为默认值，代表如果配置文件中没有改值时，就使用冒号后面的值作为application.message的值，下面的变量表示将配置文件中的值读出来后就赋值给该值，在下面的文件中使用。
好了，修改完毕，重新启动，在浏览器中输入

http://localhost:8080/    出现如下界面：

这里写图片描述

可以看到，配置文件中的信息显示在了界面中，配置文件中没有配置的信息显示了默认值。
本例，大家可以去我的guthub上进行下载，下载地址如下：
https://github.com/zdxxinlang/FastDfsUtil.git
顺便吐槽一句，csdn这个富文本编辑器真是太难了，宁可用记事本都不想用它，能不能改一改，csdn不是技术大牛么？

阅读全文

0 0