目錄
- 環境搭建
- 后端
2.1 數據庫設計
2.2 SpringBoot + Mybatis
2.3 SpringBoot+RestfulAPI - 前端
3.1 VueJS 2.0 + Webpack工程介紹
3.2 Admin-LTE介紹及使用
3.3 VueJS一些基礎知識
3.4 項目中用到的和VueJS的開源組件
前言
總結了一些VueJs的基礎知識，方便后面寫代碼的時候有概念。
說實話，我從最早的那種響應式的頁面開發經驗，跳轉到這里還是稍微花了點時間的。
因為最早的形式就是后端返回HTML/FTL，瀏覽器展示。
也就意味著有N個頁面要維護。
而類似于Vue.js， AngularJs等MVVM出現
參考：談談MVVM框架
我的理解是，
- 前后端的同事的工作就更分離了，也意味著更能夠敏捷開發。而不是臃腫的MVC模式下用Controller來維護View，然后前后端的耦合很大。現在，前后端同事只要在數據上保持一致。實際上工作就完全分離了。
- 可以做單頁應用，也就是對于后端來說只有一個HTML/Ftl文件維護即可。前端通過組件的形式來像堆積木一樣的堆積不同的頁面。對于用戶來說，訪問速度很快（因為沒有頁面同步加載的過程）
我的開發過程中，用的比較多的就是下面兩個功能。
- 組件
- Router
我通過這兩個就可以開發單頁應用了
實戰中的例子
大致的思路就是：
- 我需要有個主頁面
- 我通過路由的方式轉移到不同的頁面去。
- 不同的頁面其實是一個組件，而不是通過去后臺請求發來的HTML/FTL文件。
根據前一節：3.2 Admin-LTE介紹。
我們已經有一個app.vue來掛載到<Body>的第一個div上。所以思路的第一步已經做好了。
接下里就是我們的兩個子頁面：
├──app.vue
│ ├── com1.vue
│ └── com2.vue
對于vue來說。com1.vue和com2.vue既是兩個組件。接下來我們通過注冊router的方式，來講路由注冊號。這樣的話，頁面跳轉就可以做到了。
這里使用的是vuejs2.0的router注冊方式。最下面參考的鏈接是vuejs1.0的
改造main.js如下：
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'
import bot from './components/com1.vue'
import unity from './components/com2.vue'
/* eslint-disable no-new */
Vue.use(VueResource)
Vue.use(VueRouter)
// 1. 定義（路由）組件。
// 可以從其他文件 import 進來
// const bot = { template: '<div>foo</div>' }
// const Bar = { template: '<div>bar</div>' }
// 2. 定義路由
// 每個路由應該映射一個組件。 其中"component" 可以是
// 通過 Vue.extend() 創建的組件構造器，
// 或者，只是一個組件配置對象。
const routes = [
{path: '/', redirect: 'com1'},
{path: '/com1', component: com1},
{path: '/com2', component: com2}
]
// 3. 創建 router 實例，然后傳 `routes` 配置
// 你還可以傳別的配置參數, 不過先這么簡單著吧。
const router = new VueRouter({
routes // （縮寫）相當于 routes: routes
})
// 4. 創建和掛載根實例。
// 記得要通過 router 配置參數注入路由，
// 從而讓整個應用都有路由功能
new Vue({
router,
// el: '#app',
template: '<App/>',
components: { App }
}).$mount('#app')
這里就是注冊了一個router，并寫好路由 ：
{path: '/', redirect: 'com1'},
{path: '/com1', component: com1},
{path: '/com2', component: com2}
上述也比較好理解。就是首頁redirect到com1.vue。
點擊/com1，使用的是com1.vue
點擊/com2，使用的是com2.vue
接下來就是需要在app.vue中綁定router-view，關鍵代碼如下：
<ul class="sidebar-menu">
<li class="header">HEADER</li>
<!-- Optionally, you can add icons to the links -->
<!--<li class="active"><a href="#"><i class="fa fa-link"></i> <span><router-link to="/com1">com1頁面</router-link></span></a></li>-->
<li>
<router-link to="/com1"><i class="fa fa-link"></i><span>com1頁面</span></router-link>
</li>
<li>
<router-link to="/com2"><i class="fa fa-link"></i><span>com2頁面</span></router-link>
</li>
</ul>
<!-- /.sidebar-menu -->
</section>
<!-- /.sidebar -->
</aside>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<router-view></router-view>
</div>
工程目錄如下
先通過<router-link>講跳轉的URI標識號。
在通過<router-view>具體的來加載各自的xxx.vue（com1.vue，com2.vue）
實現后的工程目錄如下：
知道這些原理之后，理論上就可以直接在各自的組件（xxx.vue）中開發自己的組件了。
組件
這里已com1.vue為例:
這里的幾個概念：
- <template>是頁面的視圖層，其中只能有一個<div>
- components屬性：可以是引用的外部安裝的組件，也可以是自己定義的然后這里用到的組件。比如里面的Vuetable就是外部安裝來的，errorcasetable就是自己寫的另外一個組件。這里就達到了堆積木的效果
- data屬性：這個頁面所有的數據。意味著是MVVM中的model
- computed & mounted：這個是vue的生命周期。我還不是特別理解，但是computed是在頁面加載前就會計算好。mounted是頁面加載的時候調用。
- methods：顧名思義，這個vue實例下的函數。相當于java的私有方法。我用的話一般是在mounted里調用這些方法。
另外一部分是在view里的一些指令：
已下圖為例，用到了v-for和v-bind。
- v-for：比較好理解，就是entity這個在上述data屬性中的數據，它是個list。所以可以渲染到了li標簽。
- v-bind：就是綁定了 這里的style = {width：calculatePercentage(e)},width：calculatePercentage()是個函數。所以意思就是這個style是根據這個函數的計算結果來展示。
更多請參考：
