vweb_visual - простой проект управления фоном. Я написал его дома, чтобы не скучать во время эпидемии. Мой гитхаб немного пуст. Думая, что я вошел в общество, я не могу чувствовать, что у меня достаточно времени в моем студенческие дни. Так что примите решение сделать долгосрочный проект с полным стеком, а не только для собственного роста.
Технический отбор
- Фреймворк пользовательского интерфейса: iview
- Внешний фрейм: Vue.js + Typescript.js
- Библиотека запросов: Axios
- подборка стилей: sass
- Макетная библиотека: easymock
- Диаграмма: AntVG2
- Иконка: иконка шрифта
- Выбор раскладки: flex + rem layout
Установка проекта
1. Клонируйте проект локально
git clone https://github.com/wangly19/bweb_visual_vue.git
2. Установка зависит
npm install
yarn install
3. Запуск предметов
npm run serve
предисловие
Текущие данные имитируются макетом для отображения, чтобы страница не выглядела навязчивой. Таким образом, данные нерегулярны и трудно читаемы. Интерфейс также отделен и не размещен со слоем представления. Унифицировано в файле API. Соответствуйте спокойному API (я сделал только грубое в управлении устройствами) и продолжу улучшать его в nest.js.
освободить экземпляр запроса
import service from '@/api/axios.config'
// get & post 请求 => 资源统一用parmas
export function tradDevice<T>(params: T, type: string): Promise<any> {
return service({
url: `/device`,
method: type,
params
})
}
// put & delete 需要带上数据的id
export function alterDevice<T>(id: number, params: T, type: string): Promise<any> {
return service({
url: `/device/${id}`,
method: type,
params
})
}
Я видел много проектов больших парней, в основном слой запроса независим, на самом деле он мне нравится больше, когда запрос API неправильный, мне нужно только найти слой запроса и изменить код запроса. Нет необходимости изменять ряд кодов, таких как this.$axios(xxxx) в Wan Jun Cong, чтобы убедиться, что async/await используется на уровне представления для обработки. Структура понятна и читабельна.
Сброс стиля
В проекте представлен normalize.css v8.0.1, который является очень полезным CSS, который может удовлетворить потребности большинства проектов с некоторыми общими сбросами стилей. это очень хороший проект.
рем-адаптация
Вот личная схема адаптации rem. План не значит лучший, но им удобно пользоваться. Если вы сочтете это полезным, вы можете продолжить улучшать его в своем проекте.
resetPageSize.ts
/**
* @author: wangly
* 页面fontsize重置
*/
(function (window: Window): void {
window.addEventListener('resize', function () {
document.documentElement.style.fontSize = `${getWindowSize() / 10}px` // 按照设计图
})
document.documentElement.style.fontSize = `${getWindowSize() / 10}px` // 按照设计图
console.warn('当前的设计图rem: ', getWindowSize())
})(window)
/**
* 获取字体大小
* @return 获取当前页面的宽度
*/
function getWindowSize (): number {
const __width: number = document.documentElement.clientWidth
return __width > 1920 ? 1920 : __width
}
main.ts
// 引入rem根字体大小
import '@/tools/resetPageSize'
метод преобразования scss
@function rem($px){
$remSize: $px / 192px;
@return $remSize * 1rem;
}
Как использовать
html{
height: rem(192px); // => 1rem
}
flex & position и другие примеси
Когда вам необходимо многократно написать флажок Flex, расположение положения, попробуйте Sass Mixins, это поможет вам сгенерировать необходимые стили и упростить.
// flex布局
@mixin flex($justify: flex-start, $align: flex-start, $direction: row) {
display: flex;
justify-content: $justify;
align-items: $align;
flex-direction: $direction;
}
// position定位
@mixin position($position: relative, $top: initial, $right: initial, $bottom: initial, $left: initial) {
position: $position;
left: $left;
right: $right;
bottom: $bottom;
top: $top,
}
Конечно, я тоже буду держать руку на закруглениях и зинде
// 设置层级
@mixin zIndex($zindex: 0) {
z-index: $zindex;
}
// 圆角
@mixin radius($px: 0) {
border-radius: $px;
}
библиотека методов ts
Продолжение будет объединено в одну главу, вытащите ее заранее. Потому что ты можешь сказать слишком много. У каждого есть что-то свое показать. Разве это не QAQ.
export function cssExpand<T>(css: T, id: string) {
let style: HTMLStyleElement = document.createElement('style')
style.type = "text/css"
style.innerHTML = `@charset "UTF-8"; ${css}`
if (id) {
let $style: HTMLElement | null = document.getElementById(id)
if ($style != null) $style.outerHTML = ''
style.id = id
}
// 应用新样式
document.head.appendChild(style)
}
Дизайн макета
Авторизоваться
панель приборов
Приборная панель здесь основана на AntV G2.Viser, почему бы не использовать echarts, потому что эквивалент echarts, дизайн antV больше соответствует iviw, а соответствие цветов мне нравится. Я должен сказать, что дизайн большой фабрики действительно хорош. И когда производительность G6 реконструируется TS, это означает, что корзина семейства antV с поддержкой TS не за горами.
Управление устройствами
Макет более позднего дизайна страницы формы похож на него, как единство стиля, так и ограничения макета. Форма слева и строка поиска справа. Формы могут быть прокручиваемыми или разбитыми на страницы.
управление предупреждениями
Предупреждение в реальном времени
Тот же макет, что и выше, типичный интерфейс CURD, последние на самом деле похожи. Фоновый интерфейс предназначен для отображения большого количества данных, а дисплей указывает на операцию. Беспомощный, больше творога - это нормально.
Историческое предупреждение
То же, что и выше, страницы похожи на 99%
Предупреждение об оборудовании
Прогнозируется, что устройство будет судить о достижении порога по текущей динамике. Он был очищен Row + col. Я знал, что сам напишу Grid.
карта
В основном, чтобы сделать фиксированную точку оборудования или что-то в этом роде. Прототип пока не придумал. Просто сначала нарисуйте демо. Контент, который приходит на ум, можно улучшить позже. Карта использует систему High German, а система Baidu смотрит на старую версию резервной ветки.
Кадровый менеджмент
Управление аккаунтом
Детали - мой любимый дисплей ящика. Вы не можете часто использовать диалоговые окна. Ха-ха.
Управление декларациями
Настройки системы
Это все та же форма, и, наконец, выяснил, как это сделать. Разрешения делятся в соответствии с уровнем сайта. Привет. Волосы почти ушли
Настройки администратора
Настройки темы
Наша семья только думает об этих устанавливает общий стиль темы, и иметь равномерное наименование
серый
чирок зеленый
виноградно-голубой
Гей фиолетовый парень
Уиллоу Грин СОБАКА
Личный фаворит, милая фанатка
Эпилог
Если вам это нравится и вы считаете, что это хорошо, вы можете поставить лайк статье или дать проекту звезду. На самом деле, этот проект откладывался 40 раз. Просто рефакторинг со слезами, дома эпидемия, а гитхаб так и не открыли. Так что нет коммитов каждый день. Последующие обновления будут более тщательными. Не знаю, когда работать. Может быть, я просто стажер, ожидающий дома, пока в деревне уберут цемент.
Пуш-ин можно потерять...
адрес предварительного просмотра
Я только что получил сервер Alibaba Cloud и тем самым подключил nginx. Братья, пожалуйста, не работайте незаконно, я боюсь. jpg.....
Онлайн версия:Неизвестная система управления фоном
Github: Исходный код проекта + ежедневное обновление
Юк Адрес:Шепот Бриза