第三方平台网站的建设规划,wordpress询盘插件,中国有色金属价格网,邢台微商城制作设计目录
一、下载node.js及配置环境
二、搭建node.js项目及安装express框架
三、集成nodemon#xff0c;实现代码热部署
四、Express 应用程序生成器 一、下载node.js及配置环境
网上很多安装教程#xff0c;此处就不再赘述了
版本信息
C:\Users\XXXnode -v
v20.15.0…目录
一、下载node.js及配置环境
二、搭建node.js项目及安装express框架
三、集成nodemon实现代码热部署
四、Express 应用程序生成器 一、下载node.js及配置环境
网上很多安装教程此处就不再赘述了
版本信息
C:\Users\XXXnode -v
v20.15.0C:\Users\XXXnpm -v
10.7.0
了解更多npm知识npm 中文网 (nodejs.cn)
二、搭建node.js项目及安装express框架
在任意位置创建一个项目文件夹此处项目文件夹名为test文件夹路径D:\test
以管理员身份打开windows命令行工具或powershell命令行工具记住必须以管理员身份打开不要使用winR的方式或者文件夹输入cmd的方式打开否则后面安装express会失败
左下角搜索框输入命令提示符打开windows命令行工具没有安装powershell推荐使用这种方式 打开powershell命令行工具需要安装好powershell才可以打开 打开命令行进入创建的test项目文件夹 创建package.json命令行输入下列命令
npm init name 项目名称
version 项目版本号
description 项目描述信息
entry point 项目入口文件
test command 项目启动时脚本命令
git repository Git仓库地址
keywords 关键词
author 作者
一路回车键 创建test项目的文件夹出现了pakage.json文件打开查看里面的信息 安装express
npm install express --save
安装完成如果是以管理员身份打开的命令行一般不会报错 安装好了后出现下列两个文件夹 package文件内容随之改变由于程序主入口是index.js所以要创建index.js文件文件后缀必须是js 编辑index.js文件内容为了快速我们直接找到express官网打开里面的示例
Express - 基于 Node.js 平台的 web 应用开发框架 - Express中文文档 | Express中文网 (expressjs.com.cn)https://www.expressjs.com.cn/package.json |npm 文档 (npmjs.com)https://docs.npmjs.com/cli/v10/configuring-npm/package-json
复制Hello World示例 到index.js文件中 修改下打印日志的内容
const express require(express)
const app express()
const port 3000app.get(/, (req, res) {res.send(Hello World!)
})app.listen(port, () {console.log(Example app listening on http://localhost:${port})
})
运行项目输入命令node 入口文件.js 咱这边的入口文件是index.js稍微修改下
node index.js
启动成功后浏览器访问服务输入控制台输出的访问地址http://localhost:3000 到这就成功了 为了方便后续管理代码新建一个名为src文件夹将之前创建的index.js文件移入src中index.js移动到src文件夹后启动时要进入index.js的上一级文件夹再进行启动D:\test\src node index.js 三、集成nodemon实现代码热部署
不需要热部署可以不用跟着下面的步骤
安装nodemon命令行输入npm i nodemon -g 接下来开始实现热部署修改pakage.json文件修改两处main入口文件和scripts对象
main: 路径从点击进入项目的下一级开始直到index.js文件
{name: test,version: 1.0.0,description: 测试创建node项目,main: src/index.js,scripts: {test: echo \Error: no test specified\ exit 1,start:nodemon --watch src --watch config src/index.js},author: 小红,license: ISC,dependencies: {express: ^4.21.1}
}
输入npm run start启动项目终止项目ctrlC 热部署的好处在于不需要重启项目刷新浏览器即可完成代码更新如何判断是否成功热部署一是命令行绿色部分执行代码二是不重启项目修改index.js项目的内容保存后刷新浏览器查看显示内容是否变化有变化则成功修改端口则需要重启服务 四、Express 应用程序生成器
照旧第一步创建项目文件夹管理员身份进入命令行创建pakage.json文件执行npm init 通过应用生成器工具 express-generator 可以快速创建一个应用的骨架。
你可以通过 npx 包含在 Node.js 8.2.0 及更高版本中命令来运行 Express 应用程序生成器
npx express-generator 执行完npx express-generator命令就可以快速生成以下项目结构文件 由于项目结构是使用生成器生成的需要安装项目内的依赖包执行一下npm install 打开app.js原默认是index.js没有选择直接回车而是在后面输入app.js后再回车因此我的入口文件就改成了app.js可以看到文件内是没有配置端口以及启动打印的数据的在这里可以自行手动配置下app.get()或app.set()需要在var app express();后面使用
pakage.json 启动项目npm run start 没有设置打印日志是这样的 实现代码热部署
1.项目安装nodemon执行npm install nodemon --save
2.优化目录结构创建src文件夹将app.js移入 3.修改app.js文件内容app.js引用路由文件不再是同级关系二是上一级文件夹因此将.改为.. 4.修改pakage.json文件的scripts对象start的配置监听src目录 启动项目后任意修改app.js文件在浏览器上显示的内容
