前端学习笔记—Express、MongoDB数据库、接口代理请求

Express使用

"Express"和"Spring Boot"是两个流行的后端开发框架，分别用于JavaScript和Java语言。

Express.png

// ===============准备工作===================
//安装在根目录和boService文件夹目录下都行。按住boService右键'在集成终端中打开'
//1.cmd创建，初始化npm
//npm init --yes
//2.安装express框架
//npm i express
//3.创建接口
// ==================================

// 创建express框架服务，创建简易接口数据===>根目录/boService/expressBoService.js

//1.引入express
const expressBo = require('express');

//2.创建应用对象
const myAppInterface = expressBo();

//3.使用 body-parser 中间件来解析数据
const bodyParser = require('body-parser');//设置json格式
const mycors = require('cors'); // 引入cors包，解决跨域
myAppInterface.use(bodyParser.urlencoded({ extended: false }));
myAppInterface.use(bodyParser.json());
myAppInterface.use(mycors());

//4.创建路由规则
//request请求报文
//response响应报文

myAppInterface.get('/muxiInfo', (request, response) => {
    console.log('--get接收-开始');
    //设置响应头，设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    // //设置响应 send只能发送字符串
    response.send("哈喽，你好呀--GET请求");
});

myAppInterface.post('/muxiInfo', (request, response) => {
    console.log('--post接收-开始');
    //设置响应头，设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //响应所有类型请求头
    response.setHeader('Access-Control-Allow-Headers', '*');
    try {
        console.log(request.body);
        const userName = request.body.UserName;
        //json可以发送json对象
        response.json({ message: `POST-名字username: ${userName}` });
    } catch (e) {
        response.send("POST请求异常:" + e);
        console.log('--POST请求异常：' + e);
    }
});

//all可以接收容易类型的请求get,post,put等
myAppInterface.all('/muxiInfoFrom', (request, response) => {
    console.log('--post接收From-开始');
    //设置响应头，设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //响应所有类型请求头
    response.setHeader('Access-Control-Allow-Headers', '*');
    try {
        console.log(request.body);
        const userName = request.body.UserName;
        // //设置响应 send只能发送字符串
        response.send("哈喽，你好呀--POST请求：" + userName);
    } catch (e) {
        response.send("POST请求异常:" + e);
        console.log('--POST请求异常：' + e);
    }
});
//5.监听端口，启动服务
myAppInterface.listen(8000, () => {
    console.log("我的服务启动了，8000端口监听中...");
});
//6.启动服务：当前目录boService文件夹下，右键'在集成终端中打开'，在cmd中输入node expressBoService.js运行

MongoDB数据库创建

在Express中链接数据库通常需要使用第三方库或模块来实现数据库操作。最常用的数据库操作模块是mongoose用于连接MongoDB数据库，和sequelize用于连接关系型数据库如MySQL、PostgreSQL等。

• 1、Node.js安装详细过程_安装nodejs-CSDN博客

• 2、MongoDB简介【Windows安装】

• 3、Mongoose 使用

• 4、MongoDB连接失败

• 5、MongoDB官网下载解压zip文件，按‘MongoDB简介【Windows安装】’操作
  

  image.png

• 简单举例：

  
  例子1.png
  例子2.png

• 具体创建数据库流程如下

  
  image.png
  image.png
  image.png

• 执行

  
  image.png
  image.png
  image.png

代理请求

1.使用中间件方式代理请求
2.自己编写接口转发请求

// ===============准备工作===================
//安装在根目录和自定义boService文件夹目录下都行。按住boService右键'在集成终端中打开'
//四大步骤
//1.cmd创建，初始化npm
//npm init --yes
//2.安装express框架
//npm i express
//3.创建接口
//4.终端cmd中输入node SerProxyApi.js 启动运行服务

// ================开始开发==================

// 创建express框架服务，创建简易接口数据===>根目录/boService/SerProxyApi.js

//=》1.引入express
const expressBo = require('express');
//端口号
const expressServiceHost = 8888;
//=》2.创建应用对象
const myApp = expressBo();

//=》3.使用 body-parser 中间件来解析数据
const bodyParser = require('body-parser');//设置json格式
const mycors = require('cors'); // 引入cors包，解决跨域
//这几个use（）也是中间件
myApp.use(bodyParser.urlencoded({ extended: false }));
myApp.use(bodyParser.json());
myApp.use(mycors());

//------中间件：设置全局跨域中间件
myApp.all("*", (req, res, next) => {
    console.log('---中间件---跨域设置-url:', req.url);
    res.header("Access-Control-Allow-Origin", "*");                 // 允许任意外源访问
    res.header("Access-Control-Allow-Headers", "*");        // 自定义请求首部字段，这里是通配符 设置所有类型
    res.header("Access-Control-Allow-Methods", "*");                // 允许所有请求方法
    res.header("Content-Type", "application/json;charset=utf-8");   // 设置数据返回类型为json，字符集为utf8
    console.log('---中间件---跨域设置-状态：', res.statusCode);

    if (req.method.toLowerCase() === 'options') {
        res.send(200); // 让 options 尝试快速结束请求
    } else {
        next();
    }
})

//=》4.创建路由规则
//request请求报文
//response响应报文

//====方案1===接口代理数据连接区===============》
// 先安装 http-proxy-middleware库，终端命令：npm i http-proxy-middleware
const { createProxyMiddleware } = require('http-proxy-middleware');
//------中间件：请求前中间件
myApp.use('/proxyApi', (req, res, next) => {
    console.log('---代理请求--start:', req.url);
    next();
});

// 创建代理中间件，前端发出请求 http://localhost:8888/proxyApi/banner/json
const proxy = createProxyMiddleware({
    //原完整地址：https://www.wanandroid.com/banner/json
    // target: '填写可替换“http://localhost:8888/”的域名地址',如：https://www.wanandroid.com/
    target: 'https://www.wanandroid.com/',
    changeOrigin: true,
    pathRewrite: {
        '^/proxyApi': '', // 注意这里路径重写的变化，api接口地址替换
    },
});

//------中间件：使用代理中间件
myApp.use('/proxyApi', proxy);
//=======接口代理数据连接区===============》

//====方案2===接口转发请求数据连接区===============》
// 先安装 axios库，终端命令：npm install axios
const axios = require('axios');

// 假设你想访问另一个服务器的某个POST接口
// 前端发出请求 http://localhost:8888/routeApi，json请求参数{apiRouteUrl：详细转发的请求接口地址}
myApp.post('/routeApi', async (req, res) => {
    try {
        console.log('--routeApi-请求返回开始：' + req.url);
        const routeurl = req.body.apiRouteUrl;
        console.log('--routeApi-请求开始：' + routeurl);
        // const routeurl = 'https://www.wanandroid.com/banner/json';//例子
        // 这里是你要调用的远程服务的URL和参数
        //---post请求
        // const response = await axios.post(routeurl, {
        //     username: 'exampleUser',
        //     password: 'examplePassword',
        //     // 其他你需要传递的数据...
        // });
        //---get请求
        const response = await axios.get(routeurl);

        // 处理响应数据
        if (response.status === 200) {
            const dataFromOtherServer = response.data;
            console.log('--routeApi-请求返回：' + dataFromOtherServer);
            // res.json({ success: true, data: dataFromOtherServer });
            res.json(dataFromOtherServer);
        } else {
            res.status(response.status).json({ error: 'Failed to fetch from other server' });
        }
    } catch (error) {
        console.error('Error fetching from other server:', error);
        res.status(500).json({ error: 'Internal Server Error' });
    }
});
//=======接口转发请求数据连接区===============》

// =====================普通接口区====================》

myApp.get('/muxiInfo', (request, response) => {
    console.log('--get接收-开始');
    // //设置响应 send只能发送字符串
    response.send("哈喽，你好呀--我是一条GET请求返回内容");
});

myApp.post('/muxiInfo', (request, response) => {
    console.log('--post接收-开始');
    // //设置响应头，设置允许跨域
    // response.setHeader('Access-Control-Allow-Origin', '*');
    // //响应所有类型请求头
    // response.setHeader('Access-Control-Allow-Headers', '*');
    try {
        console.log(request.body);
        const userName = request.body.UserName;
        console.log('--POST接收内容：' + userName);
        //json可以发送json对象
        response.json({ message: `POST--返回请求内容，名字: ${userName}` });
    } catch (e) {
        response.send("POST请求异常:" + e);
        console.log('--POST请求异常：' + e);
    }
});

//all可以接收容易类型的请求get,post,put等
myApp.all('/muxiInfoFrom', (request, response) => {
    console.log('--post接收From-开始' + request.url);
    try {
        console.log(request.body);
        const userName = request.body.UserName;
        // //设置响应 send只能发送字符串
        response.send("--POST请求-哈喽，你好呀--返回内容：" + userName);
    } catch (e) {
        response.send("POST请求异常:" + e);
        console.log('--POST请求异常：' + e);
    }
});
// =====================普通接口区====================》

// =====================中间件处理区====================》
// >1.放在前面意味着中间件是全局或共享的，对所有（包括/muxiInfo）路由生效。
// >2.放在post('/muxiInfo')内部作为第三个参数，则中间件只为这个特定路由服务。
// >3.若只是单纯地放在post('/muxiInfo')后面，则不直接影响该POST接口处理流程。
//------中间件：响应结束后
myApp.use((req, res, next) => {
    console.log('---中间件-代理请求end:', req.url);
    // 这里可以访问到代理请求的响应
    res.on('finish', () => {
        console.log('---中间件-响应完成:', res.statusCode);
    });
    next();
});

//------中间件：用于处理错误
myApp.use((err, req, res, next) => {
    console.error('---中间件-发生错误:', err);
    res.status(500).send('Internal Server Error' + err.message);
});
// =====================中间件处理区====================》

//=》5.监听端口，启动服务
myApp.listen(expressServiceHost, () => {
    console.log('我的服务启动了，' + expressServiceHost + '端口监听中...');
});
//=》6.启动服务：当前目录boService文件夹下，右键'在集成终端中打开'，在终端cmd中输入node SerProxyApi.js运行

同源策略

浏览器才有同源策略。在同源策略中，如果两个URL具有相同的协议（protocol），主机域名（host）和端口号（port），则它们被视为同源（origin）。

同源策略施加了以下限制：

• JavaScript 只能访问与其来源相同的页面和代码。
• DOM（文档对象模型）限制了对不同源文档的访问。
• XMLHttpRequest 和 Fetch API 限制了对不同源的 AJAX 请求。

为了允许跨域请求，可以使用一些机制，如跨域资源共享（CORS）、服务器端代理，以及JSONP等处理这个问题。

同源
同源策略与代理服务器
CORS简单请求跨域实现流程