一、前后端分离----渲染数据 总的来说就是在index.js中向某个端口甩出data.json中的数据 然后在.html文件中从这个端口中获取这个数据然后将其遍历到网页中
①先生成express项目
②在bin/www 中查看端口号
③app.js 中的app.use(express.static(path.join(__dirname,'public'))) ; 可以将public文件夹与app.js连接在一起
④模拟一个data.json 数据
⑤在public文件夹中写一个list.html 向后端服务器发送请求 （记得引入jquery.js的文件到javascript文件夹中 如果没有可以根据 cnpm i jquery --save 进行下载 然后在node_modules文件夹中找到并引入）
⑥检查是否成功引入jquery-->npm start--> console.log($)
⑦写index.js 用于向某个端口传递json文件中的数据
⑦向html中写内容
data.json //写数据
{
list：[
{"id":1,"name":"zzz","age":12}
]，
“count”：1
}
index.js //甩数据
var express = require('express');
var router = express.Router();
const data = require("../data")//引用data.json中的数据
const fs = require("fs")
router.get('/data',(req, res)=>{
res.json(data)//甩数据到/data端口
});
module.exports = router;
list.html //拿数据 并应用
<script src="/javascripts/jquery.js"></script>//记得要引入jquery
<script src="/javascripts/baiduTemplate.js"></script>//这是百度模板
</head>
<body>
<div id="box">
</div>
<script type="text/html" id="tem">
<ul>
<% for(var i = 0 ; i < list.length ; i++){%>
<li><%=list[i].name%></li>
<% } %>
</ul>
</script>
<script type="text/javascript">
$.get("http://localhost:3000/data").then((res)=>{//这里的get是从/data端口中拿数据到html页面去用
console.log(res.list)//输出从data端口中拿到的所有数据
var content = baidu.template("tem",res);//这个res就是从data.json中拿到的所有数据
console.log(content)
$("#box").html(content);//向box中添加内容
})
</script>
</body>
二、前后端分离-----添加数据
index.js
var express = require('express');
var router = express.Router();
const data = require("../data")
const fs = require("fs")
router.get('/data',(req, res)=>{
res.json(data)
});
router.get("/add/:username",(req,res)=>{//获取一段网址
var name = req.params.username;//截取网址中的username部分 相当于$("#username").val()
data.list.push({
id:++data.count,
name:name
})
fs.writeFileSync("./data.json",JSON.stringify(data));//这里用./data是因为真正调用data.json的是app.js
res.json({//自定义的
ret:true,//告诉前端ret是正常的返回
data:true//数据也是正常返回
})
})
module.exports = router;
add.html
<script src="/javascripts/jquery.js"></script>
<script src="/javascripts/baiduTemplate.js"></script>
</head>
<body>
<div id="box">
<input type="text" name="username" id="username" value="" />
<button id="btn">添加</button>
</div>
<script type="text/javascript">
$("#btn").click(function(){
$.get("http://localhost:3000/add/"+$("#username").val()).then((res)=>{//这里的get是在以一串网址的形式向后端传递input框中输入的内容 后端拿到网址后会将其分解 取出自己需要的部分
if(res.ret){//ret是后端返回来的东西，如果成功返回了数据 那么跳转页面
location.href="/list.html"
}
})
})
</script>
</body>