JavaScript开发中的常用代码参考
时间:2022-07-24
本文章向大家介绍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();
- WCF技术剖析之二十一: WCF基本的异常处理模式[上篇]
- 树大招风:细数2017年加密货币市场的幺蛾子事件
- 如何解决HP QC(Quality Center)在Windows 7下不能工作的问题
- WCF技术剖析之二十二: 深入剖析WCF底层异常处理框架实现原理[上篇]
- 5个典型实例启发:什么是数据可视化
- 智能家居“智商”不够,能靠情商来补吗
- 大话MVP
- AngularJS in Action读书笔记1——扫平一揽子专业术语
- MS Enterprise Library 5.0发布!!
- WCF技术剖析之二十二: 深入剖析WCF底层异常处理框架实现原理[中篇]
- 《Enterprise Library深入解析与灵活应用》博文系列汇总
- 使命必达: 深入剖析WCF的可靠会话[概念篇]
- AngularJS in Action读书笔记2——view和controller的那些事儿
- WCF技术剖析之二十一:WCF基本异常处理模式[中篇]
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法