Слияние кода завершено, страница обновится автоматически
Стек технологий: vue2, vuex, vue-router, webpack, ES6/7, axios, elementUI, а также значки от Alipay.
Обзор проекта: http://nmgwap.gitee.io/vueproject/#/login.
Описание: Этот проект предназначен для демонстрации того, как можно использовать Vue 2 для создания платформы управления бэкендом. Для удобства последующего изменения используется смоделированные данные на странице. Подробности смотрите ниже.
Если этот проект оказался вам полезен, вы можете поставить «звездочку» в правом верхнем углу. Или же вы можете подписаться на обновления, и я буду продолжать делиться интересными проектами.
Среда разработки: Windows 7, Chrome 61.
При возникновении проблем обращайтесь напрямую в раздел Issues или же предлагайте свои решения в PR.
Структура каталогов:
├── /build/ # Конфигурация сборки (webpack)
├── /config/ # Конфигурация среды разработки
├── /src/ # Каталог исходного кода
│ ├── /api/ # Запросы
│ ├── /assets/ # Компонентные статические ресурсы (изображения)
│ ├── /components/ # Общие компоненты
| ├── /api/ # Запрошенные интерфейсы
│ ├── /router/ # Конфигурация маршрутизатора
│ ├── /vuex/ # Управление состоянием vuex
│ ├── /views/ # Маршрутные компоненты (страницы)
│ ├── /config/ # Файл конфигурации интерфейса (адрес запроса)
│ ├── App.vue # Входной компонент
│ └── main.js # Вход программы
├── /static/ # Статические ресурсы, не являющиеся компонентами
├── .babelrc # Настройки компиляции ES6
├── .editorconfig # Определение формата кода
├── .eslintignore # Файлы, игнорируемые ES6
├── .eslintrc.js # Настройки правил ES6
├── .gitignore # Файлы git, которые нужно игнорировать
├── index.html # Страница входа
├── package.json # Зависимости проекта
└── README.md # Документация по проекту
Внимание: Запросы уже заменены на фиктивные данные. Например:
// Начало фиктивных данных
let res = {
code: 0,
msg: null,
count: 12,
data: [
{
addUser: '1',
editUser: '1',
addTime: null,
editTime: 1527411068000,
userId: 1,
systemNo: 'pmd',
userName: 'root',
userPassword: 'e10adc3949ba59abbe56e057f20f883e',
userRealName: 'Супер администратор',
userSex: 'женщина',
userMobile: '138123456789',
userEmail: '111@qq.com',
isLock: 'N',
deptId: 1,
deptName: 'xxxx',
roleId: 1
}
]
};
this.loading = false;
this.userData = res.data;
// Разбиение на страницы
this.pageparm.currentPage = this.formInline.page;
this.pageparm.pageSize = this.formInline.limit;
this.pageparm.total = res.count;
// Конец фиктивных данных
/***
* Вызов интерфейса, комментарий над фиктивными данными, раскомментировать ниже
*/
// Получить список пользователей
userList(parameter).then(res => {
this.loading = false;
if (res.success == false) {
this.$message({
type: 'info',
message: res.msg
});
} else {
this.userData = res.data;
// Разбиение на страницы
this.pageparm.currentPage = this.formInline.page;
this.pageparm.pageSize = this.formInline.limit;
this.pagepam.total = res.count;
}
});
Удалите комментарии в начале и в конце и раскомментируйте код ниже, чтобы получить реальные данные из API. В файле config/index.js в разделе dev необходимо изменить адрес прокси:
proxyTable: {
'/api': {
target: 'http://xxx.xxx.xxx.xxx:xxx', // Адрес вашего стороннего API
changeOrigin: true, // На локальном сервере будет создан виртуальный сервер, который будет отправлять запросы и получать данные, что позволит избежать проблемы с междоменными запросами
pathRewrite: { // Перезапись пути
'^/api': '/api' // Замена адреса запроса в target, то есть при запросе http://api.jisuapi.com/XXXXX можно просто написать /api
}
}
},
Завершение функций:
Некоторые скриншоты: Управление товарами: .
Управление ролями: .
Обработка транзакций: .
Редактирование:
.
Управление пользователями: .
Настройка платежей: .
Системные переменные среды: .
Управление правами: .
Меню управления: .
Корпоративное управление: .
Запуск проекта:
# Установить зависимости
npm install
# Запуск с горячей перезагрузкой на localhost:8080
npm run dev
# Сборка для производства с минификацией
npm run build
# Сборка для производства и просмотр отчета о комплекте анализатора
npm run build --report
# Выполнение модульных тестов
npm run unit
# Выполнить тесты e2e
``` ```
npm run e2e
# run all tests
npm test
Код Cloud: https://gitee.com/ldhblog/vue-element.git
GitHub: https://github.com/nmgwap/vue-ManagementPlatform.git
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )