node express()
阿新 • • 發佈:2018-11-11
一、搭建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>