zoukankan      html  css  js  c++  java
  • Spring boot 整合 Mybatis + Thymeleaf开发web(二)

      上一章我把整个后台的搭建和逻辑给写出来了,也贴的相应的代码,这章节就来看看怎么使用Thymeleaf模板引擎吧,Spring Boot默认推荐Thymeleaf模板,之前是用jsp来作为视图层的渲染,但是Spring Boot对jsp的支持并不好,所以我还是跟着Spring老大哥的指引走吧,错也错不到哪里去!

      

      在pox.xml里面增加

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

      在resources下面的templates文件夹创建一个list.html, Spring Bootd 目录结构templates是模板文件存放地址,static为静态文件存放地址如js、css、image。

      目录结构

      list.html

    <!DOCTYPE html>
    <html  xmlns:th="http://www.thymeleaf.org">
    <head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <link rel="stylesheet" type="text/css" th:href="@{/layui/css/layui.css}" media="all">
    <script type="text/javascript" th:src="@{/layui/layui.js}"></script>
    </head>
        <script>
        layui.use('table', function(){
              var table = layui.table;
              table.render({
                elem: '#list'
                ,url:'/rest/find'
                ,cols:[([[)]{
                    checkbox: true,
                    fixed: true,
                    '5%'
                },
                  {field:'name', '25%', align: 'center',title: '昵称', sort: true}
                  ,{field:'author', '25%', align: 'center',title: '用户名'}
                  ,{field:'price', '25.2%', align: 'center',title: '价格', sort: true}
                  [(]])]
                ,page: true,
                height: 'auto'
              });
            }); 
        </script>
    
    
    <body >
        <h1>用户列表</h1>
        <div style=" 900px">
             <table class="layui-table" lay-size="lg" lay-filter="demo">
              <thead>
                <tr>
                  <th>昵称</th>
                  <th>加入时间</th>
                  <th>签名</th>
                  <th>操作</th>
                </tr> 
              </thead>
              <tbody th:each="user:${users}" >
                <tr>
                  <td th:text="${user.name}"></td>
                  <td th:text="${user.author}"></td>
                  <td th:text="${user.price}"></td>
                </tr>
              </tbody>
            </table>
            
            <table class="layui-hide" id="list" lay-filter="demo"></table>
        </div>
        
    </body>
    </html>

      TestController类

    @Controller
    @RequestMapping(value="/demo")
    public class TestController {
        
        @Autowired
        private BookBean bookBean;
        
        @Autowired
        private BookBeanService bookBeanService;
        
        @RequestMapping(value = "/list")
        public String getListUser(Model model){
            try {
                List<BookBean> findBookBeanInfo = bookBeanService.findBookBeanInfo();
                model.addAttribute("users",findBookBeanInfo);
            } catch (Exception e) {
                e.printStackTrace();
            }
            return "/user/list";
        }
    }

      注意:

        1、在需要返回模板的Controller类,使用@Controller注解,不要使用@RestController,返回值填写 对应的路径名称。

         2、 在不需要返回模板的情况使用 @RestController,并在方法上添加@ResponseBody注解  如下。

    package com.example.demo.controller;
    
    import java.util.List;
    
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.ResponseBody;
    import org.springframework.web.bind.annotation.RestController;
    
    import com.alibaba.fastjson.JSON;
    import com.alibaba.fastjson.JSONArray;
    import com.alibaba.fastjson.JSONObject;
    import com.example.demo.bean.BookBean;
    import com.example.demo.service.BookBeanService;
    
    @RestController
    @RequestMapping(value="/rest")
    public class FindListController {
        @Autowired
        private BookBean bookBean;
        
        @Autowired
        private BookBeanService bookBeanService;
        
        
        /**
         * 查询
         * @return
         */
        @RequestMapping(value="/find")
        @ResponseBody
        public String add(){
            JSONObject result = new JSONObject();
            try {
                System.out.println(1);
                List<BookBean> findBookBeanInfo = bookBeanService.findBookBeanInfo();
                String jsonString = JSONObject.toJSONString(findBookBeanInfo);
                JSONArray array = JSON.parseArray(jsonString);
                result.put("data",array);
                result.put("code", 0);
                result.put("msg", "");
                result.put("count", 10);
                System.out.println(result.toString());
            } catch (Exception e) {
                e.printStackTrace();
            }
            return result.toString();
        }
    }

      启动程序 在地址栏输入http://localhost:8082/demo/list

       版权声明:本文为博主原创文章,未经博主允许不得转载。 

       http://www.cnblogs.com/tangyin/p/8968150.html

  • 相关阅读:
    P3162 [CQOI2012]组装
    P3161 [CQOI2012]模拟工厂
    P3158 [CQOI2011]放棋子
    P3154 [CQOI2009]循环赛
    zabbix部署监控端(server)以及页面优化
    zabbix-agent端自定义监控项(free -m)服务器内存使用率
    java应用系统运行速度慢的解决方法
    at org.apache.hadoop.hbase.tmpl.master.BackupMasterStatusTmplImpl.renderNoFlush(BackupMasterStatusTm
    解决Hbase启动后,hmaster会在几秒钟后自动关闭(停掉)!!!
    全网最详细的Hadoop HA集群启动后,两个namenode都是standby的解决办法(图文详解)
  • 原文地址:https://www.cnblogs.com/tangyin/p/8968150.html
Copyright © 2011-2022 走看看