Spring boot

最新推荐文章于 2021-12-07 09:42:23 发布

喵喵@香菜

最新推荐文章于 2021-12-07 09:42:23 发布

阅读量454

点赞数 3

分类专栏： # Spring Boot 文章标签：框架 java spring spring-boot

本文链接：https://blog.csdn.net/chen15369337607/article/details/77848668

版权

Spring Boot 专栏收录该内容

21 篇文章 3 订阅

订阅专栏

一、初识spring boot
1.Spring Boot是由Pivotal团队提供的全新框架，其设计目的是用来简化新Spring应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置，从而使开发人员不再需要定义样板化的配置。Spring Boot使开发独立的，产品级别的基于Spring的应用变得非常简单，你只需”just run”（run as Java application ，就能启动程序）。 Spring boot为Spring平台及第三方库提供开箱即用的设置，这样你就可以有条不紊地开始。多数Spring Boot应用需要很少的Spring配置。个人的话说就是简化各种配置，约定大于配置。
2.Spring boot的特点：
1) 创建独立的Spring应用程序
2) 嵌入的Tomcat，无需部署WAR文件
3) 简化Maven配置
4) 自动配置Spring
5) 绝对没有代码生成和对XML没有要求配置
二、开发准备：
1.Jdk1.7及以上（官方建议使用最新版本的jdk，spring boot对最新版本的jdk也是支持最好的。） jdk安装省略。
2.Maven安装：使用maven能够快速的添加jar包，提高工作效率。
3.IDE：spring tool suit （STS）
三、创建一个简单的Spring boot的demo程序
注：以下程序示例是在安装maven和jdk1.8下进行的
创建过程如图：
第一步：创建项目，如下图所示

这是创建一个spring boot 的程序
第二步：上一步完成后进入如下界面：

1）name ：是这个项目的名字，这里我们取名为SpringbootForFront
2）Type:这个是项目类型：这里可选的有maven 和gradle;我们选择maven
3）Packaging ：这个是设置项目打包方式：有jar和war包方式，这里我们选择jar方式
4）Java vesrion :这个是Java的版本
5）Language ：选择项目的编程语言
6）Boot version ：这个是spring boot的版本
7）在下面就是maven的配置 group：设置域一般是公司域名的倒写
8）Artifact ：打包后的项目名称
9）Version ：打包后的项目的版本
10）Description：项目的描述
11）Package：项目的默认包，如果不更改则以示例为名创建一个包
12）Dependencies: 用maven添加依赖；需要添加的一个依赖是web(里面包含着spring boot的内置tomcat ) 前台应用的话不需要添加其他依赖。
这里写图片描述
14）点击“next” ，出现如下界面

16）点击“finish”完成创建。
17）创建完成后项目如下图所示：

注： SpringBootForFrontApplication 这个类包含一个main方法：
我们的应用程序最后部分是main方法。这只是一个标准的方法，它遵循Java对于一个应用程序入口点的约定。我们的main方法通过调用run，将业务委托给了Spring Boot的SpringApplication类。SpringApplication将引导我们的应用，启动Spring，相应地启动被自动配置的Tomcat web服务器。
19）前台页面放置在如下图所示的css和js文件放在static文件夹下，才能确保能够正常访问
这里写图片描述
21）下面示例请求后台数据：
22）先编写一个bean类；

上面这个类用于后台返回json数据给前台；
然后我们创建一个控制器用于暴露接口，向前台发送数据；

DemoController类的内容如下：

这里写图片描述
注释：@RequestMapping 注解提供路由信息。它告诉Spring任何来自”/getDemoJson”路径的HTTP请求都应该被映射到 getDemo 方法。
@RestController 注解告诉Spring以字符串的形式渲染结果，并直接返回给调用者。
运行项目：
找到com.b505下的SpringBootForFrontApplication.java这个类，
右击run as ——->Java Application运行项目
出现下图所示：
这里写图片描述
看见控制台有上面所标证明编译通过，打开浏览器进行访问（Spring boot 默认是8080端口，我这里是8081，配置服务器地址和端口将会在以后写博客记录）：
在火狐浏览器中键入 http://localhost:8081/getDemoJson 可见如下图所示：
这里写图片描述
至此，向后台请求json数据就已经完成了。
下面介绍的就是后天怎样去获取前天传的数据了
先在DemoController 中写一个接口用于接收前台的数据：代码如下：

注释（PS：）@RequestMapping 中的value用来设置访问路径（也就是前台路由）
Method 用来设置请求的方法：（由于要接收前台的数据我们用post方法）
方法名字中的@RquestParam(“name” String name) 用来接收前台的 name字段的值并将它赋值给name;后面的两个同理。
将前台的数据打印在控制台中；
在templates中新建index.html 页面,内容如下：

<!DOCTYPE html>
<html lang="en" ng-app="myApp" ng-controller="myController">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/angular.min.js"></script>
    <link href="css/directive_bind.css" rel="stylesheet" type="text/css" />
    <script src="js/service_http.js"></script>
</head>
<body>
<!--表格-->
<div class="box">
<div class="portlet-title">
    <div class="caption">
        <img class="icon-reorder" src="images/record.png"></img> 人员信息管理 </div>
</div>
<table class="table table-bordered" ng-style="myStyle">
    <!-- ng-style 绑定myStyle属性，获取表格的css样式-->
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>爱好</td>
        <td></td>
    </tr>
    <tr ng-repeat="day in days" >
        <td ng-class-even="'even'"> {{day.name}} </td>
        <td>
         {{day.age}}
        </td>
        <td>
            {{day.hobby}}
        </td>
        <td>
         <button class="delete" ng-click="removeDay(day.id)"><img src="images/Delete (1).png" />删除 </button>
        </td>
    </tr>
</table>
    <button ng-click="add()">添加人员信息</button>
    <div  id="table1" ng-show='menuState.show'>
        <div class="portlet-title1">
            <div class="caption">
                <img class="icon-reorder" src="images/record.png"></img> 添加信息 </div>
        </div>
        <div class="content" >
            <span>姓名:</span> <input ng-model="name" type="text" placeholder="请输入姓名" />
        <br>
            <span>年龄:</span> <input ng-model="age" type="text" placeholder="请输入年龄" />
        <br>
            <span>爱好:</span> <input ng-model="hobby" class="hobby" type="text" placeholder="请输入爱好" />
        </div>
         <input class="submit" ng-click="submit(name,age,hobby)" type="button" value="提交" />

    </div>
</div>
</body>
</html>

用到了angular,用普通的from表单也可以
让我们访问一下index页面
在浏览器中输入 http://127.0.0.1:8081/index.html
页面如下：
这里写图片描述
页面的图片缺失是因为没有在static 放置图片。但是放了css ,js证明路径放置正确；
下面我们向后台提交数据：填入数据，然后点击提交

提交后将会在控制台打印刚才提交的信息
至此，后台接收前端的数据也已经演示完毕。