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}); });
结果