從零開始在雲上架設本身的網站（第三篇） 網站界面開發

第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組合基本已經足夠完成前端的工做了，既然選用了，就熱情的擁抱他們。