一、环境

1、安装express

npm i express@4.17.1 // 安装express模块

2、安装nodemon

npm i nodemon -g

3、安装cors

npm install cors --save 或者 npm install cors -D

4、运行命令

nodemon .\test.js

二、代码(话不多说直接上代码)

1、代码结构:

test.html为页面
test.js为服务器端代码
apiRouter为封装的路由模块
2、apiRouter.js

const express = require("express");
const database = require("mime-db");
const router = express.Router();
//导入
const cors = require('cors');
//挂载
router.use(cors({
origin:['http://localhost:8083'],
methods:['GET','POST'],
alloweHeaders:['Conten-Type', 'Authorization']
})); // 挂载对应的路由
router.get("/get", (req, res) => {
// 通过 req.query 获取客户端通过查询字符串,发送到服务器的数据
const query = req.query
let backData = query.name+'test拼接'
// 向客户端响应处理的结果
res.send({
status: 0, // 0成功,1失败
code:200,
msg: "get请求成功!",
data: backData, // 响应给客户端的数据
});
}); router.post("/post", (req, res) => {
// 通过 req.body 获取请求体中包含的 url-encoded 格式的数据
const body = req.body;
let backData = body.author+'test拼接处理数据'
// 调用res.send方法,向客户端响应结果
res.send({
status: 0,
code:200,
msg: 'POST请求成功!',
data: backData
}) }); module.exports = router;

3、test.js

const express = require("express");
// 创建服务器实例
const app = express(); // 配置解析表单数据的中间件
app.use(express.urlencoded({ extended: false })); // 一定要在路由之前,配置cors中间件,从而解决接口跨域问题
const cors = require("cors");
app.use(cors()); // 导入路由模块
const router = require("./apiRouter"); // 把路由挂载到app实例上
app.use("/api", router); // 启动服务器
app.listen(8081, () => {
console.log("server running at http://127.0.0.1:8081");
});

4、test.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" />
<title>Document</title>
<script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<button id="btnGET">GET</button>
<button id="btnPOST">POST</button>
<script>
$(function () {
// 测试Get接口
$("#btnGET").on("click", function () {
$.ajax({
type: "GET",
// url: "http://127.0.0.1:8081/api/get",
url: "http://10.15.253.205:8081/api/get",
data: {
name: "zs",
age: 30,
}, success: function (res) {
console.log(res);
},
});
});
// 测试Post接口
$("#btnPOST").on("click", function () {
$.ajax({
type: "POST",
url: "http://10.15.253.205:8081/api/post",
data: {
bookname: "西游记",
author: "吴承恩",
},
success: function (res) {
console.log(res);
},
});
});
});
</script>
</body>
</html>

效果:

写在最后,简单的node服务器,希望可以帮到大家,

node.js的express模块实现GET和POST请求的更多相关文章

  1. node.js中express模块创建服务器和http模块客户端发请求

    首先下载express模块,命令行输入 npm install express 1.node.js中express模块创建服务端 在js代码同文件位置新建一个文件夹(www_root),里面存放网页文 ...

  2. node.js安装express模块应用服务框架

    1.创建工程文件夹case-04 2.在终端窗口进入文件夹目录,并输入:npm init,并一路回车,最后看到在case-04文件夹里自动生成了package.json 文件 3.打开vscode,进 ...

  3. node.js使用express模块创建web服务器应用

    1.安装express模块 在命令行输入 npm install body-parser --save npm install express --save 2.创建app.js文件 /*应用程序入口 ...

  4. Node.js基于Express框架搭建一个简单的注册登录Web功能

    这个小应用使用到了node.js  bootstrap  express  以及数据库的操作 :使用mongoose对象模型来操作 mongodb 如果没了解过的可以先去基本了解一下相关概念~ 首先注 ...

  5. node.js框架express的安装

    node.js框架express的安装 首先假定你已经安装了 Node.js,接下来为你的应用创建一个目录,然后进入此目录并将其作为当前工作目录. $ mkdir myapp $ cd myapp 通 ...

  6. node.js,express入门看详细篇

    先最简单的代码 安装 npm install express app.js 代码内容 const express = require('express') const app = express() ...

  7. node.js使用express框架进行文件上传

    关于node.js使用express框架进行文件上传,主要来自于最近对Settings-Sync插件做的研究.目前的研究算是取得的比较好的进展.Settings-Sync中通过快捷键上传文件,其实主要 ...

  8. 如何设计一个基于Node.js和Express的网站架构?

    前言 今年七月份,我和几个小伙伴们合伙建立了一个开发团队.业务开展如火如荼的同时,团队宣传就提上了日程,所以迫切需要搭建公司网站出来.确定目标后我们就开始考虑如果构建一个企业网站.先是进行业内调查,看 ...

  9. Code Your First API With Node.js and Express: Set Up the Server

    How to Set Up an Express API Server in Node.js In the previous tutorial, we learned what the REST ar ...

随机推荐

  1. 【合集】Python基础知识【第二版】

    更新部分 为了避免冗长的代码影响大家观感,将部分案例拆开 增加部分知识点,为了减少大家阅读的负担,尽可能使用短句子,但知识点不可能全覆盖,笔者不是写书,就算是写书也不可能全面,请同学们自行去补充 增加 ...

  2. JavaScript学习总结4-规范

    昨天学习了JS的严格检查模式,今天做一点补充 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 & ...

  3. css加载动画(纯css和html)

    从jq官网上摘抄下来的一个简单加载动画,个人比较喜欢使用~存在这里,作为记录 话不多说~上代码 <!DOCTYPE html> <html lang="en"&g ...

  4. Spring 源码 (2)Spring IOC 容器 前戏准备工作

    Spring 最重要的方法refresh方法 根据上一篇文章 https://www.cnblogs.com/redwinter/p/16141285.html Spring Bean IOC 的创建 ...

  5. Blazor Bootstrap 组件库 Toast 轻量弹窗组件介绍

    轻量级 Toast 弹窗 DEMO https://www.blazor.zone/toasts 基础用法: 用户操作时,右下角给予适当的提示信息 <ToastBox class="d ...

  6. Python图像处理丨OpenCV+Numpy库读取与修改像素

    摘要:本篇文章主要讲解 OpenCV+Numpy 图像处理基础知识,包括读取像素和修改像素. 本文分享自华为云社区<[Python图像处理] 二.OpenCV+Numpy库读取与修改像素> ...

  7. 基于.NetCore开发博客项目 StarBlog - (4) markdown博客批量导入

    系列文章 基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客? 基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目 基于.NetC ...

  8. 2.SSH协议常见问题排错

    一.SSH登录linux服务器密码验证很慢 现象:ssh登录服务器后,输入密码时,验证要等10秒左右,很慢.登录上去后速度正常,这种情况主要有两种可能的原因: 1. DNS反向解析的问题 OpenSS ...

  9. Linux-I/O模型详解

    I/O介绍 I/O通常有内存IO.网络I/O.磁盘I/O等,但我们通常说的是网络I/O以及磁盘I/O.网络I/O:本质是socket读取 每次I/O请求,都会有两个阶段组成: 第一步:等待数据,即数据 ...

  10. 1.sprng 简介

    容器(可以用来管理所有的组件(类)) 核心关注:IOC和AOP 1.IOC Inversion(反转) Of Control:控制反转 控制:资源的获取方式 1.主动式(要什么资源自己创建) Pers ...