快速搭建一个express服务器

花猪

发布于 2022-02-23 13:17:04

1.3K0

发布于 2022-02-23 13:17:04

文章被收录于专栏：花猪的学习记录

前言

无意间浏览到二兔的博客，看到一篇关于express服务器搭建的文章

原文指引 → 一分钟搭建一个简单 express 服务器 | 你真是一个美好的人类 (juanertu.com)

正巧最近在学习前端的一些内容，在使用ajax时需要一些后台的数据处理，这不是巧了嘛

快速搭建express服务器

新建文件server.js，编写如下代码：

let express = require('express')
let app = express()

app.all('*', function (req, res, next) {
  //设置允许跨域的域名，*代表允许任意域名跨域
  res.header('Access-Control-Allow-Origin', '*')
  //允许的header类型
  res.header('Access-Control-Allow-Headers', 'content-type')
  //跨域允许的请求方式
  res.header('Access-Control-Allow-Methods', 'DELETE,PUT,POST,GET,OPTIONS')
  if (req.method.toLowerCase() == 'options') res.send(200)
  //让options尝试请求快速结束
  else next()
})

app.get('/', (req, res) => {
  res.json({
    msg: 'THIS IS INDEX',
  })
})
app.get('/about', (req, res) => {
  res.json({
    msg: 'THIS IS ABOUT',
  })
})

app.listen(3000, () => {
  console.log('http://localhost:3000')
})

2.安装express，命令如下：

npm install express --save

3.启动项目：

node server.js

4. 访问localhost:3000去看看结果吧

加法计算器案例

如此一来，就可以开始做一个简单的基于express的加法计算器案例。

（当然这个功能的实现完全用不到后端，这里单纯就是为了使用而使用）

首先给出案例Demo的目录结构：

│  index.html
│  
└─js
        ajax.js
        server.js

说明：

index.html：加法计算器的展示页面
ajax.js：利用ajax发送异步请求
server.js：express后台服务器

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="./js/ajax.js"></script>
  <title>Document</title>
</head>
<body>

  <div class="task3">
    <h2>实验：AJAX操作</h2>
    <p>我们使用AJAX的方式来计算和</p>
    <input type="text" id="num1">+
    <input type="text" id="num2">=
    <span id="sum"></span>
    <br><br>
    <button onclick="cal()">计算</button>
    
  </div>

</body>
</html>

2.ajax.js

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if((xhr.readyState==4) && (xhr.status==200)){
    document.getElementById("sum").innerHTML=xhr.responseText;
  }
}

function cal() {
  var num1 = document.getElementById("num1").value;
  var num2 = document.getElementById("num2").value;
  xhr.open("GET",'http://127.0.0.1:8081/ajax/?num1='+num1+'&num2='+num2,true);
  xhr.send();
}

3.server.js

let express = require('express')
let app = express()

app.all('*', function (req, res, next) {
  //设置允许跨域的域名，*代表允许任意域名跨域
  res.header('Access-Control-Allow-Origin', '*')
  //允许的header类型
  res.header('Access-Control-Allow-Headers', 'content-type')
  //跨域允许的请求方式
  res.header('Access-Control-Allow-Methods', 'DELETE,PUT,POST,GET,OPTIONS')
  if (req.method.toLowerCase() == 'options') res.send(200)
  //让options尝试请求快速结束
  else next()
})

//计算
app.get('/ajax',function(req,res){
  var num1 = req.query.num1; //接收为string类型
  var num2 = req.query.num2; //接收为string类型
  var result = Number(num1)+Number(num2);  //转化为数字类型计算
  res.send(result.toString());  //返回string类型
})

app.listen(8081, () => {
  console.log('http://localhost:8081')
})

4.终端进入server.js的目录下，键入命令node server.js启动后台服务

5.点击进入index.html，就可以看到效