当前位置: 首页 > Web前端 > vue.js

从零开始在云端架设自己的网站(Part3)网站界面开发

时间:2023-03-31 22:20:59 vue.js

Part0Part1Part2将第一个helloworld项目成功部署到阿里云后,接下来的第一阶段开发全面展开swing,在今天1.04版本发布前两天,该域名已经通过网管局审批。现在可以直接访问http://www.bsoya.cn/index空间首页主要目标赛区首页如下:背景在第一篇已经介绍,前台技术选型使用springboot,我选择了比较流行的bootstrap+vue.js公司开发,因为都是用公司自己的框架,所以其他主流框架老实说涉及的不多。之前的版本用的是纯html+js+css,终于作为一个“玩”项目辛苦了。还是得找一个简单的框架来用,不管多简单,至少基本的风格都能看的过去。Bootstrap就是这样的东西。说实话,网上的评论都说是目前最流行的框架。当我使用它时,我仍然很失望。在排版上我还需要操心很多事情。bootstrap提供的排版功能和html的table标签没有本质区别。唯一的好处就是你用的是这个框架,也就是说一切都有一个比较统一的风格。如果自己做样式,最后的效果会很花哨,毕竟你不是专业的网页设计师。bootstrap的亮点在于它提供了多种类型,可以让你在不同的屏幕上自定义它们,提供不同的显示效果。对于这个项目来说,这个优势并不是特别显着。有了这个东西,主要是享受他提供的比较统一的界面风格。大部分排版功能最后都是自己折腾css解决的。然后说说vue。经常在版块看到vue的文章。这个东西做的事情本质上就是绑定dom元素和javascript变量。我用的第一个印象就是,有了这个东西,为什么不用jsp呢?使用vue元素后,html代码怎么看都是不纯的。比如下面这段代码第{{index+1}}轮{{value[0]['matchTime']}}

{{record['player1']['name']}}vs{{record['player2']['name']}}{{getMap(record['map'])}}{{record['score']}}
对应的javascript代码:newVue({el:'#schedule-list',data:{records:result},methods:{getMap:function(map){returnmapName(map);}}})这段代码使用了比较复杂的双层循环,Vue更好理解。可以看到Vue将结果(ajax的结果),显示在Dom元素#schedule-list上。从省事的角度来说,如果用纯javascript代码来做的话,肯定是非常繁琐的。您需要在javascript中使用jquery来查询和创建新元素。Vue优雅地为你做这件事。但唯一的问题是,与jsp或template的区别在哪里?只能说,虽然这个html文件看起来怪怪的,但它仍然是一个纯html文件。如果把这个html文件直接放在浏览器中,不需要服务端渲染就可以正常工作。从代码上看,它似乎有点像服务端模板。个人认为,javascript+css+html的基础bootstrap+vue组合,基本足以完成前端工作。既然选择了,我就热情地拥抱他们。