SpringBoot运行流程、前端页面开发环境的搭建
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；
（6）Dao层 JpaRepository 中的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后的代码如下：（标题自予）
学生信息
这是刚创建index.html文件的样子
内部填一些描述性的东西或者引入一些样式
内部定义一些具体的网页内容
举例：在 内部加一个主页的2级小标题：学生信息2
学生信息
学生信息2
在浏览器访问 localhost:8080，访问的页面如下图：
（3）复制模板粘贴到 index.html 文件中，将最初始的覆盖
现在做前端非常流行一套组合：
vue前端的一个框架基于
vue开发的有一个前端的库，叫element，里面有我们需要的前端设计模板
模板：
Button
Try Element
（4）向目录static中导入前端设计所需的资源
（5）修改 index.html 中的模板的内容
修改后为：
Button
Try Element