Разработать блок-схему онлайн-версии сайта с Nodejs

Node.js JavaScript
Разработать блок-схему онлайн-версии сайта с Nodejs

«Это первый день моего участия в ноябрьском испытании обновлений, ознакомьтесь с подробностями события:Вызов последнего обновления 2021 г.".

исходный код:GitHub.com/maqi1520/cl…

задний план

Для программистов, помимо ежедневного написания кода, они могут столкнуться с различными диаграммами, такими как блок-схемы, диаграммы прототипов, диаграммы топологии, диаграммы UML и интеллект-карты и т. д. Мы больше знакомы с ProcessOn. бесплатная версия ProcessOn, всего картинок 10. После того, как нарисуете эту картинку, скачайте ее, удалите и нарисуйте другую картинку. Несколько дней назад увидел в группе небольшой партнер приглашающий новых пользователей зарегистрироваться, и можно получить 3 файла. Однако зарегистрировались все, а не зарегистрировались единицы.Как front-end программисту интересно, смогу ли я снести его js и использовать как локальный сервер?

Получите внешние статические ресурсы

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

image.pngЭто право на JS сохранить это?

Нет, вы можете использовать плагин для ChromeSave All Resources отключить статические ресурсы всего веб-сайта,

После установки появится лишний столбец в chrome devTools

image.png

нажмитеsave All ResourcesВот и все.

После распаковки давайте посмотрим на каталог

image.png

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

Скопируйте все ресурсы, затем переименуйте файл HTML наindex.htmlиспользоватьhttp-serverЗапустите службу в текущем каталоге, чтобы к ней можно было успешно получить доступ. Умеет рисовать блок-схему, но данные не сохраняются.

Так как сохранить данные это?

Разработать плагин для хрома

Сначала моей идеей было разработать плагин для хрома, что-то вродеПлагин Nuggets для ChromeТо же самое, нажмите, чтобы открыть, а затем перепишите jquery's$.ajaxметод, используяlocalStroageДля хранения данных нам может быть удобнее использовать.Это не должно быть сложно реализовать.

Затем узнайте, как разработать расширение для Chrome. я нашел на гитхабеchrome-extensions-samplesЗатем я попробовал демо внутри. Но результат был неудовлетворительным, потому что ProcessOn использовал многоevalметод. chrome-extensions считает этот метод небезопасным.

Тогда по официальному сайту Using eval in Chrome extensions, согласно введению, поместите html вiframe, так что ладно. Чтобы немного развлечься, давайте взглянем на наши приветственные расширения Word Chrome.

Nov-10-2021 15-53-08.gif

Далее подготовьтесь к сохранению данных.

Если вы хотите общаться с родительским контейнером внутри iframe, вы можете использовать parent, и вы столкнулись с проблемой.

image.png

Поскольку расширение chrome iframe открывается напрямую, а не через службу http, я попробовал еще разpostMessageДо сих пор не могу общаться.

Поскольку это не может быть чисто офлайн, мы можем разработать только онлайн-версию 👌

Nodejs разработка

стек технологий

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

Заинтересованные студенты могут прочитать мою предыдущую статьюРефакторинг моего блога с помощью NextJS и TailwindCSS

Структура таблицы

Следующим шагом будет построение таблицы по интерфейсу

image.png

image.png

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

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

generator client {
  provider = "prisma-client-js"
}

model User {
  id             String    @id @default(uuid())
  name           String?
  password       String
  email          String    @unique
  avatar_url     String?
  emailCheckCode String? //邮箱验证唯一code
  checked        Boolean   @default(true) //邮箱是否验证
  posts          Post[]
  historys       History[]
  charts         Chart[]
}

model Comment {
  id      String  @id @default(uuid())
  shapeId String?
  name    String?
  replyId String?
  time    Int
  content String
  userId  String
  chartId String
  chart   Chart   @relation(fields: [chartId], references: [id])
}

model Chart {
  id         String    @id @default(uuid())
  title      String
  deleted    Boolean   @default(false)
  elements   Json
  page       Json
  theme      Json?
  ownerId    String
  owner      User      @relation(fields: [ownerId], references: [id])
  historys   History[]
  comments   Comment[]
  createTime DateTime  @default(now()) @db.Timestamp
  lastModify DateTime  @default(now()) @db.Timestamp
}

model History {
  id         String   @id @default(uuid())
  title      String
  remark     String
  elements   Json
  page       Json
  theme      Json?
  userId     String
  user       User     @relation(fields: [userId], references: [id])
  chartId    String
  chart      Chart    @relation(fields: [chartId], references: [id])
  createTime DateTime @default(now()) @db.Timestamp
}

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

В целом реализовать не сложно.

развертывать

Учащиеся, которые хотят развернуться, могут переехатьgithub, в котором есть этапы развертывания записи.

TODO

Конечно, есть еще некоторые более сложные, которые не были реализованы, такие как:

  • Одновременное редактирование нескольких человек через Websocket
  • Файл загружен
  • создать миниатюру
  • Отправить страницу

Суммировать

  • ProcessOn не выполняет обфускацию кода.Для внешнего интерфейса вы можете форматировать код и изменять его напрямую.
  • Внешний интерфейс Js очень важен, ProcessOn не использует другие фреймворки, при использованииjqueryа такжеdivБлок-схема реализована и не застревает.Я использовал реакцию, чтобы написать аналогичную диаграмму топологии раньше, но она гораздо менее гладкая и менее понятная для пользователя.
  • Студенты, которые не плохие деньги, я все еще надеюсь, что все поддержат подлинную версию.

наконец

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

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

Категории