学习链接
nodejs的express使用介绍 - jack_Meng - 博客园 (cnblogs.com)
node.js中express的Router路由的使用 - 怀素真 - 博客园 (cnblogs.com)
目的
- 熟悉express的router使用方法
- 结合点击交互(axios发起请求),获取后台数据(express返回)
基本流程
- 搭建运行环境 - npm安装express
- 编写启动文件 - server.js文件
- 配置路由信息 - router
- 实现页面展示 - 点击事件
- 实现数据交互 - 发送axios,接收express传来的数据并展示!
代码细节
1. 搭建运行环境
在新的文件夹下执行npm init -y,初始化项目。
接着安装express,npm install express
项目启动,使用nodemon
package.json文件内容
2. 编写启动文件
创建index.js文件,这是程序的入口
app.listen
- 开启端口,对应的打开网址 - localhost:8888
app.use
- 中间件,处理数据请求(request)和数据响应(response)之间的信息。当请求对应的地址时,先进行判断,再返回数据。
3. 配置路由信息
创建routes文件夹,创建order.js和user.js文件。
可以看到,在index.js中,我们配置了app.use,当访问/users路径时,会调用user.js的方法
order.js文件内容,用的是express.Router(),可以看到,router使用了get方法,访问/ 和/:id,这个/对应的正是/order!以/order为根路径进行访问。
设置了两种信息返回内容,
- 当没有添加id时,返回订单首页 - 即访问
/order时 - 添加了id,返回id + 订单信息 - 即访问
/order:id时
user.js也写入同样的内容,都是get方法
4. 实现页面展示
在public文件下,创建index.html,这是存放展示页面,在index.js中设置过app.use(express.static("./public"));,所以public文件下的内容,会展示到页面上。
简单写个页面
5. 实现数据交互
演示过程
交互代码
总结
演示了基本的express和axios用法,实现一个基础的前后交互过程。
- 前端页面通过axios,配合路由和发送信息,一起发送http请求
- 后端利用express,根据不同的路由信息进行响应,返回不同的信息。
进一步的需求是前端发送不同请求,如post、update、delet等,后端结合数据库进行相应的反馈,实现数据的增删改查。
为向东坡传语。人在玉堂深处。别后有谁来,雪压小桥无路。归去。归去。江上一犁春雨。——苏轼《如梦令·有寄》