nodejs的express框架，mockjs动态生成数据，javascript模版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <style type="text/css">
        *{
            padding:0;
            margin:0;
        }
    </style>
</head>
<body>
<table class="table table-striped">
    <tbody id="table">
        <tr>
            <td>id</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>城市</td>
            <td>日期</td>
        </tr>

    </tbody>
</table>
<script type="text/template" id="template">
    <tr>
        <td>%id</td>
        <td>%name</td>
        <td>%age</td>
        <td>%city</td>
        <td>%birthday</td>
    </tr>
</script>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<script>
    $.ajax({
        url:"list",
        type:"GET",
        dataType:"JSON",
        success:function(res){
            console.log(res.data);
            var data = res.data.user;//数组
            var List = generateStringByTemplate({
                id:'template',
                params:{
                    '%id':'id',
                    '%name':'name',
                    '%age':'age',
                    '%city':'city',
                    '%birthday':'birthday'
                },
                data:data
            });
            $("#table").append(List);
        },
        error:function(e){
            console.log(e);
        }
    });
    /*
    * @description 根据模板和参数生成html串
    * @params obj {id:id,params : {'%s':'id','%t':'name'},data:[{id:'aaa',name:'bbb'},{id:'ccc',name:'ddd'}]}id表示模板的id,
    * params表示模板里面的参数 eg:%s可以取到数组每一项里面的key
    * data表示数据
    */
    function generateStringByTemplate(obj){
        var id = obj.id,
            params = obj.params,
            data = obj.data,
            $script = $('#'+id),
            txt = $script.text(),
            param_arr = [],
            param_str = '',
            reg = null,
            _arr = [];
        for(var index in params){
            param_arr.push(index);
        }

        param_str = param_arr.join('|');
        reg = new RegExp(param_str,'g');
        $(data).each(function(index,element){
            _arr.push(txt.replace(reg,function(a,b){
                return element[params[a]];
            }));
        });

        return _arr.join('');

    }


</script>
</body>
</html>

app.js

var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var Mock = require('mockjs');

//body-parser - node.js 中间件，用于处理 JSON, Raw, Text 和 URL 编码的数据。
app.use(bodyParser.urlencoded({extended:false}));
app.use(bodyParser.json());

//静态文件
app.use(express.static('public'));
app.use(express.static('public/views'));//login.html在views文件夹中
app.use(express.static('public/json'));


app.get('/list',function(req,res){
    var data = Mock.mock({
        "user|1-6":[{
            'id|+1':01,
            'name':'@cname',
            'age|20-30':0,
            'city':'@city(true)',
            'birthday':'@datetime("yyyy-MM-dd")'
        }]
    });
    return res.send({data:data});
});

结果

nodejs的express框架，mockjs动态生成数据，javascript模版

猜你喜欢