前端培训-中级阶段(52)- Express安装,使用 Express完成RESTful操作 MongoDB

本文涉及的产品
云数据库 MongoDB,独享型 2核8GB
推荐场景:
构建全方位客户视图
简介: 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思想,我们开课啦(每周四)。当我们需要起一个服务器时,我猜大多数人的选择是 Express (至少我看到的一些小工具是)。今天我们来安装一下,然后结合上节课操作一下 MongoDB 。

Express



安装


npm install express --save

依赖还是蛮好装的,装好依赖我们就可以启动我们的服务了。


var express = require('express')
var app = express()
var server = app.listen(8088, () => {
    var host = server.address().address;
    var port = server.address().port;
    console.log('Example app listening at ', host, port);
    console.log('author: lilnong.top');
})
app.use(function(req, res, next){
    res.send('www.lilnong.top')
    next();
})


使用


监听路由、中间件


中间件,监听所有请求类型


app.use(function(req, res, next){
    console.log('use-1', req.ip)
    next();
})


中间件,监听 /api 下的所有请求类型


app.use('/api', function(req, res, next){
    console.log('use-2-/api', req.ip)
    next();
})


监听 /apiGET 请求类型


app.get('/api', function(req, res, next){
    console.log('use-2-/api', req.ip)
    next();
})


监听 /api 下所有请求类型


app.all('/api',function(req, res, next){
    console.log('/api-all', req.ip)
    next();
})


RESTful 实现 CURD


默认 express 是不会解析 post 请求的 body。我们需要增加一个中间件


app.use(express.json());
app.use(express.urlencoded({ extended: false }));


规范


// GET /task 获取 task 列表
// GET /task/:id 查看某个具体的 task
// POST /task 新建一个 task
// PUT /task/:id 更新 id 为 12 的 task
// DELETE /task/:id 删除 id 为 12 的 task



实现代码


const taskrouter = express.Router()
taskrouter.route('/task')
    .post(async (req,res,next) => {
        console.log(req.method, req.url, req.params, req.query, req.body)
        let data = await dbo.collection('user').insert({...req.body,author: 'www.lilnong.top', time: new Date(), uuid: `${Date.now()}-${Math.random()}-${Math.random()}-${Math.random()}`})
        res.send(data)
        // fetch(`/restful-api/task`,{
        //     method: 'post',
        //     body: new URLSearchParams({cdate: new Date().toLocaleString()}), 
        // })
        //     .then(v=>v.json())
        //     .then(v=>console.log('post restful-api/task',v))
    })
    .get(async (req,res,next) => {
        console.log(req.method, req.url, req.params, req.query, req.body)
        let data = await dbo.collection('user').find().toArray()
        res.send(data)
        // fetch(`/restful-api/task`)
        //     .then(v=>v.json())
        //     .then(v=>console.log('get restful-api/task',v))
    })
taskrouter.route('/task/:uuid')
    .get(async (req,res,next) => {
        console.log(req.method, req.url, req.params, req.query, req.body)
        let data = await dbo.collection('user').find({uuid: req.params.uuid}).toArray()
        res.send(data)
        // fetch(`/restful-api/task/1604050499531-0.7571477556104735-0.2684691266146757-0.455850836469736`)
        //     .then(v=>v.json())
        //     .then(v=>console.log('get restful-api/task/1604050499531-0.7571477556104735-0.2684691266146757-0.455850836469736',v))
    })
    .put(async (req,res,next) => {
        console.log(req.method, req.url, req.params, req.query, req.body)
        let data = await dbo.collection('user').updateOne({uuid: req.params.uuid},{$set: {...req.body,utime: new Date()}})
        res.send(data)
        // fetch(`/restful-api/task/1604050500761-0.5377497291744571-0.022071316247671557-0.336347246286103`,{
        //     method: 'put',
        //     body: new URLSearchParams({udate: new Date().toLocaleString(), uauthor: 'www.lilnong.top'}), 
        // })
        //     .then(v=>v.json())
        //     .then(v=>console.log('put restful-api/task',v))
    })
    .delete(async (req,res,next) => {
        console.log(req.method, req.url, req.params, req.query, req.body)
        let data = await dbo.collection('user').deleteOne({uuid: req.params.uuid})
        res.send(data)
        // fetch(`/restful-api/task/1604050496565-0.660805544561031-0.5097297478722462-0.41065424039611176`,{
        //     method: 'delete',
        // })
        //     .then(v=>v.json())
        //     .then(v=>console.log('delete restful-api/task/1604050496565-0.660805544561031-0.5097297478722462-0.41065424039611176',v))
    })
app.use('/restful-api', taskrouter)


demo 代码



let dbo
var MongoClient = require('mongodb').MongoClient;
MongoClient.connect(
    'mongodb://localhost:27017/sf-mongodb',
    {},
    async function(err, db){
        if(err){
            reject(err)
            return console.error(err)
        }
        dbo = db.db('sf-mongodb');
        console.log('mongodb-success')
    }
)
var express = require('express')
var app = express()
var server = app.listen(process.env.NODE_EXPRESS_MONGODB || 23456, () => {
    var host = server.address().address;
    var port = server.address().port;
    console.log('Example app listening at ', host, port);
    console.log('author: lilnong.top');
})
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(function(req, res, next){
    console.log('header', req.ip)
    next();
})
app.use('/api',function(req, res, next){
    console.log('/api', req.ip)
    next();
})
app.get('/api',function(req, res, next){
    console.log('/api-get', req.ip)
    next();
})
app.all('/api',function(req, res, next){
    console.log('/api-all', req.ip)
    next();
})
// GET /task 获取 task 列表
// GET /task/:id 查看某个具体的 task
// POST /task 新建一个 task
// PUT /task/:id 更新 id 为 12 的 task
// DELETE /task/:id 删除 id 为 12 的 task
const taskrouter = express.Router()
taskrouter.route('/task')
    .post(async (req,res,next) => {
        console.log(req.method, req.url, req.params, req.query, req.body)
        let data = await dbo.collection('user').insert({...req.body,author: 'www.lilnong.top', time: new Date(), uuid: `${Date.now()}-${Math.random()}-${Math.random()}-${Math.random()}`})
        res.send(data)
        // fetch(`/restful-api/task`,{
        //     method: 'post',
        //     body: new URLSearchParams({cdate: new Date().toLocaleString()}), 
        // })
        //     .then(v=>v.json())
        //     .then(v=>console.log('post restful-api/task',v))
    })
    .get(async (req,res,next) => {
        console.log(req.method, req.url, req.params, req.query, req.body)
        let data = await dbo.collection('user').find().toArray()
        res.send(data)
        // fetch(`/restful-api/task`)
        //     .then(v=>v.json())
        //     .then(v=>console.log('get restful-api/task',v))
    })
taskrouter.route('/task/:uuid')
    .get(async (req,res,next) => {
        console.log(req.method, req.url, req.params, req.query, req.body)
        let data = await dbo.collection('user').find({uuid: req.params.uuid}).toArray()
        res.send(data)
        // fetch(`/restful-api/task/1604050499531-0.7571477556104735-0.2684691266146757-0.455850836469736`)
        //     .then(v=>v.json())
        //     .then(v=>console.log('get restful-api/task/1604050499531-0.7571477556104735-0.2684691266146757-0.455850836469736',v))
    })
    .put(async (req,res,next) => {
        console.log(req.method, req.url, req.params, req.query, req.body)
        let data = await dbo.collection('user').updateOne({uuid: req.params.uuid},{$set: {...req.body,utime: new Date()}})
        res.send(data)
        // fetch(`/restful-api/task/1604050500761-0.5377497291744571-0.022071316247671557-0.336347246286103`,{
        //     method: 'put',
        //     body: new URLSearchParams({udate: new Date().toLocaleString(), uauthor: 'www.lilnong.top'}), 
        // })
        //     .then(v=>v.json())
        //     .then(v=>console.log('put restful-api/task',v))
    })
    .delete(async (req,res,next) => {
        console.log(req.method, req.url, req.params, req.query, req.body)
        let data = await dbo.collection('user').deleteOne({uuid: req.params.uuid})
        res.send(data)
        // fetch(`/restful-api/task/1604050496565-0.660805544561031-0.5097297478722462-0.41065424039611176`,{
        //     method: 'delete',
        // })
        //     .then(v=>v.json())
        //     .then(v=>console.log('delete restful-api/task/1604050496565-0.660805544561031-0.5097297478722462-0.41065424039611176',v))
    })
app.use('/restful-api', taskrouter)
app.use(function(req, res, next){
    console.log('footer', req.ip)
    res.send('www.lilnong.top')
    next();
})


相关文章
|
8月前
|
资源调度 JavaScript 前端开发
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
7433 23
|
前端开发 关系型数据库 MySQL
【前端学java】MySQL数据库的本地安装
【8月更文挑战第12天】MySQL数据库的本地安装
184 3
|
10月前
|
前端开发 应用服务中间件 nginx
docker安装nginx,前端项目运行
通过上述步骤,你可以轻松地在Docker中部署Nginx并运行前端项目。这种方法不仅简化了部署流程,还确保了环境的一致性,提高了开发和运维的效率。确保按步骤操作,并根据项目的具体需求进行相应的配置调整。
926 25
|
JavaScript 前端开发 Docker
前端全栈之路Deno篇(二):几行代码打包后接近100M?别慌,带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
在使用 Deno 构建项目时,生成的可执行文件体积较大,通常接近 100 MB,而 Node.js 构建的项目体积则要小得多。这是由于 Deno 包含了完整的 V8 引擎和运行时,使其能够在目标设备上独立运行,无需额外安装依赖。尽管体积较大,但 Deno 提供了更好的安全性和部署便利性。通过裁剪功能、使用压缩工具等方法,可以优化可执行文件的体积。
768 3
前端全栈之路Deno篇(二):几行代码打包后接近100M?别慌,带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
|
JavaScript 前端开发 Docker
前端的全栈之路Meteor篇(一):开发环境的搭建 -全局安装或使用容器镜像
本文介绍了如何搭建 Meteor 开发环境,包括全局安装 Meteor 工具和使用 Docker 镜像两种方法,以及创建和运行一个简单的 Meteor 项目的基本步骤。 Meteor 是一个全栈 JavaScript 框架,适用于构建实时 Web 应用程序。文章还提供了遇到问题时的解决建议和调试技巧。
624 4
|
缓存 JavaScript 前端开发
拿下奇怪的前端报错(三):npm install卡住了一个钟- 从原理搞定安装的全链路问题
本文详细分析了 `npm install` 过程中可能出现的卡顿问题及解决方法,包括网络问题、Node.js 版本不兼容、缓存问题、权限问题、包冲突、过时的 npm 版本、系统资源不足和脚本问题等,并提供了相应的解决策略。同时,还介绍了开启全部日志、使用替代工具和使用 Docker 提供 Node 环境等其他处理方法。
9664 2
|
JSON JavaScript 前端开发
使用 Node.js 和 Express 构建 RESTful API 服务器
【10月更文挑战第3天】使用 Node.js 和 Express 构建 RESTful API 服务器
|
前端开发 JavaScript 应用服务中间件
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
本文是一篇详细的教程,介绍了如何在Linux系统上安装和配置nginx,以及如何将打包好的前端项目(如Vue或React)上传和部署到服务器上,包括了常见的错误处理方法。
3644 0
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
|
存储 NoSQL 前端开发
前端轻量级数据库mongodb
【10月更文挑战第2天】MongoDB 是一个基于分布式文件存储的开源数据库系统,不属于前端轻量级数据库,而是后端数据库。它使用 BSON 格式存储数据,支持复杂的数据结构,适用于内容管理系统、物联网等领域。MongoDB 通过动态模式和面向对象的数据存储方式,提供了灵活的数据模型。在 Web 应用中,它通常作为后端存储,通过 API 与前端交互,实现高效的数据管理和实时更新。
270 3
|
前端开发 Java Maven
【前端学java】全网最详细的maven安装与IDEA集成教程!
【8月更文挑战第12天】全网最详细的maven安装与IDEA集成教程!
423 2
【前端学java】全网最详细的maven安装与IDEA集成教程!

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
  • 2
    在Ubuntu 22.04上安装MongoDB 6.0的步骤
  • 3
    前端工程化演进之路:从手工作坊到AI驱动的智能化开发
  • 4
    Vue 3 + TypeScript 现代前端开发最佳实践(2025版指南)
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
  • 推荐镜像

    更多
    下一篇
    oss云网关配置