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

扫码关注公众号:Java 技术驿站

发送:vip
将链接复制到本浏览器,永久解锁本站全部文章

【公众号:Java 技术驿站】 【加作者微信交流技术,拉技术群】

以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">
        当前位置:首页 > <em>页面</em>
    </div>
    | |||
| :-----: | :-----: | :-----: | 
|  |  |  | 

    <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">
        当前位置:首页 > <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">
            | 名称|剧照|
| :-----: | :-----: | 
|  |  | 
|  | 

            <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> {
    }

来源:[]()

赞(0) 打赏
版权归原创作者所有,任何形式的转载请联系博主:daming_90:Java 技术驿站 » 电影网站增删改查-4 spring boots/MVC/neo4j/thymeleaf 源码分析 实现View 新增过程

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏