如何做网站的伪静态页面,类似头条的网站怎么做,国外域名绑定国内服务器,外贸网站建设平台优化营销推广前言
在正式开始之前#xff0c;需要先知道用到的东西#xff1a;
koa#xff1a;Koa 是一个基于 Node.js 的 Web 应用框架#xff0c;非常适合开发API服务#xff0c;可以与前端框架#xff08;如 Vue.js、React.js#xff09;结合使用#xff0c;实现前后端分离的开…前言
在正式开始之前需要先知道用到的东西
koaKoa 是一个基于 Node.js 的 Web 应用框架非常适合开发API服务可以与前端框架如 Vue.js、React.js结合使用实现前后端分离的开发模式。koa-router是一个用于在 Koa 框架中实现路由功能的模块。koa-body是一个用于 Koa 框架的中间件它主要用于处理 HTTP 请求中的请求体。
文档 Koa中文文档 koa-router NPM koa-router API koa-body NPM Koa 是一个基于 Node.js 的 Web 应用框架由 Express 原班人马打造。 Koa 并没有捆绑任何中间件而是提供了一套优雅的方法帮助开发者快速地编写服务端应用程序。
项目初始化
创建一个文件夹ko2-mongodb
打开文件夹初始化项目生成一个package.json 文件
npm init -y这个命令会自动创建一个 package.json 文件该文件是 Node.js 项目的配置文件包含了项目的名称、版本、依赖项、脚本等重要信息。 通过 -y或 --yes参数命令会自动使用默认值填充 package.json无需手动回答一系列问题。
如果需要在本地git仓库对项目版本做管理可以初始化git
git init在项目根目录下新建一个.gitignore文件让项目的某些文件不要提交到git仓库
node_modules项目搭建
安装Koa框架
npm install koa安装成功在package.json中会显示依赖信息
创建src/main.js编写代码
// 导入koa koa是一个类
const Koa require(koa)// 创建koa实例对象app
const app new Koa()// 使用 app.use() 方法添加中间件,且只能写一个中间件
// 注意app.use 只能接收函数作为参数
app.use((ctx, next) {// 中间件逻辑ctx.body hello Koa!
});// 指定端口号并启动服务器
const port 3000 // 表示服务器将监听的端口号
app.listen(port, () {console.log(server is running on http://localhost:3000)
})app.use()用于向应用添加中间件 语法 app.use(middleware) middleware 是一个函数它接收两个参数 ctx上下文对象和 next一个函数用于调用下一个中间件。ctx 包含了请求和响应的信息可以通过它访问请求对象 ctx.request 和响应对象 ctx.response。例如在中间件中修改 ctx.body 来设置响应内容或者通过 ctx.params 获取路由参数等。next 函数用于调用下一个中间件。当在一个中间件中调用 next() 时Koa 会暂停当前中间件的执行将请求传递给下一个中间件。当后续的中间件都执行完毕后Koa 会回溯回来继续执行当前中间件中 next() 之后的代码。 如果 app.use 接收到的 middleware 不是函数执行运行命令后在终端会报错 app.listen()用于启动服务器并在指定的端口上监听传入的连接。 调用这个方法后服务器开始在指定的端口上监听传入的 HTTP 请求。当有请求到达时Koa 会根据注册的中间件依次处理请求并生成响应返回给客户端。语法app.listen(port, [hostname], [backlog], [callback]) port必选参数服务器要监听的端口号。hostname可选参数服务器要监听的主机名。默认是 0.0.0.0表示监听所有的网络接口。backlog可选参数指定连接队列的最大长度。默认是 511。callback可选参数服务器启动后要执行的回调函数。如果提供了回调函数它会在服务器成功启动后被调用。这个回调函数通常用于输出一些启动成功的信息或者执行其他初始化操作。 在终端执行指令启动服务
node src/main.js在这个例子中main.js 文件中使用了 Koa 框架创建了一个服务器设置一个简单的中间件并设置了服务器监听的端口为 3000执行node src/main.js指令后服务器就会在本地的 3000 端口上运行当有请求到达时会返回 hello Koa! 作为响应内容。
命令行终端输出
按住CTRL单击可以打开链接http://localhost:3000
node src/main.js用于使用 Node.js 运行位于 src目录下的 main.js文件。 这条指令的作用通常是启动一个基于 Node.js 的应用程序。如果 main.js 文件中包含了服务器的设置、路由定义、中间件的使用等代码执行这个指令后就会启动相应的服务可能是一个 Web 服务器、API 服务或者其他类型的后端服务。
注意 修改main.js后必须停掉服务重新执行node src/main.js刷新页面页面才会更新
所以在实际项目中是不会使用node命令来直接启动的。
现在项目的目录结构如下图所示
配置项目自动重启
安装nodemon
npm i nodemon -D安装完毕后配置package.json:
scripts: {dev: nodemon ./src/main.js,
},接下来就可以执行npm run dev启动服务 执行命令npm run dev本质上是使用 nodemon 来监控文件变化并自动重启服务器。
[nodemon] 3.1.7表示正在使用的 nodemon 版本是 3.1.7。[nodemon] to restart at any time, enter rs表示可以在任何时候输入 rs 来手动重启 nodemon。nodemon 正在监控的路径和文件扩展名[nodemon] watching path(s): *.* 和 [nodemon] watching extensions: js,mjs,cjs,json表示 nodemon 正在监控所有路径下的 .js、.mjs、.cjs 和 .json 文件。nodemon 启动服务器的命令[nodemon] starting node./src/main.js表示 nodemon 正在启动 node 进程来执行 ./src/main.js 文件。
服务器成功启动并输出了 server is running on http://localhost:3000表示服务器正在监听本地的 3000 端口。
读取配置文件
dotenv一个用于读取 Node 环境变量的工具库。 dotenv 是一个 npm 包用于加载 .env 文件中定义的环境变量赋值给到 process.env 中。 process.env 是 Node.js 程序在运行时能访问到的一个全部变量存储环境变量信息。 dotenv 中文网 dotenv 安装dotenv
npm install dotenv -D在项目的根目录下创建一个 .env 文件
APP_PORT8080创建config/config.env.js文件
// 引入dotenv注意dotenv 是一个对象
const dotenv require(dotenv)
dotenv.config()// 将当前进程的环境变量对象 process.env 导出
// process: 当前执行的node的进程
// env: 环境变量
module.exports process.envconst dotenv require(dotenv)这行代码引入了 dotenv 模块。dotenv 是一个用于在 Node.js 应用中加载环境变量的模块。 dotenv.config()调用 dotenv.config() 方法来加载环境变量配置文件。
通常这个方法会查找项目根目录下的 .env 文件并将其中定义的环境变量加载到前进程的 process.env 对象中。环境变量可以在应用中通过 process.env.VARIABLE_NAME 的方式来访问。
module.exports process.env这里将当前进程的环境变量对象 process.env 导出。这样其他模块在引入这个模块时就可以直接访问当前进程的环境变量。
改写main.js
// 导入koa koa是一个类
const Koa require(koa)const { APP_PORT } require(./config/config.env)// 创建koa实例对象app
const app new Koa()// 使用 app.use() 方法添加中间件,且只能写一个中间件
app.use((ctx, next) {console.log(Request received: ${ctx.request.method} ${ctx.request.url});// 中间件逻辑ctx.body hello Koa!
});// 指定端口号并启动服务器
app.listen(APP_PORT, () {console.log(server is running on http://localhost:${APP_PORT})
})执行npm run dev启动服务 按住CTRL单击打开链接http://localhost:8080
项目的目录结构如下图所示
