Spring MVC 5 + Thymeleaf 基於Java配置和註解配置

Spring MVC 5 + Thymeleaf 註解配置css

Spring的配置方式通常爲兩種:XML配置和註解配置html

Spring從3.0開始之後,推薦使用註解配置,這兩種配置的優缺點說的人不少,我就不說了,自行體會,下面就用註解配置實現一個Spring MVC Web Demojava

先看看項目結構:jquery

能夠看到沒有任何XML配置文件,全都是Java代碼實現。web

  1. 使用 Maven 新建一個項目,固然你用IEDA,Eclipse新建一個空的項目同樣的,而後添加依賴,依賴下面直接給出:

    4.0.0
    spring-mvc
    spring-mvc
    1.0-SNAPSHOT
    war
    spring

    <name>Spring-mvc Maven Webapp</name>
        <properties>
            <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
            <failOnMissingWebXml>false</failOnMissingWebXml>
            <maven.compiler.source>8</maven.compiler.source>
            <maven.compiler.target>8</maven.compiler.target>
            <spring.version>5.0.6.RELEASE</spring.version>
            <thymeleaf.version>3.0.9.RELEASE</thymeleaf.version>
        </properties>
    
        <dependencies>
            <!--spring相關包-->
            <dependency>
                <groupId>org.springframework</groupId>
                <artifactId>spring-web</artifactId>
                <version>${spring.version}</version>
            </dependency>
            <dependency>
                <groupId>org.springframework</groupId>
                <artifactId>spring-webmvc</artifactId>
                <version>${spring.version}</version>
            </dependency>
            <!--j2ee相關包 servlet、jsp、jstl-->
            <dependency>
                <groupId>javax.servlet</groupId>
                <artifactId>javax.servlet-api</artifactId>
                <version>4.0.1</version>
                <scope>provided</scope>
            </dependency>
            <dependency>
                <groupId>javax.servlet</groupId>
                <artifactId>jstl</artifactId>
                <version>1.2</version>
            </dependency>
            <dependency>
                <groupId>org.thymeleaf</groupId>
                <artifactId>thymeleaf-spring5</artifactId>
                <version>${thymeleaf.version}</version>
            </dependency>
            <!--junit-->
            <dependency>
                <groupId>junit</groupId>
                <artifactId>junit</artifactId>
                <version>4.11</version>
                <scope>test</scope>
            </dependency>
            <!--jackson-->
            <dependency>
                <groupId>com.fasterxml.jackson.core</groupId>
                <artifactId>jackson-core</artifactId>
                <version>2.9.5</version>
            </dependency>
            <dependency>
                <groupId>com.fasterxml.jackson.core</groupId>
                <artifactId>jackson-databind</artifactId>
                <version>2.9.5</version>
            </dependency>
        </dependencies>
        <build>
            <plugins>
                <plugin>
                    <groupId>org.springframework.boot</groupId>
                    <artifactId>spring-boot-maven-plugin</artifactId>
                    <!--配置熱啓動-->
                    <configuration>
                        <fork>true</fork>
                    </configuration>
                </plugin>
                <!--servlet容器 tomcat 插件-->
                <plugin>
                    <groupId>org.apache.tomcat.maven</groupId>
                    <artifactId>tomcat7-maven-plugin</artifactId>
                    <version>2.2</version>
                </plugin>
            </plugins>
        </build>
    </project>
  2. 新建 MvcWebConfig 配置類 實現WebMvcConfigurer接口,重寫configureViewResolvers 方法便可,而且使用 @Configuration、@ComponentScan 註解 MvcWebConfig 類,下面我給出主要代碼,而後說明代碼的做用。apache

    /**
         * STEP 1 - 建立模版解析器
         */
        @Bean
        public ITemplateResolver templateResolver() {
            SpringResourceTemplateResolver templateResolver = new SpringResourceTemplateResolver();
            templateResolver.setApplicationContext(applicationContext);
            templateResolver.setPrefix("/WEB-INF/templates/");
            templateResolver.setSuffix(".html");
            templateResolver.setCharacterEncoding("UTF-8");
            templateResolver.setTemplateMode(TemplateMode.HTML);
            templateResolver.setCacheable(false);
            return templateResolver;
        }
    
    
        /**
         * STEP 2 - 建立模版引擎
         * 併爲模板引擎注入模板解析器
         */
        @Bean
        public SpringTemplateEngine templateEngine() {
            SpringTemplateEngine templateEngine = new SpringTemplateEngine();
            templateEngine.setTemplateResolver(templateResolver());
            templateEngine.setEnableSpringELCompiler(true);
    
            return templateEngine;
        }
    
     /**
         * STEP 3 - 註冊 Thymeleaf 視圖解析器
         * 併爲解析器注入模板引擎
         */
        @Override
        public void configureViewResolvers(ViewResolverRegistry registry) {
            ThymeleafViewResolver viewResolver = new ThymeleafViewResolver();
            viewResolver.setTemplateEngine(templateEngine());
            viewResolver.setCharacterEncoding("UTF-8");
            registry.viewResolver(viewResolver);
        }
    • templateResolver 方法和XML配置的相似
    • 中文會有亂碼問題,須要設置 "UTF-8",兩個地方必須都要設置,不然會顯示亂碼
  3. 新建 MvcWebAppInitializer 類 extends 抽象類 AbstractAnnotationConfigDispatcherServletInitializer,重寫如下幾個方法
    @Override
    protected Class<?>[] getRootConfigClasses() {
    return null;
    }json

    @Override
        protected Class<?>[] getServletConfigClasses() {
            return new Class[]{MvcWebConfig.class};
        }
    
        @Override
        protected String[] getServletMappings() {
            return new String[]{"/"};
        }
    
        @Override
        protected Filter[] getServletFilters() {
            CharacterEncodingFilter encodingFilter = new CharacterEncodingFilter();
            encodingFilter.setEncoding("UTF-8");
            encodingFilter.setForceRequestEncoding(true);
            return new Filter[]{encodingFilter};
        }

    至此,配置已經所有完成。bootstrap

  4. 新建 HomeController ,新建 index 視圖先看看,能不能跑起來
    • index :
      @RequestMapping(value = "/", method = RequestMethod.GET)
      public String index() {
      return "index";
      }
    • 在 \WEB-INF\templates 目錄下新建頁面 index.html,並使用thymeleaf 模板引擎
<!DOCTYPE html>
       <html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
       <head>
           <meta charset="UTF-8">
           <meta http-equiv="X-UA-Compatible" content="IE=edge">
           <meta name="viewport" content="width=device-width, initial-scale=1">
           <title>Spring Index</title>
           <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" crossorigin="anonymous">
       </head>
       <body>
       
       <div class="container" style="margin-top: 40px;">
           <div class="jumbotron">
               <h1>Spring Mvc 5 + Thymeleaf</h1>
               <p>出現此頁面,說明配置成功,棄用xml配置,使用註解方式實現</p>
               <p>mvn tomcat7:run</p>
               <p><a class="btn btn-primary btn-lg" th:href="@{/home/user}" role="button">Learn more</a></p>
           </div>
       </div>
       
       <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" crossorigin="anonymous"></script>
       <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" crossorigin="anonymous"></script>
       </body>
       </html>

/home/user 頁面以下:
api

至此頁面已經完成,如今使用Maven 跑一下,命令:mvn tomcat7:run
固然你也能夠用IDEA 的 Edit Configurations 新建一個Maven,以下圖:


看一下效果:

沒有使用任何XML文件,Spring MVC跑起來了,再試試返回json數據

  1. 在 HomeController 新建userList 方法,返回List數組
    @ResponseBody
    @RequestMapping(value = "/home/userList", method = RequestMethod.GET)
    public List userList() {
    List userList = new ArrayList<>();
    userList.add(new UserInfo(1001, "龍傲天", 23, "成都省"));
    userList.add(new UserInfo(1002, "曹孟德", 33, "河北市"));
    userList.add(new UserInfo(1003, "Chris", 32, "高新市"));
    userList.add(new UserInfo(1003, "Evans", 17, "綿陽市"));

    return userList;
        }
    • Spring 返回 json數據 直接使用 @ResponseBody 註解傑克
    • @ResponseBody 依賴 com.fasterxml.jackson
  2. 看下返回json數據的效果

沒有使用任何XML文件,實現了一個Web 程序。 Ps:博客園的這個markdown 編輯器有問題,我用Typora寫好了複製過來,總有些問題,將就着看吧

相關文章
相關標籤/搜索