Слияние кода завершено, страница обновится автоматически
✈ 国内加速链接
https://gitee.com/asaasa/vue3-element-admin
✈ 效果预览
https://vue3-element-admin.vercel.app/
✈ 备用地址
http://asaasa.gitee.io/xujianhua
Спасибо за внимание!
Это шаблон для корпоративного бэкенда, разработанный на основе Vue 3 и Element Plus.
Проект использует последние версии Vue 3, Element Plus, Mockjs, Axios и EChart 5. В проекте также используется mockServe, который позволяет разрабатывать и тестировать без подключения к серверной части.
Для axios реализована глубокая инкапсуляция, используется динамическая маршрутизация, которая упрощает настройку маршрутов. mockServe можно использовать для разработки и тестирования при помощи nodework, где можно наглядно просматривать данные интерфейса.
В основе лежит реализация на Node, что обеспечивает автоматизацию разработки.
│ .browserslistrc 浏览器兼容配置
│ .eslintrc.js eslint配置文件
│ .gitignore git配置文件
│ babel.config.js babel配置文件
│ jsconfig.json js配置文件
│ LICENSE 开源认证
│ package-lock.json
│ package.json
│ README.md 项目说明
│ vue.config.js vue配置文件
│
├─.vscode vscode配置文件
│ settings.json
│
├─node_modules
├─public
│ favicon.ico
│ index.html
│
└─src
│ App.vue
│ main.js
│ config.js
│
├─api api管理模块
│ index.js api管理入口文件
│ mock-server.js mock服务配置文件
│
└─components 公共组件目录
│ Common.vue
│ FunctionPage.vue
│
├─dashboard
│ LiveChart.vue
│ Shortcuts.vue
│
└─layout
│ NavigateBar.vue
│ SideBar.vue
│
└─components
Breadcrumb.vue
Hamburger.vue
Logo.vue
Personal.vue
SlideMenu.vue
v-permission="[array]" — пользовательская директива для управления доступом. Параметр представляет собой массив, элементы которого соответствуют ключам кнопок. v-resize="myChart"
Отслеживание пользовательской директивы echart, параметр — экземпляр echart.
<div
v-resize="myChart"
style="height:400px;margin-top:20px"
ref="liveChart"
></div>
Конфигурацию динамических маршрутов можно посмотреть в файле src\plugins\permission.js. Основной принцип заключается в том, что на основе данных древовидного меню, возвращаемых серверным интерфейсом, динамически генерируется таблица маршрутов и монтируется. Конкретные требования к полям можно настроить в методе fnAddDynamicMenuRoutes файла src\plugins\permission.js:
let route = {
path: menuList[i].url.replace(/\//g, "-") + `-${menuList[i].id}`,
component: null,
name: menuList[i].url.replace(/\//g, "-") + `-${menuList[i].id}`,
};
// url начинается с http[s]://, отображается через iframe
if (menuList[i].iframe == 1) {
route["path"] = `i-${menuList[i].id}`;
route["name"] = `i-${menuList[i].id}`;
route["props"] = { url: menuList[i].url };
route["component"] = () => import("@/views/IFrame.vue");
} else {
const l = "views/layoutpages/" + menuList[i].url;
route["component"] = () => import("@/" + l + ".vue");
}
routes.push(route);
В соответствии с требованиями можно добавить больше конфигураций маршрутов или настроить поля, такие как псевдонимы маршрутов.
Проект использует обёртку для axios, в конфигурации добавляется поле Global, которое используется для управления отображением полноэкранной загрузки, по умолчанию установлено значение true. Если необходимо изменить конфигурацию axios, это можно сделать в файле src\plugins\axios.js.
Этот проект глубоко интегрирован с mock, и при использовании других проектов mock и интерфейсы проекта часто поддерживаются отдельно, что неудобно. Поэтому они объединены вместе. Нужно только добавить их в одном месте. Каталог интерфейсов находится в src\api\modules, не рекомендуется изменять название этого каталога. В этом каталоге добавляются соответствующие файлы интерфейса.
module.exports = {
login: {
// имя интерфейса обязательно
url: "/login", // адрес интерфейса обязательно
type: "post", // тип запроса обязательно
mock: true, // переключатель детального контроля mock, не обязательно, если не заполнено, то false
response: (opt) => {
// данные ответа при включённом mock opt - заголовок запроса
const {
body: { userName, pwd },
} = opt;
let data = {
code: "00",
message: "Успешный вход!",
token: new Date().getTime(),
uname: userName,
};
if (userName == "Administrator") {
if (pwd != "123456") {
data = {
code: "01",
message: "Неверный пароль",
};
}
}
return data;
},
},
};
Обязательно использовать module.exports для экспорта.
Экземпляр axios после обёртки в проекте прикреплён к пользовательскому полю window.VE_API. Способ вызова:
VE_API [ fileName ][ portName ] (params,[config]) // есть глобальная загрузка
VE_API [ fileName ][ portName ] (params,{Global:false) // нет глобальной загрузки
Меню в проекте динамически создаётся на основе древовидной структуры данных, возвращаемой сервером. Подробности можно найти в файле src\components\layout\components\SlideMenu.vue.
Это личная разработка и обслуживание! Добро пожаловать для общения и обучения!
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )