基于 SpringBoot + magic-api + Vue3 + Element Plus + amis3.0 快速开发管理系统

这篇具有很好参考价值的文章主要介绍了基于 SpringBoot + magic-api + Vue3 + Element Plus + amis3.0 快速开发管理系统。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Tansci-Boot

基于 SpringBoot2 + magic-api + Vue3 + Element Plus + amis3.0 快速开发管理系统

Tansci-Boot 是一个前后端分离后台管理系统, 前端集成 amis 低代码前端框架,后端集成 magic-api 的接口快速开发框架。包含基础权限、安全认证、以及常用的一些组件功能。项目易上手,技术更综合,能力更全面。

amis 是一个低代码前端框架,它使用 JSON 配置来生成页面,可以减少页面开发工作量,极大提升效率。

magic-api 一个基于 Java 的接口快速开发框架,通过 magic-api 提供的 UI 界面完成编写接口,无需定义 ControllerServiceDaoMapperXMLVOJava 对象即可完成常见的 HTTP API 接口开发。

全面的技术运用:

  • 解决前后端分离难题:前后端功能整合,集成 HTTP 组件 Axios,解决前后端分离架构中常见的问题,如跨域、参数传递、多环境配置等;
  • 落地实践工程化项目:涵盖日志、配置文件、部署、Git、Maven,后端接口统一返回参数设计、封装统一请求返回参数、工具类封装;
  • amis:低代码前端配置框架;
  • magic-api:HTTP API 接口快速开发框架。

项目预览

基于 SpringBoot + magic-api + Vue3 + Element Plus + amis3.0 快速开发管理系统 基于 SpringBoot + magic-api + Vue3 + Element Plus + amis3.0 快速开发管理系统
基于 SpringBoot + magic-api + Vue3 + Element Plus + amis3.0 快速开发管理系统 基于 SpringBoot + magic-api + Vue3 + Element Plus + amis3.0 快速开发管理系统
基于 SpringBoot + magic-api + Vue3 + Element Plus + amis3.0 快速开发管理系统 基于 SpringBoot + magic-api + Vue3 + Element Plus + amis3.0 快速开发管理系统
基于 SpringBoot + magic-api + Vue3 + Element Plus + amis3.0 快速开发管理系统 基于 SpringBoot + magic-api + Vue3 + Element Plus + amis3.0 快速开发管理系统
基于 SpringBoot + magic-api + Vue3 + Element Plus + amis3.0 快速开发管理系统 基于 SpringBoot + magic-api + Vue3 + Element Plus + amis3.0 快速开发管理系统

开始使用

执行 SQL 初始化数据(MySQL8+ 版本),测试用户:admin/123456,API 管理界面登录用户:admin/admin@123 (可在配置文件修改)。

项目目录:

  • tansci-boot:后端项目
  • tansci-boot-ui:前端项目
  • tansci-boot-ui-editor:amis 低代码编辑器
  • sql:数据库 SQL 脚本

amis 配置说明:

tansci-boot-ui/public/gh-pages/config.js 可配置编辑器获取页面JSON和保存接口的配置。

注意:在页面编辑器中业务接口回报404可忽略。

接口开发配置:

接口开发菜单页面加载不了,检查环境变量配置的服务地址是否和后端服务一致:tansci-boot-ui/.env.development 参数 VITE_BASE_API

项目地址:

Gitee: https://gitee.com/typ1805/tansci-boot

GitHub: https://github.com/typ1805/tansci-boot文章来源地址https://www.toymoban.com/news/detail-804565.html

开发者联系

  • QQ:742354529 (742354529@qq.com)
  • QQ 群: 747200630
  • 个人主站:https://typ1805.gitee.io

到了这里,关于基于 SpringBoot + magic-api + Vue3 + Element Plus + amis3.0 快速开发管理系统的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3 Element Plus 基于webstorm练习

    vue是前端框架,Elemen是组件库。前端框架和组件库的区别与联系 脚本语言需要一个解析器才能运行,JavaScript是脚本语言,在不同的位置有不一样的解析器,如写入html的js语言, 浏览器是它的解析器角色。而对于需要独立运行的js,nodejs就是一个解析器。 npm 是 Node Package Man

    2024年02月19日
    浏览(48)
  • 基于Vue3 + Element Plus 的后台管理系统详细教程

    Vue3 概述 Vue.js 是一种轻量级MVVM框架,它通过双向绑定的方式,将视图与数据进行关联,简化了前端开发的流程。Vue3 是 Vue.js 的下一个版本,与早期版本相比,它具有更高的性能和更好的开发体验。 Composition API Vue 3 中最大的新特性是引入了 Composition API,它允许开发人员按照

    2024年02月09日
    浏览(48)
  • 基于Vue3和Element Plus组件库实现一个完整的登录功能

    先看一下最终要实现的效果: 登录页面: 注册页面: (1)引入element-plus组件库 引入组件库的方式有好多种,在这里我就在main.js全局引入了. main.js中代码: 引入之后自己可以用几个按钮测试一下是否引入成功. (2)登录及注册页面 html部分 views/account/Login.vue js部分 css部分(使用了scss) (

    2024年02月05日
    浏览(24)
  • uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -用户投票实现

    锋哥原创的uniapp微信小程序投票系统实战: uniapp微信小程序投票系统实战课程 (SpringBoot2+vue3.2+element plus ) ( 火爆连载更新中... )_哔哩哔哩_bilibili uniapp微信小程序投票系统实战课程 (SpringBoot2+vue3.2+element plus ) ( 火爆连载更新中... )共计21条视频,包括:uniapp微信小程序投票系统实

    2024年01月23日
    浏览(49)
  • 基于 Vue3 + Webpack5 + Element Plus Table 二次构建表格组件

    基于 Vue3 + Webpack5 + Element Plus Table 二次构建表格组件,开箱即用 A Vue 3.x Table Component built on Webpack 5 该组件库可供学习、参考和用于二次开发。 1.基于 Webpack 5 构建 2.全面支持 Vue 3 3.支持 JSON 序列化表格快速配置 4.已内置 Pagination 分页 5.支持自定义 prop 列名 6.支持单元格内容自

    2024年04月13日
    浏览(60)
  • uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -投票帖子详情实现

    锋哥原创的uniapp微信小程序投票系统实战: uniapp微信小程序投票系统实战课程 (SpringBoot2+vue3.2+element plus ) ( 火爆连载更新中... )_哔哩哔哩_bilibili uniapp微信小程序投票系统实战课程 (SpringBoot2+vue3.2+element plus ) ( 火爆连载更新中... )共计21条视频,包括:uniapp微信小程序投票系统实

    2024年01月16日
    浏览(52)
  • uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -投票帖子明细实现

    锋哥原创的uniapp微信小程序投票系统实战: uniapp微信小程序投票系统实战课程 (SpringBoot2+vue3.2+element plus ) ( 火爆连载更新中... )_哔哩哔哩_bilibili uniapp微信小程序投票系统实战课程 (SpringBoot2+vue3.2+element plus ) ( 火爆连载更新中... )共计21条视频,包括:uniapp微信小程序投票系统实

    2024年01月22日
    浏览(48)
  • uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -投票帖子排行实现

    锋哥原创的uniapp微信小程序投票系统实战: uniapp微信小程序投票系统实战课程 (SpringBoot2+vue3.2+element plus ) ( 火爆连载更新中... )_哔哩哔哩_bilibili uniapp微信小程序投票系统实战课程 (SpringBoot2+vue3.2+element plus ) ( 火爆连载更新中... )共计21条视频,包括:uniapp微信小程序投票系统实

    2024年01月19日
    浏览(33)
  • vue3 基于element plus对el-pagination进行二次封装

    在vue3项目中,如果每个列表页都敲一遍分页方法,显然是不合理的,那么,下面我将基于element plus对el-pagination进行二次封装,使用vue3语法糖格式,废话不多说,开干。

    2024年02月12日
    浏览(32)
  • uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -全局异常统一处理实现

    锋哥原创的uniapp微信小程序投票系统实战: uniapp微信小程序投票系统实战课程 (SpringBoot2+vue3.2+element plus ) ( 火爆连载更新中... )_哔哩哔哩_bilibili uniapp微信小程序投票系统实战课程 (SpringBoot2+vue3.2+element plus ) ( 火爆连载更新中... )共计21条视频,包括:uniapp微信小程序投票系统实

    2024年02月03日
    浏览(28)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包