express基本用法 路由 mangodb基本操作

一、安装express以及初始化package.json

首页初始化package.json,在命令行执行以下内容(-y 一步到位,没有的话,可以自己一步步配置)

npm init -y

完成之后,我们会看见多了一个package.json的文件


image.png

在命令行中安装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

我们可以在终端显示


image.png

说明我们的express服务启动成功了,然后在浏览器输入我们的服务器地址"localhost:3000",页面显示我们设置的输出内容“ok”

三、实现热更新

我们每次修改代码之后,都要重新关闭服务,然后再启动服务,很麻烦。现在我们按照一个插件,可以实现代码的热更新,只要代码修改、保存就会重新编译。在全局按照插件

cnpm install -g  nodemon

在终端执行

nodemon service.js
image.png

当终端显示这样的提示,说明ok了。

四、静态资源访问配置

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

访问静态,比如public文件夹下的图片,我们访问的时候要加static


image.png

这样,可爱的罗小黑就出来啦。

五、路由配置

下面我们来配置一个路由,写一个接口

app.get('/product',async (req,res)=>{  
    let data = {
        name:'express'
    }
    res.send(data)
})

在浏览器输入地址 [http://localhost:3000/product],(http://localhost:3000/product)

浏览器显示一个我们刚刚写的一个对象。


image.png

六、解决跨域问题

在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,发生了什么事情。

image.png

我们的product接口在前端请求成功并返回了数据。

接着,我们在编译器websocket等打开该html页面,该页面会以随意一个端口启动我们的html页面


image.png

打开浏览器的network,发现报错了,对,报的还是跨域的问题。


image.png

因为我们的接口是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文件


image.png
image.png

用法很简单,每个接口三个“#”号分隔开,支持单个接口请求,也可以一次请求多个接口。要是不不知道如何使用,还有例子参考。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容