Express使用
"Express"和"Spring Boot"是兩個(gè)流行的后端開(kāi)發(fā)框架擎值，分別用于JavaScript和Java語(yǔ)言慌烧。
Express.png
// ===============準(zhǔn)備工作===================
//安裝在根目錄和boService文件夾目錄下都行。按住boService右鍵'在集成終端中打開(kāi)'
//1.cmd創(chuàng)建鸠儿，初始化npm
//npm init --yes
//2.安裝express框架
//npm i express
//3.創(chuàng)建接口
// ==================================
// 創(chuàng)建express框架服務(wù)屹蚊，創(chuàng)建簡(jiǎn)易接口數(shù)據(jù)===>根目錄/boService/expressBoService.js
//1.引入express
const expressBo = require('express');
//2.創(chuàng)建應(yīng)用對(duì)象
const myAppInterface = expressBo();
//3.使用 body-parser 中間件來(lái)解析數(shù)據(jù)
const bodyParser = require('body-parser');//設(shè)置json格式
const mycors = require('cors'); // 引入cors包，解決跨域
myAppInterface.use(bodyParser.urlencoded({ extended: false }));
myAppInterface.use(bodyParser.json());
myAppInterface.use(mycors());
//4.創(chuàng)建路由規(guī)則
//request請(qǐng)求報(bào)文
//response響應(yīng)報(bào)文
myAppInterface.get('/muxiInfo', (request, response) => {
console.log('--get接收-開(kāi)始');
//設(shè)置響應(yīng)頭进每，設(shè)置允許跨域
response.setHeader('Access-Control-Allow-Origin', '*');
// //設(shè)置響應(yīng) send只能發(fā)送字符串
response.send("哈嘍淑翼，你好呀--GET請(qǐng)求");
});
myAppInterface.post('/muxiInfo', (request, response) => {
console.log('--post接收-開(kāi)始');
//設(shè)置響應(yīng)頭，設(shè)置允許跨域
response.setHeader('Access-Control-Allow-Origin', '*');
//響應(yīng)所有類(lèi)型請(qǐng)求頭
response.setHeader('Access-Control-Allow-Headers', '*');
try {
console.log(request.body);
const userName = request.body.UserName;
//json可以發(fā)送json對(duì)象
response.json({ message: `POST-名字username: ${userName}` });
} catch (e) {
response.send("POST請(qǐng)求異常:" + e);
console.log('--POST請(qǐng)求異常：' + e);
}
});
//all可以接收容易類(lèi)型的請(qǐng)求get,post,put等
myAppInterface.all('/muxiInfoFrom', (request, response) => {
console.log('--post接收From-開(kāi)始');
//設(shè)置響應(yīng)頭品追，設(shè)置允許跨域
response.setHeader('Access-Control-Allow-Origin', '*');
//響應(yīng)所有類(lèi)型請(qǐng)求頭
response.setHeader('Access-Control-Allow-Headers', '*');
try {
console.log(request.body);
const userName = request.body.UserName;
// //設(shè)置響應(yīng) send只能發(fā)送字符串
response.send("哈嘍，你好呀--POST請(qǐng)求：" + userName);
} catch (e) {
response.send("POST請(qǐng)求異常:" + e);
console.log('--POST請(qǐng)求異常：' + e);
}
});
//5.監(jiān)聽(tīng)端口冯丙，啟動(dòng)服務(wù)
myAppInterface.listen(8000, () => {
console.log("我的服務(wù)啟動(dòng)了肉瓦，8000端口監(jiān)聽(tīng)中...");
});
//6.啟動(dòng)服務(wù)：當(dāng)前目錄boService文件夾下，右鍵'在集成終端中打開(kāi)'胃惜，在cmd中輸入node expressBoService.js運(yùn)行
MongoDB數(shù)據(jù)庫(kù)創(chuàng)建
在Express中鏈接數(shù)據(jù)庫(kù)通常需要使用第三方庫(kù)或模塊來(lái)實(shí)現(xiàn)數(shù)據(jù)庫(kù)操作泞莉。最常用的數(shù)據(jù)庫(kù)操作模塊是mongoose用于連接MongoDB數(shù)據(jù)庫(kù)，和sequelize用于連接關(guān)系型數(shù)據(jù)庫(kù)如MySQL船殉、PostgreSQL等鲫趁。
-
5、MongoDB官網(wǎng)下載解壓zip文件疫剃，按‘MongoDB簡(jiǎn)介【W(wǎng)indows安裝】’操作
image.png -
簡(jiǎn)單舉例：
例子1.png
例子2.png -
具體創(chuàng)建數(shù)據(jù)庫(kù)流程如下
image.png
image.png
image.png -
執(zhí)行
image.png
image.png
image.png
代理請(qǐng)求
1.使用中間件方式代理請(qǐng)求
2.自己編寫(xiě)接口轉(zhuǎn)發(fā)請(qǐng)求
// ===============準(zhǔn)備工作===================
//安裝在根目錄和自定義boService文件夾目錄下都行钉疫。按住boService右鍵'在集成終端中打開(kāi)'
//四大步驟
//1.cmd創(chuàng)建，初始化npm
//npm init --yes
//2.安裝express框架
//npm i express
//3.創(chuàng)建接口
//4.終端cmd中輸入node SerProxyApi.js 啟動(dòng)運(yùn)行服務(wù)
// ================開(kāi)始開(kāi)發(fā)==================
// 創(chuàng)建express框架服務(wù)巢价，創(chuàng)建簡(jiǎn)易接口數(shù)據(jù)===>根目錄/boService/SerProxyApi.js
//=》1.引入express
const expressBo = require('express');
//端口號(hào)
const expressServiceHost = 8888;
//=》2.創(chuàng)建應(yīng)用對(duì)象
const myApp = expressBo();
//=》3.使用 body-parser 中間件來(lái)解析數(shù)據(jù)
const bodyParser = require('body-parser');//設(shè)置json格式
const mycors = require('cors'); // 引入cors包牲阁，解決跨域
//這幾個(gè)use（）也是中間件
myApp.use(bodyParser.urlencoded({ extended: false }));
myApp.use(bodyParser.json());
myApp.use(mycors());
//------中間件：設(shè)置全局跨域中間件
myApp.all("*", (req, res, next) => {
console.log('---中間件---跨域設(shè)置-url:', req.url);
res.header("Access-Control-Allow-Origin", "*"); // 允許任意外源訪問(wèn)
res.header("Access-Control-Allow-Headers", "*"); // 自定義請(qǐng)求首部字段，這里是通配符 設(shè)置所有類(lèi)型
res.header("Access-Control-Allow-Methods", "*"); // 允許所有請(qǐng)求方法
res.header("Content-Type", "application/json;charset=utf-8"); // 設(shè)置數(shù)據(jù)返回類(lèi)型為json壤躲，字符集為utf8
console.log('---中間件---跨域設(shè)置-狀態(tài)：', res.statusCode);
if (req.method.toLowerCase() === 'options') {
res.send(200); // 讓 options 嘗試快速結(jié)束請(qǐng)求
} else {
next();
}
})
//=》4.創(chuàng)建路由規(guī)則
//request請(qǐng)求報(bào)文
//response響應(yīng)報(bào)文
//====方案1===接口代理數(shù)據(jù)連接區(qū)===============》
// 先安裝 http-proxy-middleware庫(kù)城菊，終端命令：npm i http-proxy-middleware
const { createProxyMiddleware } = require('http-proxy-middleware');
//------中間件：請(qǐng)求前中間件
myApp.use('/proxyApi', (req, res, next) => {
console.log('---代理請(qǐng)求--start:', req.url);
next();
});
// 創(chuàng)建代理中間件，前端發(fā)出請(qǐng)求 http://localhost:8888/proxyApi/banner/json
const proxy = createProxyMiddleware({
//原完整地址：https://www.wanandroid.com/banner/json
// target: '填寫(xiě)可替換“http://localhost:8888/”的域名地址',如：https://www.wanandroid.com/
target: 'https://www.wanandroid.com/',
changeOrigin: true,
pathRewrite: {
'^/proxyApi': '', // 注意這里路徑重寫(xiě)的變化碉克，api接口地址替換
},
});
//------中間件：使用代理中間件
myApp.use('/proxyApi', proxy);
//=======接口代理數(shù)據(jù)連接區(qū)===============》
//====方案2===接口轉(zhuǎn)發(fā)請(qǐng)求數(shù)據(jù)連接區(qū)===============》
// 先安裝 axios庫(kù)凌唬，終端命令：npm install axios
const axios = require('axios');
// 假設(shè)你想訪問(wèn)另一個(gè)服務(wù)器的某個(gè)POST接口
// 前端發(fā)出請(qǐng)求 http://localhost:8888/routeApi，json請(qǐng)求參數(shù){apiRouteUrl：詳細(xì)轉(zhuǎn)發(fā)的請(qǐng)求接口地址}
myApp.post('/routeApi', async (req, res) => {
try {
console.log('--routeApi-請(qǐng)求返回開(kāi)始：' + req.url);
const routeurl = req.body.apiRouteUrl;
console.log('--routeApi-請(qǐng)求開(kāi)始：' + routeurl);
// const routeurl = 'https://www.wanandroid.com/banner/json';//例子
// 這里是你要調(diào)用的遠(yuǎn)程服務(wù)的URL和參數(shù)
//---post請(qǐng)求
// const response = await axios.post(routeurl, {
// username: 'exampleUser',
// password: 'examplePassword',
// // 其他你需要傳遞的數(shù)據(jù)...
// });
//---get請(qǐng)求
const response = await axios.get(routeurl);
// 處理響應(yīng)數(shù)據(jù)
if (response.status === 200) {
const dataFromOtherServer = response.data;
console.log('--routeApi-請(qǐng)求返回：' + 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' });
}
});
//=======接口轉(zhuǎn)發(fā)請(qǐng)求數(shù)據(jù)連接區(qū)===============》
// =====================普通接口區(qū)====================》
myApp.get('/muxiInfo', (request, response) => {
console.log('--get接收-開(kāi)始');
// //設(shè)置響應(yīng) send只能發(fā)送字符串
response.send("哈嘍棉胀，你好呀--我是一條GET請(qǐng)求返回內(nèi)容");
});
myApp.post('/muxiInfo', (request, response) => {
console.log('--post接收-開(kāi)始');
// //設(shè)置響應(yīng)頭法瑟，設(shè)置允許跨域
// response.setHeader('Access-Control-Allow-Origin', '*');
// //響應(yīng)所有類(lèi)型請(qǐng)求頭
// response.setHeader('Access-Control-Allow-Headers', '*');
try {
console.log(request.body);
const userName = request.body.UserName;
console.log('--POST接收內(nèi)容：' + userName);
//json可以發(fā)送json對(duì)象
response.json({ message: `POST--返回請(qǐng)求內(nèi)容，名字: ${userName}` });
} catch (e) {
response.send("POST請(qǐng)求異常:" + e);
console.log('--POST請(qǐng)求異常：' + e);
}
});
//all可以接收容易類(lèi)型的請(qǐng)求get,post,put等
myApp.all('/muxiInfoFrom', (request, response) => {
console.log('--post接收From-開(kāi)始' + request.url);
try {
console.log(request.body);
const userName = request.body.UserName;
// //設(shè)置響應(yīng) send只能發(fā)送字符串
response.send("--POST請(qǐng)求-哈嘍唁奢，你好呀--返回內(nèi)容：" + userName);
} catch (e) {
response.send("POST請(qǐng)求異常:" + e);
console.log('--POST請(qǐng)求異常：' + e);
}
});
// =====================普通接口區(qū)====================》
// =====================中間件處理區(qū)====================》
// >1.放在前面意味著中間件是全局或共享的霎挟，對(duì)所有（包括/muxiInfo）路由生效。
// >2.放在post('/muxiInfo')內(nèi)部作為第三個(gè)參數(shù)麻掸，則中間件只為這個(gè)特定路由服務(wù)酥夭。
// >3.若只是單純地放在post('/muxiInfo')后面，則不直接影響該P(yáng)OST接口處理流程脊奋。
//------中間件：響應(yīng)結(jié)束后
myApp.use((req, res, next) => {
console.log('---中間件-代理請(qǐng)求end:', req.url);
// 這里可以訪問(wèn)到代理請(qǐng)求的響應(yīng)
res.on('finish', () => {
console.log('---中間件-響應(yīng)完成:', res.statusCode);
});
next();
});
//------中間件：用于處理錯(cuò)誤
myApp.use((err, req, res, next) => {
console.error('---中間件-發(fā)生錯(cuò)誤:', err);
res.status(500).send('Internal Server Error' + err.message);
});
// =====================中間件處理區(qū)====================》
//=》5.監(jiān)聽(tīng)端口熬北，啟動(dòng)服務(wù)
myApp.listen(expressServiceHost, () => {
console.log('我的服務(wù)啟動(dòng)了，' + expressServiceHost + '端口監(jiān)聽(tīng)中...');
});
//=》6.啟動(dòng)服務(wù)：當(dāng)前目錄boService文件夾下诚隙，右鍵'在集成終端中打開(kāi)'讶隐，在終端cmd中輸入node SerProxyApi.js運(yùn)行
同源策略
瀏覽器才有同源策略。在同源策略中久又，如果兩個(gè)URL具有相同的協(xié)議（protocol）巫延，主機(jī)域名（host）和端口號(hào)（port），則它們被視為同源（origin）地消。
同源策略施加了以下限制：
- JavaScript 只能訪問(wèn)與其來(lái)源相同的頁(yè)面和代碼炉峰。
- DOM（文檔對(duì)象模型）限制了對(duì)不同源文檔的訪問(wèn)。
- XMLHttpRequest 和 Fetch API 限制了對(duì)不同源的 AJAX 請(qǐng)求脉执。
為了允許跨域請(qǐng)求疼阔，可以使用一些機(jī)制，如跨域資源共享（CORS）、服務(wù)器端代理婆廊，以及JSONP等處理這個(gè)問(wèn)題迅细。
同源
同源策略與代理服務(wù)器
CORS簡(jiǎn)單請(qǐng)求跨域?qū)崿F(xiàn)流程
