zoukankan      html  css  js  c++  java
  • template使用

    首先,下载并引入template.js模板引擎。

    html页面

    <div id='app'></div>

    <script src='template.js'></script>//引入时注意你的路径

    设置模板引擎,必须将type设置成"text/html",id 必须设置名字可以随意

    <script type="text/html" id="tem">

    <h1>{{message}}</h1>

    <p>{{user.name}}</p>

    <p>{{user.age}}</p>

    <p>{{user.gender === 0 ? '女' :'男'}}</p>

    <ul>

    {{each}}

    <li>

    {{$value.todos}}

    </li>

    {{/each}}

    </ul>

    </script>

    <script>

    $.ajax({
    url: '/',
    type: 'get',
    data: taskArr,
    success: function (data) {

    var html=template('tem',data)

    document.getElementById('app').innerHTML=html

    }
    })

    </script>

    db.json//存放的数据

    [{

    message:'hello',

    user:{

    name:'zs',

    age:18,

    gender:0

    },

    todos:['吃饭','睡觉','打豆豆']

    }

    ]

    js页面

    const express = require('express')
    // 接收json数据
    const db = require('./db')
    const app = express()
    // 启动端口
    app.listen(3000, () => console.log('Serve listening http://127.0.0.1:3000/'))
    // 处理静态资源
    app.use('/public', express.static(__dirname + '/public/'))
    // 渲染页面
    app.get('/', function (req, res) {
    let data = require(__dirname + '/db.json')
    res.render(__dirname + '/views/index.html', {
    taskArr: data[0]
    })
    })
  • 相关阅读:
    iframe透明
    c#创建可以为空类型
    div仿框架布局
    IBatis.Net学习笔记(六):Castle.DynamicProxy的使用
    很好玩的谷歌纵横
    TFS签入签出规范
    ibatis学习笔记
    iBATIS.net调用存储过程
    最新28个很棒的 jQuery 教程
    IBatis.Net 中的数据类型转换
  • 原文地址:https://www.cnblogs.com/lljun/p/11305884.html
Copyright © 2011-2022 走看看