Используйте 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.

Самый быстрый способ выучить 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());

Так как приложение изображения очень простое, мы будем использовать традиционный метод для его реализации здесь.Для MVC-архитектуры nodeJS, пожалуйста, обратитесь к статье об узле, которую я написал ранее.

2. Используйте glob для пакетного получения путей к изображениям

Здесь мы в основном используем путь к изображению для получения пути к изображению в пакетах.globЧтобы получить путем обхода каталога, этот метод можно использовать, когда объем данных изображения невелик, но как только объем данных изображения увеличивается экспоненциально, рекомендуется использовать базу данных для доступа, в конце концов, операции ввода-вывода все еще относительно дороги. , автор использует его здесь для удобства.globДля этого glob — это сторонняя библиотека, основанная на узле, которая поддерживает сопоставление с образцом для обхода файловых каталогов. Конкретное использование выглядит следующим образом:

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
        }
    }
);

Таким образом реализуется апи для получения картинок пачками.Разве это не очень просто?Нам нужно только зайти в этот интерфейс,чтобы получить список всех картинок кровати.При доступе к этому интерфейсу будут следующие данные быть возвращено:

3. Введение в использование кросс-доменного решения Koa Cors и как сотрудничать с прежним кросс-доменным

Из-за политики одинакового происхождения браузера любой протокол, имя домена и порт URL-адреса запроса, который отличается от адреса текущей страницы, считается междоменным. Существует множество способов достижения кросс-доменности, таких как кросс-доменность JSONP, обратный прокси-сервер nginx, модификация заголовка на стороне сервера, настройка 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字段名
}))

С помощью приведенной выше конфигурации мы можем достичь базового междоменного доступа. Если мы хотим разрешить только некоторым конкретным интерфейсам достижение междоменного взаимодействия, мы можем установить белый список интерфейса или настроить белый список домена для достижения только определенных доменных имен. Эта ситуация больше подходит для ситуации, когда несколько подсистем внутри компании взаимодействуют друг с другом.

4. Упаковать промежуточное ПО для загрузки файлов на основе @koa/multer

Чтобы сервер мог принимать файлы, загруженные клиентом, нам также необходимо предоставить интерфейс загрузки файлов.Здесь автор принимает основной метод реализации экологии коа @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})

Из приведенного выше кода видно, что мы установили целевой каталог для загрузки файла в каталоге назначения и установили имя файла после загрузки через интерфейс имени файла.Ограничения — это ограничения на операции с файлами, которые можно настроить в соответствии с вашими собственные нужды.

Затем объедините 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.

Далее мы будем использовать его для реализации нашего клиента карты кровати.Реализация и стиль дизайна клиента могут быть полностью определены вами, поэтому здесь только клиент, реализованный автором.Автор будет использовать ведро семейства реактивов и третье -партийная библиотека пользовательского интерфейса, разработанная мной.xui — облегченная библиотека компонентов пользовательского интерфейса на основе React.Чтобы понять, как разработать собственную библиотеку компонентов, вы можете обратиться к предыдущей статье автора. Во-первых, мы просто разрабатываем интерфейс приложения с картой:

Сначала мы представляем библиотеку компонентов:

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, вы можете клонировать его локально и запускать:

Платформа управления todoOA, разработанная на основе react+redux+redux-thunk+xui

наконец

Я опубликую полный код кровати-картинки в публичном аккаунте Qutan, если вы хотите узнать больше.игра Н5, webpack,node,gulp,css3,javascript,nodeJS,визуализация данных холстаВ ожидании передовых знаний и реального боя, добро пожаловать в нашу техническую группу в общедоступном аккаунте «Интересный передний конец», чтобы вместе учиться и обсуждать, а также вместе исследовать границы переднего плана.

больше рекомендаций

• Реализовать проект полного стека CMS от 0 до 1 на основе nodeJS (включено)
• Реализовать проект полного стека CMS от 0 до 1 на основе nodeJS (средний) (включая исходный код)
• Vue и React для проекта полного стека CMS (часть 2) (включая исходный код)
• 5 минут, чтобы научить вас писать фиктивный сервер данных с помощью nodeJS
• Научу разрабатывать библиотеку компонентов на основе vue с нуля до единицы
• Научу строить компонентную систему фронтенд команды от 0 до 1 (обязательно для продвинутых и продвинутых)
• 10 минут, чтобы научить вас 8 часто используемым кастомным крючкам вручную
• «Master Redux» для разработки платформы управления задачами (вкл.)
• 15 минут, чтобы понять шаблоны проектирования JavaScript, которые должны знать фронтенд-инженеры (с подробной картой ума и исходным кодом)
• Картинка, чтобы научить вас быстро играть в vue-cli3
• «Внешняя сводка боя» с использованием postMessage для реализации подключаемого робота междоменного чата.