предисловие

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

1. Исходный код (постоянно обновляется)

Нечего сказать, адрес исходного кода:Vue, React, мини-программа WeChat, быстрое приложение, адрес TS и Koa, добро пожаловать звезда Каталог проекта:

2. vue статьи

2.1 vue-demo

2.1.1 Рисунок эффекта

Vue, React, мини-программа WeChat, быстрое приложение, адрес TS и Koa, добро пожаловать звезда

2.1.2. Стек технологий

vue+vue-router+vuex+axios+element-UI+iconfont (Али)

2.1.3 Схема адаптации

Фиксированная ширина слева, адаптивная справа Настройте полосы прокрутки для левой и правой навигации соответственно

2.1.4 Анализ очков навыков

Очки навыка	соответствующий API
Общие команды	Событие привязки @(v-on), v-if/v-show создается/отображается, цикл v-for
Жизненный цикл	8 жизненных циклов перед созданием, созданием, перед монтированием, монтированием, перед обновлением, обновлением, перед уничтожением и уничтожением
расчет наблюдения	вычислил и смотри
атрибут данных	Определите переменные, сначала должны быть определены одни и те же переменные
Регистрация компонента	компоненты регистрируются локально, Vue.component() регистрируется глобально
компонент связи	От ребенка к родителю: this.$emit, от родителя к ребенку: реквизит, компонент уровня: vuex или параметр маршрута
Регистрация плагина	Vue.use() регистрирует плагины, такие как Vue.use(element) для вызова метода установки внутри элемента
регистрация маршрута	vue-router: Vue.use(router) также вызывает внутренний метод установки, монтирует его в экземпляр vue для создания свойств маршрута и маршрутизатора.
режим маршрутизации	Атрибут режима может установить историю и хэш
подмаршрут	children:[] может настраивать дочерние маршруты
крючок маршрутизации	router.beforeEach (реализация защиты от навигационных ловушек) и router.afterEach
vuex	4 свойства, состояние, геттеры, действия (выборка данных асинхронно) и мутации (выборка данных синхронно)
vuex	4 вспомогательные функции, mapState, mapGetters, mapActions и mapMutations, являются вспомогательными обрабатывающими методами фиксации или удаления.
axios	Перехватчик, перехватчик запроса interceptors.request, перехватчик ответа interceptors.response
axios	baseUrl настраивает общедоступный путь запроса, который должен быть ссылкой, соответствующей стандарту http, в противном случае параметр недействителен.
axios	Метод запроса, получение, публикация, размещение, удаление и т. д.
axios	Междоменный, withCredentials: true, требуется внутренняя поддержка
css	sass, соответствующий не более чем трем вложенным настройкам стиля полосы прокрутки, две строки текста превышают проблему сборки
iconfont	Значок шрифта Али, вы можете настроить значок

2.1.5 Так вот вопрос?

В чем разница между вычислением и просмотром?Разобрать
Как маршрутизировать параметры?Разобрать
Разница между vue.use, vue.install, методом миксинов?Разобрать
Разница между историей и хешем и принцип их реализации?Анализ различийПринципиальный анализофициальный сайт vue-router
Что не так с развертыванием сервера с использованием истории и режима хеширования?Анализ проблемы
В чем разница между использованием вспомогательных функций Vuex и базовых свойств?официальный сайт векс
Принцип аксиом?исходный код аксиомы
Простая реализация фреймворка vue+vue-router+vuex?

2.2 vue-mobile-demo

2.2.1 Рендеринг

2.2.2 Стек технологий

vue+vue-router+vuex+vant+rem+sass+iconfont (Али) vant: отличный мобильный плагин для электронной коммерции

2.2.3 Схема адаптации

rem

2.2.4 Анализ очков навыков

Использование iconfont: настройте значок на официальном сайте, экспортируйте значок и импортируйте его в каталог ресурсов.
Использование ванта: см. подробностиофициальный сайт ванта
Глобальная конфигурация rem: настроена в файле index.html
Настройте функции и миксины sass глобально: настройте функции и миксины в каталоге static в свойстве options scss в build/utils.

2.2.5 Затем возникает проблема

В чем разница между активами в src проекта, сгенерированным vue-cli, и статическим каталогом по корневому пути?Разобрать

3. Реагировать

3.1 реактивные мобильные статьи

3.1.1 Рисунок эффекта

Vue, React, мини-программа WeChat, быстрое приложение, адрес TS и Koa, добро пожаловать звезда

3.1.2 Стек технологий

react + react-router-v4 + redux +ant-design-mobile+iconfont
react-router-v4: версия маршрута 4.x
редукция: управление состоянием
ant-design-mobile: компоненты пользовательского интерфейса
iconfont: значок шрифта

3.1.3 Схема адаптации

рем-адаптация

3.1.4 Анализ очков навыков

Очки навыка	соответствующий API
3 способа определения компонентов реакции	1. Функционально определенные компоненты без состояния 2. Компоненты, определенные React.createClass нативным способом es5, 3. Компоненты, определенные расширениями React.Component в форме es6
JSX	реакция основана на синтаксисе jSX
Жизненный цикл до реакции16	Instantiate (6): конструктор, getDefaultProps, getInitialState, componentWillMount, render, componentDidMount
жизненный цикл реакции16	Instantiate (4): конструктор, getDerivedStateFromProps, componentWillMount, render, componentDidMount, componentWillUpdata, render, componentDidUpdate, componentWillUnmount
Жизненный цикл	update(5) componentWillReceivePorps, shouldComponentUpdate,
Жизненный цикл	Уничтожить: компонентWillUnmout
react-dom	Предоставьте метод рендеринга
состав реактивного маршрутизатора 4.x	react-router (основная маршрутизация и функции), react-router-dom (API), react-router-native (API, используемый приложениями React Native)
API для реактивного маршрутизатора 4.x	router (только один), route (соответствует пользовательскому интерфейсу рендеринга маршрута), history, link (переход), navlink (конкретная ссылка, со стилем), switch (соответствует первому маршруту), redirect (перенаправление), withRouter (компонент, может проходить в три объекта истории, локация, совпадение)
состав реактивного маршрутизатора 3.x	это реактивный маршрутизатор
API для реактивного маршрутизатора 3.x	router, route, history (методы push и replace), indexRedirect (загрузка по умолчанию), indexRedirect (перенаправление по умолчанию), link (переход), хуки маршрутизации (onEnter для входа, onLeave для выхода) 4.x удален
history	react-router имеет три режима: 1.browserHistory (требуется фоновая поддержка); 2.hashHistory (с '#'); 3.createMemoryHistory
redux	Односторонний поток данных, действие (изменение значения состояния посредством отправки), редуктор (обновление состояния в соответствии с действием), сохранение (контактное действие и редуктор).
react-redux	1. Соедините react-router и redux и разделите компоненты на две категории: компоненты пользовательского интерфейса и компоненты-контейнеры (управление данными и логикой), 2.connect генерирует компоненты контейнера из компонентов пользовательского интерфейса, 3.provider позволяет компоненту контейнера получить состояние, 4.mapStateToProps: отношение сопоставления между внешним объектом состояния и реквизитами компонента пользовательского интерфейса, 5.mapDispatchToProps: второй параметр подключения, сопоставление параметров компонента пользовательского интерфейса с методом store.dispatch.
react-loadable	Разделение кода, эквивалентное ленивой загрузке маршрутов в vue-router
classNames	класс для динамического css

3.2 статьи о реакции на шаблон компьютера

3.2.1 Рисунок эффекта

Vue, React, мини-программа WeChat, быстрое приложение, адрес TS и Koa, добро пожаловать звезда

3.2.2 Стек технологий

dva+umi+ant-design-pro
dva: Подключаемый фреймворк приложения React, основанный на React и Redux.
mui: интегрирует маршрутизатор реакции и редукцию
ant-design-pro: мидл и бэкэнд решения на базе React и ant-pc

3.2.3 Схема адаптации

Фиксированная ширина слева, адаптивная справа Правая навигация настроена с полосами прокрутки.Управляйте всей страницей

3.2.4 Анализ очков навыков

Очки навыка	соответствующий API
маршрутизация	На основе umi в нем есть методы push, replace, go и другие.
государственное управление	Инкапсуляция редукса в два, атрибуты состояния, эффекты, редукторы
значение передачи компонента	Отец и сын: реквизит, роутер уровня redux или umi
model	Модель и дом проекта связаны через @connect() и добавлены некоторые свойства в пропс.
авторизоваться	Вход в систему осуществляется путем маршрутизации в записи js.

4. Мини-программы WeChat

4.1 Демонстрация мини-программы

4.1.1 Эффекты

Vue, React, мини-программа WeChat, быстрое приложение, адрес TS и Koa, добро пожаловать звезда

4.1.2 Стек технологий

weui+вкладка+подпакет+iconfont+настраиваемая верхняя навигация+передача значения компонента+пакет wx.request
weui: пользовательский интерфейс мини-программы, запущенный Tencent

4.1.3 Схема адаптации

rpx: единица измерения апплета WeChat

4.1.4 Анализ очков навыков

Очки навыка	соответствующий API
Общие команды	события привязки bindtap, wx:if/wx:show, создавать/показывать, цикл wx:for
жизненный цикл 1	Жизненный цикл приложения (в app.js): запустить, показать, скрыть
Жизненный цикл 2	Жизненный цикл страницы (внутри страницы): загрузить, показать, готово, скрыть, выгрузить
Жизненный цикл 3	Цикл компонента (в компоненте): создан, присоединен, перемещен, отсоединен
wx.request	ajax-запрос
Фоновая музыка	wx.getBackgroundAudioManager
аудио	wx.createAudioContext
картина	wx.chooseImage
документ	wx.getFileInfo
маршрутизация	В app.json свойство pages определяет файлы в каталоге pages.
коммутатор маршрутизации	wx.navigateTo, wx.navigateBack, wx.redirectTo, wx.switchTab, wx.reLaunch
субподряд	Определите маршрутизацию подпакетов в свойстве subPackages в app.json.
компонент weui	официальный сайт вуи
нативные компоненты	Нативные компоненты WeChat
бизнес-компонент	Зарегистрируйтесь в файле json с помощью компонентов
компонент связи	Определить globalData, хранение и маршрутизацию

4.1.5 Затем возникает проблема

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

4.1.6 Структура мини-программы

официальный сайт Wepy Проект торгового центра на базе Wepy mpVue проект на основе mpVue

Анализ: обе эти платформы преобразуют формат соответствующего стиля в формат апплета путем предварительной компиляции.

5. Быстрые статьи приложений

5.1 Шаблон быстрого заявления

5.1.1 Анализ очков навыков

Очки навыка	соответствующий API
макет	На основе гибкой планировки
инструкция	for: зациклить, если, показать
Жизненный цикл	Страница жизненный цикл: Oninit, oneady, Onshow, Onhide, OnDestroy, Onbackpress, OnMenupress
жизненный цикл приложения	при создании, при уничтожении
мероприятие	вкл, выкл, излучать, излучатьЭлемент
конфигурация маршрутизации	Конфигурация атрибута маршрутизатора файла манифеста
прыжок по маршруту	router.page
компонент связи	Родительско-дочерние компоненты: $emit, props, одноуровневые компоненты: через модель публикации/подписки.
нативные компоненты	список, карта, вкладки и холст
механизм сообщения	использование веб-сокета

6.Статьи ТС

6.1 Предисловие к ТС

Зачем там ТС?
Задумывались ли вы когда-нибудь над этой проблемой, причина в том, что JS — слабо типизированный язык программирования, а это значит, что тип переменной можно менять произвольно. Вот и на этот раз появился ТС.
TS — это надмножество JS, а также эквивалент препроцессора.В этой статье используется проект-шаблон, позволяющий быстро начать работу с TS.

6.2 Рендеринг

Vue, React, мини-программа WeChat, быстрое приложение, адрес TS и Koa, добро пожаловать звезда

6.3 Стек технологий

1.vue
2.vue-cli3
3.vue-router
4.vuex
5.typescript
6.iconfont

6.4 Основные плагины

Очки навыка	соответствующий API
vue-class-component	Он официально предоставляется vue, предоставляя экземпляры vue и компонентов.
vue-property-decorator	предоставляется сообществом Глубокая зависимость от vue-class-component расширяет возможности многих операторов @Component @Prop @Emit @Watch @Inject Можно сказать, что это расширенный набор компонентов класса vue.Во время обычной разработки вам нужно использовать только операторы, предоставленные в декораторе свойств vue.

API, предоставляемый vue-property-decorator

API	эффект
@Component	Регистрация компонентов
get	Вычисляется как vue
@Prop,@Emit	значение передачи компонента
@Watch	Отслеживание изменений значения
@Privde,@Inject	Соответствует privde и inject Использование компонентов более высокого порядка, роль которых заключается в передаче значений от многоуровневых родительских компонентов к дочерним
@Model	vue-подобная модель

6.5 Синтаксис ТС

тип данных	любой (любой тип); количество; string, логический; Массив: число[] или новый массив (элементы имеют одинаковый тип данных); тип возвращаемого значения void; нулевой; неопределенный; никогда (значение никогда не появляется); кортежи (сильнее массивов, типы элементов могут быть разными); интерфейс: ключевое слово интерфейса; Объект: объект, аналогичный JS; функция: объявление функции; Класс: ключевое слово класса, включая поля, конструкторы и методы.
объявление переменной	let [имя переменной] : [тип] = значение, тип должен быть указан объявить массив, пусть arr: any[] = [1, 2]
Оператор, условное выражение, цикл	Так же, как Дж
функция	Объявление такое же, как в JS, формальный параметр должен указывать тип, потому что формальный параметр также является переменной
тип союза	Объявить набор значений нескольких типов вертикальной чертой
Пространства имен	ключевое слово пространства имен
модуль	импорт и экспорт
контроллер доступа	общедоступный, частный (доступен только классу, в котором он определен) и защищенный (может быть доступен самому себе, его подклассам и суперклассам) Общедоступный по умолчанию, это что-то вроде Java?

6.6 А вот и проблема

1. Как вручную настроить ts в проекте?конфигурация проекта vue+ts

2. В чем разница между интерфейсом и классом? Интерфейс только объявляет методы-члены и не реализует их.Класс реализует интерфейс через реализациюРазница между интерфейсом и классом в ts

3. В чем разница между интерфейсом и объектом? Интерфейс — это набор общедоступных свойств или методов, которые могут быть реализованы классом; Объекты — это просто экземпляры пар ключ-значение.

4. В чем разница между классом и функцией? Класс — это класс ключевого слова, а функция — это функция. Класс может реализовать интерфейс

5. Реализует ли интерфейс унаследованный метод?

interface Person { 
   age:number 
} 
 
interface Musician extends Person { 
   instrument:string 
} 
 
var drummer = <Musician>{}; 
drummer.age = 27 
drummer.instrument = "Drums" 
console.log("年龄:  "+drummer.age)
console.log("喜欢的乐器:  "+drummer.instrument)

7. глава коа

7.1 коа предисловие

С появлением node.js внешний интерфейс уже может использовать js для записи от внешнего интерфейса к внутреннему.
В этой статье используется инфраструктура узла koa+mongodb для реализации интерфейса добавления, удаления, изменения, запроса и регистрации данных в фоновом режиме, а также используется umi + dva + ant-design-pro для рендеринга данных во внешнем интерфейсе. Реализовать небольшой проект с полным стеком очень просто

7.2 Визуализация

Vue, React, мини-программа WeChat, быстрое приложение, адрес TS и Koa, добро пожаловать звезда

7.3 Стек технологий

KOA: Framework Node
KOA-BodyParser: промежуточное программное обеспечение для анализа тела
koa-router : промежуточное ПО для анализа маршрутизаторов
mongoose: структура базы данных на основе mongodb, манипулирующая данными
nodemon: фоновая служба запускает горячее обновление

7.4 Каталог проектов

├── app // главный каталог проекта
│ ├── controllrts // Каталог контроллеров (обработка данных)
│ │ └── ... // контроллер, соответствующий каждой таблице
│ ├── промежуточное ПО // каталог промежуточного ПО
│ │ └── resFormat.js // форматируем возвращаемое значение
│ ├── models // директория таблицы (модель данных)
│ │ ├── course.js // расписание курсов
│ │ └── user.js // пользовательская таблица
│ └── utils // библиотека инструментов
│ │ ├── formatDate.js // формат времени
│ │ └── Passport.js // Инструмент шифрования и проверки пароля пользователя
├── db-template // файл json, экспортированный из базы данных
├── маршруты // каталог маршрутов
│ └── API // директория интерфейса
│ │ ├── course_router.js // Интерфейс, связанный с курсом
│ │ └── user_router.js // Пользовательский интерфейс
├── app.js // запись проекта
└── config.js // Основная информация о конфигурации

7.5 Этапы запуска проекта

1.git clone
2. Установите монгодб:оооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооять.)
3. Установите Robomongo или Robo 3T — инструмент визуальной работы mongodb (необязательно)
4. Старт
монгод (запустить монгодб)
Откройте Робомонго или Робо
cd koa-template
npm i
npm run start
cd react-template
npm i
npm run start

Уведомление: Номер порта по умолчанию для запуска mongodb — 27017, запустите его, чтобы увидеть, занят ли он.
Номер порта внутреннего проекта — 3000, который можно изменить в koa-template/config.js.

7.6 Основной API коа

API	эффект
new koa()	получить экземпляр коа
use	свойства koa, добавить промежуточное ПО
context	Инкапсулируйте объекты запроса и ответа узла в один объект, каждый запрос будет создавать контекст и получать доступ к открытым методам через ctx.
ctx-метод	запрос: тело запроса; ответ: тело ответа; ctx.cookies.get: получить куки; ctx.throw: создать исключение
атрибут запроса	заголовок: заголовок запроса; метод:метод; URL-адрес: URL-адрес запроса; originalUrl запрашивает исходный URL-адрес; href:полный URL-адрес; имя хоста:имя хоста; тип: тип заголовка запроса;
свойство ответа	заголовок: заголовок ответа; статус: статус, если не задан, по умолчанию 200 или 204; тело: тело ответа, строка (информация подсказки) Буферный поток (поток) Массив объектов Строка JSON ull ответ без содержания; get: получить поля заголовка ответа; set: установить заголовок ответа; Добавить: добавить заголовок ответа; тип: тип ответа; lastModified: возвращает дату, если она существует; etag: установить кеш

7.7 основной API koa-маршрутизатора

API	эффект
get	получить метод
post	почтовый метод
patch	патч-метод
delete	метод удаления
prefix	Настройка общедоступных путей маршрутизации
use	Маршрутизация уровня, один и тот же экземпляр маршрутизатора может быть настроен на разные модули.
ctx.params	Получить параметры динамического маршрута
fs	разделить файл

7.8 основной API мангуста

API	эффект
Schema	Схема данных, определение структуры таблицы, каждая схема сопоставляется с коллекцией в mongodb, которая не имеет возможности оперировать базой данных
model	Модель, сгенерированная схемой, может работать с базой данных.

Метод работы с базой данных модели

API	метод
create/save	Создайте
remove	Удалить
delete	удалить один
deleteMany	удалить несколько
find	найти
findById	найти по идентификатору
findOne	нашел один
count	количество совпадающих документов
update	возобновить
updateOne	обновить один
updateMany	обновить несколько
findOneAndUpdate	найди и обнови
findByIdAndUpdate	Найти и обновить по id
findOneAndRemove	найти один и удалить
replaceOne	заменить один
watch	отслеживать изменения

запрос API запроса

API	эффект
where	указать путь
equals	равный
or	или
nor	нет
gt	больше, чем
lt	меньше, чем
size	размер
exists	существует
within	в пределах чего

Примечание. Запрос создается с помощью Model.find(). совокупный API

API	эффект
append	добавить
addFields	добавить файл
limit	предельный размер
sort	Сортировать

Примечание: агрегат=Модель.агрегат()

Более подробный API,пожалуйста ткните