Model2的實戰開發

時間 2020-09-14

標籤 model2 model 實戰開發简体版

原文原文鏈接

小組成員:javascript

龍繼平:201731062131css

王陽：201731041215html

王陽的任務————————————————————————————————java

一、編寫新聞刪除的js腳本jquery

二、編寫新聞編輯腳本git

三、編寫新聞編輯頁面，採用simpleMDE()腳本，作的一個markdown編輯器。github

<!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>

四、編寫新聞添加頁面npm

五、編寫新聞展現頁面，使用https://cdn.jsdelivr.net/npm/marked/marked.min.js腳本解析mark文檔，把markdown語法解析爲html標籤，在用腳本添加到頁面上。bootstrap

文章內容：markdown

# 這是一級標題
## 這是二級標題
### 這是三級標題
#### 這是四級標題
##### 這是五級標題
###### 這是六級標題

實際展現：

<!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>