SpringBoot運行流程、前端頁面開發環境的搭建
1、SpringBoot運行流程
上節我們把SpringBoot的流程層（環境）搭建好了，當我們訪問 http://localhost:8080/student88/all ，
返回的的是json格式的頁面。
運行流程：
（1）根據訪問的 /student 尋找的是Controller控制層中定義的類 Student88Controller；
（2）根據訪問的 /all 找到的是Controller控制層中的 findAll() 方法；
（3）Controller控制層中的 findAll() 方法調用的是Service層中 findAll()方法；
（4）Service層的 findAll() 方法執行的是 studentRepository.findAll()；
（5）studentRepository 在Dao層中是一個接口，繼承JpaRepository<Student,Integer>；
（6）Dao層 JpaRepository<Student,Integer> 中的Student模型是在Entity層中定義的；
（7）Entity層中定義的Student模型映射的是mysql中的student表
common層控制着返回的格式
當我們訪問 http://localhost:8080/student88/all
返回的是：
{"code":"200","msg":"OK","data":[]}
返回的這種形式可以實現數據的傳遞，達到前后端的分離，后端專注把數據傳上去，前端專注展示出來
返回的是： {"code":"200","msg":"OK","data":[]}，說明這個表格是空的，表格里面沒有數據
在mysql中插入數據：
insert into student88 (name,age,gender,clazz,sum_score) values('張三',20,'男','文科一班',658);
insert into student88 (name,age,gender,clazz,sum_score) values('張三1',21,'男','文科二班',587);
insert into student88 (name,age,gender,clazz,sum_score) values('張三2',22,'男','文科三班',621);
再次訪問 http://localhost:8080/student/all
返回的是：
{"code":"200","msg":"OK","data":[{"id":1,"name":"張三","age":20,"gender":"男","clazz":"文科一班","sumScore":658},{"id":2,"name":"張三","age":20,"gender":"男","clazz":"文科一班","sumScore":658},{"id":3,"name":"張三1","age":21,"gender":"男","clazz":"文科二班","sumScore":587},{"id":4,"name":"張三2","age":22,"gender":"男","clazz":"文科三班","sumScore":621}]}
前端頁面返回的JSON格式不美觀，我們可以設計一下前端頁面
2、SpringBoot前端頁面開發環境的搭建
（1）在 resources目錄中新建一個目錄，命名為 static
（SpringBoot會默認給static目錄中文件做一個路由）
（2）在static目錄中新建一個html文件，命名為 index.html（該文件控制着主頁的頁面）
（右擊 static---->new---->HTML File---->選擇HTML 5 file，並輸入名字 index.html）
創建index.html后的代碼如下：（標題自予）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>學生信息</title>
</head>
<body>
</body>
</html>
這是剛創建index.html文件的樣子
<head> </head>內部填一些描述性的東西或者引入一些樣式
<body> </body>內部定義一些具體的網頁內容
舉例：在<body> </body>內部加一個主頁的2級小標題：學生信息2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>學生信息</title>
</head>
<body>
<h2>學生信息2</h2>
</body>
</html>
在瀏覽器訪問 localhost:8080，訪問的頁面如下圖：
（3）復制模板粘貼到 index.html 文件中，將最初始的覆蓋
現在做前端非常流行一套組合：
vue前端的一個框架基於
vue開發的有一個前端的庫，叫element，里面有我們需要的前端設計模板
模板：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<el-button @click="visible = true">Button</el-button>
<el-dialog :visible.sync="visible" title="Hello world">
<p>Try Element</p>
</el-dialog>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: function() {
return { visible: false }
}
})
</script>
</html>
（4）向目錄static中導入前端設計所需的資源
（5）修改 index.html 中的模板的內容
修改后為：
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="element.css">
<title></title>
</head>
<body>
<div id="app">
<el-button @click="visible = true">Button</el-button>
<el-dialog :visible.sync="visible" title="Hello world">
<p>Try Element</p>
</el-dialog>
</div>
</body>
<!-- 導入前端依賴庫 -->
<script src="element.js"></script>
<script src="vue.js"></script>
<script src="jquery.min.js"></script>
<script>
new Vue({
el: '#app',
data: function() {
return { visible: false }
}
})
</script>
</html>