express框架创建的node服务demo
2021-07-09 本文已影响0人
浅浅_2d5a
在目录中的cmd中,npm init -y 生成package.json文件
npm i express -S 安装express
在package.json中 "main": "index.js",说明入口文件是index.js
新建public文件夹
在index.js中写node代码
index.js 内容
var express = require('express');
var app = express();
// 设置 public 为静态文件的存放文件夹
app.use('/public', express.static('public'));
//设置接口 返回值
app.get('/', function(req, res) {
res.send('Hello World ');
})
//设置接口 返回值
app.get('/info', function(req, res) {
res.send(JSON.stringify({
name:'zhangsan',
age:12
}));
})
var server = app.listen(8081, function() {
var host = server.address().address
var port = server.address().port
console.log("Node.JS 服务器已启动,访问地址: http://%s:%s", host, port)
})
结合上面的express ,前端调用node提供的接口,需要Promise封装ajax,前后端分别需要启动服务
home.html 部分代码如下
window.onload = function(){
ajax('http://127.0.0.1:8081/info').then((res)=>{
console.log('我返回了什么',res);
let dom ;
for(var i in res){
dom += "<li>"+res[i]+"</li>"
}
document.getElementById('info').innerHTML = dom;
});
}
ajax封装代码
function ajax(url,data){
var xhr;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xhr=new XMLHttpRequest();
}
else
{// code for IE6, IE5
alert(4)
xhr=new ActiveXObject("Microsoft.xhrHTTP");
}
xhr.open("GET",url,true);
xhr.send();
return new Promise(function(resolve, reject){
xhr.onreadystatechange = function() {
// 判断异步对象的状态
if(xhr.readyState == 4) {
// 判断交互是否成功
if(xhr.status == 200) {
// 获取服务器响应的数据
var res = xhr.responseText//返回的数据
// 解析数据
res = JSON.parse(res);
console.log(res);
resolve(res);
}
}
}
});
}
注意:分别启动node服务 和 前端服务 都需要在根目录进行
跨域问题解决方案的一种 添加请求头
image.png
var app = express();
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header('Access-Control-Allow-Headers', 'Content-Type');
next();
});
nodejs中引入模块,只支持require这种