node+express开发之项目初始化

Express 是一个用于 Node.js 的快速、不拘一格、极简主义的 Web 框架。express-generator快速生成器，可以使我们快速搭建项目，就像vue的脚手架一样，为我们节省了一些项目配置的时间。

使用express

1、创建文件目录并初始化，npm init

2、下载express npm i express

3、创建app.js,引用express并运行

const express = require('express');
const app = express(); 
const port = 3000; 
app.get('/', (req, res) => { 
    res.send('Hello World!') 
}) 

app.listen(port, () => { 
    console.log(`服务端口${port}已运行`) 
})

4、运行文件 node app.js

5、浏览器访问 localhost:3000

使用express-generator

1、全局下载 npm i -g express-generator

2、创建项目 express --view=<engine> myapp

engine:视图引擎，编写前端页面的模板语法，值集有ejs|hbs|hjs|jade|pug|twig|vash

3、进入目录，并下载依赖 cd myapp | npm install

目录结构：

├── app.js              //
├── bin 
│ └── www               //入口文件
├── package.json 
├── public              //静态文件夹目录
│ ├── images 
│ ├── javascripts
│ └── stylesheets 
│ └── style.css 
├── routes              //路由
│ ├── index.js 
│ └── users.js 
└── views              //前端页面
  ├── error.pug 
  ├── index.pug 
  └── layout.pug

app.js文件内容

var createError = require("http-errors");
var express = require("express");
var path = require("path");
var cookieParser = require("cookie-parser"); //处理cookie的中间件
var logger = require("morgan");   //日志记录
const cors = require("cors");     //解决跨域的中间件

var indexRouter = require("./routes/index"); //路由文件

var app = express();

// view engine setup
app.set("views", path.join(__dirname, "views"));
app.set("view engine", "jade");

app.use(logger("dev"));
app.use(express.json());  //将JSON格式的请求体解析为js对象，通过req.body可访问
app.use(express.urlencoded({ extended: false }));//解析URL 编码格式的请求体数据，将其转换为 JavaScript 对象，并将其赋值给 req.body。

app.use(cookieParser());
app.use(express.static(path.join(__dirname, "public"))); //设置静态文件目录

app.use(
  cors({
    origin: ["http://127.0.0.1:8081"], //允许跨域的地址
  })
);
app.use("/", indexRouter);

// 404页面处理
app.use(function (req, res, next) {
  next(createError(404));
});

// 错误处理中间件
app.use(function (err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get("env") === "development" ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render("error");
});

module.exports = app;

app.use([path,]callback[,callback])方法，在指定路径挂载指定的中间件函数或函数,path默认值为/，当path使用默认值时，对于应用程序的每个请求，都会执行没有路径挂载的中间件

使用nodemon

使用node启用服务时，修改文件后就需要重新启动，使用nodemon执行文件，就不需要频繁的启用服务，nodemon会监听源码改动，并自动重启服务

1、全局安装 npm install -g nodemon

2、运行文件 nodemon app.js

实现跨域

方法一：直接配置响应头信息

app.use((req: Request, res: Response, next) => { 
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'GET, POST');
    res.header('Access-Control-Allow-Headers',  'ContentType,Authorization,Content-Length, X-Requested-With'); 
    next(); 
 });

这样做允许任何源都可以访问，不安全

方法二：使用中间件 cors

1、下载中间件 npm i cors

2、使用中间件

const cors = require("cors");
const app = express();
app.use(
  cors({
    origin: ["http://127.0.0.1:8081"],//指定可访问的客户端地址
  })
);