专栏首页趣谈前端30分钟教你使用nodeJs开发自己的图床应用

30分钟教你使用nodeJs开发自己的图床应用

前言

本文主要复盘笔者的nodeJS,通过一个线上的实战案例来总结node生态常用的技术点和最佳实践。后面会花费大概一个月的时间输出3篇以实战为主的nodeJs项目,本文是第一篇,主要介绍如何使用nodeJs开发一个图床应用。该项目对于测试和个人服务型网站非常实用,大家可以基于此扩展出更强大的应用。本文的图床项目主要使用Koa进行开发,不熟悉的可以先研究一下koa官网,或者看笔者之前写的nodeJS的文章。

你将收获

  • Node应用基本架构方式以及开发NodeJS应用的流程
  • Koa + Koa-Router + glob + Node基本API使用
  • 跨域解决方案Koa Cors的使用介绍,以及如何和前协作跨域
  • 基于@koa/multer封装文件上传中间件
  • 使用React开发前端应用以及xui基本使用

正文

首先图床应用要保证不同域下都可以访问我们的图片资源,不存在跨域问题,并且可以支持在不同域下的应用都可以上传图片到图床上,如下图所示:

结合上图我们可以先做应用的需求分析:

以上是一个非常简单的图床应用的需求分析,我们接下来将根据这个分析来搭建项目架构并开发我们的应用程序。在开始之前我们先看看简单的实现效果:

  • 访问并上传图片
  • 获取图片链接地址
  • 删除图片

这个展示界面只是一个例子,我们可以通过前端的方式设计专属于自己的图床管理界面。这里提供的公共API在任何域名下都是可以调用的,没有跨域问题。

前台地址:基于xui搭建的图床界面前台

api开放地址:图床开放地址(免费勿黑)

1.Node应用基本架构方式以及开发NodeJS应用的流程

有关nodejs的项目架构以及如何组织nodejs目录,我在30分钟教你优雅的搭建nodejs开发环境及目录设计这篇文章中有详细的说明,大家在读完本文之后可以学习研究一下.

开发任何一个应用之前首先要做的就是了解需求,需求理清楚之后就可以做技术选型了,开发基于nodeJS的后端应用的技术方案很多,如果对nodejs很熟悉,完全可以使用原生nodejs来开发应用; 对于中小型应用我们可以直接采用Koa来开发,其中间件机制和插拔式的设计理念可以很方便的让我们开发自己的中间件;如果是涉及到比较复杂的业务线我们可以采用egg.js或者nest.js来作为nodeJS的框架选型,由于本文的图床应用比较简单,所以笔者这里直接采用koa生态来做开发. 接下来先看看我们图床应用的目录结构:

2.Koa + Koa-Router + glob + Node基本API使用

学习koa最快的方式就是直接看官方文档, koa的官方文档非常简单也非常详细,所以不懂的可以先看看官网.

1.服务端路由(接口)设计

服务端路由我们主要使用koa-router, 使用方式也很简单, 代码如下:

const Koa = require('koa');
const Router = require('@koa/router');

const app = new Koa();
const router = new Router();
// 获取列表的路由接口
router.get('/api/list', (ctx, next) => {
  // 获取列表的逻辑
});
// 上传图片的路由接口
router.post('/api/upload', (ctx, next) => {
  // 上传图片的逻辑
});

app
  .use(router.routes())
  .use(router.allowedMethods());复制代码

因为图床的应用非常简单,我们这里就直接使用传统的方式实现, 有关nodeJS的MVC架构可以参考我之前写的node的文章.

2.使用glob来批量获取图片路径

这里批量获取图片路径我们主要使用glob来通过遍历目录来获取, 这种方式在图片数据量小的时候可以使用,但是一旦图片量指数级增长,更建议用数据库来存取,毕竟IO操作还是比较费性能的.笔者这里为了方便采用glob来实现. glob是一个基于node的第三发库,支持我们使用模式匹配的方式遍历文件目录, 具体用法如下:

import glob from 'glob'
// 读取文件
router.get('/api/v0/files',
    ctx => {
        const files = glob.sync(`${staticPath}/uploads/*`)
        const result = files.map(item => {
            return `${config.staticPath}${item.split('public')[1]}`
        })
        
        ctx.body = {
            state: 200,
            result
        }
    }
);复制代码

这样就实现了批量获取图片的api,是不是很简单呢? 我们只需要访问这个接口,就可以拿到图床的所有图片列表了.当我们访问这个接口时,会返回如下数据:

3.跨域解决方案Koa Cors的使用介绍,以及如何和前协作跨域

由于浏览器同源策略,凡是发送请求url的协议、域名、端口三者之间任意一个与当前页面地址不同就被算作跨域。实现跨域的方式也很多,比如JSONP跨域,nginx反向代理,服务器端修改header,设置document.domain,使用postMessage技术等,但是目前主流的方式还是基于cors来实现.

为了让图床提供的服务给不同的域使用, 我们需要配置跨域,这里我们采用koa2-cors提供的应答式跨域解决方案,其实原理也很简单,就是配置http的请求响应头信息, 让我们的服务器支持不同的ip访问.其基本用法如下:

import cors from 'koa2-cors'
// 设置跨域
app.use(cors({
    origin: function (ctx) {
        console.log(111, ctx.url)
        if (ctx.url.indexOf('/api/v0') > -1) {
            return "*"; // 允许来自所有域名请求
        }
        return 'http://qutanqianduan.com'; // 这样就能只允许 http://qutanqianduan.com 这个域名的请求了
    },
    exposeHeaders: ['WWW-Authenticate', 'Server-Authorization'],  // 获取额外的header信息
    maxAge: 5,  //  该字段可选,用来指定本次预检请求的有效期,单位为秒
    credentials: true,
    allowMethods: ['GET', 'POST', 'DELETE'],  // 请求允许的方法
    allowHeaders: ['Content-Type', 'Authorization', 'Accept', 'x-requested-with'] // 允许的header字段名
}))复制代码

通过以上的配置,我们就可以实现基本的跨域了.如果我们想只让某些特定的接口实现跨域,我们可以设置接口白名单, 也可以通过设置域名白名单来达到只让特定的域名访问我们的api接口.这种情况更适用于公司内部多个子系统间互相协作通信的情景.

4.基于@koa/multer封装文件上传中间件

服务器要想接受客户端上传的文件,我们还需要提供文件上传接口, 这里笔者采用koa生态比较主流的实现方式@koa/multer. 具体使用介绍官网写的也很详细,大家可以看官网学习@koa/multer.

1.实现文件上传接口

接下来我们基于它实现文件上传中间件.具体实现如下:

import multer from '@koa/multer'
import { resolve } from 'path'
import fs from 'fs'

const rootImages = resolve(__dirname, '../../public/uploads')
//上传文件存放路径、及文件命名
const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, rootImages)
    },
    filename: function (req, file, cb) {
        let [name, type] = file.originalname.split('.');
        cb(null, `${name}_${Date.now().toString(16)}.${type}`)
    }
})
//文件上传限制
const limits = {
    fields: 10,//非文件字段的数量
    fileSize: 1024 * 1024 * 2,//文件大小 单位 b
    files: 1//文件数量
}

export const upload = multer({storage,limits})复制代码

由以上代码可知我们在destination目录下设置了文件上传的目标目录, 通过filename接口来设置上传之后的文件名. limits是对文件操作的限制,具体的可以根据自己的需求来配置.

其次结合koa-router来实现文件上传接口:

// lib/upload.js
// 为了捕获multer的错误
export const uploadSingleCatchError = async (ctx, next) => {
    let err = await upload.single('file')(ctx, next).then(res => res)
                .catch(err => err);
    if(err) {
        ctx.status = 500
        ctx.body = {
            state: 500,
            msg: err.message
        }
    }
}

// index.js
// 上传文件
router.post('/api/v0/upload', uploadSingleCatchError,
    ctx => {
        let { filename, path, size } = ctx.file;
        let { source } = ctx.request.body || 'unknow';

        let url = `${config.staticPath}${path.split('/public')[1]}`
        
        ctx.body = {
            state: 200,
            filename,
            url,
            source,
            size
        }
    }
  );复制代码

这样我们就能通过任意一个客户端上传图片到我们的图床上了.

2. 删除文件接口实现

我们用原生nodejs实现删除文件的功能, 这里会用到fs模块,具体实现如下:

// lib/upload.js
// 删除文件
export const delFile = (path) => {
    return new Promise((resolve, reject) => {
        fs.unlink(path, (err) => {
            if(err) {
                reject(err)
            }else {
                resolve(null)
            }
        })
    })
}// 删除文件接口
  router.get('/api/v0/del',
    async ctx => {
        const { id } = ctx.query
        if(id) {
            const err = await delFile(`${staticPath}/uploads/${id}`)
            if(!err) {
                ctx.body = {
                    state: 200,
                    result: '删除成功'
                }
            }else {
                ctx.code = 500
                ctx.body = {
                    state: 500,
                    result: '文件不存在,删除失败'
                }
            }
        }else {            ctx.code = 500            ctx.body = {
                state: 500,
                result: 'id不能为空'
            }
        }
    }
  )复制代码

这样,我们在自己的客户端应用中点击删除按钮就可以删除图床上的文件了.当然本图传应用还有很多接口实现细节, 这里就不一一介绍了,感兴趣的朋友可以研究一下.

5.使用React开发前端应用以及xui基本使用

接下来借来实现我们的图床客户端,客户端的实现以及设计风格完全可以由自己来定,所以这里只是介绍一下笔者实现的客户端,笔者将采用react全家桶以及自己开发的第三方ui库xui——基于react的轻量级UI组件库来实现,关于如何开发一个专属于自己的组件库,可以参考笔者之前的文章. 首先我们简单开发一个图床应用的界面:

我们先引入组件库:

import React, { Component } from 'react'
import {
  Notification,
  message,
  Layout,
  Icon
} from '@alex_xu/xui'
const { Header, Content, Footer } = Layout复制代码

接着搭建我们的页面:

class UploadPage extends Component {
    state = {
      fileList: []
    }

    componentDidMount() {
      fetch(apiUrl + '/files').then(res => res.json()).then(res => {
        this.setState({
          fileList: res.result
        })
      })
    }

    showAddress = (item) => {
      Notification.config({
        placement: 'topRight',
      })
      Notification.pop({
        type: 'success',
        message: '图片地址',
        duration: 10,
        description: item
      })
    }

    render() {
      return (
        <div className="upload-wrap">
          <Layout>
            <Header fixed>
              <div className="logo"><Icon type="FaBattleNet" style={{fontSize: '30px', marginRight: '12px'}} />XOSS</div>
            </Header>
            <Content style={{marginTop: '48px', backgroundColor: '#f0f2f5'}}>
              {
                this.state.fileList.map((item, i) => {
                  return <div key={i} className="imgBox" onClick={this.showAddress.bind(this, item)}>
                    <img src={item} alt=""/>
                    <span className="del-btn" onClick={this.delFile.bind(this, item)}><Icon type="FaMinusCircle" style={{fontSize: '24px'}} /></span>
                  </div>
                })
              }
            </Content>
            <Footer style={{color: 'rgba(0,0,0, .5)'}}>趣谈前端 -- 徐小夕</Footer>
          </Layout>
        </div>
      )
    }
}

export default UploadPage复制代码

关于http库我们可以使用任何一种主流的库比如axios, umi-request等. 本客户端代码已发布到github,大家可以clone本地运行一下:

基于react+redux+redux-thunk+xui开发的todoOA管理平台

最后

图床完整代码我会发布在趣谈前端公众号内, 如果想学习更多H5游戏, webpack,node,gulp,css3,javascript,nodeJS,canvas数据可视化等前端知识和实战,欢迎在公号《趣谈前端》加入我们的技术群一起学习讨论,共同探索前端的边界。

本文分享自微信公众号 - 趣谈前端(beautifulFront),作者:徐小夕

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-03-21

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 基于Apify+node+react/vue搭建一个有点意思的爬虫平台

    熟悉我的朋友可能会知道,我一向是不写热点的。为什么不写呢?是因为我不关注热点吗?其实也不是。有些事件我还是很关注的,也确实有不少想法和观点。但我一直奉行一个原则...

    徐小夕
  • 如何用不到200行代码写一款属于自己的js框架

    JavaScript 的核心是支持面向对象的,同时它也提供了强大灵活的 OOP 语言能力。本文将使用面向对象的方式,来教大家用原生js写出一个类似jQuery这...

    徐小夕
  • 《前端5分钟》之使用pace.js美化你的网站加载进度条

    最近做网站体验优化的时候突然发现一个好东西,pace.js(加载进度条插件),gzip之后只有几kb, 简单好用,特地分享出来,也作为自己的一个学习总结。

    徐小夕
  • Linux命令之一句重装软件

    Qt君
  • 如何在Oozie中创建有依赖的WorkFlow

    Fayson
  • LeakCanary笔记

    RefWatcher 的代理类。通过注册 ActivityLifecycleCallbacks 回调,当 Activity 调用 onDestroy() 时进行...

    续写经典
  • javascript-this的指向的问题

    javasript函数中this的指向一直都是许多编程入门新手的一个问题,老师把这个this的指向弄错误。下面我们可以来看看关于this指向的几种情况。

    踏浪
  • 重新理解响应式编程

    这是前段时间我在公司内部Android组的技术分享会上,以响应式编程为主题做的一个专题分享,反馈还不错,但是也有很多问题,因此我根据反馈重新修改和完善了相关的论...

    黄泽杰
  • 分布式图片系统

    随着公司的快速发展,公司对外服务的系统在展现形式方面出现了多样化,目前包括Web端和手机端,不同的展现形式由于设备的多样性和设备对网络的依赖程度的不同,在对图片...

    Lucien168
  • 滴滴出行获超40亿美元融资,采用四拼域名

    滴滴出行是涵盖出租车、专车、快车、顺风车、驾及大巴等多项业务在内的一站式出行平台。近日,有消息称滴滴平台一举拿下了超40亿美元股权融资。目前使用的域名为四拼域名...

    躲在树上的域小名

扫码关注云+社区

领取腾讯云代金券