06-引入Express创建web服务器、接口封装并使用postman测试,静态资源托管

一、认识Express

1、什么是Express

官方概念:Express是基于Node.js平台,快速、开放、极简的Web开发框架。
通俗理解:Express的作用和Node.js中内置的http模块类似,专门用来创建web服务器

本质:就是一个npm第三方包,提供了快速创建Web服务器的便捷方法

官网:https://www.expressjs.com.cn/

在这里插入图片描述
对于前端程序猿来说,最常见的两种服务器,分别是:

  • Web服务器:专门对外提供服务的Web网页资源的服务器
  • API接口服务器:专门对外提供API接口的服务器

使用Express,我们可以方便,快速的创建Web网站的服务器或API接口的服务器

2、安装

npm i express@4.17.1

如果当前路径下没有module目录,会依次向上寻找,找到后存储

3、创建最基本的web服务器

//导入express
const express=require('express')
//创建web服务器,直接调用express方法,返回服务器实例
const app = express()
//启动web服务器
app.listen(80,() => {
    console.log('express')
})

4、监听GET请求

app.get('请求URL',function(req,res){
//req 请求对象
//res 响应对象
res.send('请求成功')
})

5、监听POST请求

app.post('请求URL',function(req,res){
//req 请求对象
//res 响应对象
res.send('请求成功')
})

6、示例代码及使用postman接口测试

客户端通过GET请求获取接口返回值:

//导入express
const express=require('express')
//创建web服务器,直接调用express方法,返回服务器实例
const app = express()

//监听客户端的GET请求,并向客户端响应具体内容
app.get('/user',(req,res)=>{
    //调用express提供的res.send()方法,向客户端响应一个Json对象
    res.send({name:'liuyan',age:20})
})
//监听客户端POST请求
app.post('/user',(req,res)=>{
    res.send('请求成功')
})
//启动web服务器
app.listen(80,() => {
    console.log('express')
})

//终端执行:
node index.js #运行项目

使用postman测试接口:
在这里插入图片描述

二、url上的静态参数和动态参数

1、获取URL中携带的静态查询参数

示例是服务端获取URL中携带的查询参数并给客户端响应内容

注意:当客户端在请求地址后携带?name=xxx 的参数表示传递的参数为静态参数,url的配置不用额外匹配静态参数

app.get('/',(req,res)=>{
    //通过req.query获取客户端发送过来的查询参数
    //默认不携带参数时,req.query是一个空对象
    console.log(req.query)
    res.send(req.query)
})

在这里插入图片描述

1、获取URL中携带的动态查询参数

客户端在请求的url后直接增加动态参数,比如我们后端指定的url为/user/:id,默认用:id匹配用户的一个动态参数,用户发请求时就可以在url上携带/user/123e121 一串数值。

app.get('/user/:id',(req,res)=>{
    //:id是一个动态请求参数,写多个参数就是:id/:name
    //通过req.params获取客户端发送过来的动态url参数
    //默认不携带参数时,req.params是一个空对象
    console.log(req.params)
    res.send(req.params)
})

客户端请求:
在这里插入图片描述

三、托管静态资源

express.static()

#使用:
const express = require('express')
const app = express()
// 使用app.use方法,调用express.static方法,指定文件夹路径,快速对外提供静态资源
app.use(express.static('./public'))
app.listen(80,()=>{
    console.log('服务启动')
})

注意,访问资源的路径不带代码中指定的文件夹名
在这里插入图片描述

托管多个静态资源

如果要托管多个静态资源,请多次调用

app.use(express.static('public'))
app.use(express.static('files'))

如果两个静态目录下都有相同名称的文件index.html文件, 先托管的目录中文件会生效,客户端访问http://127.0.0.1/index.html时查询到的是public中的文件。

挂载路径前缀

如果你希望在托管的静态资源访问路径前,挂载路径前缀,使用以下方式:

app.use('/public',express.static('./public'))

例如:

const express = require('express')
const app = express()
// 使用app.use方法,调用express.static方法,指定文件夹路径,快速对外提供静态资源
app.use('/public',express.static('./public'))
app.listen(80,()=>{
    console.log('服务启动')
})

在这里插入图片描述

<think>好的,用户之前问过关于电商平台项目的技术栈,特别是询问了Vue3是否适用。现在他们想开始学习B站的一个Vue3仿京东商城的全栈项目,已经学完HTML、CSS和JS,想知道除了Vue3还需要学哪些东西。 首先,我需要确定用户当前的技术水平。他们已经掌握了前端基础,但可能对现代前端框架和工具还不熟悉。接下来,用户的目标是上手一个全栈项目,所以除了Vue3,还需要后端相关的知识,比如Node.js和数据库。 用户之前的问题里提到了技术栈包括Vue/React + Node.js + MongoDB,所以这次的重点是补充他们需要学习的内容,以便能够完成整个项目。要考虑到全栈开发需要的前端和后端技能,以及可能需要的额外工具和概念。 接下来,我需要分解学习路径。用户已经学过HTML、CSS、JS,接下来需要学习Vue3,但还需要了解相关的生态系统,比如Vue Router、状态管理(Pinia)、UI组件库(如Element Plus)。此外,构建工具如Vite也是必须的。 然后,后端部分,用户需要学习Node.js的基础,Express框架,以及MongoDB的使用。可能还需要了解RESTful API的设计和Postman这样的API测试工具。 另外,项目实战中常见的需求,比如用户认证、支付模块集成、WebSocket实时更新库存,这些都需要额外的知识,比如JWT、OAuth2.0、第三方支付接口使用,以及WebSocket的基本原理。 还需要考虑开发工具和环境配置,比如Git版本控制、npm/yarn包管理,以及部署上线的基本步骤,比如使用Nginx或Docker。 用户可能没有接触过TypeScript,但项目中使用TypeScript会更好,所以需要建议他们学习TypeScript的基础。此外,工程化方面的知识,如模块化开发、代码规范、性能优化,也是必要的。 最后,要推荐一些学习资源和学习建议,帮助用户系统地补充这些知识,避免他们在学习过程中遇到太多障碍,保持学习动力,逐步构建项目。 需要确保回答结构清晰,分点列出,涵盖前端、后端、数据库、工具链、实战扩展等方面,同时给出资源和步骤建议,让用户有一个明确的学习路线图。</think>了解你的技术背景后,如果想高效上手《Vue3+Node全栈项目》,以下是**必须补充的知识清单**和**分阶段学习建议**: --- ### 一、前置技能图谱(已掌握:HTML/CSS/JS → 待补充) ```mermaid graph TD A[前端基础] --> B[Vue3核心] A --> C[前端工程化] B --> D[全栈能力] C --> D D --> E[项目实战] B --> |组件化开发| B1[单文件组件SFC] B --> |响应式原理| B2[ref/reactive] B --> |逻辑复用| B3[组合式API] B --> |路由管理| B4[Vue Router] B --> |状态管理| B5[Pinia] C --> |构建工具| C1[Vite] C --> |包管理| C2[npm/yarn] C --> |代码规范| C3[ESLint/Prettier] C --> |UI框架| C4[Element Plus/Ant Design Vue] D --> |后端语言| D1[Node.js基础] D --> |Web框架| D2[Express/Koa] D --> |数据库| D3[MongoDB/Mongoose] D --> |接口调试| D4[Postman/Axios] D --> |部署上线| D5[Nginx/Docker] ``` --- ### 二、分阶段学习清单(按优先级排序) #### 阶段1:Vue3核心技能(2-3周) | 内容 | 重点说明 | 学习资源推荐 | |----------------------|------------------------------------------------------------------------|----------------------------------------------------------------------------| | **Vue3基础语法** | 模板语法、指令(v-if/v-for)、事件处理、组件通信 | 官方文档 + 视频:[Vue3快速上手-慕课网](https://www.imooc.com/learn/1283) | | **组合式API** | `setup()`、`ref`/`reactive`、`computed`/`watch`、生命周期钩子 | 重点练习:抽离复用逻辑到`composables`目录 | | **Vue Router 4** | 动态路由、导航守卫、路由懒加载 | 实战:实现商品详情页跳转(`/product/:id`) | | **Pinia状态管理** | 定义store、跨组件状态共享、持久化存储 | 结合项目需求:购物车数据、用户登录状态 | | **Element Plus** | 表单组件、表格组件、弹窗组件的二次开发 | 对照京东官网模仿布局(如商品分类导航栏) | --- #### 阶段2:前端工程化(1周) | 工具 | 必须掌握的能力 | 项目中的应用场景 | |----------------|------------------------------------------------------------------|-----------------------------------------------| | **Vite** | 项目初始化、环境变量配置、生产打包优化 | 替换Vue CLI,加速开发热更新 | | **Axios** | 封装拦截器(统一处理token、错误提示)、RESTful API请求规范 | 对接商品列表、订单提交等接口 | | **VueUse** | 使用`useLocalStorage`、`useDebounceFn`等工具函数 | 实现未登录用户的购物车暂存、搜索框防抖 | | **SCSS** | 嵌套语法、变量定义、混合宏(mixin) | 编写可维护的样式(如主题色变量`$jd-red: #e4393c`) | --- #### 阶段3:Node.js后端(2周) | 内容 | 关键知识点 | 京东项目中的应用 | |----------------------|--------------------------------------------------------------------------|---------------------------------------------| | **Express框架** | 中间件机制、路由分层、错误处理 | 搭建商品API(`/api/products`)、订单API | | **MongoDB** | 文档结构设计、CRUD操作、聚合查询 | 存储商品信息(SKU规格)、用户地址数据 | | **Mongoose ODM** | 定义Schema模型、数据验证、关联查询 | 用户-订单的一对多关系建模 | | **JWT鉴权** | 生成Token、路由白名单、权限中间件 | 实现用户登录、购物车权限控制 | | **文件上传** | 使用`multer`处理图片上传、OSS云存储对接 | 商品主图上传功能 | --- #### 阶段4:全栈联调与部署(1周) | 技能 | 具体操作 | |--------------------|------------------------------------------------------------------------| | **接口联调** | 使用Postman测试接口前端Axios对接 → 解决跨域问题(配置CORS或代理) | | **性能优化** | 压缩图片(tinyPNG)、开启Gzip压缩、配置CDN加速 | | **生产部署** | 前端:`npm run build` + Nginx静态托管<br>后端:PM2守护进程 + MongoDB云服务 | | **监控与调试** | 使用`winston`记录日志、Sentry错误追踪 | --- ### 三、学习路线建议 1. **先攻前端再补后端** 优先实现1-2个完整前端页面(如首页商品列表+详情页),再逐步接入后端接口。 2. **模块化拆解项目** ```markdown 第1周:用户登录 → 商品展示 → 基础购物车 第2周:订单生成 → 微信支付沙箱 → 个人中心 第3周:商品搜索 → 秒杀活动 → 性能优化 ``` 3. **遇到问题的解法** - 组件卡壳:参考Element Plus官方示例代码 - 接口报错:用Postman对比验证请求参数 - 部署失败:优先检查端口占用和文件权限 --- ### 四、避坑指南 1. **不要过度设计架构** 初期直接使用Vite官方模板,别纠结`Monorepo`等高级配置。 2. **Mock数据先行** 后端开发前,先用`/mock/products.json`模拟数据,保证前端进度。 3. **慎用复杂状态管理** 优先用`props+emit`和`Pinia`,别过早引入`Vuex`或其他重型方案。 4. **数据库设计要点** 商品表需包含`skuId`、`price`、`stock`,订单表注意`userId`关联和`status`流转。 --- ### 五、辅助工具推荐 | 类型 | 工具 | 用途 | |--------------|--------------------------------------------------------------------|-----------------------------| | **UI设计** | [京东官方皮肤检查](https://skin.jd.com/) | 直接获取京东配色、尺寸规范 | | **接口文档** | Apifox / Swagger | 编写可调试的API文档 | | **效率工具** | Vue DevTools(浏览器插件) | 调试Vue组件状态和Pinia | | **学习辅助** | [Vue3 Playground](https://play.vuejs.org/) | 快速测试代码片段 | --- ### 六、最终建议 1. **保持最小可行性** 先实现核心功能(商品浏览→加购→支付),再迭代优化(如秒杀、推荐算法)。 2. **代码规范性** 从第一天开始遵守:目录结构清晰、组件/变量语义化命名、提交信息明确。 3. **简历输出导向** 开发过程中记录: - 解决了什么技术难点(如购物车发修改) - 优化了哪些性能指标(首屏加载从3s→1s) - 沉淀了哪些复用方案(封装支付组件) 按照这个路径,预计投入**8-10周**即可完成一个可上线的全栈项目,加油! 🚀
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值