В последнее время эпидемия дома, и у меня появилось больше свободного времени.Я организую проект Golang, который писал ранее.Weave, добавили некоторые функции и добавили интерфейсную реализацию. В качестве шаблона веб-приложения его можно рассматривать как относительно законченную функцию.Теперь суммированы некоторые проблемы и характеристики проекта, возникшие в процессе разработки.
представлять
Плетение - этоGo+VueРеализованный шаблон веб-приложения поддерживает внешний и внутренний интерфейс с полной аутентификацией, хранилищем, Restful API и другими функциями.
Бэкэнд разработан на базе Golang, а основные особенности следующие:
- Restful API, через
ginвнедрять, поддерживатьswagger - Архитектура MVC
- Хранилище Postgres поддерживается и может быть легко заменено MySQL с помощью
gormдоступ - Кэш Redis
- на основе
JWTСертификация - Грамотное прекращение обслуживания
- запросить ограничение скорости
- Управление контейнерами Docker,
Websocketслужба поддержки - другая поддержка
Prometheusмониторинг, форматирование журналов,PProfЖдать
на основе интерфейсаVueразвивать, использоватьElementPlusБиблиотека компонентов
- Разработка Vue3 с использованием составного API
- использовать
viteбыстрая компиляция - служба поддержки
WebShell, на основеxtermjs - Функция диаграммы, основанная на
echarts - служба поддержки
WindiCSS, чтобы уменьшить написание CSS
Основной интерфейс выглядит следующим образом:
- интерфейс входа
- Интерфейс панели инструментов
- интерфейс приложения
- Веб-интерфейс
Структура проекта
Проект организован следующим образом:
├── Dockerfile
├── Makefile
├── README.md
├── bin
├── config # server配置
├── docs # swagger 生成文件
├── document # 文档
├── go.mod
├── go.sum
├── main.go # server入口
├── pkg # server业务代码
├── scripts # 脚本
├── static # 静态文件
└── web # 前端目录
Бэкэнд структура
серверная часть согласноMVCРеализация архитектуры относится к некоторым передовым практикам сообщества, а именно:
├── pkg
│ ├── common # 通用包
│ ├── config # 配置相关
│ ├── container # 容器库
│ ├── controller # 控制器层，处理HTTP请求
│ ├── database # 数据库初始化，封装
│ ├── metrics # 监控相关
│ ├── middleware # http中间件
│ ├── model # 模型层
│ ├── repository # 存储层，数据持久化
│ ├── server # server入口，创建router
│ └── service # 逻辑层，处理业务
Интерфейсная структура
Интерфейсная реализацияVue3Реализация, аналогичная общим проектам Vue
web
├── README.md
├── index.html
├── node_modules
├── package-lock.json
├── package.json
├── public
│ └── favicon.ico
├── src # 所有代码位于src
│ ├── App.vue # Vue项目入口
│ ├── assets # 静态文件
│ ├── axios # http请求封装
│ ├── components # Vue组件
│ ├── main.js
│ ├── router # 路由
│ ├── utils # 工具包
│ └── views # 所有页面
└── vite.config.js # vite配置
некоторые детали
Зачем использовать JWT
В основном для облегчения горизонтального расширения услуг, если они основаны наCookie+Session,SessionОн может быть сохранен только на стороне сервера и не может быть сбалансирован по нагрузке. Кроме того, через API-доступ jwt можно разместить в HTTP-заголовке.Bearer Tokenсередина.
При использовании Websocket заголовок HTTP не поддерживается, так как аутентификация унифицирована в промежуточном программном обеспечении, вы можете просто передатьcookieХранилище, аутентификацию также можно настроить отдельно для Websocket.
JWT не поддерживает отмену, чего можно добиться, сохранив черный список в Redis.
реализация кэша
Добавление кеша приводит к проблеме согласованности данных. Классическое решение — сначала записать в базу данных, а затем записать в кеш (режим Cache-Aside) для достижения окончательной согласованности. Этот метод может использоваться в проектах с простым бизнесом.
Тогда сначала напишите строку кеша? Если есть запрос на запись и запрос на чтение одновременно, запрос на запись сначала удалит кеш, а если запрос на чтение будет медленным и промахнется, будут загружены старые данные в БД, что может привести к несогласованности данных. При первой записи в БД такой проблемы нет.Если вы хотите сначала записать кеш, то можно использовать метод двойного удаления, то есть обработать кеш один раз до и после записи, что усложнит логику обработки . Если вы не хотите вторгаться в бизнес-код, вы можете асинхронно обновить кеш, прослушивая Binlog.
регулирование запросов
используется текущий пределgolang.org/x/time/rateПредоставленный алгоритм корзины маркеров может работать с пакетным трафиком и может реализовывать управление запросами на одном IP-адресе и на уровне сервера.
Следует отметить, что текущий предел должен различать длинные соединения и короткие соединения, такие какWeaveконтейнер, реализованный вexecинтерфейс, вход в контейнер через Websocket, не должен влиять на другие обычные запросы.
Фронтенд разработка с нуля
Фронталка совсем неопытная, я выбралVue3, главным образом потому, что документация более полная и подходит для новичков. Пользовательский интерфейс основан наElementPlus, в настоящее время это все еще бета-версия, и в процессе использования были обнаружены некоторые ошибки. Не рекомендуется использовать ее в производственном процессе. К сожалению, в настоящее время онаVue3Кажется, что более зрелой UI-библиотеки не существует.
Документация и примеры Vue очень подробные, и с ними можно очень быстро начать работу. Главным образом потому, что я не знаком с CCS, потребовалось много усилий, чтобы настроить стиль, а позже представилWindiCSS, Написано лишь небольшое количество стилей, а все остальные реализуются WindiCSS. Другие маршруты, запросы и графики относятся к соответствующей документации для упрощения реализации.
Я построил относительно полную платформу управления, и я вполне доволен.Я буду продолжать оптимизировать и добавлять некоторые другие функции в будущем.
бегать
Серверная часть работает локально и должна полагаться на Docker.
- Установить базу данных
make postgres
make redis
- работать локально
make run
Интерфейсное использованиеviteкомпилировать
cd web
npm i
npm run dev
узнать большеReadMe
Суммировать
Эта статья обобщаетWeaveАрхитектура и функции , а также некоторые проблемы, возникающие в процессе разработки, позволяют реализовать полное интерфейсное и серверное веб-приложение с нуля, а другие функции будут постоянно оптимизироваться позже.
Смотрите ссылку на проект, добро пожаловать в Star