码迷,mamicode.com
首页 > 其他好文 > 详细

Model2的实战开发

时间:2020-06-20 10:22:38      阅读:69      评论:0      收藏:0      [点我收藏+]

标签:实战开发   play   inter   lock   boot   xmlns   添加   新闻   整合   

小组成员:

龙继平:201731062131

王阳:201731041215

王阳的任务————————————————————————————————

1、编写新闻删除的js脚本

技术图片

 

 

 2、编写新闻编辑脚本

技术图片

 

 

 技术图片

 

 

 3、编写新闻编辑页面,采用simpleMDE()脚本,做的一个markdown编辑器。

技术图片

 

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th=http://www.thymeleaf.org>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>修改新闻</title>
    <link rel="stylesheet" type="text/css" href="css/Iframe.css" th:href="@{css/Iframe.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{css/revise.css}" />
    <link rel="stylesheet" th:href="@{utilLib/bootstrap.min.css}" type="text/css" media="screen" />
    <link th:href="@{https://cdn.bootcss.com/simplemde/1.11.2/simplemde.min.css}" rel="stylesheet">
    <script type="text/javascript" th:src="@{js/jquery.min.js}" src="js/jquery.min.js"></script>
    <script type="text/javascript" th:src="@{js/modifyNews.js}" src="js/modifyNews.js"></script>
</head>

<body>
    <span class="cp_title">修改新闻</span>
    <div class="add_cp">
        <a>修改新闻</a><a style="background-color:#eeeeee;"></a>
        <a href="#" onclick="" style="pointer-events: painted">提交</a>
    </div>

    <form action="" method="post"  enctype="multipart/form-data">
        <table class="tab_content">
            <tr>
                <td>文章标题</td><td><input th:newsId="${news.id}" th:value="${news.title}" class="input_title" type="text" name="headline"></td>
            </tr>
            <tr>
                <td>文章来源</td><td><input th:value="${news.source}" class="input_source" type="text" name="source"></td>
            </tr>
            <tr>
                <td>发表时间</td><td><input th:value="${news.time}" class="input_time" type="text" name="time"></td>
            </tr>
            <tr>
                <td>文章内容</td><td><textarea th:utext="${news.article}"  name="content" class="content"></textarea>
                    <script type="text/javascript" th:src="@{https://cdn.bootcss.com/simplemde/1.11.2/simplemde.min.js}"></script>
                    <script>
                         var simplemde = new SimpleMDE();
                         simplemde.value=$(.content).val();
                    </script></td>
            </tr>
        </table>
    </form>
</body>
</html>

4、编写新闻添加页面

技术图片

 

 

 5、编写新闻展示页面,使用https://cdn.jsdelivr.net/npm/marked/marked.min.js脚本解析mark文档,把markdown语法解析为html标签,在用脚本添加到页面上。

文章内容:

# 这是一级标题
## 这是二级标题
### 这是三级标题
#### 这是四级标题
##### 这是五级标题
###### 这是六级标题

实际展示:

技术图片

<!DOCTYPE html>
<html lang="en" xmlns:th=http://www.thymeleaf.org>
<head>
    <meta charset="UTF-8">
    <title>今日新闻</title>
</head>

<body>
<div style="width: 100%;border-bottom: 1px solid black;">
    <span th:text="${news.title}" style="display: block;width: 300px;height: 70px;font-size: 30px;font-weight: bolder; padding-left: 50%;margin-left: -150px"></span>
</div>
<div style="margin-left: 10%">
    <span th:text="${news.time}"></span>
</div>
<div th:content="${news.article}" id="test" style="float: right;margin-top: -24px;margin-right: 10%">
    <span th:text="${news.source}">source</span>
</div>
<div id="content" style="padding-left: 50%;width: 600px;margin-left: -300px">
</div>
</body>
<script th:src="@{http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js}"></script>
<script type="text/javascript" th:src="@{js/jquery.min.js}" src="js/jquery.min.js"></script>
<script th:src="@{https://cdn.jsdelivr.net/npm/marked/marked.min.js}"></script>
<script>
    $(#content).html(marked($(#test).attr(content)));
</script>
</html>

龙继平的任务:——————————————————————————————————

1、实现新闻删除

控制器

技术图片

 

 服务层

技术图片

 

 DAO

技术图片

 

 技术图片

 

 2、实现新闻添加功能、

技术图片

 

 

技术图片

 

 技术图片

 

 

技术图片

 

 3、实现新闻修改功能

技术图片

 

 技术图片

 

 4、实现新闻展示功能

技术图片

 

 5、整合测试项目、经过测试,修改bug整个项目运行良好。

6、上传到github。https://github.com/JPL1988/demo

 

Model2的实战开发

标签:实战开发   play   inter   lock   boot   xmlns   添加   新闻   整合   

原文地址:https://www.cnblogs.com/l123456l/p/13167637.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!