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

第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组合基本已经足够完成前端的工作了，既然选用了，就热情的拥抱他们。