深入理解SpringBoot(4)——web开发

web静态资源的处理

classpath:/META-INF/resources/
classpath:/resources/
classpath:/static/
classpath:/publics
/ : 当前项目的根路径

下面举个例子,我把静态资源先放到static下面,现在我发布项目,并访问该js文件:
在这里插入图片描述
我直接访问 localhost:8080/js/bootstrap.js,即可访问到该js文件的内容,它会自动在static下面来寻找,不需要指定路径。
下面是欢迎页(首页)的映射,系统会自动在以上的目录中寻找index.html页面来跳转,我在public目录下创建了一个index.html的文件,当我直接访问 http://localhost:8080/ 的时候,会自动跳转到index页面。
当然,你也可以自定义首选静态文件夹,你可以在application.properties下面配置,比如hello文件夹,king文件夹:

spring.resources.static-locations=classpath:/hello/,classpath:/king/

下面是要注意的一个问题,我在templates下面新建一个success.html的页面,但是通过下面这段代码,访问不到,只能访问到success字符串:

@RestController
public class HelloController {
    @RequestMapping("/success")
    public String Hello(){
        return "success";
    }
}

后来发现,原来没注意到@RestController = @Controller + @ResponseBody,因为ResponseBody一直给我转化为字符串,后来改成@Controller就好了。


下面是关于thymeleaf的一些简单的用法复习

这是我定义的一个controller:

@Controller
public class HelloController {
    @RequestMapping("/success")
    public String Hello(Map<String,Object> map){
        map.put("hello","<h1>猴子那个</h1>");
        map.put("users", Arrays.asList("king1","king2","king3"));
        return "success";
    }
}
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
这是success页面
<div th:utext="${hello}"></div>   <!--这是打印原生html-->
<h1 th:text="${user}" th:each="user : ${users}"></h1>      <!--这是打印四个h1标签-->
<h4>
    <span th:each="user: ${users}">[[${user}]]</span><!--这是打印四个span标签-->
</h4>
</body>
</html>

扩展SpringMVC的一些功能

这里的扩展是指给springmvc添加额外的功能,比如说拦截器,视图转发等配置,我们需要编写一个@Configuration标注的配置类,下面举个栗子:

@Configuration
public class MyMVCfig implements WebMvcConfigurer {
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/king").setViewName("success");
    }
}

这里idea快捷键是 ctrl + o ,自动调出需要重写的方法,这里我实现视图的映射,当我们访问/king的时候,自动跳转到success页面.

下面介绍怎么在thymeleaf中使用一些常见的库比如jquery,bootstrap,我们在webjars中可以找到它对应的maven地址,加入到pom中,我们可以在WEB-INF下面找到相应的地址,然后引进去th:href='@{相应地址}',图片类的th:src='@{相应地址}'


国际化

通过下面这个国际化的例子来理解这个国际化的过程,我们对 login.html 这个页面进行国际化:

  1. 首先,我们编写国际化的配置文件,新建login_en_US.propertieslogin_zh_CN.propertieslogin.properties
# login.properties
login.button=登录
login.password=密码
login.tip=代码&博客
login.username=用户名
  1. 上面那个文件是路径是这样的,如下:
    在这里插入图片描述
  2. 我们要在application.properties中指定国际化信息的basename:
spring.messages.basename=i18n.login
  1. 最后,在thymeleaf页面中进行引用:

这里有个开发技巧,当你的html页面修改了,要想生效,可不用重启服务器
只需要Ctrl+F9即可生效,需要在application中设置禁用缓存 spring.thymeleaf.cache=false

<body class="text-center">
    <form class="form-signin">
      <h1 style="margin-bottom: 50px" th:text="#{login.tip}">Code &amp; Blogs</h1>
      <label for="inputEmail" class="sr-only">Email address</label>
      <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus th:placeholder="#{login.username}">
      <label for="inputPassword" class="sr-only">Password</label>
      <input type="password" id="inputPassword" class="form-control" placeholder="Password" required th:placeholder="#{login.password}">
      <button class="btn btn-lg btn-dark btn-block" type="submit" th:text="#{login.button}">登 陆</button>
      <p class="mt-5 mb-3 text-muted">&copy; 2017-2018</p>
    </form>
</body>
  1. 这里还要注意一下乱码问题,需要在idea中的setting->File Encodings ,设置成如下这个样子:
    在这里插入图片描述
    如果想要全局设置(上面的设置只是针对本项目而言),需要在 Other Settings 中设置,同样也是和上面的一样。

但是,突然有一天,我们的需求变了,需要在页面设计两个链接,点击可以切换语言的那种链接,我们该怎么设计我们的系统?我们还是有办法,清继续阅读:

我们在 login.html 中添加两个超链接(括号里面相当于我们之前 /login?l=zh_CN ,但是在thymeleaf中不能这么写,要用如下的写法。

 <a th:href="@{/login(l='zh_CN')}">中文</a>
 <a th:href="@{/login(l='en_US')}">英文</a>

然后再之前的视图解析的那个配置文件中继续添加,下面的locale解析器:

@Configuration
public class MyMVCfig implements WebMvcConfigurer {
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/index").setViewName("admin-index");
        registry.addViewController("/").setViewName("admin-index");
        registry.addViewController("/login").setViewName("admin-login");
    }
    @Bean
    public LocaleResolver localeResolver(){
        return new MyLocaleResolver();
    }
}

并且还要建立相应的解析类:

 // MyLocaleResolver.java
public class MyLocaleResolver implements LocaleResolver {
    @Override
    public Locale resolveLocale(HttpServletRequest httpServletRequest) {
        String l = httpServletRequest.getParameter("l");
        Locale locale = Locale.getDefault();
        if(!StringUtils.isEmpty(l)){
            String [] sp = l.split("_");
            locale = new Locale(sp[0],sp[1]);
        }
        return locale;
    }
    @Override
    public void setLocale(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Locale locale) {
    }
}

以上完成了国际化的功能,接下来请继续关注下一章节,开始设计其他功能了。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值