Создайте крутой рабочий процесс с личным блогом!

адрес блогаобмениваться цепочками друзей

написать впереди

У каждого фронтенда должен быть свой блог, потому что это не просто блог, а еще и рабочий процесс.Как понять эту проблему?Это изначальный замысел разработки блога.

Кажется, у меня нет привычки вести блоги, или я чувствую, что не могу писать некоторые заметки, которые можно публиковать на такой технологической платформе, как Nuggets, но которые будут использоваться в повседневной жизни, например, некоторые документы, записанные или ежедневно, обычно он будет сохраняться локально или в каких-то облачных документах, но это недостаточно понятно, это будет неудобно и во многих сценариях будет иметь ограничения, поэтому у меня есть идея создать свой личный блог.

Этот год выглядит так, будто не так много вещей, кроме многих людей掘金Присоединяйтесь ко мне и попросите у меня исходный код блога, так что я поделюсь с вами опытом разработки этого блога в свободное время.

Подводя итоги этого года, похоже, нет времени писать, поэтому давайте поделимся результатами этого года.

статический блог

В начале, чтобы быстро создать личный блог, я выбрал несколько веб-сайтов типа генератора статических веб-сайтов, таких какhexo,vuepress, Этот вид фреймворка, преимущество этого вида блога в том, что он быстрый, а название многих подобных блогов обычно五分钟打造一个xxxxТакой заголовок, очевидно, является преимуществом, но во многих сценариях, поскольку он статичен, некоторые взаимодействия сделать непросто, например, комментарии к статьям, регистрация входа, взаимодействие с пользователем, эти удобства трудно реализовать очень гибко, Хотя некоторые сторонние плагины могут быть подключены для достижения этих функций, нельзя избежать того, что это просто статический блог.Например, такие операции, как публикация статей, должны обновляться и переустанавливаться, что особенно неудобно.vuepressЯ думаю, что это было проще, чтобы сделать техническую документацию,hexoПреимущество в том, что в сообществе есть большая часть сопровождающих, конечно же, отраслевых разработчиков.apiЭто позволяет вам создать тему самостоятельно или ссылаться на темы других людей, и это может быть очень круто. Это особенно полезно для новичков и обеспечивает хорошую платформу для начинающих. Вот почему я был очень заинтересован в первую очередь. способность развивать личный блог, я чувствую себя前端开发工程师Необходимо создать для себя личный полноценный блог.

Для чего нужен блог?

Я думаю, что у каждого свое мнение на этот счет, многие считают ведение блога очень наивным, а также считают, что нет необходимости тратить силы на разработку собственного блога, считают, что различные облачные платформы достаточно удобны. Но есть также много людей, которые считают полезным вести личный блог, иметь платформу для записи себя, полностью контролировать себя и выполнять любую функцию, которую они хотят выполнить самостоятельно, что достаточно привлекательно, но я думаю, что это выгодно. Не только это, но и ведение блога - это то же самое, что облачная платформа для записи собственного блога.

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

Предварительная подготовка

Как собственный проект, прежде всего, вы должны выяснить, что вам нужно сделать, и в какой степени вам нужно это сделать.Конечно, самое главное, что вам нужно знать, почему вы это делаете, для чего он полезен и что он может сделать. .

Как фронтенд-инженер, мы должны пойти иUI设计师Разбираемся с, поэтому нам нужно нарисовать схему-прототип, здесь всем рекомендуем пользоватьсяprocessЭта платформа используется лично в течение длительного времени.Вы можете сделать то, что вам нужно в Интернете и поделиться этим с другими, поэтому это относительно просто.Многим это может показаться сложным, но это не так.前端工程师Этим занимаются каждый день, и на этот раз можно добиться обычной неудовлетворенности самих дизайнеров, и нам не нужен слишком сложный дизайн, структура макета является основой переднего прототипа фигур, которые хотели бы иметь собственный внешний вид борьбы с фасадом. подобно? Это зависит от вас, таких как обычные两栏布局,三栏布局,双飞翼布局Подожди, с такой структурой можно свободно играть,UIЭто пока достаточно сложно.Для фронтенда можно изящно скопировать.Как культурный человек скажем так借鉴Да, в конце концов, люди часто говорят, что работа дизайнера — это не просто копирование и копирование (ручная голова собаки)!

Технический отбор

После какого-то оригинала идет технический отбор.Он у всех разный.Ведь технический стек у всех разный. Как проект блога, я считаю, что другие итерации будут добавлены в более поздний период, поэтому я решил разделить его на три части.

Страница внешнего интерфейса: страница отображения блога, внешняя страница вывода, здесь для просмотра другими
Система управления фоном: используется для управления блогами, конечно, этот фон управления можно использовать для нескольких
Back-end разработка проекта: дляAPIОбеспечить разработку интерфейса, предоставить возможность, требуемую блогом

Используемый стек технологий главной страницыnuxt[Среда рендеринга vue на стороне сервера], зачем использоватьnuxtПотому чтоvueилиreactЭтот одностраничный проект не может быть просканирован пауками Baidu, поэтому он не будет включен, поэтому выбран рендеринг на стороне сервера.

Система фонового управления используетvue3открытым,vue3Она давно отсутствует, и в компании не использовалась.Конечно, личные проекты можно использовать для первопроходцев.Здесь, я думаю, система управления фоном не имеет значения. Для каждой фронтенд-разработки она должно бытьЗнакомый с дорогой.

Конечно, задняя часть — это самый простой способ выбрать переднюю часть.NodeJsТеперь, я думаю, все это знают, и фреймворк выбран.NestJsЭтот фреймворк тоже новый, но вGithubВышеупомянутый проект очень популярен, поэтому я выбрал этот фреймворк.

Разверните эту часть, используяdocker+gitlabЭто набор относительно распространенных систем, поскольку отдельные проекты также строили свои собственные, чтобы облегчить собственное управление и развертывание.私有Gitlab.

Структура проекта

После того, как мы рассмотрели стек технологий, нам нужно спроектировать взаимодействие в нижней части проекта концепции мозга.思维导图Приходите рисовать, здесь еще рекомендуютprocessЭтот инструмент очень полный, вы можете рисовать много вещей, и в основном вы можете его использовать.

рекомендоватьprocess Зарегестрированный адрес

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

С этой картой разума в первые дни мы обнаружили, что казалось, что было гораздо яснее, что делать, как это сделать, и было ли это ясно в взгляд. Конечно, это не то, что можно подумать о один раз. Персональный совет в睡前В это время я думаю о том, что я делаю.Когда я закрываю глаза, я могу мыслить более четко и эффективно.Я также привык каждый вечер перед сном думать об организации работы на следующий день.Оно естественно упадет уснул, а на следующий день будет удвоенный результат при половинных усилиях.

Последовательность разработки проекта

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

Во-первых, следует учитывать, что стыковка интерфейса зависит от бэкэнда, а бэкенд дается нам до того, как мы сможем пристыковаться.
Во-вторых, когда у нас нет доступа к бэкенду, мы ничего не можем сделать, кроме как ждать, пока бэкенд не будет реализован.

Когда вы владеете полным стеком, порядок контролируется вами, вы можете сделать это в обратном порядке, и вы можете сделать бэкенд после того, как написан интерфейс, потому что поля определяются вами, взаимодействие также разработано вы, вы можете сделать все это Поймите это.

Но мои личные привычки развиваются в то же время, в отличие от передней части задней части самое интересное, что所见即所得Написанный код может получить обратную связь сразу, и есть ощущение мастерства.Это тоже счастливый момент по сравнению с бэкендом.Лично преимущество одновременной разработки в том, что совместная ошибка отладки будет очень быстрой, или ошибка процесса будет я могу изменить обе стороны одновременно, что хорошо, и я могу открыть два проекта одновременно без особых проблем.Конечно, здесь есть некоторая ерунда.Привычки разработки у всех разные, и это все вам решать.

в развитие

После входа в разработку сцена возвращается в знакомое нам поле, то есть ежедневные потребности развития спроса. Я считаю, что всем будет удобно, если они дойдут до этой стадии. Когда мы доберемся сюда, мы начнем развиваться. По сравнению с технология,Личные навыки все еще относительно поверхностныЯ не могу дать вам хорошее техническое руководство, я просто хочу поделиться своим личным проектным опытом, надеюсь, все будут милосердны.

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

Разработка главной страницы

Рамка :nuxt

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

каталог проекта

.
├── Dockerfile                          *docker部署配置
├── README.md                           *项目说明文档
├── app.html                            *主页
├── assets                              *静态资源
├── components
│   ├── base                            *基础组件封装
│   ├── chat                            *聊天室组件封装
│   ├── kit                             *基础组件配套组件
│   ├── layout                          *布局组件
│   └── page                            *页面级别组件
├── configs
│   ├── env.development.js              *测试环境配置文件
│   ├── env.production.js               *生产环境配置文件
│   ├── index.js                        *配置文件导出
│   └── sitemap.js                      *网站地图
├── layouts
│   ├── chat.vue                        *聊天室布局
│   ├── default.vue                     *默认布局
│   └── error.vue                       *错误页面布局
├── nuxt.config.js                      *全局配置文件
├── package.json
├── pages                               *页面开发
├── plugins
│   ├── api-repositories.js             *Api接口封装
│   ├── axios.js                        *axios全局请求
│   ├── baidu.js                        *百度统计
│   ├── directive                       *各种指令封装
│   ├── element-ui.js                   *element-ui引入
│   ├── format.js                       *全局时间格式化方法
│   ├── socket.js                       *socket-io
│   ├── storeCache.js                   *store仓库本地缓存
│   └── svgIcon.js                      *全局svg图标注册
├── server
│   ├── index.js                        *项目启动文件
│   └── pm2.config.json                 *pm2启动配置
├── static                              *favicon robots等文件
├── store                               *vuex
├── gitlab-ci.yml                       *gitlab-ci 配置文件
└── stylelint.config.js

nuxtСинтаксис фреймворка следующийvue, но в некоторых местах он будет немного отличаться. Вот несколько сводок, чтобы все могли быстрее приступить к работе.

существуетvueсерединаrouterМаршрутизация настроена сама по себе, вnuxtэто конвенционный маршрут, который похож наegg, поможет вам генерировать маршруты в соответствии с каталогом папки, нам не нужно настраивать маршруты, его правила соответствуютpagesКаталог генерирует маршрут для интерфейса дерева каталогов, для некоторых动态路由является_метод сопоставления
axiosЗапросы к интерфейсу тоже разные, первое, что нужно отметить, это то, чтоnuxtПоддержкаaxiosПакетnuxtjs-axiosвместо нашего обычногоvueиспользуемый модуль,nuxtВсе конфигурации начинаются с注入式的方式Добавлено указанное выше дерево каталоговpluginsформа, это иkoaочень похожий,洋葱圈的Форма цепного вызова, как правило, нам нужноpluginsОн настраивается внутри, обычно функция экспортируется, и параметры функцииcontextКонтекст, который несет в себе все вещи, которые нам нужно использовать, здесь вы можете распечатать его, а затем перейтиnuxt.config.jsвнутриpluginsПредставлен вmodulesЗарегистрируйте этот модуль в , и с тех пор этим модулем можно будет нормально пользоваться.Следует отметить, что введение каждого плагина связано с тем, что он链式调用Так что есть приказ, например, когда мы заключаемся в инкапсулировании интерфейса, мы должны представить его до этогоaxios, иначе мы не сможем его получить, и он будет доступен после внедрения промежуточного программного обеспечения.ctxЭто промежуточное ПО монтируется на глобальный объект , поэтому мы вводим его по порядку, некоторыеcssВведение также необходимо обратить внимание, использоватьui框架的Пора обратить внимание на этот вопрос.
А как насчет иконок, которые мы используем каждый день?svgв основном, ноnuxtПо умолчанию нетsvg-loaderДа, тут нужно настроить свою, и файл конфигурации тоже лежит вnuxt-config.jsизbuild, что-то вроде этого
```
build: {
    extend(config, ctx) {
      const svgRule = config.module.rules.find((rule) => rule.test.test('.svg'))
      svgRule.exclude = [path.resolve(__dirname, 'assets/icons/svg')]
      config.module.rules.push({
        test: /.svg$/,
        include: [path.resolve(__dirname, 'assets/icons/svg')],
        loader: 'svg-sprite-loader',
        options: {
          symbolId: 'icon-[name]'
        }
      })
    },
```
чтобыsvg图标进行变色, Я использовалvue2-svg-icon, тоже столкнулся с ямкой посередине, экспорт этого компонента вvueпо умолчанию экспортируется в проектsrc/iconsвсе значки внутри, зарегистрируйте их иnuxtВ нем такого каталога нет, его нужно создавать самому вручную, и надо отметить, что здесь тоже есть яма, вnuxtОн не различает регистр имени файла. Когда вы переименовываете предыдущий файл, измените новый файл на предыдущее имя. В это время файл все еще указывает на предыдущий файл. Мы видим, что корневой каталог каждого успешного запуск есть один.nuxtСкомпилированный файл, этот файл кэшируется, много раз будут возникать путаные ошибки, которые он генерирует, если вы не понимаете, вы можете удалить его..nuxtЗатем попробуйте перезапустить.
существуетnuxtЕсть две среды вssr服务端渲染, поэтому при печати вы обнаружите, что он будет напечатан дважды, а это означает, что код выполняется в обеих средах, поэтому вmountedполучено вdom节点Об ошибке по-прежнему сообщается, потому что она генерируется, нам нужно судить, что среда принадлежит浏览器можно получить, например:
```
process.browser && console.log('这是浏览器环境')
```
layoutкомпоненты макета, это дляvueизspaДля проектов нам обычно нужен только один корневой узелapp, если мыappстраница сделала三栏布局的管理端, то значит мы на других страницахrouter-viewбудет отображаться на этой странице, стиль макета изменить нельзя,nuxt的layoutЭто нужно для того, чтобы решить такую сцену, чтобы предоставить вам несколько узлов, а затем вы можете выбрать, какой узел монтировать и отображать под ним, и когда вы его используете, вам нужно только页面组建中添加此配置项即可.
Запрос данных, много данных, которые мы хотим получить перед отрисовкой интерфейса, не похожиspaЗапрашивать данные после рендеринга страницы или синхронно,nuxtпри условииasyncDataДля выполнения этой операции данные могут быть запрошены здесь, и это раньше, чем отрисовка компонента, а значит, здесь их точно не будет.domТакже нужно обратить внимание и обратить внимание на документацию, ее можно использовать только под компонентами уровня страницы, то естьpagesПервый слой ниже не выполняется, даже если он написан обычными компонентами. Также на компонентном уровне естьAPIможно использоватьFetch, это то же самое.
использоватьnuxtНужна крупная ключевая точкаseoПоэтому стоит обратить внимание на эту проблему при разработке, и об этом мы подробно поговорим позже.

nuxtВроде просто, а на самом деле ям предстоит пройти много, многоvueупаковкаnuxtОн не поддерживает, вам нужно обратить внимание перед его использованием, вот лишь небольшая часть резюме, может быть еще много чего, что вы не можете вспомнить, если у вас все еще есть вопросы, добро пожаловать, чтобы оставить сообщение в комментарии область, см., и я помогу вам, будет для вас ответом.

Часть ресепшн просто подытожена для всех.После того, как много дел будет сделано, я забуду это.Если я столкнусь с этим позже, я добавлю.Многие вещи на ресепшене тоже нужно учитывать производительность.Я не буду обобщать его здесь.Дополнение Настало время поговорить об оптимизации производительности.

Система управления фоном

Рамка:vue3.x + vite

На самом деле, лично я не думаю, что можно много говорить о системе управления фоном блога, я полагаю, что каждый интерфейс хорошо знаком с этой областью, потому что она более или менее всегда подвергается воздействию типа фона. Вот мое личное мнение Вернуться к началу Точка зрения, блог есть блог, сингл больше, чем блог, нам не сложно построить бэкэнд менеджмент блога, надеюсь, здесь будет реализовано больше креативных идей, я хочу создать рабочий процесс для себя, front-end проекты могут быть Есть много инкубаций, но я думаю, что хорошо бы интегрировать один в фоне, и одного общего достаточно.Помимо блогов, мы можем управлять многими вещами здесь, управлять ежедневной работой, успеваемостью в обучении, нашей собственной структурой задач и т. д. Есть много последующих действий по этим вещам.Вы также можете поделиться моим личным мнением.

Таргетинг наvue3В настоящее время экология на самом деле очень зрелая, это я тоже давно подытожил, вы можете прочитать предыдущие статьи.Длинный текст поможет вам полностью понять vue3,
Админ что-то я думаю, что мы можем быть больше обмена идеями, я думаю, что технически не похоже, чтобы разделить личность хороших вещей.

Разработка бэкэнд-модуля

Рамка:nestjs
Стек технологий:Redis typeorm mysql socket-io......

использоватьNodeJsнаписать бэкенд, я считаю, для большинства前端工程师Это самый экономичный и быстрый способ начать работу.后端更需要注重项目规范、整体逻辑,Если у меня есть время определить хороший шаблон спецификации проекта для себя, я думаю, что это необходимо.Второе, что back-end проект должен быть максимально осторожным перед разработкой, попытаться обдумать общую ситуацию и двигаться снова, и может быть не очень легко вставить много чего потом.Это дружелюбно, так что я могу нарисовать один до разработки思维导图необходимо.

Или сначала посмотрите на базовый каталог проекта:

.
├── Dockerfile                      *docker编排文件
├── README.md                       *项目说明文档
├── nest-cli.json                   *配置文件
├── package.json
├── pm2.conf.json                   *pm2配置文件
├── pnpm-lock.yaml  
├── src                             *开发文件夹
│   ├── app.module.ts               *根模块
│   ├── cache                       *缓存Redis
│   ├── common                      *公共文件
│   ├── config                      *配置文件 包含所有配置
│   ├── constant                    *常量文件
│   ├── decorator                   *自定义装饰器
│   ├── filters                     *管道过滤器
│   ├── guard                       *权限验证
│   ├── interceptor                 *统一返回格式和错误全局拦截
│   ├── lib                         *扩展库 cdn文件存储等等
│   ├── main.ts                     *入口文件
│   ├── modules                     *模块
│   ├── swagger                     *swagger文档
│   ├── tasks                       *定时任务
│   ├── templates                   *服务端渲染模块 邮箱注册
│   └── utils                       *自定义工具库
├── test                            *单元测试
├── tsconfig.build.json
├── tsconfig.json
├── utils
└── views

это мое личноеnestКаталог проекта, может у всех есть новая запись, примерно эти функции,NestJsутверждают, чтоNodeсерединаspringbootрамки, в настоящее время очень горячие, вNode的框架中, Сейчас я вGithubСкорость нарастания высокая, так как контактexpress,koa,Egg,HapiДля пользователей других фреймворков мне все же очень нравится этот фреймворк, спецификация проекта относительно ограничена, а форма инверсии внедрения зависимостей будет очень понятно читаться в коде,mvcМногослойность тоже очень хорошая, и это довольно удобно, судя по официальной документации сайта, можно в принципе построить базовый проект. То же самое верно и для задней части, и я поделюсь этим с вами.NestJSПроблемы, на которые нужно обратить внимание, уже являются идеей блога.Прежде всего, вам еще нужно нарисовать простую интеллект-карту для общего развития проекта и тех функций, которые вы можете прогнозировать для разработки и их реализации.

Это рано, вероятно, следовало ожидать, последнее может что-то добавить, мы не можем считать слишком хорошим на раннем этапе, чтобы знать, сколько сердечных проблем и сценариев вы можете столкнуться, а затем следовать порядку развития, который может.

Персональный проект должен учитывать какие-то базовые сервисы и делать какие-то пресеты при разработке базовой конструкции.Конечно, у нас также должен быть набор собственных базовых шаблонов для быстрой разработки, а не начинать каждый раз с нуля.Это было бы расточительством. времени.

на основеNestJsСуществует не так много общего, чем можно поделиться с вами. Я чувствую, что на какое-то время сложно обобщать вещи на уровне кода. Я хотел бы поделиться некоторыми относительно важными модулями в этой структуре для всех. Я надеюсь, что друзья, которые использовать этот фреймворк можно полезно.

Для низкоуровневых фреймворковexpress,koaЭтот тип фреймворка с низкой степенью инкапсуляции относительно низок в инкапсуляции, многие вещи должны быть построены на колесах, разработка на уровне предприятия имеет множество различных спецификаций, ее трудно унифицировать, а ситуация с очень гибкой разработкой также возросла. для развития и дляNestJsЭтот тип структуры и текущие внутренние пользователи являются многоточечными.EggJsЭто почти то же самое, что и структура прикладного уровня.Он предоставляет вам много колес для использования, аутентификацию авторизации, обработку маршрутизации, обработку ошибок и т. д. Вы можете легко использовать его, если хотите, и в то же время время, сам фреймворк поставляется с большим количеством норм.MVCСтратификация также очень четкая, вNestJsСреда, внедрение зависимостей, конвейер, защита, перехватчик и другие механизмы в основном охватывают различные потребности разработки, из коробки, сокращают много времени и в то же времяNestJsдляTSвысокий уровень поддержки, персональныйTSИсследований очень мало, но в процессе контакта я все еще чувствую, что он более стандартизирован, грамматические подсказки и механизм сообщения об ошибках относительно очень удобны, и многих ошибок можно избежать на этапе разработки. уровень фреймворка, я лично чувствуюNestJsЭто легко справиться с развитием уровня предприятия, стоит учиться, этоAopузор иJavaочень похоже наJavaРазработчики считают, что изучение этого также позволит очень быстро начать работу.
Первая точка аутентификации авторизации,NestJsпри условииGuards, Guards — это аннотированный сторож, описывающий ограничения доступа декорированного контроллера. Он должен реализовать интерфейс CanActivate. Охранники несут единственную ответственность за принятие решения о том, может ли запрос быть маршрутизирован или нет. До этого самая авторитетная аутентификация, с которой мы сталкивались во внешнем интерфейсе, — этоJWT, то есть,Jsonwebtoken, мы часто говоримtoken, обычно добавляется в заголовок запросаAuthorization, на самом деле есть очень похожая вещь на этоAuthentication, они очень похожи, во-первых, есть ли у вас идентификатор доступа, если нет, вы столкнетесь с часто используемым401, в то время как другой403,За это дело отвечает Guards.Как и front-end routing guards,его можно использовать глобально или локально.В официальной документации упоминаются два.Возможно я не слишком глубоко его изучал.Лично я не думаю это так просто в использовании. Некоторые вещи также неудобны. Для проектов уровня предприятия, как управлять разрешениями таким образом будет громоздким в прошлом, и это также немного слишком карри. Как правило, люди считают, что службы похожи на это Наконец, есть отдельная система разрешений.RPCСпособ вызова более подходящий, где находится этот процесс, и его можно настроитьGuardОхранники используются по всему миру, получите их здесьtokenПроанализировав токен, выполните глобальную аутентификацию авторизации на этом уровне и получите доступ к нему здесь.RPCТакже очень удобно вызывать режим аутентификации общего авторитета.Я лично считаю, что форма в официальном документе немного хлопотна.
Второй пункт маршрутизации и проверки параметров, маршрутизация иkoa,илиexpressОни похожи и немного отличаются, и дерево каталогов сложено последовательно, но здесь проверяются параметры,NestJsКонцепция проверки трубопровода встроена вValidationPipe, этот модуль будет сочетатьclass-validator,class-transformerИспользовали вместе, что толку?Мы обычно проверяем параметры у клиента разными способами.NestJsнеобходимо настроитьDtoчтобы убедиться, что это похоже наJavaЭто будет определено вамиDtoЧтобы быть проверенным и может помочь вам выполнить некоторую проверку перед преобразованием в Сенат, что это означает, если нам нужно, это номер 1, но клиент пришел строку 1, если мы не имеем дело, выкинут ошибка клиенту, где мы можемclass-transformerнепосредственно преобразовать его вNumberТип позволяет избежать лишних шагов, конечно, это всего лишь простой пример, в реальных сценариях такая форма действительно многообещающая и экономит много вещей.Dtoправила, которые вы определяете и с которыми можете работатьSwaggerИспользуйте, это похоже на то, что использует моя текущая компанияHapiрамка плюсJoiПодтвердите такую схему. В сравнении, я думаюNestJsСлои более четкие, а бизнес-функции каждого уровня тщательно разделены, а читабельность высока.
Третий пункт, который мы обычно используемSwaggerДокументацию также очень просто интегрировать сюда, впервые представленную@nestjs/swaggerПакеты и документы имеют базовую конфигурацию, а второй шаг непосредственно вmain.tsЕго можно напрямую ввести и использовать в интерфейсе, и интерфейс будет здесь.DtoЧтобы отобразить параметры проверки различных интерфейсов, вам необходимо передать декораторы на уровне интерфейса, такие как@ApiTagsидентифицировать интерфейс, вDtoиспользуется в@ApiPropertyобъяснить интерфейс. А еще это очень полезно и удобно.
Четвертый пункт возврата параметра, у каждого back-end проекта вообще единый формат возврата, вне зависимости от успеха или неудачи, нам нужно делать единый формат обработки перехвата данных при возврате, аналогичный нашему для front endaxiosодинаковые, единообразно обрабатывают ошибки или данные.NestJsпри условииNestInterceptorПерехватчики предназначены для нас, перехватчики предоставляют множество функций, эти функции подлежат аспектно-ориентированному программированию.AopВдохновленные этим слоем, мы можем сделать многое, реорганизовать данные, исправить неправильную классификацию, исправитьcode码Переписать и т. Д., Эти функцииexpressС большинством этих низкоинтеграционных фреймворков нужно обращаться вручную.Здесь мы более удобны в использовании и нужны всего два.Первый шаг - создать такой перехватчик, а второй шаг - внедрить и использовать его глобально.На самом деле, Таким образом используются не только перехватчики, но и большинство функций интеграции.
Пятый пункт - различие в нескольких средах, обычно бэкэнд-проекты также имеют так называемые.envпрофиль среды, но кто-то спросил меня, почемуprocess.env.xxxЯ не могу получить значение. Здесь следует отметить, что во внешнем окружении многие вещи на самом деле делает за нас фреймворк. Мы можем получить его напрямую. В бэкэнде нам нужно вручную объявить пути к этим файлам. Как правило, мы можем использовать что-то вродеdotenvТакая библиотека может решить эту проблему, иначе мы не сможем ее прочитать. Второй момент заключается в том, что обычно мы извлекаем и настраиваем конфиденциальную информацию вместе, например数据库конфигурация,cdnадрес,RedisАдреса и т.п., если общий код помещается в приватныйGitК счастью, если вы размещаете его на общедоступной платформе, помните, что эти вещи нужно держать в секрете, и большинство этих файлов конфигурации обычно передаются через磁盘挂载Относительно безопасно поместить его в развернутый каталог.
Шестой пункт оWebsocketЭтот вид дуплексной связи я использовал более высокой инкапсуляцией и более удобным для использования в проектеsocket-io, Хотя это не одно и то же по сути, они почти одинаковы с точки зрения функций реализации.Для этой дуплексной связи он иHttpЭто не обычный интерфейсIPпорт, что означает, что он на самом деле не зависит отHttpКроме того, он также требует собственной уникальной авторизации аутентификации, которая не подходит для глобального канала, прежде чем он ушел.Нужно понимать, что это интерфейс, который необходимо повторно аутентифицировать.Как правило, его можно использовать при подключении в первый раз.tokenПринесите заголовок запроса для проверки, поэтому проверьте, а также нужно обратить внимание при развертывании, если этоdockerЭто развертывание требует, чтобы два порта были открыты для внешнего мира. и если вы используетеPm2Чтобы развернуть, вы обнаружите, что он будет использовать четыре процесса для запуска проекта, что приведет к четыремsocketНа интерфейс нужно обратить внимание, будет связьwsИнтерфейс не в комнате, чтобы рассмотретьpm2Проблемы возникают из этого развертывания.
Седьмой пункт касается безопасности бэкенд-проектов.jwtВыполняется только базовый уровень аутентификации.Во многих случаях фреймворк также будет выполнять множество проверок безопасности, но нам все еще нужно учитывать многие вопросы со стороны бизнеса, такие как ограничение размера передаваемых файлов, количество передач в день, и количество комментариев от пользователя.Ограничений, антикраулеров, анти-лича изображений, как фронтенда может быть недостаточно для рассмотрения, это тоже вопрос, который необходимо подробно рассмотреть в будущем , но когда вы пишете back-end проект, вы должны иметь чувство безопасности, многие вещи будут неограниченными. Большое количество потерь было вызвано вредоносными атаками.

Инсайтов о бэкенд-проекте немного, и он недостаточно глубокий, а также в общих чертах делится с вами информацией оNestJsНемного основ, мне до сих пор очень нравится этот фреймворк, могу его всем рекомендовать, можете попробовать, если есть вопросы, добавляйте мой vx в обсуждение группы.

Развертывание проекта

Долгое время фронтенд мало что понимал в деплойменте.Если не практиковаться самому, то это действительно слепое пятно.К тому же деплой на самом деле очень прост для фронтенд проектов.Вы можете поделиться несколькими фронтендами Завершить методы развертывания.

码云[gitee]изGit pagesВы можете развернуть бесплатно, изменить название проекта на свое имя, а затем зайти в настройки и выбрать этот сервис для развертывания фронтенд-проектов без затрат, здесь все очень просто.GithubТо же самое можно сделать.
использоватьcdn, По сути, front-end проект представляет собой несколько статических файлов, которые мы можем напрямую загрузить в аналогичный腾讯云Этот метод доступен прямо в объектном хранилище, этот метод очень прост, вы можете попробовать его, когда не знаете, как развернуть и хотите, чтобы ваш сайт видели другие.
Если вы не хотите быть слишком наивным, хотите иметь немного знаний о развертывании и не знаете, как управлять им самостоятельно, мы можем установить панель управления сервером,пагода, я считаю, что многие люди соприкасались с этим инструментом.После того, как сервер будет установлен, будет бэкэнд.Официальная установка сайта написана очень подробно и может быть опробована.Когда я еще учился в школе, развертывание, которое Xiaobai впервые вошел в контакт с ним.Есть также много руководств по этому делу.Если внешний интерфейс не знает много о развертывании, вы можете попробовать это.
Существует множество способов развертыванияnginx, или на основеjenkins, на основеdockerиз этихCICDПакеты также используются многими компаниями.

Методы развертывания относительно разнообразны, а личные проекты используютdocker+gitlabразвернуть.CICDОбщий процесс аналогичен, черезGitизhooksЧтобы уведомить сервер о получении последнего кода, а затем упаковать и развернуть, это базовый процесс, и между ними можно добавить множество других процессов: код, тестовое покрытие, некоторое обнаружение, ветвление, кэширование и т. д. Промежуточный процесс. ссылка присоединяется, включаетCICDВпереди еще довольно много дел, и есть время, посвященноеCICDСделайте резюме.

Постпроектное планирование

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

Я всегда чувствовал, что блог также является веб-сайтом-инструментом, а не только для обмена и записи статей. Он может записывать большие и подробные статьи, которыми можно поделиться, а также может записывать небольшие и изысканные ежедневные заметки. Многие вещи предназначены для собственного удобства. и не нужны. Это слишком красиво, но это нужно использовать. Я видел блоги многих блоггеров, и это не выглядит так уж красиво.

Простых статей недостаточно для удовлетворения потребностей веб-сайтов с инструментами, поэтому в будущем в блог будет добавлено больше инструментов, которые можно использовать каждый день.

Миграция личных закладок, создание настраиваемых страниц управления закладками и навигации,GooleХотя закладки просты в использовании и удобны, но иногда не очень удобны из-за проблем с сетью.Лучше мигрировать на свой блог, добиться той же функции и не беспокоиться о неудобствах миграции, и иметь личную страницу навигации по адресу Я думаю, что индивидуальные поисковые привычки и история поиска могут оптимизировать многие необходимые сценарии.
Интеграция веб-сайтов с персональными инструментами, независимо от разработки внешнего или внутреннего интерфейса, у нас есть много веб-сайтов инструментов, которые мы обычно используем, например, некоторые простыеJson序列化,图片压缩转换,文件转换So these gadgets, I think the next time the situation may wish to try it yourself to achieve your own, if that does not make sense when these things is not worth it included in someone else's site, it has to find at least more convenient when в использовании.
Личный рабочий процесс, как человек с небольшой самодисциплиной, я часто нарушаю свой собственный учебный рабочий ритм, делаю что-то, думаю об этом в следующем году.electronЯ разработал личный график управления работой и учебой, надеясь интуитивно знать свое следующее расположение и планирование времени, а не иногда беспорядочный график, который приводит к неэффективности. Это уже готовится, фоновое управление может постоянно интегрировать различные функции, и эти дополнительные рабочие задания нужно только постоянно расширять сами по себе.
Создайте подстанцию веб-сайта, независимую от каких-либо внешних веб-сайтов, кроме блогов. Многие люди не понимают, как веб-сайты зарабатывают деньги, и они не знают, как делать деньги. На самом деле, этот пункт не должен быть рассматривается на ранней стадии. Мы можем сделать несколько веб-сайтов с инструментами. Многие люди на самом деле сильно полагаются на эти веб-сайты. Создать такой веб-сайт несложно. Что нам нужно сделать, так это постоянно обновлять и иметь такой веб-сайт для работы.seoПродвижение сайта, отвлечение, отвлечение трафика на себя таким образом, после того, как у вас будет трафик, способы заработка будут разнообразными. Многие отличные блоггеры имеют свои официальные аккаунты и небольшие программы. Эти большие ребята очень мощные, Некоторые из пабликов твиты аккаунта, которые мы обычно видим, являются одним из источников дохода. На самом деле, я думаю, что у вас будут возможности для многих вещей, если вы будете настаивать на этом. Это также то, что я хочу попробовать в этом году.

Как создать личный рабочий процесс

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

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

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

напиши в конце

Многие вещи, которыми поделились на этот раз, слишком широки и не имеют реальных сценариев, просто чтобы дать вам представление, многие люди любят развивать свои собственные блоги, и многие люди думают, что блоги наивны и бессмысленны, но я думаю, как程序员,Блог для вас еще и резюме.Многое не только используется,но и пишется,обобщается и записывается.Слишком многому нужно научиться.Оглядываясь назад,вы можете не вспомнить многое из того,что написали.Если ваш мозг это просто компьютер, можете ли вы добавить твердое состояние, сохранить больше вещей, организовать лучший контекст и иметь хорошую привычку во многих случаях можно получить вдвое больший результат с половиной усилий, кроме того, когда вы делаете эти вещи, вы сталкивались много проблем и решил их?

2022 Новый флаг

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

Следуйте приведенному выше плану, чтобы создать личный полный рабочий процесс, чтобы вы могли быть более эффективными.
Улучшить качество блога, многие из предыдущих статей были написаны по прихоти и в короткие сроки, отсутствие качества статей, отсутствие мышления и отсутствие многих вещей, в том числе написания, поэтому я надеюсь, что новый год может быть продуктивным и высокое качество.
Касательно работы, как ни посмотри, работа должна быть на первом месте, и ты должен сломать текущую врожденность в своей работе. Надеюсь, что я смогу найти новое направление, разобравшись в бизнесе. Учитывая бизнес, необходимо играть в front-end разработку и иметь возможность продвигать некоторые проекты в новых направлениях.
Воспитать кошку, у меня всегда была эта идея, но я не реализовал ее.В 2022 году, я думаю, я действительно смогу реализовать следующее.

обмениваться цепочками друзей

Блог только что создан и статей пока не так много.Надеюсь обменяться с вами волной цепочек дружбы.Просто оставьте сообщение в моем блоге и с нетерпением жду вашего приезда.

Блог Сяоцзю