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>