二阶段-三大框架之一SpringMVC前后端的联用、改端口号、热部署、Lombok插件、Gitee码云

目录

一、SpringMVC框架解析get方式提交的数据

案例:汽车类数据添加到mysql数据库中

1、创建表

 2、创建前端网页,写ajax代码--充当MVC的View层

3、创建后端程序,接受请求入库

4、进行测试

 5、总结思路

二、SpringMVC框架解析post方式提交的数据

案例2:通过post方式,提交学生信息表单,步骤如下:

-1、stufrom.html

-2、IDEA编写后端程序

-3、创建Student类,充当了模型层

-4、创建StudentController类,充当了控制层

5、提交学生数据测试效果

 6、总结:SpringMVC执行步骤

三、修改端口号

四、Spring Boot热部署

1、作用

2、添加依赖

3、配置选项

 4、修改或添加资源后,直接点击Build

五、Lombok插件

1.作用

2、步骤

2.1  安装插件

2.2  添加jar包的依赖

2.3  修改POJO包中的类

2.4  Controller层设置属性

六、整合Gitee

1、检查Git是否安装

2、装Gitee插件

3、创建远程仓库(在Git网址上) 

4、创建本地仓库(在磁盘上,并创建要提交的文件)

5、执行Git命令

 6、IDEA日常操作


一、SpringMVC框架解析get方式提交的数据

步骤:

1,利用jdbc入库,设计表设计表的字段
2,编写前端的代码,利用ajax把请求参数携带着访问服务器
3,编写后端的代码,先加jar包的依赖,再利用jdbc发起insert的语句

案例:汽车类数据添加到mysql数据库中

1、创建表

在这里插入图片描述

 2、创建前端网页,写ajax代码--充当MVC的View层

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 ajax提交数据并入库</title>
		
		<script src="old/jquery-1.8.3.min.js"></script>
		<script>
			function fun(){
				$.ajax({
					type: "get" , //要使用的请求方式
					url:"http://localhost:8080/car/save" , //要访问的服务器程序
					data: {  //请求参数
						"id":"10", 
						"name":"BMW",
						"price":"9.9" 
					},
					success: function(data){ //成功时的方案 
						console.log(data);
						console.log(data.id);
						alert(100);
					}
				})
			}
		</script>
	</head>
	<body>
		
		<a onclick="fun()" href="#">点我提交数据</a>
		
	</body>
</html>

3、创建后端程序,接受请求入库

1)现在pom.xml文件中插入masql的jar包

在这里插入图片描述

 2)创建启动类RunApp

package cn.tedu;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

//启动类
@SpringBootApplication //会进行资源的自动扫描(从启动类当前包开始扫描)
public class RunApp {
    public static void main(String[] args) {
        SpringApplication.run(RunApp.class);
    }
}

3)编写Car类--充当MVC中的Model

package cn.tedu.pojo;
//充当MVC的M层,Model,用来封装数据(最好和表里的字段数据一致)
public class Car {
    private Integer id ;
    private String name ;
    private String type ;
    private String color ;
    private Double price ; 
   
    //get set toString
    public Integer getId() {
        return id;
    }
    public void setId(Integer id) {
        this.id = id;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getType() {
        return type;
    }
    public void setType(String type) {
        this.type = type;
    }
    public String getColor() {
        return color;
    }
    public void setColor(String color) {
        this.color = color;
    }
    public Double getPrice() {
        return price;
    }
    public void setPrice(Double price) {
        this.price = price;
    }
    @Override
    public String toString() {
        return "Car{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", type='" + type + '\'' +
                ", color='" + color + '\'' +
                ", price=" + price +
                '}';
    }
}

4)编写CarController类--充当MVC中的Controller

@CrossOrigin//解决跨域问题,尽量加上,不加的话虽然数据能正常传输,但是前端页面会没有正常响应

package cn.tedu.controller;

import cn.tedu.pojo.Car;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;

//充当MVC里的C,Controller控制器,用来接受请求和给出响应
@RestController
@RequestMapping("car")
@CrossOrigin//解决跨域问题,尽量加上,
            //不加的话虽然数据能正常传输,但是前端页面会没有正常响应
public class CarController {

    @RequestMapping("save")
    public void save(Car c) throws Exception {
        //利用jdbc入库,入库的数据从c获取
        //1,注册驱动
        Class.forName("com.mysql.jdbc.Driver");
        //2,获取连接
        String url = "jdbc:mysql:///cgb2105?characterEncoding=utf8" ;
        Connection conn = DriverManager.getConnection(url,"root","root");
        //3,获取传输器
        String sql = "insert into car values(?,?,?,?,?)" ;
        //?是占位符,个数和表里的字段个数匹配,顺序和字段顺序一致
        PreparedStatement ps = conn.prepareStatement(sql);
        //4,执行SQL
        ps.setInt(1 , c.getId());//把请求携带来的参数,拿到,给第1个?设置值
        ps.setString(2, c.getName());//把请求携带来的参数,拿到,给第2个?设置值
        ps.setString(3, c.getType());//把请求携带来的参数,拿到,给第3个?设置值
        ps.setString(4, c.getColor());//把请求携带来的参数,拿到,给第4个?设置值
        ps.setDouble(5, c.getPrice());//把请求携带来的参数,拿到,给第5个?设置值
        ps.executeUpdate();
        //5,释放资源
        ps.close();
        conn.close();
        System.out.println("恭喜您,操作成功!!!!");
    }

}

4、进行测试

先启动服务器,用前端网页,发起请求,访问服务器

1)IDEA控制台

在这里插入图片描述

2)数据库内容

在这里插入图片描述

 5、总结思路

在这里插入图片描述

二、SpringMVC框架解析post方式提交的数据

提问:form提交数据方式get和post的区别

答:get的数据都是拼接的形式,在地址栏展示。相对来说不安全,长度受限
post 属性相对安全,容量比较大。

案例2:通过post方式,提交学生信息表单,步骤如下:

HBuilder X编写前端程序

-1、stufrom.html

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 springmvc解析post数据</title>
		
		<style>
			/* 修饰 输入框的宽度高度 */
			.a{ /* 选中网页中class=a的元素*/
				width: 320px;
				height: 30px;
			}
			/* 修饰保存按钮 */
			input[type="submit"]{
					background-color: blue; /* 背景色 */
					border-color: blue;/* 边框的颜色 */
					color:white; /* 字的颜色 */
					height: 30px;
					width: 50px;
			}
			/* 修饰取消按钮 */
			input[type="button"]{
					background-color: hotpink; /* 背景色 */
					border-color: hotpink; /* 边框的颜色 */
					color:white; /* 字的颜色 */
					height: 30px;
					width: 50px;
			}
		</style>
	</head>
	<body>
	    <!-- form表单,可以把数据提交给服务器 
				method指定提交数据的方式
				action指定数据要提价给谁处理
		-->
		<form method="post" action="http://localhost:8080/student/add">
			<table>
				<tr>
					<td><h1>学生信息管理系统MIS</h1></td>
				</tr>
				<tr>
					<td> 姓名:</td>
				</tr>
				<tr>
					<td> 
						<input class="a" type="text" placeholder="请输入姓名..." name="user" />
					</td>
				</tr>
				<tr>
					<td> 年龄:</td>
				</tr>
				<tr>
					<td> 
						<input class="a"  type="number" placeholder="请输入年龄..." name="age"  />
					</td>
				</tr>
				<tr>
					<td> 
						性别:(单选框) 
						<input type="radio" name="sex" value="0" />男
						<input type="radio" name="sex" value="1"   />女
					</td>
				</tr>
				<tr>
					<td> 
						爱好:(多选) 
						<input type="checkbox" name="hobby"  value="ppq"/>乒乓球
						<input type="checkbox" name="hobby"  value="ps" />爬山
						<input type="checkbox" name="hobby"  value="cg" />唱歌
					</td>
				</tr>
				<tr>
					<td> 
						学历:(下拉框) 
						<select name="edu">
							<option value="1">本科</option>
							<option value="2">专科</option>
							<option value="3">高中</option>
						</select>
					</td>
				</tr>
				<tr>
					<td> 
						入学日期: 
						<input type="date" name="intime" />
					</td>
				</tr>
				<tr>
					<td> 
						<input type="submit" value="保存"/>
						<input type="reset" value="取消"/>
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>


-2、IDEA编写后端程序

在这里插入图片描述

-3、创建Student类,充当了模型层

package cn.tedu.pojo;
import java.util.Arrays;
import java.util.Date;
//Model层,用来封装数据
//类里的属性名 ---和页面中 name属性的值  必须相同 !!!否则不会封装数据
public class Student {
    private String user ;
    private Integer age ;
    private Integer sex ;
    private String[] hobby ; //保存了页面提价的多个爱好
    private Integer edu;
    private Date intime;

    //get set toString...
    public String getUser() {
        return user;
    }

    public void setUser(String user) {
        this.user = user;
    }

    public Integer getAge() {
        return age;
    }

    public void setAge(Integer age) {
        this.age = age;
    }

    public Integer getSex() {
        return sex;
    }

    public void setSex(Integer sex) {
        this.sex = sex;
    }

    public String[] getHobby() {
        return hobby;
    }

    public void setHobby(String[] hobby) {
        this.hobby = hobby;
    }

    public Integer getEdu() {
        return edu;
    }

    public void setEdu(Integer edu) {
        this.edu = edu;
    }
    //页面提交的日期都是String类型,需要自己变成Date类型,否则页面永远400错误
    @DateTimeFormat(pattern="yyyy-MM-dd" )
    public Date getIntime() {
        return intime;
    }

    public void setIntime(Date intime) {
        this.intime = intime;
    }

    @Override
    public String toString() {
        return "Student{" +
                "user='" + user + '\'' +
                ", age=" + age +
                ", sex=" + sex +
                ", hobby=" + Arrays.toString(hobby) +
                ", edu=" + edu +
                ", intime=" + intime +
                '}';
    }
}

-4、创建StudentController类,充当了控制层

package cn.tedu.controller;

import cn.tedu.pojo.Student;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("student")
public class StudentController {

    @RequestMapping("add")
    public Student add(Student s){
        System.out.println(s);
        return s ;
    }

}

5、提交学生数据测试效果

在这里插入图片描述

 控制台打印js对象:

 网页返回json数组:

 6、总结:SpringMVC执行步骤

在这里插入图片描述

三、修改端口号

以前我们都会默认使用8080端口号,端口号范围0~65000多,0~1024都被占用,我们可以使用其他的自定义端口号,只要在范围内就可以

在期初创建SpringBoot的Project项目时src/main/resources下有一个application.properties后缀文件,把它复制到指定module下的src/main/resources中,在application.properties文件里添加

server.port:9999 

清除项目缓存,再次重启服务,测试即可: http://localhost:9999/hello/hi

注意:修改端口号,前端页面地址也要跟着修改,否则报错
 

四、Spring Boot热部署

1、作用

每次修改代码修改之后,需要手动的重启服务器. 在开发阶段 能否有一种高效的机制. 每次修改代码之后程序自动重启

2、添加依赖

在pom.xml文件中插入jar包:

<dependencies>
<!--热部署-->
 <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-devtools</artifactId>
  </dependency>

</dependencies>

3、配置选项

在pom.xml文件中使用组合键: ctrl + shift + alt + / 或者 ctrl + alt + a

 在这里插入图片描述

 4、修改或添加资源后,直接点击Build

服务器只在最初启动一次,往后每次修改或者添加数据,点击build即可自动重启服务器,不会报日志,在前端输入url地址就能查看数据

在这里插入图片描述

五、Lombok插件

1.作用

简化了POJO里的实体类的写法,不用自己写set get tostring…

2、步骤

2.1  安装插件

settings–>plugins-->搜索Lombok–installed下载后重启IDEA

Lombok的L一定要大写才能找到

2.2  添加jar包的依赖

<dependencies>
<!--热部署-->
 <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-devtools</artifactId>
  </dependency>

 <!--支持lombok-->
 <dependency>
      <groupId>org.projectlombok</groupId>
      <artifactId>lombok</artifactId>
  </dependency>


</dependencies>

2.3  修改POJO包中的类

package cn.tedu.pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.experimental.Accessors;

import java.util.Arrays;
import java.util.Date;
//Model层,用来封装数据
//类里的属性名 ---和页面中 name属性的值  必须相同 !!!否则不会封装数据

@Data  //自动提供 get set tostring equals hashCode
@NoArgsConstructor //提供无参构造
@AllArgsConstructor //提供全参构造
@Accessors(chain = true)//提供链式编程
public class Student {
    private String user ;
    private Integer age ;
    private Integer sex ;
    private String[] hobby ; //保存了页面提价的多个爱好
    private Integer edu;

    //页面提交的日期都是String类型,需要自己变成Date类型,否则页面永远400错误
    @DateTimeFormat(pattern="yyyy-MM-dd" )
    private Date intime;
}

2.4  Controller层设置属性

  package cn.tedu.PersonController;

import cn.tedu.pojo.Student;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("student")//类的访问方式,要和前端地址栏一致
@CrossOrigin
public class StudentController {
    @RequestMapping("add")
    public Student add(Student s){
       
/* 方式1. 直接调用lombok提供的setXxx()设置属性或者getxxx()获取html属性*/
Student st = new Student();
  st.setAge(10);
  st.setSex(1);
  ...
 /*方式2. lombok提供的链式编程*/
st.setAge(10).setSex(1).getUser();

 System.out.println(s);//数据打印再控制台
        return s;//数据返回到网页上
    }
}


六、整合Gitee

1、检查Git是否安装

在这里插入图片描述

2、装Gitee插件

在这里插入图片描述

3、创建远程仓库(在Git网址上) 

在这里插入图片描述

 在这里插入图片描述

4、创建本地仓库(在磁盘上,并创建要提交的文件)

5、执行Git命令

git config --global user.name "你在Git上注册的账号"  
git config --global user.email "你在Git上注册的邮箱"	
git config --list 
D:\workspace\gittest1>git init
D:\workspace\gittest1>git add .
D:\workspace\gittest1>git commit -m "这次提交你要写的备注说明"
D:\workspace\gittest1>git remote add origin https://gitee.com/你在Git上注册的账号/你的仓库名.git
D:\workspace\gittest1>git push  -u origin master

 6、IDEA日常操作

--pull:: 提交之前,一定要先拉取Gitee上的内容,相当于更新
--commit:: 选中项目-右键-Git-Commit Directroy(提交到本地库)-或者选√
--push:: 推送到Gitee远程仓库-或者选右上箭头

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值