一、安装express以及初始化package.json
首页初始化package.json,在命令行执行以下内容(-y 一步到位,没有的话,可以自己一步步配置)
npm init -y
完成之后,我们会看见多了一个package.json的文件
在命令行中安装express
cnpm install express --save
二、启动服务
环境、依赖都准备好之后,现在我们开始启动服务
首先,我们先新建一个service.js文件
const express = require('express')
const app = express()
app.get('/',(req,res)=>{
res.send('ok')
})
app.listen(3000,()=>{
console.log('app start listen')
})
在当前文件目录下执行,
node service.js
我们可以在终端显示
说明我们的express服务启动成功了,然后在浏览器输入我们的服务器地址"localhost:3000",页面显示我们设置的输出内容“ok”
三、实现热更新
我们每次修改代码之后,都要重新关闭服务,然后再启动服务,很麻烦。现在我们按照一个插件,可以实现代码的热更新,只要代码修改、保存就会重新编译。在全局按照插件
cnpm install -g nodemon
在终端执行
nodemon service.js
当终端显示这样的提示,说明ok了。
四、静态资源访问配置
app.use('/static',express.static('public'))
访问静态,比如public文件夹下的图片,我们访问的时候要加static
这样,可爱的罗小黑就出来啦。
五、路由配置
下面我们来配置一个路由,写一个接口
app.get('/product',async (req,res)=>{
let data = {
name:'express'
}
res.send(data)
})
在浏览器输入地址 [http://localhost:3000/product],(http://localhost:3000/product)
浏览器显示一个我们刚刚写的一个对象。
六、解决跨域问题
在public文件夹下新建一个index.html文件,在里面发送一个请求
<script>
fetch('http://localhost:3000/product').then((res)=>{
res.json()
}).then((data)=>{
console.log(data)
})
</script>
在浏览器打开该地址 http://localhost:3000/static/index.html
接着查看我们的network,发生了什么事情。
我们的product接口在前端请求成功并返回了数据。
接着,我们在编译器websocket等打开该html页面,该页面会以随意一个端口启动我们的html页面
打开浏览器的network,发现报错了,对,报的还是跨域的问题。
因为我们的接口是3000的端口,而前端页面是63342端口,这当然跨域了。不用担心,express解决跨域问题很简单。只要按照一个cors插件,就nice了。
按照依赖
cnpm insall corn --save
配置跨域机制
app.use(require('cors')())
再次刷新访问,ok了。
七、MongoDB基础
首先我们要我们的电脑或者服务器按照mangdb服务端,这边就不展示安装过程。
接着我们在项目中安装mangoose插件,用来连接我们的数据库。
cnpm install mangoose
下面就开始连接我们的数据
const mongoose = require('mongoose')
mongoose.connect('mongodb://xxxxx:47017/express-demo',
{ useUnifiedTopology: true }) // 数据库连接
八、接口编写
我们先配置一下,让express支持处理json数据。
app.use(express.json())
// 创建product模型
const Product = mongoose.model('Product',new mongoose.Schema({
title:String
}))
get请求--查询
app.get('/product',async (req,res)=>{ // get请求
let data = await Product.find()
let data = {
name:'express'
}
res.send(data)
})
get请求(通过id获取详情)
// 产品详情查询(id)
app.get('/product/:id',async (req,res)=>{
let data = await Product.findById(req.params.id)
res.send(data)
})
req.params为get请求,携带的参数
post 请求--增加
app.post('/product', async (req,res)=>{ // post 请求
const data = req.body
let product = await Product.create(data) // 插入数据
res.send(product)
})
req.body为post请求携带的参数
put请求 ---修改
app.put('/product/:id', async (req,res)=>{ // put 请求
let product =await Product.findById(req.params.id)
product.title = req.body.title
await product.save() // 保存
res.send(product)
})
先通过id找对象的详情 ,再把修改的内容赋给该详情对象,再保存该对象。
delete请求--删除
app.delete('/product/:id', async (req,res)=>{ // DELETE 请求
let product =await Product.findById(req.params.id)
await product.remove() // 删除
res.send({success:true})
})
注意:
1、操作数据库(比如find,findById、create等)是一个异步,所以使用await来保证程序执行完毕再执行下一步,记得回调函数前面增加async 。
9、接口测试
以前测试接口我们会用浏览器、postman等工具,现在我们在介绍一个很方便的方法
在webstorm中,如果是vscode,需要在编译器按照一个rest-client插件。我们新建一
个.http文件
用法很简单,每个接口三个“#”号分隔开,支持单个接口请求,也可以一次请求多个接口。要是不不知道如何使用,还有例子参考。