电影网站增删改查-4 spring boots/MVC/neo4j/thymeleaf 源码分析 实现View 新增过程

2019年3月18日 271次阅读 来源: Spring Boot

以movie新增为例， 使用thymeleaf 框架 ，预先定义好layout.html：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-store"/>
    <meta http-equiv="Expires" content="0" />
    <title layout:title-pattern="$DECORATOR_TITLE - $CONTENT_TITLE">UI演示</title>
    <link th:href="@{/styles/global.css}"  rel="stylesheet" type="text/css"/>
    <script th:src="@{/scripts/jquery.min.js}"></script>
    <script th:src="@{/scripts/artDialog/artDialog.js}" />
    <script th:src="@{/scripts/common.js}"></script>
    <script th:src="@{/scripts/public/public.js}"></script>
    <script th:src="@{/scripts/public/json2.js}"></script>
    <script type="text/javascript" th:src="@{/scripts/validate/jquery.validate.min.js}"></script>
   <script type="text/javascript" th:src="@{/scripts/validate/chinese.js}"></script>
</head>
<body>
<div class="headerBox">
    <div class="topBox">
        <div class="topLogo f-left">
            <a href="#"><img th:src="@{/images/logo.png}"/></a>
        </div>
        <div class="new-nav">
            <h3>电影频道</h3>
        </div>
    </div>
</div>
<div class="locationLine" layout:fragment="prompt">
    当前位置：首页 &gt; <em>页面</em>
</div>
<table class="globalMainBox" style="position:relative;z-index:1">
    <tr>
        <td class="columnLeftBox" valign="top">
            <div th:replace="fragments/nav :: nav"></div>
        </td>
        <td class="whiteSpace"></td>
        <td class="rightColumnBox" valign="top">
            <div layout:fragment="content"></div>
        </td>
    </tr>
</table>

<div class="footBox" th:replace="fragments/footer :: footer"></div>

</body>
</html>

注意 ：

layout:fragment="prompt"
<div th:replace="fragments/nav :: nav">
<div layout:fragment="content">
th:replace="fragments/footer :: footer">
接着template 目录下面建造movie / index edit , new 等html 文件， 引用layout :
<html xmlns:th="http://www.thymeleaf.org" layout:decorator="fragments/layout">






<div class="locationLine" layout:fragment="prompt">
    当前位置：首页 &gt; <em >电影管理</em>
</div>
已经添加layout:fragment=”content” 等 
同时在static 里面建立scripts, styles 目录分别放js , css 
在index 里面新增代码：
<div class="newBtnBox">
    <input type="hidden" id="m_ck" />
    <a id="addBtn" class="blueBtn-62X30" href="javascript:void(0)">新增</a>
    <a id="addBtn1" class="blueBtn-62X30" href="javascript:void(0)">新增</a>
</div>
id  在 index.css 里面写：
$(function () {
    $('#searchBtn').click(function(){
        pageaction();
    });
    $('#addBtn').click(function(){
        create();
    });
 …}
create 方法：
function create(){
   // $.get("./new",{ts:new Date().getTime()},function(data){
        $.get("./new",{ts:new Date().getTime()},function(data){
            console.log({ts:new Date().getTime()});
            console.log({ts:Date.now()});
        //$.get(URL,data,function(data,status,xhr),dataType)
        // jquery HTTP GET 请求到页面并取回结果
        art.dialog({
            lock:true,
            opacity:0.3,
            title: "新增",
            width:'750px',
            height: 'auto',
            left: '50%',
            top: '50%',
            content:data,
            esc: true,
            init: function(){
                artdialog = this;
            },
            close: function(){
                artdialog = null;
            }
        });  //artDialog是一个基于javascript编写的对话框组件
    });
}
 其中jquery 调用 controller 里面的方法：
@RequestMapping("/new")
//控制器：新建
public ModelAndView create(){
    return new ModelAndView("actor/new");
}

actor/new 方法：
<div class="statisticBox w-782"  layout:fragment="content">
    <form id="saveForm" action="./save" method="post">
        <table class="addNewInfList">
            <tr>
                <th>名称</th>
                <td><input class="inp-list w-200 clear-mr f-left" type="text"   id="name" name="name"  maxlength="120" /></td>
                <th>剧照</th>
                <td width="240">
                    <select name="photo" id="photo">
                        <option th:each="file:${files}"
                                th:value="${file}"
                                th:text="${file}">
                        </option>
                    </select>
                </td>
            </tr>
            <tr>
                <th>日期</th>
                <td>
                    <input  onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" type="text" class="inp-list w-200 clear-mr f-left" id="createDate" name="createDate"/>
                </td>
            </tr>
        </table>
        <div class="bottomBtnBox">
            <a class="btn-93X38 saveBtn" href="javascript:void(0)">确定</a>
            <a class="btn-93X38 backBtn" href="javascript: closeDialog()">返回</a>
        </div>
    </form>
    <script type="text/javascript">
        $(document).ready(function(){
            $('select[name=photo]').ImageSelect({dropdownWidth:425});
        });
    </script>

SAVE BOTTON：提交到controller 处理：
@RequestMapping(value="/save", method = RequestMethod.POST)
public String save(Actor actor) throws Exception{
    actorRepository.save(actor);
    logger.info("新增->ID={}", actor.getId());
    return "1";
}
actorRespository.java :
public class ActorController {
    private static Logger logger = LoggerFactory.getLogger(ActorController.class);
    @Autowired
    private ActorRepository actorRepository;

package com.test.data.repositories;

import com.test.data.domain.Actor;
import org.springframework.data.neo4j.repository.GraphRepository;
import org.springframework.stereotype.Repository;

@Repository
public interface ActorRepository extends GraphRepository<Actor> {
}

     原文作者：Spring Boot
     原文地址: https://blog.csdn.net/sylmoon/article/details/78123022
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。 
  点赞