JavaEE-SpringBoot-thymeleaf-layui

SpringBoot thymelef的使用以及模版

thymelef模版配置,可以不用配置

1
2
3
4
5
6
7
8
9
spring:
thymeleaf:
cache: false
prefix: classpath:/templates/
check-template-location: true
suffix: .html
encoding: UTF-8
content-type: text/html
mode: HTML5
  1. thymelef添加依赖

    1
    2
    3
    4
    <dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
  2. resource/templates添加网页

    ${error}接收参数,th:action="@{/userLogin}"表单提交地址

    1
    2
    3
    4
    5
    6
    <p th:if="${error}" class="bg-danger" th:text="${error}"></p>
    <form method="post" class="layui-form" th:action="@{/userLogin}" >
    <input name="username" placeholder="用户名" >
    <input name="password" lay-verify="required" placeholder="密码">
    <input value="登录" id="login" style="width:100%;" type="submit">
    </form>
  3. 添加controller

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    @Controller
    public class LoginControl {
    @RequestMapping(value = "/login")
    public String login(Model model)
    {
    model.addAttribute("error","跳转而已"); //设置往网页传参数
    return "login"; //跳转login.html,并接受上面的参数
    }
    @RequestMapping(value = "/userLogin", method = RequestMethod.POST)
    public String userLogin(User user, Model model) {
    model.addAttribute("error", "出现异常");
    return "login"; //更新网页返回值
    }
    }

layui前端样式模版

直接复制到resource/static资源目录即可

  1. layui简单的post请求

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    <button class="layui-btn"  lay-submit="" lay-filter="addsort">增加</button>
    <script>
    layui.use(['layer', 'form'], function() {
    var layer = layui.layer //引用layer模块
    , form = layui.form;//引用form模块
    form.on('submit(addsort)', function (data) { //addsort监听提交按钮
    console.log(data.elem) //被执行事件的元素DOM对象,一般为button对象
    console.log(data.form) //被执行提交的form对象,一般在存在form标签时才会返回
    console.log(data.field) //当前容器的全部表单字段,名值对形式:{name: value}
    $.ajax({
    type: 'POST',
    url: '/img/addSort',
    dataType: 'json',
    contentType: 'application/json',
    data: JSON.stringify(data.field),
    success:function (result) {
    console.log(result);
    if (result.code==200){
    layer.msg('添加成功');
    }else {
    layer.msg(result.msg);
    }
    }
    });
    return false; //阻止表单跳转。如果需要表单跳转,去掉这段即可。
    });
    });
    </script>
  2. 表单数据加载

    1
    2
    3
    4
    5
    @RequestMapping(value = "/feedback")
    public String feedback(Model model){
    model.addAttribute("feedBacks",feedBacks);
    return "feedback";
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <table class="layui-table">
    <thead>
    <tr>
    <th>ID</th>
    <th>用户名</th>
    </thead>
    <tbody>
    <tr th:each="feedBack:${feedBacks}">
    <td th:text="${feedBack.feedbackid}"></td>
    <td th:text="${feedBack.user.username}"></td>
    </tr>
    </tbody>
    </table>
  3. 含文件图片的表单混合一起提交,原理首先使用layui绑定按钮提交

    上传图片按钮设置不自动 auto: false提交,然后存到文件里,然后表单提交的时候触发图片上传,以及绑定表单参数,设计时最好避免一起提交,设计可以先传好图片,然后填图片地址,分两次请求

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    <script>
    var uploadInst;
    var pathObj; //存文件
    layui.use(['layer', 'form'], function () {
    var layer = layui.layer
    , form = layui.form;
    form.on('submit(addpaper)', function (data) {
    if (pathObj == undefined) {
    layer.msg("没有选择壁纸");
    return;
    }
    var sortid= $("select option:checked").attr("id");
    //选了文件直接改参数上传
    uploadInst.config.data = {
    paperdetail:data.field.paperdetail,
    sortid:sortid,
    papername:data.field.papername
    };
    uploadInst.config.auto = true;
    uploadInst.upload();
    return false; //阻止表单跳转。如果需要表单跳转,去掉这段即可。
    });
    });

    layui.use(['layer', 'upload'], function () {
    var layer = layui.layer
    , upload = layui.upload;
    //普通图片上传
    uploadInst = upload.render({
    elem: '#post-photo'
    , url: '/img/uploadpaper'
    , auto: false
    , before: function (obj) {
    //预读本地文件示例,不支持ie8
    obj.preview(function (index, file, result) {
    $('#demo1').attr('src', result); //图片链接(base64)
    });
    },
    choose: function (object) {
    pathObj = object;
    }
    , done: function (res) {
    if (res.code == 200) {
    layer.msg("添加壁纸成功");
    } else {
    layer.msg("添加壁纸失败:" + res.msg);
    }
    //上传成功
    }
    });
    });
    </script>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    @PostMapping("/uploadpaper")
    public Msg singleFileUpload(@RequestParam("file") MultipartFile file, @RequestParam("sortid") int sortid, @RequestParam("paperdetail") String paperdetail, @RequestParam("papername") String papername) {
    List<String> urls = new ArrayList<>();
    if (file == null) {
    return ResultUtil.error(-300, "上传文件为空");
    }
    Paper paper = new Paper();
    paper.setSortid(sortid);
    paper.setPapername(papername);
    paper.setPaperdetail(paperdetail);
    try {
    Files.write(Paths.get(uploadPath + file.getOriginalFilename()), file.getBytes());
    paper.setPaperurl(imgUrl + file.getOriginalFilename());
    paperMapper.insertPaper(paper);

    } catch (Exception e) {
    e.printStackTrace();
    return ResultUtil.error(-301, e.getMessage());
    }
    return ResultUtil.success();
    }
  4. 动态读取下拉框

    1
    2
    3
    <select name="sortid" id="sortid">
    <option th:each="arrayS:${sorts}" th:text="${arrayS.sortname}" th:id="${arrayS.sortid}">默认选项</option>
    </select>
    1
    2
    3
    4
    5
    6
    7
    @RequestMapping(value = "/addwallpaper")
    public String addwallpaper(Model model){
    List<Sort> sorts;
    sorts = paperMapper.selectSort();
    model.addAttribute("sorts",sorts);
    return "addwallpaper";
    }