1 В избранное 0 Ответвления 0

OSCHINA-MIRROR/nmgwap-vueproject

Присоединиться к Gitlife
Откройте для себя и примите участие в публичных проектах с открытым исходным кодом с участием более 10 миллионов разработчиков. Приватные репозитории также полностью бесплатны :)
Присоединиться бесплатно
Клонировать/Скачать
Внести вклад в разработку кода
Синхронизировать код
Отмена
Подсказка: Поскольку Git не поддерживает пустые директории, создание директории приведёт к созданию пустого файла .keep.
Loading...
README.md

Шаблон для создания панели управления backend с использованием Vue (для ПК)


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

vue2 + vuex + vue-router + webpack + ES6/7 + axios + elementUI + иконки от Iconfont от Alibaba

Пример проекта

http://nmgwap.gitee.io/vueproject/#/login

Описание

Этот проект предназначен для изучения того, как создается проект панели управления backend с использованием vue2.

Для удобства последующего изменения данных в проекте, данные моделируются внутри страниц, подробнее см. ниже [Упор].

Если вам помогает этот проект, вы можете нажать кнопку "Star" в правом верхнем углу, спасибо! ^_^

Или вы можете подписаться на меня, я буду продолжать открывать больше интересных проектов.

Окружение разработки Windows 7, Google Chrome 61.

Если у вас есть вопросы, пожалуйста, сообщите об этом в разделе Issues, либо если вы нашли проблему и знаете хорошее решение, приветствуем ваш Pull Request 👍

Структура директорий

------------------------```bash ├── /build/ # Конфигурация сборки проекта (webpack) ├── /config/ # Конфигурация окружения разработки ├── /src/ # Исходный код │ ├── /api/ # Запросы │ ├── /assets/ # Статические ресурсы компонентов (изображения) │ ├── /components/ # Общие компоненты │ ├── /api/ # Конфигурация запросов 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 # Документация проекта

```bash
// Начало тестовых данных
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: '13812345678',
            userEmail: '111@qq.com',
            isLock: 'Н',
            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
// Конец тестовых данных
/**
 * Вызов API, закомментируйте верхнюю часть с тестовыми данными и раскомментируйте нижнюю.
 */
// Получение списка пользователей
// userList(параметры).then((res) => {
//   this.loading = false;
//   if (!res.success) {
//     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.pageparm.total = res.count;
//   }
// });

Пожалуйста, закомментируйте тестовые данные от начала до конца, а затем раскомментируйте нижнюю часть.

Для изменения адреса API в файле config/index.js используйте следующие команды:```bash proxyTable: { '/api': { target: 'http://ваш_адрес:порт', // Address of your server changeOrigin: true, // Create a local proxy server to solve the CORS problem pathRewrite: { // Rewrite the request path '^/api': '/api' // Replace the request address }, }, },


- [x] Логин — завершено
- [x] Интерцептор маршрутов — завершено
- [x] Управление продуктами (добавление, редактирование, поиск, удаление) — завершено
- [x] Управление ролями (добавление, редактирование, поиск, удаление, управление правами доступа) — завершено
- [x] Управление заказами (добавление, редактирование, поиск, удаление) — завершено
- [x] Управление пользователями (добавление, редактирование, поиск, удаление, права данных, очистка кэша) — завершено
- [x] Настройка платежа (добавление, редактирование, поиск, удаление) — завершено
- [x] Управление системными переменными окружения (добавление, редактирование, поиск, удаление) — завершено
- [x] Управление правами доступа (добавление, редактирование, поиск, удаление, настройка прав доступа) — завершено
- [x] Управление меню (добавление, редактирование, поиск, удаление) — завершено
- [x] Управление компанией (добавление, редактирование, поиск, удаление) — завершено

### Частичные скриншоты

------------------------

Управление продуктами  
![](./static/Управление%20продуктами.png "Управление продуктами")

Управление ролями  
![](./static/Управление%20ролями.png "Управление ролями")

Управление заказами  
![](./static/Управление%20заказами.png "Управление заказами")

```markdown
![Редактирование](./static/редактирование.png "Редактирование")
```Управление пользователями
![Управление пользователями](./static/управление_пользователями.png "Управление пользователями")

Настройка платежей
![Настройка платежей](./static/настройка_платежей.png "Настройка платежей")

Раскрытие и сворачивание
![Раскрытие и сворачивание](./static/раскрытие_и_сворачивание.png "Раскрытие и сворачивание")


#### Запуск проекта
------------------------

```bash
# установите зависимости
npm install

# запустите с горячими перезагрузками на localhost:8080
npm run dev

# создайте сборку для продакшена с минификацией
npm run build

# создайте сборку для продакшена и просмотрите отчет анализатора пакетов
npm run build --report

# запустите юнит-тесты
npm run unit

# запустите end-to-end тесты
npm run e2e

# запустите все тесты
npm test

Исходный код проекта:


GitLab адрес: https://gitee.com/ldhblog/vue-element.git
GitHub адрес: https://github.com/nmgwap/vue-ManagementPlatform.git

Учрежденный WeChat


Комментарии ( 0 )

Вы можете оставить комментарий после Вход в систему

Введение

Vue-ElementUI. Данный проект представляет собой систему управления бэкендом. Уже реализованы модули: управление пользователями, меню, ролями, компаниями, правами доступа, а также настройка платежей. Развернуть Свернуть
MIT
Отмена

Обновления

Пока нет обновлений

Участники

все

Недавние действия

Загрузить больше
Больше нет результатов для загрузки
1
https://api.gitlife.ru/oschina-mirror/nmgwap-vueproject.git
git@api.gitlife.ru:oschina-mirror/nmgwap-vueproject.git
oschina-mirror
nmgwap-vueproject
nmgwap-vueproject
master