为了账号安全,请及时绑定邮箱和手机立即绑定

FJYY-Admin 开源极简后台管理系统,快速构建前端项目,更适合后端开发小伙伴的前端框架~

FJYY-Admin 开源极简后台管理系统,快速构建前端项目,更适合后端开发小伙伴的前端框架~

介绍

Github地址:https://github.com/leechenxiang/fjyy-admin
FJYY-Admin 极简后台管理系统,前端基于Vue+ElementUI,无需nodejs,无需npm,对后端开发人员极其友好~
本框架基于Vue + ElementUI,链接地址为:https://element.eleme.cn/

使用与解说视频见bilibili:https://www.bilibili.com/video/BV16ms2e9Erd

运行效果:
https://img1.sycdn.imooc.com/66f152ef0001527037360756.jpg

说明

  • 本框架不对前端有极高的代码规范,整体代码风格写的舒服看的舒服,结构雅观即可。

  • 本框架对前端性能没有太高的要求,以业务功能实现为主。

  • 本框架不需要安装前置依赖环境,不需要nodejs与npm,解放后端开发人员对前端环境的过度依赖。导入使用js的方式与html页面直接引入相同。

  • 本框架非常适用于后端开发人员。

运行前端项目

打开VSCode,安装插件Live Server,选中页面右键运行Open With Live Server
https://img1.sycdn.imooc.com/66f152f70001d17d21140438.jpg

使用步骤1:前端项目目录结构

https://img1.sycdn.imooc.com/66f152fc000107c206160632.jpg

  • .vscode:不用管

  • css:样式文件

  • img:图片资源

  • js:脚本文件,api调用脚本,通用工具类等

    • apis:api文件目录

    • app.js:全局工具类

    • cookieUtils.js:会话管理工具

    • request.js:http请求封装工具

  • libs:第三方js库、工具库,现成的已经封装好的

  • pages:自己的页面,可以定义更多模块

  • 404.html:错误页面

使用步骤2:页面路由 adminrouter.js

menuList 支持一级和二级菜单

  • title:菜单标题

  • path:页面路由(路径)

  • index:唯一索引标识

  • icon:菜单图标

  • children:子级菜单列表

routes 定义路由与页面关系,指定path将会路由到哪个页面

  • path:与menuList中的path对应

  • component:组件,指的是具体的那个vue页面,此处使用httpVueLoader进行加载

    https://img1.sycdn.imooc.com/66f153060001a52231581232.jpg

使用步骤3:修改后端api的server地址

request.js中的后台调用地址根据实际情况修改。
https://img1.sycdn.imooc.com/66f1530b0001e39025520730.jpg

使用步骤4:创建接口api调用

每个模块都需要有对应的api脚本来对应,通过window.xxxApi来定义全局。并且在admin.html中加载该api脚本。如此便可以在vue页面中直接调用该api进行后端的http请求。
https://img1.sycdn.imooc.com/66f1530f0001e44c19221054.jpg

https://img1.sycdn.imooc.com/66f153140001e97322021078.jpg

https://img1.sycdn.imooc.com/66f1531c000189e120980700.jpg


使用步骤6:跨域问题解决

如果遇到跨域问题,请自行修改前端的地址和端口即可。
https://img1.sycdn.imooc.com/66f15326000106f920480782.jpg

基本操作1:数据库说明

没有集成数据库,后台数据写死在本地缓存中。重启后台数据恢复缺省。
https://img1.sycdn.imooc.com/66f1532a0001ff0e09540570.jpg

基本操作2:增&改

https://img1.sycdn.imooc.com/66f1532e0001078f07460382.jpg

基本操作3:删

https://img1.sycdn.imooc.com/66f15332000189f909280322.jpg

基本操作4:查

https://img1.sycdn.imooc.com/66f1533600013ea209780696.jpg

运行后端项目

运行“Application.java”即可:
https://img1.sycdn.imooc.com/66f153390001532710201152.jpg

Github链接地址

https://github.com/leechenxiang/fjyy-admin


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
全栈工程师
手记
粉丝
1.2万
获赞与收藏
914

关注作者,订阅最新文章

阅读免费教程

  • 推荐
  • 1
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消