머리말
- vue를 사용하여 프런트 엔드 페이지를 빌드하고 노드를 사용하여 백엔드 인터페이스를 개발하고 데이터베이스에 mysql을 사용하십시오.
타당성 분석
- 결점:
- Nodejs는 단일 스레드이며 CPU 집약적인 작업을 수행할 수 없으므로 시간 조각이 해제되지 않고 후속 작업이 차단됩니다.
- nodejs의 신뢰도는 상대적으로 낮고, 한 곳에서 보고된 오류는 전체 프로그램이 충돌하는 원인이 되므로 데몬 프로세스나 도커를 다시 시작하여 해결해야 합니다.
- 예를 들어 멀티 코어 성능을 사용하는 경우 클러스터를 사용하거나 여러 인스턴스를 배포해야 하므로 번거롭습니다.
- 메모리는 기본적으로 0.7G 및 1.4G로 설정됩니다. 설정이 크면 가비지 수집 속도가 느려지고 여러 인스턴스를 더 배포해야 할 수 있습니다.
- 이점:
- nodejs의 기본 비동기 io는 성능이 더 좋습니다.
- 스레딩 걱정 없이 쓰세요.
- 개발 속도가 빠르고 약한 유형의 언어가 더 유연하며 강력한 유형과 같이 다양한 변환이 필요하지 않으며 코드 양이 적습니다.
- 단일 페이지 응용 프로그램 ssr이 더 편리하고 컨텍스트가 동일합니다.
- nodejs 서비스 보안에 대한 몇 가지 고려 사항
지식 비축
- Node.js : Google의 V8 엔진을 기반으로 하는 이벤트 기반 I/O 서버 측 JavaScript 환경입니다. 간단히 말해 Node.js 는 서버 측에서 실행되는 JavaScript입니다.
- express : 간결하고 유연한 node.js 웹 애플리케이션 프레임워크로, 다양한 웹 애플리케이션과 풍부한 HTTP 도구를 만드는 데 도움이 되는 일련의 강력한 기능을 제공합니다. Express를 사용하여 완벽하게 작동하는 웹 사이트를 빠르게 구축하십시오.
다음은 익스프레스 프레임워크와 함께 설치해야 하는 몇 가지 공통 모듈입니다.
- body-parser : JSON, Raw, Text 및 URL 인코딩 데이터를 처리하기 위한 node.js 미들웨어.
- cookie-parser : 쿠키를 구문 분석하는 도구입니다. req.cookies를 통해 전달된 쿠키를 가져와 객체로 변환할 수 있습니다.
- cookie-session: 세션 내용을 설정할 수 있는 세션 관리 도구
- multer : enctype="multipart/form-data"로 양식 데이터를 처리하기 위한 Node.js 미들웨어(양식의 MIME 인코딩 설정).
프로젝트 빌드
이 부분 은 vue+node 프런트엔드 및 백엔드 분리 인터페이스 호출을 직접 참조합니다 (초보자).
리노베이션에 대해
일반 Vue 프로젝트 수정 제안:
- 프런트 엔드 교차 도메인 구성
//vue.config.js
//定义常量
const NODEJS_SERVE_PREFIX = "/nserve" //Nodejs服务路径前缀标识
module.exports = {
// 关闭检查
lintOnSave: false,
// 免提取CSS 文件，强制内联
css: { extract: false },
// // 在exports中添加，这里很关键，不配置不行
transpileDependencies: ['element-ui'],
chainWebpack(config) {
// 在chainWebpack中添加下面的代码
config.entry('main').add('babel-polyfill') // main是入口js文件
},
//》》》开发阶段跨域配置看这里
devServer: {
overlay: { // 让浏览器 overlay 同时显示警告和错误
warnings: true,
errors: true
},
host: "localhost", //默认请求-主机地址
port: 8888, // 默认请求-端口号
https: false, // https:{type:Boolean}
open: false, //配置自动启动浏览器
hotOnly: true, // 热更新
// proxy: 'http://localhost:3333' // 配置跨域处理,只有一个代理
proxy: { //配置多个跨域
NODEJS_SERVE_PREFIX: {
target: "http://localhost:3333",//你的NodeJS服务监听端口
changeOrigin: true,
// ws: true,//websocket支持
secure: false,
pathRewrite: {
'^/nserve': '/nserve' //此处不写也可以，看你实际情况
}
}
}
}
}
약간의 알림: 위와 같이 크로스 도메인 구성은 일반적으로 개발 단계(즉, 로컬)에서 크로스 도메인을 의미하며 온라인 구성은 Node.js 등을 통해 이루어집니다.
- 관련 종속성 등록
npm i mysql -s
npm i express -s
npm i body-parser -s
npm i cookie-parser -s
npm i cookie-session -s- 주로 MySQL 연결 구성, 서비스 인터페이스 구성(인터페이스 경로 매핑 + 호출 및 반환 처리 등)을 포함하여 익스프레스 프레임워크를 사용하여 대화형 서비스의 특정 콘텐츠를 담당하는 JS를 정의합니다.
// nodeServe.js
//引入服务包
const express = require('express');
const mysql = require('mysql');
//配置MySQL连接池
const db = mysql.createPool({
host: 'localhost',
user: 'root',
password: '123456',
database: 'mydb'
});
//默认导出：定义接口
module.exports = () => {
//接口路由
const route = express.Router();
/**
* 用户接口（GET请求）
*/
route.get('/user/query', (req, res) => {
//解析请求参数
let uid = req.query.uid;
//定义SQL语句
const sql = `SELECT * FROM user WHERE uid=` + uid;
doDbQuery(sql,res)
});
/**
* 用户接口（POST请求）
*/
route.post('/user/save', (req, res) => {
let mObj = {};
for (let obj in req.body) {
mObj = JSON.parse(obj);
}
let name = mObj.name;
let age = mObj.age;
const sql = `INSERT INTO user(name,age) VALUES('${name}','${age}')`;
doDbQuery(sql, res);
});
/**
* 执行SQL
* @param insUserInfo
* @param res
*/
function doDbQuery(sql, res) {
db.query(sql, (err, data) => {
if (err) {
//失败返回
console.log(err);
res.status(500).send({ 'msg': '服务器出错', 'status': 0 }).end();
} else {
//成功返回
res.send(data);
}
});
};
return route;
}
- 주로 도메인 간 구성, 수신 포트 구성, 인터페이스 라우팅 구성(즉, 이전 단계에서 서비스 JS 처리 가져오기), 쿠키 등을 포함하여 Nodejs 서비스 시작 구성을 담당하는 JS를 정의합니다.
//nodeApplication.js
//定义常量
const NODEJS_SERVE_PREFIX = "nserve" //Nodejs服务路径前缀标识
const express = require('express');
const bodyParser = require('body-parser');
const cookieParser = require('cookie-parser');
const cookieSession = require('cookie-session');
const server = express();
server.use(bodyParser.urlencoded({ extended: false }));
//配置跨域
server.all('*', function(req, res, next) {
res.header('Access-Control-Allow-Origin', req.header("origin"));//如果设置为"*",有时候还是会出现跨域问题（说一个神奇的事，甚至出现同一个项目，在不同时间点出现了不同的结果，我也不知道为啥，明明啥也没干）
res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
if (req.method === 'OPTIONS') {
res.send(200);
/make the require of options turn back quickly/
} else {
next();
}
});
//配置NodeJS服务端口
server.listen(3333, () => {
console.log("NodeJS服务已启动 监听端口：3333");
});
//中间数据管理
(() => {
//处理cookie
server.use(cookieParser());
//处理session
let keyArr = ['1','2'];
server.use(cookieSession({
name: "hc",
keys: keyArr,
maxAge: 30 * 60 * 1000
}))
})();
//配置路由处理
server.use('/' + NODEJS_SERVE_PREFIX, require('./route/nodeServe.js')());
- VUE 페이지에서 사용됨
let _this = this
_this.$http.get('/nserve/user/query').then((res)=>{
_this.result= res.data;
},(err)=>{
console.log(err);
})시작하다
//启动NodeJS服务
node node nodeApplication.js
//启动前端
npm run serve기타 참조 문서
프로젝트 사례 참조