JavaScript开发中的常用代码参考

前言

此文记录项目开发中的通用代码块及编码方法的总结。

一个最简单的服务器框架（NodeJS）

// 导入模块 （yarn add express 或 npm i express 安装）
const express = require("express");
// 实例化对象
const app = express();
// 定义端口号
const port = 3000;
// 设置路由
/**
 * 当访问根路径时返回Hello World
 */
app.get("/", (req, res) => res.send("Hello World!"));
// 监听端口
app.listen(port, () =>
  console.log(`Server running at  http://127.0.0.1:${port}`)
);

当服务器创建完成后，通过node server.js进行启动服务器。

静态目录

所谓静态目录就是暴露出一个静态目录，常用于静态资源的引用。

app.use(express.static(__dirname + "/public"));

设置请求头

使用all方法表示所有请求都必须先通过此该中间件。

须放在请求路由之前，如果放在逻辑路由后，会导致无法设置成功。

app.all("*", (req, res, next) => {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Credentials", true);
    res.header(
        "Access-Control-Allow-Headers",
        "Content-Type,Content-Length,Authorization,Accept,X-Requested-With"
    );
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    next();
});

cookie-session插件的使用

使用此插件主要是为了保持会话。

// 引入cookie-session模块（yarn add cookie-session 或 npm i cookie-session 安装）
const cookieSession = require("cookie-session");
// 为cookieSession设置属性
app.use(
  cookieSession({
    // 建立cookie的名字
    name: "JDCJ",
    // 设置session 的key
    // 是个数组 每一次请求会循环去一个数值进行加密
    keys: ["123", "456", "xiaokang"],
    // 过期事件 24小时过期
    maxAge: 24 * 69 * 60 * 1000,
  })
);
app.get("/cookie", (req, res) => {
  // 设置Cookie
  req.session.id = 1;
  res.send("已建立ID");
});

清楚Cookie只需将其设置为null即可。

req.session.id = null;

模板引擎的使用

服务器逻辑

// 设置模板（视图）存放目录
app.set("views", "./views");
// 设置模板引擎
app.set("view engine", "pug");
// 渲染模板引擎
app.get("/pug", (req, res) => {
  res.render("index", { title: "Hey", message: "Hello there!" });
});

视图文件index

html
  head
    title= title
  body
    h1= message

请求参数获取（GET/POST）

GET

get请求可以直接获取参数，通过req.query即可。

app.get("/get", (req, res) => {
  console.log("query: ", req.query);
  console.log("id:", req.query.id);
  res.send(req.query);
});

POST

post请求的参数不可以直接获取，需要使用body-parser模块进行解析。

关于body-parser更多使用参考：github

// 引入解析模块
const bodyParser = require("body-parser");


// 解析urlencoded请求体
app.use(bodyParser.urlencoded({ extended: false }));

// 解析JSON请求体
app.use(bodyParser.json());



// 获取POST请求参数
app.post("/post", (req, res) => {
  console.log(req.body);
  res.send(req.body);
});

通过工具方法异步获取/读取文件内容

此场景应用于：需要读取一个文件，其内容需要被某个功能使用，可以将其在程序运行时读取，然后附加到request请求上。例如如下：

let utils = require("./utils");
app.use(async function (req, res, next) {
  // 读取用户数据
  req.userData = await utils.readFile("user.json");
  next();
});

async与await语法参考：async 函数

可以在工具库utils中写读取的逻辑，通过await函数等待工具库异步操作完成。

readFile(fileName) {
    return new Promise((resolve, reject) => {
        fs.readFile(__dirname + `/data/${fileName}`, "utf-8", (err, data) => {
            if (err) {
                reject(err);
                return;
            }
            data = JSON.parse(data);
            resolve(data);
        });
    });
},

导出一个模块

let utils = {
  name: "666",
  log: function () {
    console.log("logs");
    return "log";
  },
};
// 将对象导出即可
module.exports = utils;

在其他js文件只需要通过require引入这个文件即可.

const utils = require("./utils.js");

utils.log();