一、express环境搭建
-
express web框架：基于node.js平台，快速，开放，极简的web开发框架http://www.expressjs.com.cn/
使用前需要进行安装 cnpm install express --save
2.安装步骤
新建一个文件夹 双击文件夹
在cmd中 npm init -y // 初始化文件夹
cnpm install express --save // 安装express框架
3.向根目录中填入内容
const express = require("express")//引入express框架
var app = express();//实例化 实例过程已经在内部封装好了可以直接用
app.get("/",(req,res)=>{//请求根目录 用send向根目录中传值
res.send("hello world")
})
var ser = app.listen(3000,()=>{
console.log("listen 3000...")
})
二、路由
路由：根据不同的url返回不同的内容（localhost：3000 localhost：3000/one）
const express = require("express")//引入express框架
var app = express();//实例化 实例过程已经在内部封装好了可以直接用
app.get("/",(req,res)=>{//请求根目录 用send向根目录中传值
res.send("hello world")
})
app.get("/one",(req,res)=>{//路由 第一个参数就是我要向其中传递数据的url
res.send("one request")
})
var ser = app.listen(3000,()=>{
console.log("listen 3000...")
})
甩端口：res.json() 用户在url根目录后输入一个/aaa的时候就可以拿到data.json中的数据
const express = require("express")//引入express框架
var app = express();//实例化 实例过程已经在内部封装好了可以直接用
var data = require("./data")//引入data.json这个文件
app.get("/aaa",(req,res)=>{//第一个参数是端口号 是后端设置的端口号，前端想要获取到data中的数据需要在url地址中输入这个端口号才可以获取到data.json中的数据
res.json(data);//这个data是data.json
})
var ser = app.listen(3000,()=>{
console.log("listen 3000...")
})
ejs 模板引擎（template）： 所谓模板就是html中加入了变量，使用的时候将变量替换成常量了 //就好比PPT模板 你下载使用ppt模板的时候可以改变模板中的内容
<body>
<%=a%>//变量
姓名 {name} 年龄 {age}
</body>
使用方法
1.安装：cnpm install ejs --save //使用前先进行安装
2.使用什么模板引擎 ： app.set("view enigne","ejs")//第二个参数是使用的模板引擎类型
模板引擎放在哪 ： app.set("views","./views")//默认放在views文件夹内 需要自己手动创建views文件夹 第二个参数是文件夹路径，可以改变 eg：./title
3.在views中新建一个文件，文件的扩展名要叫 .ejs 然后在文件内部写html格式的内容
//渲染模板
res.render（ejs模板文件的文件名,{
ejs文件里的变量名:“值”
}）
a.ejs
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<%=title%>//这个是变量
</body>
</html>
hello.js
const express = require("express")//引入express框架
var app = express();//实例化 实例过程以及在内部封装好了可以直接用
var data = require("./data")
app.set("view engine","ejs")
app.set("views","./views")
app.get("/",(req,res)=>{//请求根目录 用send向根目录中传值
res.send("hello world")
})
app.get("/one",(req,res)=>{//路由 第一个参数就是我要向其中传递数据的url
res.render("a",{//渲染页面
title:"aaaaa"//向ejs中的title变量传值
})
})
var ser = app.listen(3000,()=>{
console.log("listen 3000...")
})
四、ejs数据列表： 在ejs文件中用js语句写for循环，遍历json数据产生一个数据列表
-
<% %> //用来执行javascript代码
-
<%=变量的名字%> //模板中输出变量
-
<%- %> //变量直接输出，能够直接解析html中的写法
4. <% include 模板的路径 %> //模板嵌套
b.ejs
<body>
<% include ./myheader%>//添加公共头部 会在不同页面的头部显示同样的内容 模板嵌套
<ul #BC0058"><%=flag?'red':'blue'%>">//条件运算符
<% for(var i=0 ;i<list.length;i++){ %>//js内容的拼接 ejs的数据列表写法
<li><%=list[i].id%> <%=list[i].name%></li>
<% } %>
</ul>
</body>
hello.js
app.get("/thr",(req,res)=>{
res.render("b",{
flag:true
list:[
{"id":1, "name":"<h3>zzz</h3>"//ejs接收这个数据需要使用<%-list[i].name%> }//注意是<%- %>
]
})
})
myheader.js
<div>
这是公共的头部
</div>
五、添加数据 （ 写一个input框 输入内容回车的时候将内容发送给服务端 服务端将数据存储到json中然后再利用循环将数据填入ejs中的列表里 )
ejs 文件中需要引入jquery https://www.bootcdn.cn/
const data 如果 data指向一个值 那不能被改变 如果data指向一个对象 那么可以被改变
b.ejs
<body>
<% include ./myheader.ejs %>
<input type="text" id="txt">
<ul>
<%for(var i=0 ;i<list.length;i++){%>
<li><%=list[i].id%> <%=list[i].name%></li>
<%}%>
</ul>
</body>
</html>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript">
$("#txt").keyup((e)=>{
if(e.keyCode===13){
if($("#txt").val()===""){
return
}
$.get("http://localhost:3000/add",{//发送请求
xm:$("#txt").val()
}).then((res)=>{
location.reload();
})
}
})
</script>
hello.js
const url = require("url")
const fs = require("fs")
app.get("/thr",(req,res)=>{
res.render("b",{
list:data.list
})
})
app.get("/add*",(req,res)=>{
//接受用户传过来的值 用url模块
var obj = url.parse(req.url,true);
var name = obj.query.xm;
data.list.push({//接受用户传来的值
id:++data.count,
name:name
})
fs.writeFileSync("./data.json",JSON.stringify(data));//插入到文件当中去
res.render("b",{//重新渲染模板
list:data.list
})
})
app.get("/aaa",(req,res)=>{
res.json(data);
})
var ser = app.listen(3000,()=>{
console.log("listen 3000...")
})
六、删除数据
params是参数的意思
req.params.参数名
filter（） 用于删除
b.ejs
$(".btn").click(function(){
if(!confirm("确定要删除吗"))return;
$.get("http://localhost:3000/del/"+$(this).attr("data-id")).then((res)=>{// $(this).attr("data-id")取到的是点击时的id
location.reload();
})
})
hello.js
app.get("/del/:id",(req,res)=>{ //ejs中$(this).attr("data-id")的值会传给：id
var id = Number(req.params.id); //把id转成数值型 如果不转的话 id是string型
data.list = data.list.filter((item)=>{ // 删除操作 filter按照某个条件过滤，返回的是所有符合条件的元素
console.log(typeof item.id)
return item.id !==id; //对item.id进行遍历如果item的id不等于传过来的id值那么就把这条item.id留下来，如果item的id等于传过来的id就把它删除
})
fs.writeFileSync("./data.json",JSON.stringify(data)); //将json转化成json字符串 json.parse是将json字符串转化成json对象
res.render("b",{
list:data.list
})
})
七、查询数据
includes（） //返回布尔值 true/false 模糊查找
query.ejs
<body>
<% include ./myheader.ejs %>
<input type="text" id="txt" /> <button id="btn">查找</button>
<%=list.length%><!--显示查找到的条数-->
<ul>
<% for(var i=0;i<list.length;i++){ %>
<li><%=list[i].id%> <%-list[i].name%>
</li>
<% } %>
</ul>
<script>
$("#btn").click(function(){
$.get("http://localhost:3000/query/"+$("#txt").val()).then((res)=>{//传递输入框中的值
location.reload();
})
})
</script>
</body>
hello.js
var mylist =[];
app.get("/querypage",(req,res)=>{//展示查询页面
res.render("query",{//渲染query模板
list:mylist//让list中的数据等与mylist中的数据
})
})
app.get("/query/:kw",(req,res)=>{//展示查询结果 ：kw为查询的关键字keyword
mylist=data.list.filter((item)=>{
return item.name.includes(req.params.kw);//将前端传过来的$("#txt").val()看作是kw 然后看list.name中包不包含这个kw，返回包含kw的数组
})
res.render("query",{
list:mylist
})
})
八、修改数据
b.ejs
<body>
<% include ./myheader.ejs %>
<input type="text" id="txt">
<ul>
<%for(var i=0 ;i<list.length;i++){%>
<li><%=list[i].id%> <%=list[i].name%>
<button data-id="<%=list[i].id%>"class="btn" >删除</button>
<button data-id="<%=list[i].id%>" class="modify">修改</button>
</li>
<%}%>
</ul>
</body>
</html>
<script type="text/javascript">
$("#txt").keyup((e)=>{
if(e.keyCode===13){
if($("#txt").val()===""){
return
}
$.get("http://localhost:3000/add",{//发送请求
xm:$("#txt").val()
}).then((res)=>{
location.reload();
})
}
})
$(".btn").click(function(){
if(!confirm("确定要删除吗"))return;
$.get("http://localhost:3000/del/"+$(this).attr("data-id")).then((res)=>{// $(this).attr("data-id")取到的是点击时的id
location.reload();
})
})
$(".modify").click(function(){//点击修改按钮跳转到修改页面
location.href="http://localhost:3000/modify/"+$(this).attr("data-id") //modify/+点击按钮的id
})
</script>
modify.ejs
<body>
<input type="text" name="xm" id="xm" value="<%=xm%>" />
<input type="hidden" name="id" id="id" value="<%=id%>" />
<button id="modifyok">修改</button>
</body>v
</html>
<script type="text/javascript">
$("#modifyok").click(function(){
location.href="http://localhost:3000/modifyok/"+$("#xm").val()+"/"+$("#id").val();//跳转到修改好后的页面
})
</script>
hello.js
app.get("/modify/:id",(req,res)=>{//修改界面页面
var id = Number(req.params.id);
var list = data.list.filter((item)=>{
return item.id == id
})
res.render("modify",{
xm:list[0].name,//因为每次只修改一条内容 所以list中只有一条数据
id:list[0].id
})
})
app.get("/modifyok/:name/:id",(req,res)=>{//修改后的页面
var id = Number(req.params.id);
var name = req.params.name;
data.list.forEach((item)=>{
if(item.id===id){
item.name = name
}
})
fs.writeFileSync("./data.json",JSON.stringify(data));
res.render("b",{
list:data.list
})
})