zoukankan      html  css  js  c++  java

  • 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
           })
    })
     
  • 相关阅读:
    【转载】Unity的内存管理与性能优化
    [转载]有关placement new
    国内外有用的课程资源
    os模块批量重命名多个工作簿
    利用xlwings将一个工作表，拆成多个工作簿
    利用xlwings批量打开同一文件夹下的N多EXCEL表格
    回归初心，探索真我写在2022年的开始
    利用xlwings在多个工作簿中批量新增工作表
    今日份试题，关于Python办公自动化应用
    随想
  • 原文地址：https://www.cnblogs.com/zsrTaki/p/11510340.html
Copyright © 2011-2022 走看看