目录
- 环境搭建
- 后端
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的开源组件
1 admin-LTE是什么？
admin-LTE，是一个UI的框架。它主要提供仪表盘式的前端样式。大大节省了前端开发的成本。它基于Bootstrap3。
2 Admin-LTE详细介绍
需要这个Index.html（这里请在官方网站上下载源码包）
整个样子：
这里分几部分：
2.1 <head>
这里和传统的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" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<!-- 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>
整个Body是在<div class="wrapper">里。
然后里面分了几部分：
- <header>标签的内容，主要是页面的上面头部信息。
- <aside class="main-sidebar">，主要是左侧边栏信息。
- <div class="content-wrapper">，主要是除了上部和左侧边栏的内容区。
- <footer class="main-footer">，页脚信息：
- <aside class="control-sidebar control-sidebar-dark">。右侧伸缩边栏，如果需要的话可以用。
一个空白的页面可以从starter.html开始构造
3 根据我们的需要改造
我们既然要做单页应用，必须要改在这个starter.html。
所以：
第一步：改造页面，使之能够挂载我们的vue app。
可以看到，我们将整个body的内容，复制给id = “app”了。这样的话，只要我们的main vue实例挂载在这个id=“app”上，即可。就会成为我们的整个工程的入口。
第二步：挂载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构造函数生成的实例，mount（挂载）到id = “app”整个view-model上。从而实现我们整个MVVM整合Admin-LTE成功。
下面请使用npm run dev。看看是否能够加载页面。
4 admin-LTE的配置
这里不做赘述，请参考Admin-LTE的官方解读。
如果你下载源码包到本地应该是这个目录：
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/
