express环境搭建（2018/11/09）

一、express环境搭建 
  1. 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数据产生一个数据列表
  1. <% %>      //用来执行javascript代码
  2. <%=变量的名字%>      //模板中输出变量
  3. <%- %>   //变量直接输出，能够直接解析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
       })
})
 
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/zsrTaki/p/11510340.html