koa-artTemplate 的使用

時間 2019-11-09

標籤 koa arttemplate 使用简体版

原文原文鏈接

1.父頁面javascript

<html>

<head>
    <meta charset="UTF-8">
    <title>個人音樂</title>
    <!--加載資源包--> {{include '../particles/link.html'}} </head>

<body>
    <!--引入頭部--> {{include '../particles/header.html'}} <!--中間留坑--> {{block 'content'}}{{/block}} <!--引入底部--> {{include '../particles/footer.html'}} </body>

</html>

2.子頁面css

{{extend './layout/main.html'}}
{{block 'content'}} <div class="container">
        <form id="form" method="post" action="/">
            <div class="form-group">
                <label for="">歌曲編號</label>
                <input type="text" name="id" class="form-control" placeholder="請輸入歌曲編號">
            </div>
            <div class="form-group">
                <label for="">歌曲標題</label>
                <input type="text" name="title" class="form-control" placeholder="請輸入歌曲標題">
            </div>
            <div class="form-group">
                <label for="">歌曲時長</label>
                <input type="text" name="time" class="form-control" placeholder="請輸入歌曲時長">
            </div>
            <div class="form-group">
                <label for="">歌手</label>
                <input type="text" name="singer" class="form-control" placeholder="請輸入歌手姓名">
            </div>
            <div class="form-group">
                <label for="">歌曲文件</label>
                <input type="file" name="file">
                <p class="help-block">請上傳歌曲文件.</p>
            </div>
            <button type="submit" class="btn btn-success">點擊添加</button>
        </form>
    </div> {{/block}}

3. 拆分的頁面html

footer.htmljava

<div class="aw-footer-wrap">
        <div class="aw-footer">
            Copyright © 2016, All Rights Reserved
        </div>
</div>

header.htmljquery

<div class="aw-footer-wrap">
        <div class="aw-footer">
            Copyright © 2016, All Rights Reserved
        </div>
</div>

link.htmlbootstrap

<link href="/public/img/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="/public/vender/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="/public/css/icon.css" />
<link href="/public/css/common.css" rel="stylesheet" type="text/css" />
<link href="/public/css/link.css" rel="stylesheet" type="text/css" />
<link href="/public/css/style.css" rel="stylesheet" type="text/css" />
<script src="/public/vender/jquery/dist/jquery.js" type="text/javascript"></script>
<script src="/public/vender/bootstrap/dist/js/bootstrap.js"></script>

效果：post

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。