1. 程式人生 > 其它 >node 前後端互動

node 前後端互動

node安裝

##先檢視一下我們當前的映象地址
npm config get registry
##如果你以前沒有修改過,則此時出現的地址應該是 https://registry.npmjs.org/,這是國外的映象地址
##我們需要修改成國內的淘寶映象
npm set registry https://registry.npm.taobao.org
##修改過後,再次檢視一下當前映象地址予以確認
npm config get registry
##確認網址無誤即可進行下一步

安裝express,express為框架,node-modules相當於儲藏室,package.json裡會更新出你下載的內容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form action="/login" method="post">
    <label >
        <input type="text" name="account">
    </label>
    <label >
        <input type="password" name="password">
    </label>
    <input type="submit" value="提交">
</form>
</body>
</html>

//express框架會更方便使用js 執行後臺 //引入express 用require var express = require('express'); var app = express(); app.engine('html', require('express-art-template'))
//配置body-parser // body-parser在老版本的express中不存在,需要額外安裝 //現在body-內嵌在express中 app.use(express.urlencoded({extended: false})) app.use(express.json())
app.get('/', function (req, res) {
// res.send('HELLO World'); res.render('index.html') console.log(req.query) })//事件驅動,非同步 //render渲染 //req是前端傳給後端的內容request //res是後端傳給前端的內容response app.post('/login', function (req, res) { console.log(req.body); if(req.body.account =='admin'&&req.body.password =='20001108'){ res.send('登入成功');
} else { res.send('登入失敗'); } }) // 下面是對子頁面的連結 前端對後臺發起請求,後端對發起請求的位置傳輸資訊
app.get('/sonyemian.html',(req,res) =>{
let dataTotal;
if (req.query.id == 1){
dataTotal = dataOne
}else if (req.query.id == 2){
dataTotal = dataTwo
} else if (req.query.id == 3){
dataTotal = dataSan
} else if (req.query.id == 4){
dataTotal = dataSi
}
// console.log(req.query.id)
res.render('sonyemian.html',{dataTotal})
})

app.listen(3000)//監聽3000埠;IP地址能讓網路找到本電腦,埠找到電腦對應的軟體;

在BS資料夾下建立views資料夾,在views下建立index.html,在BS下建立index.js