node 前后端交互

node安装

##先查看一下我们当前的镜像地址
npm config get registry
##如果你以前没有修改过，则此时出现的地址应该是 https://registry.npmjs.org/，这是国外的镜像地址
##我们需要修改成国内的淘宝镜像
npm set registry https://registry.npm.taobao.org
##修改过后，再次查看一下当前镜像地址予以确认
npm config get registry
##确认网址无误即可进行下一步

打开浏览器，输入网址

http://127.0.0.1:3000/或者http://localhost:3000/即可打开界面，如果你知道你的ip地址的话，也可以使用自己的ip地址进行打开，还可以把你的ip地址分享给跟你同处一个局域网的同学打开你的网址，假如你的ip地址为：192.168.3.78，则你应该输入的网址是http://192.168.3.78:3000/，你的局域网同学也可以根据你的此网址进入你的服务。

安装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())


//事件驱动，异步
//render渲染
//req是前端传给后端的内容request
//res是后端传给前端的内容response
// 下面是对子页面的链接 前端对后台发起请求，后端对发起请求的位置传输信息
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

posted @ 2021-12-24 18:45  しっ  阅读(44)  评论(0)    收藏  举报