到位App_jQuery_art-template

時間  2019-11-08
標籤 到位 app jquery art template 欄目 JQuery 简体版
原文   原文鏈接

到位 Appjavascript

  • 不寫 node 服務器，本地模擬 ajax 獲取 json 數據
  • 源代碼 ---- 參見 ---- 使用 webstorm 運行 index.html
  • 本地靜態的 data.json

  • 前端 index.js

  • 寫 node 服務器，真實模擬實際狀況 獲取 json 數據

源代碼 ---- 參見css

1. 新建 npm 包管理器 - 服務器名： dao-wei-apphtml

npm init前端

會產生一個 package.jsonjava

2. 下載並導入 express 模塊node

npm install expressjquery

3. /dao-wei-app/下新建 index.js 服務器入口文件git

/dao-wei-app/index.js ---- 關於路由 route 參見github

  • const express =  require('express');

const app = express();

app.get('/', (request, response)=>{
    console.log(request.query);
    response.send('Hello Node Express!');
});

app.listen(3000, err=>console.log(err?err:'服務器啓動成功: http://localhost:3000'));

    node index.jsweb

  • 注意： 當代碼被改動時，運行的腳本不會被終止，須要手動終止，而後從新啓動

4. npm install -g supervisor 或者 yarn global add supervisor

在 package.json 添加 start 啓動命令

5. 使用中間件 ---- 參見

  • /**** index.js ****/
const express =  require('express');

const app = express();

/*
    將該文件夾下全部靜態資源暴露出去
    接受請求，經過分析參數，找到了 public 對應資源就返回響應
 */
app.use(express.static('./public'));    //默認調用next

/* 解析請求體數據，結果數據掛載到 req.body 上 */
app.use(express.urlencoded({extended: true}));    //默認調用next

/*
    中間件默認能接收並處理全部請求
    須要調用 next() 方法，纔會接下來處理下面的中間件或者路由，不然卡住了
 */
app.use((request, response, next)=>{
    next();    // 調用下一個中間件或者路由
});

app.get('/', (request, response)=>{
    console.log(request.querya);
    response.send('Hello Node Express!');
});

app.listen(3000, err=>console.log(err?err:'服務器啓動成功: http://localhost:3000'));

6. 路由器中間件 Router ---- 模塊化管理 路由 ---- 參見

  • /router/index_router.js ----定義、暴露
  • /**** index_router.js ****/
const express = require('express');
const {resolve} = require('path');

const indexRouter = new express.Router();    // 實例化一個 路由器

/*************************/
indexRouter.get('/', (request, response)=>{
    response.sendFile(resolve(__dirname, '../public/index.html'));
});

/*************************/
module.exports = indexRouter;    // 暴露 路由器
  • /index.js ---- 引入、使用 router 中間件
  • /**** index.js ****/
const express =  require('express');
const indexRouter = require('./router/index_router.js');    // 引入路由器

const app = express();

/*
    將該文件夾下全部靜態資源暴露出去
    接受請求，經過分析參數，找到了 public 對應資源就返回響應
 */
app.use(express.static('./public'));    //默認調用next

/* 解析請求體數據，結果數據掛載到 req.body 上 */
app.use(express.urlencoded({extended: true}));    //默認調用next

/*
    中間件默認能接收並處理全部請求
    須要調用 next() 方法，纔會接下來處理下面的中間件或者路由，不然卡住了
 */
app.use((request, response, next)=>{
    next();    // 調用下一個中間件或者路由
});

app.use(indexRouter);    // 使用路由器

app.listen(3000, err=>console.log(err?err:'服務器啓動成功: http://localhost:3000'));

7.  Need to konw

響應返回一個頁面 response.sendFile(resolve(__dirname, '../../templates/login.html'));

響應數據： response.send({"error":'用戶名已被註冊'});

頁面跳轉： response.redirect('/login');    // http://localhost:3000/login

8. 關於 stylus 在 express 中使用  (這一步不必作，直接用 webstorm 內置的 file watcher 設置一下 stylus 就好)

npm install nib

npm install express-stylus

/index.js

  • /**** index.js ****/
const express =  require('express');
const indexRouter = require('./router/index_router.js');    // 引入路由器

let stylus = require('express-stylus');
let nib = require('nib');
let join = require('path').join;
let publicDir = join(__dirname, '/public');

const app = express();

/*
    將該文件夾下全部靜態資源暴露出去
    接受請求，經過分析參數，找到了 public 對應資源就返回響應
 */
// app.use(express.static('./public'));    //默認調用next
app.use(express.static(publicDir));    //默認調用next

/* 解析請求體數據，結果數據掛載到 req.body 上 */
app.use(express.urlencoded({extended: true}));    //默認調用next

/*
    中間件默認能接收並處理全部請求
    須要調用 next() 方法，纔會接下來處理下面的中間件或者路由，不然卡住了
 */
app.use((request, response, next)=>{
    next();    // 調用下一個中間件或者路由
});

app.use(stylus({
    src: publicDir,
    use: [nib()],
    import: ['nib']
}));

app.use(indexRouter);    // 使用路由器

app.listen(3000, err=>console.log(err?err:'服務器啓動成功: http://localhost:3000'));

/public/index.html

  • <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <title></title>
        <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
        <meta name="viewport"
              content="user-scalable=no,
                       width=device-width,
                       initial-scale=1.0,
                       minimum-scale=1.0,
                       maximum-scale=1.0"/>
        <link rel="stylesheet" href="http://127.0.0.1:3000/stylus/index.css">
    </head>
    
    <body>
        
        <script type="text/javascript" src="./js/index.js"></script>
        <script type="text/javascript" src="./js/template-web.js"></script>
    </body>
</html>

9. jQuery 在線手冊

10. jQuery 知識點複習

注意：

$ele[1] 須要包裹才能使用 jQuery 方法： $($ele[1]).addClass("active")

11. 關於 cors 官方跨域解決方案

配置成 "*" 絕對能夠

關於這個 配置，很是嚴格，瀏覽器顯示的地址是什麼，就必須配置成什麼

一開始我配置 http://127.0.0.1:3000 都不行，可是 http://localhost:3000 又能夠了

若是配置成 "*" 還不行，那就重啓下服務器，當時我 node 服務器還卡住了，覺得是我本身的問題。

12. 關於 art-template 模版引擎 ---- 參見

建議先將靜態樣式搞定，而後再使用 art-template 將數據動態實現

1) 上面的 11. 是在 node 服務器定義的一個 路由，用於返回 首頁的數據

2) 前端利用 jQuery 發送 ajax 請求數據

/public/js/index.js

  • $(function () {
    /**** ajax 獲取首頁全部 json 數據 ****/
    $.get("http://127.0.0.1:3000/home_data", function(data){
        console.log(data)
    });
});

3) 使用 art-template 渲染到模板，在將生成的 html ，渲染到頁面上

有兩種語法，{{}} 和 <% %>

各有也優缺，{{}} 更簡潔，<% %> 更強大

注意：

<% for(var i=0; i < data.length; i++){%>    記得在 < 和 > 兩邊加一個空格，不然可能異常

關於 template 中遇到 img 時，編輯器警告不要緊： <img src=" {{$value.imgUrl}}" alt="Service">

 

  • /public/js/index.js
  • $(function () {
    console.log("jQuery--> DOMContentLoaded!");
    
    /**** ajax 獲取首頁全部 json 數據 ****/
    $.get("http://127.0.0.1:3000/home_data", function(response){
        if(response.code === "200"){
            console.log(response.data);
            $(".banner_box .banner_nav1").html(template("banner_nav",{data: response.data}));
        }
    });
});
  • /public/index.html
  •     ... ...
        <ul class="banner_nav1 clearfix">
        <!--<li >-->
            <!--<p><span class="nav1_title">家庭保潔</span><span class="iconfont icon-jiantou"></span></p>-->
            <!--<ul class="banner_nav2">-->
                <!--<li>空調清洗</li>-->
                <!--<li>油煙機清洗</li>-->
                <!--<li>洗衣機清洗</li>-->
                <!--<li>空調清洗</li>-->
                <!--<li>油煙機清洗</li>-->
                <!--<li>洗衣機清洗</li>-->
                <!--<li>空調清洗</li>-->
                <!--<li>油煙機清洗</li>-->
                <!--<li>洗衣機清洗</li>-->
            <!--</ul>-->
        <!--</li>-->
    </ul>

    <script id="banner_nav" type="text/html">
        <% for(var i=0; i < data.length; i++){ %>
        <li>
            <p>
                <span class="nav1_title">
                    <%= data[i].serviceIndex %>
                </span>
                <span class="iconfont icon-jiantou"></span>
            </p>
            <ul class="banner_nav2">
                <% for(var j=0; j < data[i].serviceType.length; j++){ %>
                <li><%= data[i].serviceType[j]%></li>
                <% } %>
            </ul>
        </li>
        <% } %>
    </script>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript" src="./js/template-web.js"></script>
    <script type="text/javascript" src="./js/index.js"></script>
</body>

13. art-template定義模板方法

// 時間格式化 template.defaults.imports.dateFormat = function(time) { return dateFormat(time) } // 4.0以前用的是這種方式 template.helper('formatPrice', function(price, type) {});
// 使用 - 函數定義了參數就必定要傳參，不然報錯
<%= $imports.formatDate($value.timeStamp)  %>
          • /**
             * 對日期進行格式化，
             * @param date 要格式化的日期
             * @param format 進行格式化的模式字符串
             *     支持的模式字母有：
             *     y:年,
             *     M:年中的月份(1-12),
             *     d:月份中的天(1-31),
             *     h:小時(0-23),
             *     m:分(0-59),
             *     s:秒(0-59),
             *     S:毫秒(0-999),
             *     q:季度(1-4)
             * @return String
             * @author yanis.wang
             * @see http://yaniswang.com/frontend/2013/02/16/dateformat-performance/
             */
            function dateFormat(date, format) {
                date = new Date(date);
                var map = {
                    "M": date.getMonth() + 1, //月份
                    "d": date.getDate(), //日
                    "h": date.getHours(), //小時
                    "m": date.getMinutes(), //分
                    "s": date.getSeconds(), //秒
                    "q": Math.floor((date.getMonth() + 3) / 3), //季度
                    "S": date.getMilliseconds() //毫秒
                };
                format = format.replace(/([yMdhmsqS])+/g, function(all, t){
                    var v = map[t];
                    if(v !== undefined){
                        if(all.length > 1){
                            v = '0' + v;
                            v = v.substr(v.length-2);
                        }
                        return v;
                    }
                    else if(t === 'y'){
                        return (date.getFullYear() + '').substr(4 - all.length);
                    }
                    return all;
                });
                return format;
            };
            // ---------------------
            //     做者：luckystar2008
            // 來源：CSDN
            // 原文：https://blog.csdn.net/qincidong/article/details/82252298
            //     版權聲明：本文爲博主原創文章，轉載請附上博文連接！

14. art-template 內置默認變量： $value 和 $index 是 {{ each xxx}} ......{{ /each }} 循環中中的變量

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程