Node.js - express & axios基本用法

1,834 阅读2分钟

学习链接

nodejs的express使用介绍 - jack_Meng - 博客园 (cnblogs.com)

node.js中express的Router路由的使用 - 怀素真 - 博客园 (cnblogs.com)


目的

  1. 熟悉express的router使用方法
  2. 结合点击交互(axios发起请求),获取后台数据(express返回)

基本流程

  1. 搭建运行环境 - npm安装express
  2. 编写启动文件 - server.js文件
  3. 配置路由信息 - router
  4. 实现页面展示 - 点击事件
  5. 实现数据交互 - 发送axios,接收express传来的数据并展示!

代码细节

1. 搭建运行环境

在新的文件夹下执行npm init -y,初始化项目。

接着安装express,npm install express

项目启动,使用nodemon

package.json文件内容

  • image.png

2. 编写启动文件

创建index.js文件,这是程序的入口

image.png

app.listen

  • 开启端口,对应的打开网址 - localhost:8888

app.use

  • 中间件,处理数据请求(request)和数据响应(response)之间的信息。当请求对应的地址时,先进行判断再返回数据

image.png

3. 配置路由信息

创建routes文件夹,创建order.js和user.js文件。

可以看到,在index.js中,我们配置了app.use,当访问/users路径时,会调用user.js的方法

image.png

order.js文件内容,用的是express.Router(),可以看到,router使用了get方法,访问//:id,这个/对应的正是/order!以/order为根路径进行访问。

设置了两种信息返回内容,

  • 当没有添加id时,返回订单首页 - 即访问/order
  • 添加了id,返回id + 订单信息 - 即访问/order:id

image.png

user.js也写入同样的内容,都是get方法

image.png

4. 实现页面展示

在public文件下,创建index.html,这是存放展示页面,在index.js中设置过app.use(express.static("./public"));,所以public文件下的内容,会展示到页面上。

image.png

简单写个页面

image.png

5. 实现数据交互

演示过程 001.gif

交互代码 image.png

总结

演示了基本的express和axios用法,实现一个基础的前后交互过程。

  • 前端页面通过axios,配合路由和发送信息,一起发送http请求
  • 后端利用express,根据不同的路由信息进行响应,返回不同的信息。

进一步的需求是前端发送不同请求,如post、update、delet等,后端结合数据库进行相应的反馈,实现数据的增删改查。

为向东坡传语。人在玉堂深处。别后有谁来,雪压小桥无路。归去。归去。江上一犁春雨。——苏轼《如梦令·有寄》