使用nodeJs开发本身的图床应用

时间 2020-03-22

标签使用 nodejs 开发本身应用繁體版

原文原文链接

前言

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

你将收获

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

正文

首先图床应用要保证不一样域下均可以访问咱们的图片资源，不存在跨域问题，而且能够支持在不一样域下的应用均可以上传图片到图床上，以下图所示： css

结合上图咱们能够先作应用的需求分析：

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

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

这个展现界面只是一个例子，咱们能够经过前端的方式设计专属于本身的图床管理界面。这里提供的公共API在任何域名下都是能够调用的，没有跨域问题。

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

api开放地址：图床开放地址（免费勿黑）vue

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

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

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

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

学习koa最快的方式就是直接看官方文档, koa的官方文档很是简单也很是详细,因此不懂的能够先看看官网.

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

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

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的文章.webpack

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

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

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,是否是很简单呢? 咱们只须要访问这个接口,就能够拿到图床的全部图片列表了.当咱们访问这个接口时,会返回以下数据: css3

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数据可视化等前端知识和实战，欢迎在公号《趣谈前端》加入咱们的技术群一块儿学习讨论，共同探索前端的边界。