node express（）

一、搭建express框架

    index1.js

var express=require("express")
var app=express();

app.use(express.static("static"))//注册静态资源文件
// app.get("/",function (req,res) {
//     console.log("这是一个网页");
//     res.send("网页主页");
// }).listen(3001);

//拦截器1
app.use("/",function (req,res,next) {
    // next();
    console.log("拦截器1：express拦截1！");
    next();
});
app.use("/",function (req,res,next) {
    // next()
    console.log("拦截器2：express拦截2！");
    next();
})
app.use("/",function (req,res,next) {
    // next();
    console.log("拦截器3：express拦截3！");
    next();
})
app.get("/test",function (req,res) {
    console.log("这是一个网页");
    res.send("MY网页主页");
}).listen(3000)

二、express全栈模板：html   jade  ejs

    1.index2.js

//express 全栈模板 jode
var express=require("express");
var  app=express();

app.set("view engine","jade");//设置模板引擎
app.set("views",__dirname+"/jade");//获取在__dirname文件夹下的jade文件
app.use(express.static("static"));//获取静态文件内容
app.get("/",function (req,res) {
    res.render("index",{titleX:"ln的个人网",
            arr:[
                {name:"ln",age:15},
                {name:"ln1",age:15},
                {name:"ln2",age:15},
                {name:"ln3",age:15}
                ]
    })
}).listen(3000)

2.index.jade文件

doctype html
html(lang="en")
    head
        title #{titleX}
        meta(name="keywords",content="课工场")
        script(type="text/javascript").
            var a=100;
            console.log(a);
            function clickBtn() {
                alert("点击一次");
            }
        style.
            h1 {
                color: orange;
            }
        link(type="text/css",rel="stylesheet", href="index.css")
    body
        h1 课工场
        divcol#test
            a(href="http://www.baidu.com",target="_blank",style="{color:red}") 百度<br>
            | text<br>
            button(onclick="clickBtn()") 点击 | test<br>

            -for (var i=0;i<3;i++)
                div h1#{i}

            ul
                each item in arr
                    li #{item.name}

三、get post 支持

1.get

   index3.js

var  express=require("express");
var  app=express();

app.use(express.static("static"));
app.get("/",function (req,res) {
    console.log(req.query);
    res.send("这是返回数据！");
}).listen(3000)

html文件

<form action="">
   userName:<input type="text" name="userName" id="userName"><br>
   password:<input type="text" name="password" id="password"><br>
   <input type="submit" value="提交" onclick="f()">
</form>
<script>
   function f() {
           var  name=$("#userName").val();
           var  pass=$("#password").val();
           $.ajax({
         type:"GET",
         url:"http://localhost:3000?userName="+name+"&password="+pass,
         success:function (val) {
            alert(val);
               }
      })
       }
2.post

var express=require("express"); var app=express();

var bodyParser=require("body-parser");
app.use(bodyParser.urlencoded({extended:false}));
app.post("/post",function (req,res) {
    res.writeHead(200,{"Content-type":"text/html;charset=UTF-8","Access-Control-Allow-Origin":"*"});
    console.log(req.body);
    res.send({
        "msg":"post返回数据",
        code:1,
    })
}).listen(3000)

postHtml.html

<form action="" method="post">
   userName:<input type="text" name="userName" id="userName"><br>
   password:<input type="text" name="password" id="password"><br>
   <input type="submit" value="提交" onclick="f()">
</form>
<script>
   function f() {
           var  name=$("#userName").val();
           var  pass=$("#password").val();
           $.ajax({
         type:"POST",
         url:"http://localhost:3000/post",
         data:{
             "userName":name,
            "password":pass
         },
         success:function (res) {
            alert(res)
               }
      })
       }
   
</script>