百度360必应搜狗淘宝本站头条
当前位置:网站首页 > IT知识 > 正文

纯后端如何写前端?我用了低代码平台

liuian 2025-02-16 21:56 32 浏览

我是3y,一年CRUD经验用十年的markdown程序员?常年被誉为优质八股文选手

花了几天搭了个后台管理页面,今天分享下我的搭建过程,全文非技术向,就当跟大家吹吹水吧。

1、我的前端技术

老读者可能知道我是上了大学以后,才了解什么是编程。在这之前,我对编程一无所知,甚至报考了计算机专业之后也未曾了解过它是做什么的。

在大一的第一个学期,我印象中只开了一门C++的编程课(其他的全是数学)。嗯,理所当然,我是听不懂的,也不知道用来干什么。

刚进大学的时候,我对一切充满了未知,在那时候顺其自然地就想要进几个社团玩玩。但在众多社团里都找不到我擅长的领域,等快到截止时间了。我又不想大学期间什么社团都没有参加,最后报了两个:乒乓球社团和计算机协会

这个计算机协会绝大多数的人员都来自于计算机专业,再后来才发现这个协会的主要工作就是给人「重装系统」,不过这是后话啦。

当时加入计算机协会还需要满足一定的条件:师兄给了一个「网站」我们这群人,让我们上去学习,等到国庆回来后看下我们的学习进度再来决定是否有资格加入。

那个网站其实就是对HTML/CSS/JavaScript入门教程,是一个国外的网站,具体的地址我肯定是忘了。不过那时候,我国庆闲着也没事干,于是就开始学起来了。我当时的进度应该是学到CSS,能简单的页面布局和展示图片啥的

刚开始的时候,觉得蛮有趣的:我改下这个代码,字体的颜色就变了,图片就能展示出来了。原来我平时上网的网站是这样弄出来的啊!(比什么C++有趣多了)

国庆后回来发现:考核啥的并不重要,只要报名了就都通过了。

有了基本的认知后,我对这个也并不太上心,没有持续地学下去。再后来,我实在是太无聊,就开始想以后毕业找工作的事了,自己也得在大学充实下自己,于是我开始在知乎搜各种答案「如何入门编程」。

在知乎搜了各种路线并浪费了大量时间以后,我终于开始看视频入门。我熬完了JavaSE基础之后,我记得我是看方立勋老师入门的JavaWeb,到前端的课程以后,我觉得前端HTML/CSS/JavaScript啥的都要补补,于是又去找资源学习(那时候信奉着技多不压身)。

印象中是看韩顺平老师的HTML/CSS/JavaScript,那时候还手打代码的阶段,把我看得一愣一愣的(IDE都不需要的)。随着学习,发现好像还得学AJAX/jQuery,于是我又去找资源了,不过我已经忘了看哪个老师的AJAXjQuery课程。

在这个学习的过程中,我曾经用纯HTML/CSS/JavaScript跟着视频仿照过某某网站,在jQuery的学习时候做过各种的轮播图动画。还理解了marginpadding的区别。临近毕业的时候,也会点BootStrap来写个简单的页面(丑就完事了)

等我进公司了以后,技术架构前后端是分离的,虽然我拉了前端的代码,但我看不懂,期间我也没学。以至于我两年多是没碰过前端的,我对前端充满着敬畏(刚毕业那段时间,前端在飞速发展

2、austin前端选型

从我筹划要写austin项目的时候,我就知道我肯定要写一个「后台管理页面」,但我迟迟没下手。一方面是我认为「后端」才是我的赛道,另一方面我「前端」确实菜,不想动手。

我有想过要不找个小伙伴帮我写,但是很快就被我自己否定了:还得给小伙伴提需求,算了

当我要面临前端的时,我第一时间就想到:肯定是有什么框架能够快速搭建出一个管理页面的。我自己不知道,但是,我的朋友圈肯定是有人知道的啊。于是,我果断求助:

我被安利了很多框架,简单列举下出场率比较高的。

:大多数我只是粗略看了下,没有仔细研究。若有错误可以在评论区留言,轻喷

2.1 renren-fast

官网文档:
https://www.renren.io/guide#getdoc

它这个框架是前后端分离的,后端还可以生成对应的CRUD代码,前端基于vueelement-ui开发。

当时其实我有点想选它的,但考虑到我要再部署个后端,还得学点vue,我就搁置了

2.2 RuoYi

官方文档:
http://doc.ruoyi.vip/ruoyi/

RuoYi给我安利的也很多,这个貌似最近非常火?感觉我被推荐了以后,到处都能看到它的身影。

我简单刷了下文档,感觉他做的事比renren-fast要多,文档也很齐全,但是没找到我想要的东西:我打开一个文档,我希望能看到它的系统架构,系统之间的交互或者架构层面上的东西,但我没快速找到。

项目齐全和复杂对我来说或许并不是一件好事,很可能意味着我的学习成本可能会更大。于是,我也搁置着。

2.3 Vue相关

vue-element-admin

官方文档:
https://panjiachen.github.io/vue-element-admin-site/zh/guide/

Vue Antd Admin

官方文档:
https://iczer.gitee.io/vue-antd-admin-docs/start/use.html#%E5%87%86%E5%A4%87

Ant Design Pro

官方文档:
https://pro.antdv.com/docs/getting-started

这几个项目被推荐率也是极高的,从第一行介绍我基本就知道需要去学Vue的语法,奈何我太懒了,搁置着。

2.4 layui

有好几小伙伴们听说我会jQuery,于是给我推荐了layui。我以前印象中好像听过这个框架,但一直没了解过他。但是,当我搜到它的时候,它已经不维护了

GitHub地址:
https://github.com/sentsin/layui

我简单浏览下文档,其实它也有对应的一套”语法“,需要一定的学习成本,但不高。

第一感觉有点类似我以前写过的BootStrap,我对这不太感冒,感觉如果要接入可能还是需要自己写比较多的代码。

2.5 其他

还有些小伙伴推荐或者我看到的文章推荐:x-admin/D2admin/smartchart/JEECG-BOOT/Dcat-admin/iview-admin等等等,在这里面还有些依赖着PHP/Python

总的来说,我还是觉得这些框架有一定的学习成本(我真的是懒出天际了)。可能需要我去部署后端,也可能需要我学习前端的框架语法,也可能让我学Vue

看到这里,可能你们很好奇我最后选了什么作为austin的前端,都已经被我筛了这么多了。在公布之前,我想说的是:如果想要页面好看灵活性高还是得学习Vue。从上面我被推荐的框架中,好多都是在Vue的基础上改动的,并且我敢肯定:还有很多基于Vue且好用的后台是我不知道的。

:我这里指代跟我一样不懂前端的(如果本身就已经懂前端,你说啥都对)

3、amis框架

我最后选择了amis作为austin的前端。这个框架在我朋友圈只有一个小伙伴推荐,我第一次打开文档的时候,确实惊艳到我了

文档地址:
https://baidu.gitee.io/amis/zh-CN/docs/index

它是一个低代码前端框架:amis 的渲染过程是将 json 转成对应的 React 组件

我花了半天粗略地刷了下文档,大概知道了JSON的结构(说实话,他这个文档写得挺可以的),然后我去GitHub找了一份模板,就直接开始动手了,readme十分简短。

GitHub:https://github.com/aisuda/amis-admin

这个前端低代码工具还有个好处就是可以通过可视化编辑器拖拉生成JSON代码,将生成好的代码直接往自己本地一贴,就完事了,确实挺方便的。

可视化编辑器的地址:
https://aisuda.github.io/amis-editor-demo/

4、使用感受

其实没什么好讲的,无非就是在页面上拖拉得到一个页面,然后调用API的时候看下文档的姿势。

在这个过程中我也去看了下这个框架的评价,发现百度内部很多系统就用的这个框架来搭建页面的,也看到Bigo也有在线上使用这个框架来搭建后台。有一线/二线公司都在线上使用该框架了,我就认为问题不大了。

总的来说,我这次搭建austin后台实际编码时间没多少,都在改JSON配置和查文档。我周六下午2点到的图书馆,新建了GitHub仓库,在6点闭馆前就已经搭出个大概页面了,然后在周日空闲时间里再完善了几下,感觉可以用了

austin-amis仓库地址:
https://github.com/ZhongFuCheng3y/austin-admin

在搭建的过程中,amis低代码框架还是有地方可吐槽的,就是它的灵活性太低。我们的接口返回值需要迎合它的主体结构,当我们如果有嵌套JSON这种就变得异常难处理,表单无法用表达式进行回显等等。

它并不完美,很可能需要我用些奇怪的姿势妥协,不要问我接口返回的时候为啥转了一层Map

不管怎么说,这不妨碍我花了极短的时间就能搭出一个能看的后台管理页面(CRUD已齐全)

5、总结

目前搭好的前端能用,也只能用一点点,后面会逐渐完善它的配置和功能的。我后面有链路追踪的功能,肯定要在后台这把清洗后的数据提供给后台进行查询,但也不会花比较长的篇幅再来聊前端这事了。

我一直定位是在后端的代码上,至于前端我能学,但我又不想学。怎么说呢,利益最大化吧。我把学前端的时间花在学后端上,或许可能对我有更大的受益。现在基本前后端分离了,在公司我也没什么机会写前端。

下一篇很有可能是聊分布式定时任务框架上,我发现我的进度可以的,这个季度拿个4.0应该问题不大了。

都看到这里了,点个赞一点都不过分吧?我是3y,下期见。

关注我的微信公众号【Java3y】除了技术我还会聊点日常,有些话只能悄悄说~ 【对线面试官+从零编写Java项目】 持续高强度更新中!求star!!原创不易!!求三连!!

austin项目源码Gitee链接:gitee.com/austin

austin项目源码GitHub链接:github.com/austin


来源:
https://www.cnblogs.com/Java3y/p/16020226.html

相关推荐

电脑主机开机没反应(电脑主机开机没反应电源灯亮)

操作方法01第一种情况是电脑完全没有反应,那么就可能是电源没有连接上,检查插线板和机箱插头,重新插好就好了。?02还有是电脑机箱已经开启,但是显示屏还是黑的,那么这种情况就有可能是显示屏的电源没有连接...

cad激活码2010(cad激活码和序列号)

1.首先激活码出现问题,需要进行激活确认。首先需要的中进入电脑C盘。2.可以先点击组织设置隐藏文件夹显示。3.勾选显示隐藏文件夹。4.找到C:\ProgramData文件夹,打开找到CAD文件夹。5....

联想windows7笔记本怎么连接网络

检查笔记本的无线网卡驱动1.右键我的电脑,点击“属性”,选择左侧“设备管理器”2.点击“网络适配器”,如果方框内没有驱动,请下载驱动精灵万能网卡版安装网卡驱动 二、若发现驱动前面是感叹号的&...

iphone自动关机设置方法(iphone如何设自动关机)
  • iphone自动关机设置方法(iphone如何设自动关机)
  • iphone自动关机设置方法(iphone如何设自动关机)
  • iphone自动关机设置方法(iphone如何设自动关机)
  • iphone自动关机设置方法(iphone如何设自动关机)
淘宝电脑版网页入口(淘宝网电脑版网页官方)

网站地址:https://www.taobao.com/网站链接:进入网站服务器IP:116.253.191.241网站描述:淘宝网首页,淘宝网-亚洲最大、最安全的网上交易平台,提供各类服饰、美容...

大学生用哪个牌子的笔记本电脑好

荣耀MagicBook14英寸轻薄窄边框笔记本电脑(AMD锐龙58G512GFHDIPS正版Office)冰河银这款的性价比较高。也可以根据自己的预算选同系列其他型号。...

苹果怎么查询手机激活时间(苹果手机如何查询手机激活时间)
  • 苹果怎么查询手机激活时间(苹果手机如何查询手机激活时间)
  • 苹果怎么查询手机激活时间(苹果手机如何查询手机激活时间)
  • 苹果怎么查询手机激活时间(苹果手机如何查询手机激活时间)
  • 苹果怎么查询手机激活时间(苹果手机如何查询手机激活时间)
免费手机模拟器(免费手机模拟器下载)

目前能成功在电脑上模拟苹果系统的iOS模拟器,对比市面上常见的安卓模拟器少太多了,主要原因还是iOS系统比较封闭,难于开发。虽然前面说开发很困难,但是国内还是有一些厉害的IT小组成功推出了iOS模拟器...

免费主题商店app下载(免费主题商店app下载苹果)
  • 免费主题商店app下载(免费主题商店app下载苹果)
  • 免费主题商店app下载(免费主题商店app下载苹果)
  • 免费主题商店app下载(免费主题商店app下载苹果)
  • 免费主题商店app下载(免费主题商店app下载苹果)
新手怎么制作word表格(工作表格制作)

步骤如下:1、本次演示使用的软件为word文字处理软件,软件版本为Microsoftoffice家庭和学生版2016。2、首先打开Excel电子表格,根据问题描述,我们在word中插入两页表格。3、...

电脑开机启动进不了系统怎么办
电脑开机启动进不了系统怎么办

一、修复错误如果频繁无法正常进入系统,则开机后马上按F8,看能否进入安全模式或最后一次配置正确模式,如能则进入后会自动修复注册表,并回忆前几次出现不正常现象时进行了什么操作,并根据怀疑是某个应用软件导致问题产生,将其卸载,然后正常退出,...

2026-01-02 13:05 liuian

win11任务栏隐藏不了(win11任务栏怎么隐藏)

方法/步骤:  1、打开电脑桌面,双击我的计算机。  2、打开控制面板。  3、点击类别切换到大图标或小图标。  4、找到通知区域图标打开。  5、选择显示图标或隐藏图标也可以仅显示通知,选好以后点击...

win10怎么打开系统更新(怎么开启windows10更新)
  • win10怎么打开系统更新(怎么开启windows10更新)
  • win10怎么打开系统更新(怎么开启windows10更新)
  • win10怎么打开系统更新(怎么开启windows10更新)
  • win10怎么打开系统更新(怎么开启windows10更新)
笔记本注册表编辑器怎么打开

你好,要打开注册表编辑器,可以按照以下步骤进行操作:1.打开“运行”对话框。可以通过按下Win+R键组合,或者在开始菜单中搜索“运行”来打开。2.在“运行”对话框中,输入“regedit”并点...

怎样查询ip地址(怎么顺着ip地址找人)

答:查看ip地址的步骤如下,1.通过网页进行查询:可以通过第三方平台进行查询。2.通过电脑内部的网络连接进行查询:首先我们点击桌面右下角的开始,在开始的选项栏当中找到运行,点击运行,然后再用新的对...