企业官网建设流程全解析

文字域名可以做网站,怎么用记事本做网站,sem百度竞价推广,东莞专业网核心目标掌握 Node.js 基础、Express 初始化#xff0c;搭建起开发环境。Node.js 前置基础CommonJS vs ESModule 核心区别CommonJS (require/module.exports)ESModule (import/export)为 Node.js 服务#xff08;服务器端#xff0c;同步加载#xff09;为浏览器 / 全端设计…核心目标掌握 Node.js 基础、Express 初始化搭建起开发环境。Node.js 前置基础CommonJS vs ESModule 核心区别CommonJS (require/module.exports)ESModule (import/export)为 Node.js 服务服务器端同步加载为浏览器 / 全端设计异步加载兼顾性能运行时加载执行到require才加载模块编译时静态分析import 必须在顶层提前确定依赖导出module.exports {a:1}或exports.a 1导入const mod require(./mod.js)导出export const a 1/export default {a:1}导入import {a} from ./mod.js/import mod from ./mod.js导出的是值的拷贝修改导入的值不影响原模块导出的是值的引用原模块值变化导入值同步变化可省略后缀如require(./mod)支持.node/.json 等必须写完整后缀如import ./mod.js仅支持.js/.mjs 等顶层 this指向模块自身module.exports顶层 this指向undefinedhttp核心网络模块和path路径处理模块http 模块原生创建 HTTP 服务对应前端 fetchhttp模块是 Node.js 实现 “请求 - 响应” 模型的核心用于创建 HTTP 服务器 / 客户端对应前端通过fetch/XMLHttpRequest发起请求的逻辑前端是 “请求方”Node.js 是 “响应方”。1. 核心作用搭建极简 HTTP 服务器处理客户端浏览器 / Postman / 前端 fetch的请求模拟客户端发起 HTTP 请求类似前端 fetch。2. 核心概念请求 - 响应模型概念说明对应前端Request请求客户端发给服务器的信息如 URL、请求方法、参数对应前端 fetch 的request配置Response响应服务器返回给客户端的信息如状态码、响应头、数据对应前端 fetch 拿到的response监听端口服务器绑定端口如 3000前端通过http://localhost:3000访问3. 实操案例创建最简 HTTP 服务器// 导入 http 模块 const http require(http); // 1. 创建服务器回调函数处理 「请求(req) - 响应(res)」 const server http.createServer((req, res) { // ① 处理请求获取请求方法、URL console.log(请求方法, req.method); // GET/POST 等 console.log(请求 URL, req.url); // 如 /api/user // ② 设置响应头告诉客户端返回的是 JSON 数据编码 utf-8 res.writeHead(200, { Content-Type: application/json; charsetutf-8, Access-Control-Allow-Origin: * // 解决前端跨域 }); // ③ 返回响应数据对应前端 fetch 拿到的 res.json() const responseData { code: 200, msg: 请求成功, data: { name: Node.js http 模块 } }; res.end(JSON.stringify(responseData)); // 结束响应并返回数据 }); // 2. 启动服务器监听 3000 端口 server.listen(3000, () { console.log(服务器运行在 http://localhost:3000); });res.end()必须调用用于结束响应否则客户端会一直等待跨域处理服务器需设置Access-Control-Allow-Origin响应头类似前端配置代理对比 ExpressExpress 是基于http模块的封装简化了路由、中间件等逻辑。path 模块路径处理解决跨系统兼容方法作用path.join()拼接路径自动适配系统分隔符最常用path.resolve()解析为绝对路径从当前工作目录出发path.basename()获取路径中的文件名含后缀path.extname()获取路径中的文件后缀如 .js、.jsonpath.dirname()获取路径中的目录名去掉文件名的部分Express 项目搭建快速脚手架前置安装 Node.js建议 14 版本步骤 1全局安装脚手架打开终端执行以下命令仅需安装一次npm install -g express-generator步骤 2创建 Express 项目# 创建项目项目名自定义如 my-express-app express my-express-app步骤 3进入项目并安装依赖# 进入项目目录 cd my-express-app # 安装依赖express 等核心包 npm install步骤 4启动项目# 方式 1默认启动Node 直接运行 bin/www npm start # 方式 2热重载启动修改代码无需重启需先装 nodemon # 1. 安装 nodemon开发依赖 npm install nodemon --save-dev # 2. 修改 package.json 的 scripts新增 dev 命令 scripts: { start: node ./bin/www, dev: nodemon ./bin/www // 新增这行 } # 3. 启动热重载服务 npm run dev步骤 5验证项目打开浏览器访问http://localhost:3000能看到 Express 默认欢迎页面说明创建成功。脚手架生成的核心目录结构关键my-express-app/ ├── bin/ // 启动脚本www 是入口监听端口 ├── public/ // 静态文件目录放 css、js、图片等 ├── routes/ // 路由目录处理接口/页面路由如 index.js、users.js ├── views/ // 视图模板目录ejs/jade 等前端页面 ├── app.js // Express 核心配置中间件、路由挂载 ├── package.json // 依赖和脚本配置Express 目录作用类比 Vueapp.js项目入口类比 main.jsroutes/路由文件类比 Vue 的 routerpublic/静态资源类比 Vue 的 publicpackage.json依赖配置和 Vue 一致