00:00
大家好,我是于皮,最近的空闲时间呢,我都在继续开发我的编程导航网站,有很多朋友也比较好奇这个网站是怎么做出来的,那今天就来聊一聊它用到的前后端技术,包括为什么选择这些技术等等,希望大家也有所收获。其实呢,在开发这个项目的过程中,我就在持续不断的编写一些文档,并且根据这份文档生成了一个站点。怎么说呢,文档的话就是一个项目的排面,所以必须得好好写,我们可以在这个文档中看到项目的技术选型,其实我这个项目包含了很多的子项目,那每个子项目的技术选型都是不一样的,下面我们一个一个来介绍吧。首先是编程导航主站点,这个网站的前端呢,我是用了五米一个基于react的前端框架,那react也是现在前端的主流开发框架,开发效率那是涨涨低。然后我们看一下这个界面啊,是怎么做的,当然不用我们自己写,我是直接套用了阿里安design组件库,以及一套现成的基于这个组件库开发的后台管理模板,我们可以看一下这个模板的效果啊,大家看啊,这两个网站的风格是不是神似,这就大大的减少了我们开发的工作量,其实我们在企业中开发也基本都是套用一个模板。
01:26
没有必要什么都自己写,那除了套用这样一套后台管理模板之外呢,我们也用了enter design它的很多UI组件,那这个组件库也是我强烈推荐的,它是同时支持react还有will的,你需要用到什么组件呢?你就直接挑选,最后在这个基础上进行一些修改就好了,还是非常方便的。由于我们做的是一个动态网站,这就不可避免的需要在前端去管理我们的数据状态,所以这里呢,我其实用了一个低瓦框架,非常的可爱,也是非常的简单啊,它是一个基于react redux的一个数据流的方案,它的命名源于一个游戏。然后呢,虽然我们运用了组件库,但是很多默认的组件是无法满足我们对于样式的需求,因此,我们也不可避免要自己写一些样式文件。
02:18
那我这里就用到了Les这样一个CSS易处理语言,可以帮助你用更少更灵活的语法来编写CSS样式代码,使得CSS代码更利于维护和扩展。最后啊,我们还用了javascript的一个超级script,可以让我们的代码更加规范好。前端讲完了,下面我们来聊聊这个网站的后端用到了哪些技术,数据是如何存储的。文件图片是如何存储的,包括这个网站是存放到哪个地方的呢?其实我这里偷了一个小懒,直接使用了腾讯云云开发我的整个网站的后台,包括网站前端页面本身全部都放到了云端进行存储。
03:05
大家也知道现在这个云计算技术啊,吹的确实是非常的强,当然本身它是有很大的好处呢,它好在哪儿呢?云开发是一套一体化的开发环境和工具平台,是一套完整的后端云服务,听着好像挺强,也比较抽象啊,到底是啥意思呢?以前我们自己来开发后台,你要用数据库去存储数据啊,你要用对象存储来存储一些文件。然后呢,最重要的就是你要自己开发一套后台系统,来和数据库和存储进行一些交互,比如说数据的增删改查啊,上传图片,下载图片等等,你要写很多很多重复的代码。而且写好代码之后呢,哎,你要自己去搭建服务器,把代码放到服务器上去运行啊,数据库啊,存储啊什么你都得自己搭,再加上你想要让你的这个后端业务运行的更加平稳呢,哎,你需要去找一些监控记录一些日志等等,非常的麻烦。那用了这个云开发之后呢,我们不用自己搭数据库啊,不用自己搭对象存储,甚至呢,很多数据操作啊,文件操作的代码都不需要我们自己写,直接在前端调用云开发提供的API就可以了,不用再做c rud怪了,还有非常棒的一点事啊,你可以在这样一个统一的界面去管控你所有的数据啊,给数据设置权限,然后去管理你的文件,管理你自定义的一些高级函数,还可以直接把你的网站放到云开发的环境中就能直接运行,那如果你了解容器技术呢,就可以使用云。
04:50
开发中云托管体重的动态扩缩容功能,云托管会自动对你的应用进行一个监控,如果你的网站访问量比较小呢,它就会自动缩容,给你节省资源,也就是省钱。那如果你的网站访问量突然变多啊,也不用担心,云托管会自动给你扩容商城几个一模一样的副本来分摊用户的请求,从而大大提高并发能力,像这个监控啊,什么日志啊,哎,都不需要你自己记录了啊,出了问题查起来也非常的方便。
05:23
然后呢,云开发也提供了一些高级功能,比如说用这个CMS内容管理系统,可以直接可视化的对数据进行管理啊,真的是非常的方便。那我为什么选择云开发呢?其实不仅仅是因为它的学习成本比较低,容易上手,而且能大大的提高开发和运维效率啊,更重要的一点就是它非常的稳定,就如果很多朋友自己真的要上线一个产品,一定要找比较稳定的服务,你如果自己搭服务器呢,固然是比较灵活,但是这些都需要你自己去管,能保证服务稳定的只有你自己。而且还有比较重要的一点是啊,其实这个云开发比买服务器要便宜很多,因为你是可以自己控制资源的用量的。
06:09
而你买一台服务器就是完完整整的一台啊,虽然你想怎么玩就怎么玩,但是通常情况下,我们并不能把一台服务器进行很好的运用,这个时候呢,按量计费可能就会更加的划算。然后呢,这是该项目的一个目录结构啊,其实很多的代码可能都不用我们自己写,都是你用了这些前端框架,后端框架,它会帮我们生成了啊,这也是为什么开发框架那么受大家的欢迎,而你如果要开发一个应用来说,选择框架显得尤为重要,所以呢,还是要多了解技术啊,让你有更多的选择,再看另外一个项目。啊,这样一个面向程序员的浏览器主页,上一个项目呢,我们是用了五米这样一个基于react的前端开发框架,那这个子项目同样用了react,更多的还是因为它的稳定性以及开发效率非常的高。不一样的一点是呢,这个浏览器主页它是一个静态网站,不需要和后台有太多的交互,然后大家看到的数据可能都是固定的。
07:12
所以我这里用了react started这样一个静态站点生成框架,那这个框架呢,它对静态站点是有一个比较不错的支持,能让你的网站性能更高,加载更快,那同样我们用到了anti design这样一个组件库,用了ES lit来做一些代码规范的检查,那至于这个网站它的一些其他的功能啊,啊,像这个随机壁纸什么的,这里是用了一些第三方的API接口,并且用jasonb来解决一个前端的跨域问题。那关于壁纸切换的,其实我是用了一个小小的技巧,直接用I frame标签加载一套动态壁纸,然后把它设置为和网页等宽等高,置于底层就可以了。那后端的话依然是用了云开发使用了刚刚提到的一个静态网站托管的技术,直接把文件传到上面,云开发会自动帮你做CDN全站加速,能够帮助所有的用户从最近的地方访问你的网站,从而减少网络通讯时间,更快的看到你的网站。
08:17
然后呢,是大家现在看到的这个文档啊,也是用阿里的一个文档生成工具叫do米用它来自动生成的,那后端呢,依然是用云开发来存放图片,因为有CDN加速啊,非常的迅速,然后呢,用versel来免费的托管我们的这个网站,最后啊,目前这个网站登录的时候还是需要和公众号进行一个交互。在公众号点击一键登录之后,能够获取一个动态码,那公众号的后台怎么开发呢?啊,其实也是非常简单,我这里是用了Java wx Java这样一个公众号后台开发类库,那然后用了spring boot来作为一个后台开发框架,当我们点击一键登录之后呢,其实就是向我们spring foot的后台发送了一个请求而已,然后呢,我们用wx Java和微信自己的后台做了一个交互,也有部分的功能用到了云开发中的云函数这样一个功能。
09:14
每个云函数呢,其实都是一个非常迷你的后台,开发起来管理起来啊,都非常的方便,好了差不多就这些,最后啊,虽然用到的都是主流技术,但其实这个网站的实现难度并不大,要做这样一个东西呢,其实主要麻烦的点就在于运营,那我也把它相应的前端代码都拆完了,大家有兴趣的话可以拿来学习一下,练练手,也希望这个作品可以帮助大家找到更多好的编程资源,欢迎大家体验,多给我提提bug哦,我们下期再见。
我来说两句