目錄
- 環(huán)境搭建
- 后端
2.1 數(shù)據(jù)庫設(shè)計(jì)
2.2 SpringBoot + Mybatis
2.3 SpringBoot+RestfulAPI - 前端
3.1 VueJS 2.0 + Webpack工程介紹
3.2 Admin-LTE介紹及使用
3.3 VueJS一些基礎(chǔ)知識(shí)
3.4 項(xiàng)目中用到的和VueJS的開源組件
1 admin-LTE是什么？
admin-LTE浴栽，是一個(gè)UI的框架胚吁。它主要提供儀表盤式的前端樣式盏浙。大大節(jié)省了前端開發(fā)的成本。它基于Bootstrap3恼布。
2 Admin-LTE詳細(xì)介紹
需要這個(gè)Index.html（這里請?jiān)诠俜骄W(wǎng)站上下載源碼包）
整個(gè)樣子：
這里分幾部分：
2.1 <head>
這里和傳統(tǒng)的HTML的head并無兩樣读处，都是引入的CSS樣式：
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AdminLTE 2 | Dashboard</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.6 -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" >
<!-- Ionicons -->
<link rel="stylesheet" >
<!-- Theme style -->
<link rel="stylesheet" href="dist/css/AdminLTE.min.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="dist/css/skins/_all-skins.min.css">
<!-- iCheck -->
<link rel="stylesheet" href="plugins/iCheck/flat/blue.css">
<!-- Morris chart -->
<link rel="stylesheet" href="plugins/morris/morris.css">
<!-- jvectormap -->
<link rel="stylesheet" href="plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<!-- Date Picker -->
<link rel="stylesheet" href="plugins/datepicker/datepicker3.css">
<!-- Daterange picker -->
<link rel="stylesheet" href="plugins/daterangepicker/daterangepicker.css">
<!-- bootstrap wysihtml5 - text editor -->
<link rel="stylesheet" href="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
2.2 <body>
整個(gè)Body是在<div class="wrapper">里。
然后里面分了幾部分：
- <header>標(biāo)簽的內(nèi)容膘婶，主要是頁面的上面頭部信息。
- <aside class="main-sidebar">坦康，主要是左側(cè)邊欄信息竣付。
- <div class="content-wrapper">诡延，主要是除了上部和左側(cè)邊欄的內(nèi)容區(qū)滞欠。
- <footer class="main-footer">，頁腳信息：
- <aside class="control-sidebar control-sidebar-dark">肆良。右側(cè)伸縮邊欄筛璧，如果需要的話可以用逸绎。
一個(gè)空白的頁面可以從starter.html開始構(gòu)造
3 根據(jù)我們的需要改造
我們既然要做單頁應(yīng)用，必須要改在這個(gè)starter.html夭谤。
所以：
第一步：改造頁面棺牧，使之能夠掛載我們的vue app。
可以看到朗儒，我們將整個(gè)body的內(nèi)容颊乘，復(fù)制給id = “app”了。這樣的話醉锄，只要我們的main vue實(shí)例掛載在這個(gè)id=“app”上乏悄，即可。就會(huì)成為我們的整個(gè)工程的入口恳不。
第二步：掛載vue.app：
回顧下 3.1 VueJS 2.0 + Webpack工程介紹檩小，里我們通過webpack生成的工程模板。
打開里面的main.js烟勋，是這樣的：
import Vue from 'vue'
import App from './App.vue'
new Vue({
// el: '#app',
template: '<App/>',
components: { App }
}).$mount('#app')
這里的意思就是通過Vue構(gòu)造函數(shù)生成的實(shí)例规求，mount（掛載）到id = “app”整個(gè)view-model上。從而實(shí)現(xiàn)我們整個(gè)MVVM整合Admin-LTE成功卵惦。
下面請使用npm run dev阻肿。看看是否能夠加載頁面鸵荠。
4 admin-LTE的配置
這里不做贅述冕茅，請參考Admin-LTE的官方解讀。
如果你下載源碼包到本地應(yīng)該是這個(gè)目錄：
file:///Users/xxx/Documents/AdminLTE-2.3.11/documentation/index.html
線上的是：https://adminlte.io/docs/2.4/installation
我這里大部分的js css都是用cdn來load的蛹找。是的姨伤，為什么不用呢？
可以從這里搜索：http://www.bootcdn.cn/
