草庐IT

vue3-antd-admin管理后台框架

普通网友 2023-04-18 原文

前言

vue3-antd-admin是一个后台前端解决方案，它基于vue3和antd-ui实现。它使用了最新的前端技术栈，集成了动态路由、鉴权登录、菜单管理等基础功能，在此之上对样式进行优化，解决了其他框架菜单超出不滚动、未BFC隔离等被忽略的问题。它与同类型框架相比逻辑更加清晰简洁，没有冗余代码上手更加快速。相信不管你的需求是什么，本项目都能帮助到你。good luck！

本项目当前只是基础部分完成了，还有很多地方需要完善，例如：H5适配、页面动画、指令权限、更多好用的组件等等等等，由于本人平时工作原因并不能快速迭代更新，所以希望更多的开发者加入进来

本框架已开源至github 传送门

预览


框架基础版秉承开箱即用的理念，无多余组件页面，代码清楚不冗余

demo在线预览

账号：admin | 密码：123456

文档地址

安装使用

1、下载前端项目

# 克隆项目
git clone git@github.com:llyyayx/vue3-antd-admin.git

# 进入项目目录
cd vue3-antd-admin

# 安装依赖
npm install

# 本地开发 启动项目
npm run dev

2、接口配置
操作完第一步你的前端页面已经可以正常访问打开了，但是这里项目依赖 api 还是作者本人的线上地址，你需要提供如下必须的接口与设置代理到自己 api 地址上。

我们前端自己动手丰衣足食
如果你暂时不能得到后台人员的支持，可以使用框架提供的接口，这样会更方便，你可以下载 vue3-vite-admin 示例提供的admin-nodeServe，他是线上示例实际使用的api，你只需下载完成后进入目录 npm install npm run strat 即可，默认端口号为http://127.0.0.1:8010，如果你有node基础你可以修改其中代码来实现你需要的数据和功能。

所有必须接口配置在 @/api/login.ts 中，你可以修改必须接口的 url，但是尽量不要去修改接口 ts 类型规范！

a、登陆接口

method: post
url: /login

接口规范

// 提交给后台的数据格式
export type LoginFrom = {
  username: string | undefined;
  password: string | undefined;
};
// 要求后台返回的数据格式
export type LoginSuccess = {
  code: number;
  message: string;
  data?: T;
  token: string;
};

b、获取用户信息接口

method: get
url: /info

接口规范

// 提交给后台的数据格式
无，header中token验证身份
// 要求后台返回的数据格式
export type UserInfo = {
  code: number,
  message: string,
  data?: T,
  info: {
    // token
    token: string,
    // 用户名
    name: string,
    // 头像
    avatar: string,
    // 权限
    roles: string[],
  }
}

c、菜单接口

method: get
url: /menu

接口规范

// 提交给后台的数据格式
无，header中token验证身份
// 要求后台返回的数据格式
export type RouterData = {
  code: number,
  message: string,
  data: [
    {
       // 菜单id
      id: number,
      // 路由地址
      path: string,
      // 菜单名称
      name: string,
      // 相对于views文件夹的模板文件的相对位置
      component: string,
      // 路由名称 (必须唯一)
      key: string,
      // 重定向地址
      redirect?: string,
      // 菜单图标
      icon?: string,
      // 菜单子集，页面级无需配置
      children?: RouterObj[],
      // 父级id
      pid?: number,
      // 是否隐藏页面/菜单，默认false不隐藏
      hidden?: boolean,
      // 是否缓存页面，默认false不缓存
      keepAlive?: boolean
    }
  ]
}

c、退出登录接口

method: post
url: /logout

接口规范

export interface ResponseData<T = any> {
  code: number,
  message: string,
  data?: T
}

至此你就可以尽情的使用了！添加删除页面只需要在后台增删数据库数据就行了，前端只需要专注于页面交互。

如果你想深入了解框架内部运行逻辑，请继续框架文档 传送门

如何贡献

非常欢迎你的加入！提一个 Issue 或者提交一个 Pull Request。

Pull Request:

  1. Fork 代码!
  2. 创建自己的分支: git checkout -b feat/xxxx
  3. 提交你的修改: git commit -am 'feat(function): add xxxxx'
  4. 推送您的分支: git push origin feat/xxxx
  5. 提交pull request

感谢您的阅读与支持！

vue3-antd-adminadmincodexff0cxff前端react.jsgitjava爬虫

有关vue3-antd-admin管理后台框架的更多相关文章

  1. ruby - i18n Assets 管理/翻译 UI - 2

    我正在使用i18n从头开始​​构建一个多语言网络应用程序，虽然我自己可以处理一大堆yml文件，但我说的语言(非常)有限，最终我想寻求外部帮助帮助。我想知道这里是否有人在使用UI插件/gem(与django上的django-rosetta不同)来处理多个翻译器，其中一些翻译器不愿意或无法处理存储库中的100多个文件，处理语言数据。谢谢&问候，安德拉斯(如果您已经在ruby​​onrails-talk上遇到了这个问题，我们深表歉意) 最佳答案 有一个rails3branchofthetolkgem在github上。您可以通过在Gemfi

  2. ruby-on-rails - active_admin 目录中的常量警告重新声明 - 2

    我正在使用active_admin，我在Rails3应用程序的应用程序中有一个目录管理，其中包含模型和页面的声明。时不时地我也有一个类，当那个类有一个常量时，就像这样:classFooBAR="bar"end然后，我在每个必须在我的Rails应用程序中重新加载一些代码的请求中收到此警告:/Users/pupeno/helloworld/app/admin/billing.rb:12:warning:alreadyinitializedconstantBAR知道发生了什么以及如何避免这些警告吗？ 最佳答案 在纯Ruby中:classA

  3. ruby-on-rails - 获取 inf-ruby 以使用 ruby​​ 版本管理器 (rvm) - 2

    我安装了ruby​​版本管理器，并将RVM安装的ruby​​实现设置为默认值，这样'哪个ruby'显示'~/.rvm/ruby-1.8.6-p383/bin/ruby'但是当我在emacs中打开inf-ruby缓冲区时，它使用安装在/usr/bin中的ruby​​。有没有办法让emacs像shell一样尊重ruby​​的路径？谢谢! 最佳答案 我创建了一个emacs扩展来将rvm集成到emacs中。如果您有兴趣，可以在这里获取:http://github.com/senny/rvm.el

  4. ruby-on-rails - 事件管理员日期过滤器日期格式自定义 - 2

    是否有简单的方法来更改默认ISO格式(yyyy-mm-dd)的ActiveAdmin日期过滤器显示格式？ 最佳答案 您可以像这样为日期选择器提供额外的选项，而不是覆盖js:=f.input:my_date,as::datepicker,datepicker_options:{dateFormat:"mm/dd/yy"} 关于ruby-on-rails-事件管理员日期过滤器日期格式自定义，我们在StackOverflow上找到一个类似的问题： https://s

  5. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

  6. TimeSformer：抛弃CNN的Transformer视频理解框架 - 2

    Transformers开始在视频识别领域的“猪突猛进”，各种改进和魔改层出不穷。由此作者将开启VideoTransformer系列的讲解，本篇主要介绍了FBAI团队的TimeSformer，这也是第一篇使用纯Transformer结构在视频识别上的文章。如果觉得有用，就请点赞、收藏、关注！paper:https://arxiv.org/abs/2102.05095code(offical):https://github.com/facebookresearch/TimeSformeraccept:ICML2021author:FacebookAI一、前言Transformers(VIT)在图

  7. ruby - 如何在 ruby​​ 中运行后台线程？ - 2

    我是ruby​​的新手，我认为重新构建一个我用C#编写的简单聊天程序是个好主意。我正在使用Ruby2.0.0MRI(Matz的Ruby实现)。问题是我想在服务器运行时为简单的服务器命令提供I/O。这是从示例中获取的服务器。我添加了使用gets()获取输入的命令方法。我希望此方法在后台作为线程运行，但该线程正在阻塞另一个线程。require'socket'#Getsocketsfromstdlibserver=TCPServer.open(2000)#Sockettolistenonport2000defcommandsx=1whilex==1exitProgram=gets.chomp

  8. ruby - (Ruby || Python) 窗口管理器 - 2

    我想用这两种语言中的任何一种(最好是ruby​​)制作一个窗口管理器。老实说，除了我需要加载某种X模块外，我不知道从哪里开始。因此，如果有人有线索，如果您能指出正确的方向，那就太好了。谢谢 最佳答案 XCB，X的下一代API使用XML格式定义X协议(protocol)，并使用脚本生成特定语言绑定(bind)。它在概念上与SWIG类似，只是它描述的不是CAPI，而是X协议(protocol)。目前，C和Python存在绑定(bind)。理论上，Ruby端口只是编写一个从XML协议(protocol)定义语言到Ruby的翻译器的问题。生

  9. ruby-on-rails - 事件管理员和自定义方法 - 2

    这是我在ActiveAdmin中的自定义页面ActiveAdmin.register_page"Settings"doaction_itemdolink_to('Importprojects','settings/importprojects')endcontentdopara"Text"endcontrollerdodefimportprojectssystem"rakedataspider:import_projects_ninja"para"OK"endendend我想做的是，当我单击“导入项目”按钮时，我想在Controller中执行rake任务。但是我无法访问该方法。可能是什

  10. ruby - sinatra 框架的 MVC 模式 - 2

    我想开始使用“Sinatra”框架进行编码，但我找不到该框架的“MVC”模式。是“MVC-Sinatra”模式或框架吗？ 最佳答案 您可能想查看Padrino这是一个围绕Sinatra构建的框架，可为您的项目提供更“类似Rails”的感觉，但没有那么多隐藏的魔法。这是使用Sinatra可以做什么的一个很好的例子。虽然如果您需要开始使用这很好，但我个人建议您将它用作学习工具，以对您来说最有意义的方式使用Sinatra构建您自己的应用程序。写一些测试/期望，写一些代码，通过测试-重复:)至于ORM，你还应该结帐Sequel其中(imho

随机推荐