Front-end node.js는 Express 모듈을 사용하여 웹 서버를 빠르게 구축합니다.
앞에 작성 : 편집기 : vscode
준비 : 사용할 모듈
:
- 익스프레스 모듈 : 서버를 빠르게 구축하는 데 사용
- 모건 모듈 : 로그 모듈
- 본문 파서 모듈 : 데이터 처리 용
- 경로 모듈 : 주소 정보 처리를위한 내장 모듈
구현 프로세스 :
- 프로젝트 파일 만들기 : 여기에서 루트 디렉터리로 express-app 폴더를 만들었습니다.
- 프로젝트 디렉토리 구조 생성 : 여기서 필요한 디렉토리 만 생성했습니다.
디렉토리 구조는 다음과 같습니다 :
클릭하여 폴더에 직접 생성하거나 터미널에 express-app 폴더를 입력하고 명령을 사용할 수 있습니다. mkdir 폴더 이름 생성 방법 - 메인 모듈에 코드 작성
//引入 要使用到的模块 express morgan body-parser
const express = require("express");
const logger = require("morgan");
const bodyParser = require("body-parser");
const path = require("path");
const router = require("./routes/index");
//实例化 express
const app = express();
//使用中间件 app.use()
//设置日志以开发环境显示
app.use(logger("dev"));
//设置数据处理方式
app.use(bodyParser.json()); //处理 json 数据
app.use(bodyParser.urlencoded({
extended:false})); //处理 post 提交的数据
//设置静态资源
//express.static(" 地址 ")设置静态资源
//path.join(__dirname , "public") 动态获取服务器地址 与静态资源文件夹进行地址拼接 .join()
app.use(express.static(path.join(__dirname , "public")));
//设置路由
app.use(router);
//端口号监听
app.listen(3000 , () => {
console.log("server is running...")
});
여기서 라우팅을 설정하는 방법에는 두 가지가 있습니다. 하나는 직접 라우팅 모듈을 작성하는 것이고 다른 하나는 익스프레스를 통해 모듈을 생성하는 것입니다. 여기에서는 route / index.js 파일에
라우팅을 작성했습니다 . 라우팅 파일 : routes / index.js
//引入 express 模块
//引入 express 模块
const express = require("express");
//实例化路由
const router = express.Router();
//设置路由匹配规则
//访问 home 页面
router.get("/" , (request , response) => {
console.log("获取到的参数",request.url);//打印一下访问路径，控制台查看
response.send("欢迎来到 express 框架");
});
//暴露路由
module.exports = router;
-
정적 리소스 폴더에 리소스 추가 여기에 테스트 용 파일 몇 개를 추가했습니다.
-
이 시점에서 코드를 작성한 후 터미널에서 작업을 시작할 차례입니다.
-
현재 프로젝트의 루트 디렉토리에서
npm initinitialize를 사용 하여 package.json 문서를 생성하고 프로젝트에 대한 정보를 기록하고 전송 및 복사 게시를 용이하게합니다. 단말기에 표시된 정보에 따라 설정합니다. 물론 언제든지 Enter 키를 누를 수 있습니다. My package.json 파일은 다음과 같이 설정 한 후 다음과 같이 설정합니다. -
-
타사 모듈을 설치하려면 Taobao npm 미러 (빠른 설치 속도)를 사용했기 때문에 명령은 다음과 같습니다 .
cnpm i express morgan body-parser --save설치 성공
. 이때 package.json 파일
은 마지막에 세 개의 종속 패키지를 생성했습니다. -
다음 단계는
node app
브라우저http://127.0.0.1:3000/에 입력 된 프로젝트를 실행하여 루트
액세스 css 파일http://127.0.0.1:3000/css/base.css
액세스 js 파일http://127.0.0.1:3000/js/common.js
액세스 이미지 리소스http://127.0.0.1:3000/images/guoqing.jpg
에 액세스 할 때 생략 된 공개 주소에 액세스하는 것입니다.
이 시점에서이 간단한 프로젝트가 완료되었습니다.