2025 年还有前端不会 Nodejs ?
大家好,我是双越。前百度 滴滴 资深前端工程师,慕课网金牌讲师,PMP。
开始Nodejs 于 2009 年发布,现在 2025 年 8 月已经更新到 v24 版本,现在几乎所有的开放平台、云服务、Serverless 等都支持 Nodejs 。它早已经成为最热门的开发语言之一,而且随着国外对于 SSR 全栈的推广,还在继续扩展它的影响范围。
还有,如果你作为前端人员想接触 AI 开发,最便捷的方式就是使用 Nodejs 作为开发语言,学习成本最低。
接下来我试图用一篇文章,用最简单的方式,帮助各位前端开发人员入门 Nodejs ,其他它很简单。你先不要看 Nodejs 文档,你先按照我的学习方式来。
学习要求:
熟悉 JS 语法,熟悉 npm 使用熟悉 HTTP 协议,做过 ajax 请求JS runtime 运行时一段 JS 代码或其他编程代码,本质上就是一段字符串,就跟我们随便写一句话、一段话一样,都是字符串。
console.log('hello world')一段字符串能干嘛?能看,能读,能写,能复制,能粘贴。如果是富文本能设置一下颜色字体大小等...
它能被执行吗?
如果我们拷贝一段 JS 代码,穿越到 JS 语言发明之前的 90 年代(那会儿 PC 技术已经很发达了,盖茨早就世界首富了),你如何执行它?不能。
最开始 JS 代码(字符串)是在浏览器中执行的。浏览器中内置了 JS 解释器,然后你在 html 代码中通过特定的语法script标签内嵌 JS 代码,浏览器识别以后执行这段 JS 代码。
「一个语言的执行环境,我们就称为 runtime “运行时”」,没有 runtime 代码就无法被执行,就是一堆字符串,任何语言都需要 runtime 。
Nodejs 就是继浏览器以后第二个 JS 代码的 runtime 运行时。从此以后,JS 代码不只能运行在浏览器了,它还可以运行在 Nodejs 环境。而 Nodejs 可以被安装在任何操作系统中(windows mac linux 等),也就是说 JS 代码可以在任何电脑上运行,即便没有浏览器也可以运行。
现在的 JS 运行时除了浏览器、Nodejs 之外还有 Deno Bun ,这俩用途都和 Nodejs 类似,而且目前尚未全面流行,你可以先保持观察,不用深入。
安装 Nodejs 并写 demo现代前端开发都是用 npm 管理插件,用 nodejs 支持打包工具,所以你应该是安装了 nodejs 的。
如果没有安装,就下载安装一下,安装完以后打开控制台输入一下命令,可以看到 Nodejs 的版本。
node--versionnpm--version然后在控制台输入node即可进入 nodejs 环境,可输入任何 JS 代码,按ctrl+c退出
你可以创建一个.js文件,然后使用node命令来执行它。例如我在当前的src目录下创建了test.js文件
// src/test.jsfunctionfn(){ console.log('this is a test file')}
fn()然后使用node命令执行它,即可打印预期的结果
不能使用浏览器 APINodejs 运行时可以执行 JS 代码,但你不能使用浏览器 API ,因为这里根本没有浏览器
例如我在 Nodejs 环境执行alert('hello')就报错了alert is not defined即alert没有定义,Nodejs 中没有alert,只有浏览器中才有alert。
所以,JS 语法和浏览器 API 要分开来看,他俩也压根不是一个东西,只是初学者一块学习就容易混在一块。
常见的浏览器 API 还有:
DOM 操作,如documentgetElementByIdcreateElementappendChild等DOM 事件,如addEventListenerBOM 操作,如windownavigationsreen等XMLHTTPRequest,但fetch是可以在 Nodejs 中使用的Nodejs 内置的 APINodejs 不能使用浏览器 API ,这个好理解,因为不是浏览器环境。
但如果 Nodejs 只能执行 JS 语法,没有其他 API 这也不行啊。因为光有 JS 语法,写个函数、做个计算、打印个字符串等,解决不了具体的问题呀。
所以,Nodejs 也需要提供(内置)其他 API 让我们能开发具体的功能。
Nodejs 是作为一个软件安装在操作系统上的,所以 Nodejs 提供了关于操作系统的 API
新建一个文件os.js写入如下代码
// src/os.js
constos =require('os')// 和 import 语法类似
functiongetSystemInfo() {return{ platform: os.platform(), type: os.type(), architecture: os.arch(), cpuCount: os.cpus().length, cpuModel: os.cpus()[0].model, totalMemoryGB:Math.round(os.totalmem() /1024/1024/1024), hostname: os.hostname(), }}
constsystemInfo =getSystemInfo()console.log(systemInfo)然后在控制台使用node命令执行这个文件,即可打印我当前的系统信息
至此就能开始体现 Nodejs 和浏览器 JS 的区别了。你一定要注意去观察和思考这种区别,以及两者不同的用途,这个很重要。
像以上这些 OS 的信息,浏览器能获取吗?当然不能。浏览器是客户端,如果能轻松获取 OS 信息,那就是安全漏洞。而 Nodejs 是服务端或者本机,我自己获取我自己的 OS 信息,这肯定是没问题的。
获取 OS 信息这个功能不常用,这也只是一个简单的例子,接下来我们才正式开始写一些实际的功能。
文件 APINodejs 是作为一个软件安装在操作系统上的,文件是操作系统的数据组织方式,所以 Nodejs 作为服务端语言要能操作文件,如创建文件、读取文件、修改文件、删除文件、复制文件等操作。
新建一个 js 文件src/file.js写入如下代码
首先,引入fspath两个模块。其中fs就是file system文件系统,用于操作文件,path用于操作文件路径。
constfs =require('fs')constpath =require('path')然后定义文件路径,我们计划在file目录下创建data.txt文件
// 定义文件路径constfileDir = path.join(__dirname,'../file')constfilePath = path.join(fileDir,'data.txt')然后创建文件
// 功能1: 在 /file 目录下创建 data.txt 文件并写入内容functioncreateAndWriteFile() {// 确保文件目录存在,否则先目录和文件if(!fs.existsSync(fileDir)) { fs.mkdirSync(fileDir, {recursive:true})// 创建目录和文件 console.log('创建目录:', fileDir) }
// 写入文件内容 fs.writeFileSync(filePath, content,'utf8')// 写入内容console.log('文件创建成功:', filePath)console.log('写入内容:', content)}
createAndWriteFile()在控制台执行node src/file.js可以看到data.txt文件被创建出来了
然后继续写代码,读取文件内容
// 功能2: 读取文件内容function readFile() {try{ constdata= fs.readFileSync(filePath,'utf8')// 读取文件内容 console.log('读取的文件内容:',data) returndata }catch(error) { console.error('读取文件失败:', error.message) returnnull }}readFile()在控制台执行node src/file.js可以看到读取了正确的文件内容
Nodejs 还有更多文件操作的 API ,你可以咨询 AI 或让 AI 给你写出 demo
HTTP 服务Nodejs 对前端人员最大的赋能就是:可以开发服务端,可以前后端都做,可以做全栈开发。
前端主要开发 HTML CSS JS ,通过 ajax 访问服务端 API 接口获取 JSON 数据,然后渲染到页面上。
服务端开发,最主要的就是 API 接口,接收前端 ajax 请求,获取数据,最后返回数据给前端。
新建一个 js 文件src/http.js写入如下内容
引入 Nodejs 内置的http模块,用于启动 HTTP 服务通过createServer创建一个 HTTP 服务,函数内的两个参数分别代表Request和Response,这两个是 HTTP 协议的基础知识 —— 你写前端 ajax 也用得着,默认你已经熟知函数内,通过res.setHeader设置 HTTP header(前端 ajax 也需要设置 header),返回格式为 JSON函数内,通过res.end返回本次请求的内容,要返回字符串格式通过server.listen监听 3000 端口consthttp =require('http')
// 创建 HTTP 服务器constserver = http.createServer((req, res) ={// 设置响应头为 JSON 格式 res.setHeader('Content-Type','application/json')
// 创建要返回的 JSON 数据constresponse = { message:'Hello World!', time:newDate().toLocaleString(), status:'success', }
// 返回 JSON 响应 res.end(JSON.stringify(response,null,2))})
// 监听 300 端口server.listen(3000,() ={console.log('HTTP 服务器已启动,监听端口: 3000')console.log('访问地址: http://localhost:3000')})在控制台运行node src/http.js可启动本地的 HTTP 服务,并监听 3000 端口
使用浏览器访问localhost:3000可以看到服务端返回的 JSON 内容,说明 API 接口成功了
以上最简单的 get 请求,而且没有判断路由,下面再来一个稍微复杂一点的例子。
新建一个 JS 文件src/http-post.js代码如下,模拟一个创建用户的 API 接口
使用req.method可以获得前端 ajax 请求的 method ,这里规定必须是POST使用req.url可以获得前端 ajax 请求的路由,这里规定必须是/api/user使用req.on('data', (chunk) = { })可以接收到客户端传递过来的 request body 数据consthttp =require('http')
// 创建 HTTP 服务器constserver = http.createServer((req, res) ={// 设置响应头为 JSON 格式 res.setHeader('Content-Type','application/json')
// 检查是否为 POST 请求且路由为 /api/userif(req.method==='POST'&& req.url==='/api/user') { letbody =''
// 接收数据 req.on('data',(chunk) ={ body += chunk.toString() })
// 数据接收完成 req.on('end',() ={ try{ // 解析 JSON 数据 constuserData =JSON.parse(body)
// 打印接收到的数据 console.log('接收到的用户数据:', userData) console.log('userId:', userData.userId) console.log('name:', userData.name) console.log('email:', userData.email)
// TODO...
// 返回成功响应 constresponse = { status:'success', }
res.statusCode=200 res.end(JSON.stringify(response)) }catch(error) { // 如果 JSON 解析失败,返回错误 constresponse = { status:'error', message:'无效的 JSON 数据', }
res.statusCode=400 res.end(JSON.stringify(response)) } }) }else{ // 其他请求返回简单提示 constresponse = { message:'请发送 POST 请求到 /api/user', }
res.end(JSON.stringify(response)) }})
// 监听 3000 端口server.listen(3000,() ={console.log('HTTP 服务器已启动,监听端口: 3000')console.log('POST 请求地址: http://localhost:3000/api/user')})控制台运行node src/http-post.js启动服务并监听 3000 端口。
但 POST 请求我们不能直接使用浏览器访问测试,因为浏览器访问是 GET 请求。
测试 POST 请求一般有两种方式,如果你控制台支持curl命令,可以使用它来测试,在控制台运行
curl -XPOSThttp://localhost:3000/api/user \ -H "Content-Type: application/json" \ -d '{"userId": 123, "name": "张三", "email": "zhang@example.com"}'或者,你安装 Postman 然后选择 POST 输入 url 和 body 信息,点击 Send 按钮,即可得到返回结果。
至此 HTTP 服务端的基础知识其实都已经包含了
启动 HTTP 服务,监听端口Request Reponsemethodurl获取 Request body返回数据通过这些知识搞一个基础的 HTTP 服务端是完全没有问题的,都在这个范围之内。例如你想要获取 JWT token 或者设置 cookie 都可以通过操作 HTTP header 来搞定,具体可以咨询 AI ,不看文档方便。
另,以上代码中的// TODO...位置,可以把 user 数据插入到数据库,这一点后面再说。
Koa 框架在 Nodejs 刚开始流行的时候,早就有人总结了 Nodejs 作为服务端的通用能力,并且开发了框架,可以让我们更加便捷的开发 Nodejs 服务端,其中最出名的就是 express 和 koa 。
两者设计思路和使用方式都一样,而且很多年都没变,早已稳定了,我们以后者 koa 为例。
新建一个目录,执行npm init -y创建一个 package.json 文件,和做前端开发一样。
然后安装 koa 和 nodemon ,后者用于启动服务,和代码逻辑没关系,可暂时不用管
npmikoanpminodemon -D然后创建一个目录src再在里面创建一个文件index.js写入如下代码
// src/index.js
constKoa=require('koa')constapp =newKoa()
app.use(async(ctx) = { ctx.body='Hello World'})
app.listen(3000)然后在 package.json 文件加入一个命令"dev": "nodemon src/index.js"
再执行npm run dev就可以启动 nodejs 服务,用浏览器访问localhost:3000就可以看到访问结果
如果你想返回一段 JSON 怎么办?直接给ctx.body赋值一段 JSON 即可,不用考虑转换为字符串格式
如果想要支持 POST PUT 的 HTTP 请求方法,可如下修改代码
先安装npm i koa-body它可用于获取 request body 数据使用ctx.method判断 Method ,其他就很简单了constKoa=require('koa')const{ koaBody } =require('koa-body')constapp =newKoa()
app.use(koaBody())app.use(async(ctx) = {if(ctx.method==='POST') { const{ user, email } = ctx.request.body|| {} console.log('user and email ', user, email)
// 其他处理,如 await insertUserToDatabase(user, email)
ctx.body= { status:'success', user, email, } }})
app.listen(3000)启动 nodejs 服务端以后,我们使用 Postman 测试如下,而且服务端也打印了正确的结果
如果想使用路由,那就再安装 koa router
npminstall@koa/router代码如下
通过router.post即可定义method 和路由 path还可以继续扩展其他路由constKoa=require('koa')constkoaBody =require('koa-body')constRouter=require('@koa/router')
constapp =newKoa()constrouter =newRouter()
app.use(koaBody())
router.post('/api/user',(ctx) ={const{ user, email } = ctx.request.body|| {}console.log('user and email ', user, email)
// 其他处理,如 await insertUserToDatabase(user, email)
ctx.body= { status:'success', user, email, }})
// 继续扩展其他路由...
app.use(router.routes())app.use(router.allowedMethods())
app.listen(3000)至此,你已经看到 koa 是如何启动 nodejs 服务并且处理基础的请求,其他更多的 API 你可以参考文档,也可以直接咨询 AI 更方便。
只要你熟悉前端 ajax 请求和 HTTP 协议,那这些知识点基本都难不倒你。
操作数据库数据库最常见的操作就是增删改查 CRUD ,你可能之前听说过操作数据库需要专门的 SQL 语言,挺麻烦的。
其实现在做常见的 web 应用开发,基本不会使用 SQL 语句了,最常见的就是 ORM 工具,例如 Prisma
你一开始看它的文档肯定是看不懂的,而且也不需要你立刻看懂所有的,你只需要知道它是如何增删改查的就可以入门了。
下面这段代码能看懂吗?不要管它如何执行,你能看懂语意就可以,仅语意。
数据库里有一个user表(就像一个 excel 表),这一点代码中没写在user表中创建一行数据,两列name和email查询这个表中的所有数据,并打印asyncfunctionmain() {awaitprisma.user.create({ data: { name:'Alice', email:'alice@prisma.io', }, })
constallUsers =awaitprisma.user.findMany()console.dir(allUsers, {depth:null})}我想大部分人应该都能看懂这几行代码的语意,其实现代 ORM 工具操作数据库就是使用createfinedupdatedelete等这些函数进行增删改查的操作,并不是 SQL 语句。
再来个复杂一点的例子,这个不要求看懂,当然能看懂最好
数据库中有三个表userprofileposts在user表中创建一行,两列nameemail,同时:在posts表中插入一行,一列title在profile表中插入一行,一列bio查询所有user表中的数据,同时查询出posts和profile两个表的相关数据async function main() { await prisma.user.create({ data: { name:'Alice', email:'alice@prisma.io', posts: { create: {title:'Hello World'}, }, profile: { create: {bio:'I like turtles'}, }, }, })
constallUsers= await prisma.user.findMany({ include: { posts:true, profile:true, }, }) console.dir(allUsers, {depth:null})}把数据库的增删改查结合到上面 nodejs 服务端代码中,就可以开发一个基础的数据服务 API 。
调用第三方服务第三方服务一般都是 API 的形式,一般有两种调用方式,以 deepseek API 为例
第一种方式,直接发送 http 请求调用,deepseek API 文档是使用 curl 工具举例的
curl https://api.deepseek.com/chat/completions \ -H "Content-Type: application/json" \ -H "Authorization: Bearer DeepSeek API Key" \ -d '{ "model":"deepseek-chat", "messages": [ {"role":"system","content":"You are a helpful assistant."}, {"role":"user","content":"Hello!"} ], "stream":false }'其实我们可以转换为 nodejs 内置的fetch方法去请求,这是我用 AI 生成的代码
await fetch('https://api.deepseek.com/chat/completions', { method:'POST', headers: { 'Content-Type':'application/json', 'Authorization':'Bearer DeepSeek API Key'// 请替换为你的实际 API Key }, body: JSON.stringify({ model:"deepseek-chat", messages: [ {role:"system",content:"You are a helpful assistant."}, {role:"user",content:"Hello!"} ], stream:false }) 第二种方式,有的第三方开放平台会开发一个 npm 插件,让你直接安装并调用它的方法。例如调用 deepseek API 可以安装 openai
npmiopenai然后直接引入并调用它的方法即可。其实它背后也是发送 HTTP 请求,不过它封装了。
// Please install OpenAI SDK first: `npm install openai`
importOpenAIfrom"openai";
constopenai =newOpenAI({ baseURL:'https://api.deepseek.com', apiKey:'DeepSeek API Key'});
asyncfunctionmain() {constcompletion =awaitopenai.chat.completions.create({ messages: [{role:"system",content:"You are a helpful assistant."}], model:"deepseek-chat",
console.log(completion.choices[0].message.content);}
main();把调用 deepseek API 结合到上面 nodejs 服务端代码中,就可以开发一个自己的 AI 接口服务。
AI编程资讯AI Coding专区指南:
https://aicoding.juejin.cn/aicoding
点击"阅读原文"了解详情~
阅读原文
网站开发网络凭借多年的网站建设经验,坚持以“帮助中小企业实现网络营销化”为宗旨,累计为4000多家客户提供品质建站服务,得到了客户的一致好评。如果您有网站建设、网站改版、域名注册、主机空间、手机网站建设、网站备案等方面的需求...
请立即点击咨询我们或拨打咨询热线:13245491521 13245491521 ,我们会详细为你一一解答你心中的疑难。 项目经理在线