从零开始在云上架设本身的网站（第三篇） 网站界面开发

第0篇

第1篇

第2篇

在成功部署第一个helloworld项目到阿里云上之后，接下来的一段时间都如火如荼的进行第一阶段的开发，到今天发布了1.04版本
前两天网管局审批好了域名，如今你们能够直接访问看看小弟作的效果了
http://www.bsoya.cn/index

空间首页以下

此次主要目标比赛专区的首页以下：

后台在第一篇已经介绍过，使用springboot

前台的技术选型上面，我选择了使用比较流行的 bootstrap+vue.js
公司开发因为都采用公司本身的框架，因此其余主流框架说老实话涉足很少
以前版本使用纯html+js+css，最后活活累死

做为用来"玩"的项目，仍是得找个简单的框架来用，就算再简单，起码基本样式能看的过去

bootstrap就是这样一个玩意儿，说老实话，网上的评论说是目前最流行的框架，我的用来下仍是比较失望的，排版上面本身仍是须要操心不少事情，bootstrap所提供的排版功能和html的table标签感受也并无什么本质的区别。
惟一的好处是你用了这个框架，至关于全部东西有了一个比较统一的样式，本身弄样式最后结局会是特别花里胡哨，毕竟不是网页美工专业的。

bootstrap的亮点是提供了不少类型，让你能够定制化的在不一样屏幕上，提供不一样的显示效果，做为本项目来讲，这个优点意义倒不是特别大。

用这个东西，主要仍是享受他提供的一个相对统一的界面样式风格。

大部分排版功能最后仍是本身折腾css来搞定的

而后说说vue，常常在segment上面看到vue的文章，这个东西作的事情本质上就是将dom元素和javascript的变量进行绑定

我使用下来的第一个感想是，用这个东西，为啥不用jsp呢？使用了vue的元素之后，html代码怎么看都不纯了啊
好比下面一段code

<div id="schedule-list" class="col-md-6">
                    <div class="panel-group" v-cloak>
                        <div v-for="(value, index) in records" class="panel panel-default">
                            <div class="panel-heading">
                                <h3 class="panel-title">第{{index+1}}轮
                                    {{value[0]['matchTime']}}</h3>
                            </div>
                            <div class="panel-body">
                                <table class="table table-striped">
                                    <tr v-for="record in value">
                                        <td>{{record['player1']['name']}} vs
                                            {{record['player2']['name']}}</td>
                                        <td>{{getMap(record['map'])}}</td>
                                        <td>{{record['score']}}</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

对应的javascript代码：

new Vue({
        el : '#schedule-list',
        data : {
            records : result
        },
        methods: {
            getMap: function (map) {
                return mapName(map);
            }
        }
    })

这段代码使用了相对复杂的双层循环，比较好理解vue。
能够看到，Vue 将result(ajax的结果)，显示到了#schedule-list 这个Dom元素上了，从省事儿上说，若是你使用纯javascript代码来作这个事情，确定是很冗长，要在javascript里面不停的使用jquery去查询，建立新元素，Vue优雅的帮你搞定的。
但惟一的问题是，different from jsp or template在哪里呢？
只能说，这个html文件虽然看起来怪怪的，可是，他依然是一个纯html文档，这个html文件，你直接放在浏览器里面，就能够工做正常，不须要服务器端渲染，虽然从最终代码上看，彷佛有那么一点点像服务器端的template。

我的以为，有javascript+css+html的基础

bootstrap+vue组合基本已经足够完成前端的工做了，既然选用了，就热情的拥抱他们。