(1)浏览器中显示404状态码———>404代表找不到资源
(1)找不到静态资源: 比如 *.html *.jpg *.xxx 检查浏览器请求路径是否正确 检查文件是否保存在了正确的位置(一般放在static文件夹下面) 如果上面两种情况都没有问题,重新编译工程并重启工程 Build->ReBuild (2)找不到动态资源: 比如 /https://blog.csdn.net/weixin_59404863/article/details/hello 由controller处理的路径称为动态资源 检查浏览器请求路径是否正确 检查Controller是否创建在了工程自带的包的里面 检查是否在Controller类里面的类名上面添加@Controller注解 检查Controller里面RequestMapping注解中处理的路径是否正确 如果上面两种情况都没有问题,重新编译工程并重启工程 Build->ReBuild
(2)浏览器中显示500状态码———>500代表服务器执行错误
此时第一时间查看idea控制台的错误,里面会有错误相关的提示, 根据提示信息再分析具体哪里错了.
(3)Controller中处理了相同的路径
(4)创建完包含Mybatis框架的工程直接运行时会报以下错误,需要在application.properties配置文件中添加以下内容
spring.datasource.username=root spring.datasource.password=root spring.datasource.url=jdbc:mysql://localhost:3306/empdb?characterEncoding=utf8&serverTimezone=Asia/Shanghai&useSSL=false
(5)运行程序时端口被占用：
1.检查是不是有其它正在运行的工程, 将其关闭后再运行新工程
2.如果没有正在运行的工程,可通过以下几种方式:
(1)重启电脑
(2)修改工程的端口号:
在工程下的src/main/resources下的【application.properties】中：
额外添加一个指定端口号(注意此方式应用后每次访问页面也要记得修改)：
server.port=8081;
(3)在dos窗口命令行中,
[1]找出使用8080端口的PID：
执行以下指令(netstat -o -n -a | findstr :8080)找到占用8080端口的进程,
会发现dos窗口中会显示此占用8080端口的pid(比如是1990)
[2]Kill掉目前8080端口所占用的线程：
然后执行杀掉该进程的指令(taskkill /F /PID 1990), 释放出8080端口
00.SpringBoot
(1)Web服务软件做了那些事儿?
web服务软件就是传奇老师带着写的webServer, 也就是Tomcat 1.负责建立底层的网络连接 2.根据客户端请求的静态资源路径找到对应的静态资源文件并把该文件返回给客户端 举例:http://localhost:8080/index.html 3.根据客户端请求的动态资源路径找到对应的Controller里面的方法并且执行 举例:http://localhost:8080/https://blog.csdn.net/weixin_59404863/article/details/hello Web服务软件自身不提供任何业务功能,通过Controller给工程添加具体的业务功能(2)SSM三大框架
Spring框架(第四阶段讲) SpringMVC框架(第二阶段到第四阶段) Mybatis框架(第三阶段到第四阶段)(3)SpringBoot框架
如果创建一个空工程,在此工程中使用SSM框架时需要添加大量的依赖和书写大量的配置文件, 通过SpringBoot框架可以更加便捷的让工程中引入各种框架, SpringBoot框架帮助我们构建工程。01.如何创建SpringBoot工程：(步骤1-9)
(1)在IDEA中：点击左上角File创建新的Module 或者 alt+insert选择Module
(2)设置以下内容：
①点击左侧的:Spring Initializr
并修改右侧的相关内容:
Group： cn.tedu
java： 8
Artifact：boot1-1
②设置完成后点击 Next
③第一个页面中可以修改创建工程的网址：
- https://start.spring.io 默认
- https://start.springboot.io 备用1
- https://start.aliyun.com 备用2
(3)跳转到新的页面：点击Web——>Spring Web——>点击Finishi等待下载内容
(4)如何检查工程是否创建成功?
- 在idea的底部 找到Build 然后看里面是否出现绿色的对勾
(5)如果第五步没有绿色对勾 , 刷新maven
(6)检查maven是否已经改成aliyun(阿里云)的配置文件
(7)如果已经改成：aliyun(阿里云)的 还有错的话, 找到.m2文件夹下的repository文件夹删除 ,删除完之后再次重复第5步 刷新maven
(8)
1)
①项目boot1-1下的src/main/java下： 新建包：cn/tedu/boot-1
②项目boot1-1下的src/main/static下：新建index.html页面 输入一行内容：< h1>Hello SpringBoot!< /h1>
2)点击idea界面右上角小锤子右边的： 启动Boot1-1模块程序
3)浏览器访问：http://localhost:8080 页面会显示index页面的内容！
Title
Hello SpringBoot!
(9)
①在项目boot1-1下的java内创建包：cn/tedu/boot-1/controller 新建响应类：HelloController
②在里面添加https://blog.csdn.net/weixin_59404863/article/details/hello方法处理/https://blog.csdn.net/weixin_59404863/article/details/hello请求,给客户端响应一句话, 重启工程,浏览器访问http://localhost:8080/https://blog.csdn.net/weixin_59404863/article/details/hello 测试是否成功
package cn.tedu.boot11.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
@Controller
public class HelloController {
@RequestMapping("/https://blog.csdn.net/weixin_59404863/article/details/hello")//当浏览器往该网址(http://localhost:8080/https://blog.csdn.net/weixin_59404863/article/details/hello)发请求时，这个方法会响应
public void https://blog.csdn.net/weixin_59404863/article/details/hello(HttpServletResponse response) throws IOException {
//设置响应类型 甘肃客户端服务器响应的是什么类型的内容 和 字符集
response.setContentType("text/html;charset=utf-8");
//得到输出对象 异常抛出
PrintWriter pw = response.getWriter();
//输出数据
pw.print("服务器收到了请求!测试成功");
//关闭资源
pw.close();
}
}
(1)任务:
依次创建至少5个工程将创建工程的流程熟练掌握 (每次运行新工程之前需要关闭之前的工程,不然会出现端口被占用的问题) boot1-1 boot1-2 boot1-3 boot1-4 .......02.客户端发请求的4种方式：boot1-1
1.通过浏览器的地址栏中发出请求 2.通过html页面中的超链接发出请求 3.通过html页面中的form表单发出请求 4.通过前端框架发出请求(1)通过浏览器的地址栏中发出请求(简单响应一句话内容)
1.通过浏览器的地址栏中发出请求(简单SpringBoot响应一句话内容)
新建类HelloController 新建页面index
(1)①项目boot1-1下的src/main/static下：新建index.html页面
输入一行内容：工程首页
(2)点击idea界面右上角小锤子右边的： 启动Boot2-1模块程序
(3)浏览器访问：http://localhost:8080 页面会显示index页面的内容！
package cn.tedu.boot21.controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
public class HelloController {
// @RequestMapping("/https://blog.csdn.net/weixin_59404863/article/details/hello")
// public void https://blog.csdn.net/weixin_59404863/article/details/hello(HttpServletResponse response) throws IOException {
// response.setContentType("text/html;charset=utf-8");
// PrintWriter pw = response.getWriter();
// pw.print("测试成功");
// pw.close();
// }
@RequestMapping("/https://blog.csdn.net/weixin_59404863/article/details/hello")
@ResponseBody //SpringMVC框架提供的注解，作用：可以通过返回值的方式给客户端响应数据
public String https://blog.csdn.net/weixin_59404863/article/details/hello(){
return "测试成功!222";
}
}
Title
工程首页
(2)通过html页面中的超链接发出请求(测试相对路径和绝对路径)
2.通过html页面中的超链接发出请求(测试相对路径和绝对路径) 改动的类:HelloController 改动的页面:index (1)在项目boot2-1下的java内创建包：cn/tedu/boot-1/controller 新建响应类：HelloController (2)启动该类 网站测试：http://localhost:8080/https://blog.csdn.net/weixin_59404863/article/details/hello 页面会显示测试成功！ (3)修改首页内容，添加相对路径和绝对路径:(3)form表单提交的三种方式通过超链接发送请求
相对路径 绝对路径1 绝对路径2 (4)测试: http://localhost:8080 页面显示【工程首页】和【通过超链接发送请求】和【三个超链接】 package cn.tedu.boot21.controller; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; @Controller public class HelloController { @RequestMapping("/https://blog.csdn.net/weixin_59404863/article/details/hello") @ResponseBody //SpringMVC框架提供的注解，作用：可以通过返回值的方式给客户端响应数据 public String https://blog.csdn.net/weixin_59404863/article/details/hello(){ return "测试成功!222"; } @RequestMapping("/param1") @ResponseBody public String param1(HttpServletRequest request){ String info = request.getParameter("info"); return "接收到了参数:"+info; } }Title 工程首页
通过超链接发送请求
相对路径 绝对路径1 绝对路径2
3.form表单提交的三种方式
改动的类:HelloController 改动的页面:index 新建类:Emp
(1)①首页写【通过form表单发出请求：第一种传参方式】相关代码，
②在HelloController类里添加一个param1方法。
③测试:http://localhost:8080
页面会多一个表单提交的文本框，输入内容点击提交，
则会跳转到一个：【接收到参数：xxx】
(2)①首页写【通过form表单发出请求：第二种传参方式】相关代码，
②在HelloController类里添加一个param2方法。
③测试:http://localhost:8080
页面中在提交表单数据的下面会多一个表单提交的文本框，输入内容点击提交，
则会跳转到一个回复信息：【接收到参数:"+name+"年龄:"+age】页面
(3)①首页写【通过form表单发出请求：第三种传参方式】相关代码，
②在HelloController类里添加一个param3方法。
③在项目boot2-1下的java内创建包：cn/tedu/boot-1/entity 新建响应类：Emp
④测试:http://localhost:8080
页面中最下面会多一个第三种方式的表单提交的文本框，输入内容点击提交，
则会跳转到一个回复信息：【Emp{name='xxx', sal=xxx, job='xxx'}】页面
package cn.tedu.boot21.controller;
import cn.tedu.boot21.entity.Emp;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
public class HelloController {
// @RequestMapping("/https://blog.csdn.net/weixin_59404863/article/details/hello")
// public void https://blog.csdn.net/weixin_59404863/article/details/hello(HttpServletResponse response) throws IOException {
// response.setContentType("text/html;charset=utf-8");
// PrintWriter pw = response.getWriter();
// pw.print("测试成功");
// pw.close();
// }
@RequestMapping("/https://blog.csdn.net/weixin_59404863/article/details/hello")
@ResponseBody //SpringMVC框架提供的注解，作用：可以通过返回值的方式给客户端响应数据
public String https://blog.csdn.net/weixin_59404863/article/details/hello(){
return "测试成功!222";
}
// @RequestMapping("/param1")
// @ResponseBody
// public String param1(HttpServletRequest request){
// String info = request.getParameter("info");
// return "接收到了参数:"+info;
// }
@RequestMapping("/param2")
@ResponseBody
public String param2(String name,int age){
return "接收到参数:"+name+"年龄:"+age;
}
@RequestMapping("/param3")
@ResponseBody
public String param3(Emp emp){
return emp.toString();
}
}
Title
工程首页
通过超链接发送请求
相对路径
绝对路径1
绝对路径2
通过form表单发出请求：第一种传参方式
通过form表单发出请求：第二种传参方式
通过form表单发出请求：第三种方式
package cn.tedu.boot21.entity; public class Emp { private String name; private double sal; private String job; //生成Set Get方法 和toString方法 @Override public String toString() { return "Emp{" + "name='" + name + ''' + ", sal=" + sal + ", job='" + job + ''' + '}'; } public String getName() { return name; } public void setName(String name) { this.name = name; } public double getSal() { return sal; } public void setSal(double sal) { this.sal = sal; } public String getJob() { return job; } public void setJob(String job) { this.job = job; } } (4)通过前端框架发出请求(测试注册)4.通过前端框架发出请求(测试注册)
新建类UserController、user 新建页面：reg
(1)在boot2-1下的src/main/resources下新建页面：reg.html()
(2)在controller包下新建类：UserController
(3)①在项目boot2-1下的src/main/java/cn/tedu/boot2-1/entity 新建类：User
②在User类里写id 用户名 密码 昵称四个成员变量，
并alt+insert生成set get和toString方法
③UserController类里写一个reg方法。
④测试: http://localhost:8080https://blog.csdn.net/reg.html
输入信息(牛/123/牛)点击注册，
会跳转新页面显示一个回复信息：
【User{id=null, username='牛', password='123', nick='牛'}】
package cn.tedu.boot21.controller;
import cn.tedu.boot21.entity.User;
import cn.tedu.boot21.utils.DBUtils;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import java.sql.Connection;
import java.sql.SQLException;
@Controller
public class UserController {
@RequestMapping("/reg")
@ResponseBody
public String reg(User user){
return user.toString();
}
}
package cn.tedu.boot21.entity;
public class User {
private Integer id;
private String username;
private String password;
private String nick;
//生成Set Get 和 toString:
@Override
public String toString() {
return "User{" +
"id=" + id +
", username='" + username + ''' +
", password='" + password + ''' +
", nick='" + nick + ''' +
'}';
}
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String getNick() {
return nick;
}
public void setNick(String nick) {
this.nick = nick;
}
}
Title
注册页面
03.工程中使用数据库需要做的几件事：boot2-1
(1)在模块Jdbc01的pom.xml中把【连接MySQL数据库的依赖】和【数据库连接池】，
粘贴到boot2-1的pom.xml中的上面(必须做)
(2)①在boot2-1下的src/main/java/cn/tedu/boot21下：创建包utils
②在模块Jdbc01里把DBUtils粘贴到①中的包utils下
5.工程中使用数据库需要做的几件事(完成注册功能):
(1)在模块Jdbc01的pom.xml中把【连接MySQL数据库的依赖】和【数据库连接池】，
粘贴到boot2-1的pom.xml中的上面(必须做)
(2)①在boot2-1下的src/main/java/cn/tedu/boot21下：创建包utils
②在模块Jdbc01里把DBUtils粘贴到①中的包utils下
(3)①在UserController中添加【得到数据库连接】部分代码：
②测试：http://localhost:8080https://blog.csdn.net/reg.html
输入信息(牛1/123/牛1)后点击注册，跳转到注册成功页面!
再次输入信息(牛1/123/牛1)后点击注册，跳转到用户已存在页面!
package cn.tedu.boot21.utils;
import com.alibaba.druid.pool.DruidDataSource;
import java.sql.Connection;
import java.sql.SQLException;
public class DBUtils {
//全局变量ds(斜体):————>为什么加static？ 因为在静态块和静态方法中使用该成员变量。
private static DruidDataSource ds;
static{ //把创建连接池对象放在静态块中：随着类的加载只加载一次
//创建连接池对象：
ds = new DruidDataSource();
//设置数据库连接信息 url 用户名 密码：
ds.setUrl("jdbc:mysql://localhost:3306/empdb?characterEncoding=utf8&serverTimezone=Asia/Shanghai&useSSL=false");
ds.setUsername("root");
ds.setPassword("root");
//设置初始连接数量
ds.setInitialSize(3);
//设置最大连接数量
ds.setMaxActive(5);
}
public static Connection getConn() throws SQLException {
//从连接池中获取连接 异常抛出
Connection conn = ds.getConnection();
System.out.println("连接对象:"+conn);
return conn;
}
}
package cn.tedu.boot21.controller;
import cn.tedu.boot21.entity.User;
import cn.tedu.boot21.utils.DBUtils;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
@Controller
public class UserController {
@RequestMapping("/reg")
@ResponseBody
public String reg(User user){
//得到数据库连接：
try(Connection conn = DBUtils.getConn()) {
//参考Jdbc01里的Demo12
String sql = "select id from user where username=?";
PreparedStatement ps = conn.prepareStatement(sql);
ps.setString(1,user.getUsername());
ResultSet rs = ps.executeQuery();
if (rs.next()) {
return "用户名已存在!";
}
String insertSql = "insert into user values(null,?,?,?)";
PreparedStatement insertPs = conn.prepareStatement(insertSql);
insertPs.setString(1,user.getUsername());
insertPs.setString(2,user.getPassword());
insertPs.setString(3,user.getNick());
insertPs.executeUpdate();
} catch (SQLException throwables) {
throwables.printStackTrace();
}
return "注册成功!";
}
}
(2)完成登录功能
6.完成登录功能
改动的类UserController 新建页面login.html
(1)①在boot2-1下的src/main/resources下新建页面：login.html
当在浏览器页面点击登录按钮时，会往这里发请求
(2)UserController中写一个登录功能是方法
(3)测试：http://localhost:8080https://blog.csdn.net/login.html
输入信息(牛/123)点击登录————>跳转到 密码错误 页面!
输入信息(牛1/123)点击登录———>跳转到 登录成功 页面!
输入不存在信息是点击登录—————>跳转到 用户名不存在 页面!
package cn.tedu.boot21.controller;
import cn.tedu.boot21.entity.User;
import cn.tedu.boot21.utils.DBUtils;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
@Controller
public class UserController {
@RequestMapping("/reg")
@ResponseBody
public String reg(User user){
//得到数据库连接：
try(Connection conn = DBUtils.getConn()) {
//参考Jdbc01里的Demo12
String sql = "select id from user where username=?";
PreparedStatement ps = conn.prepareStatement(sql);
ps.setString(1,user.getUsername());
ResultSet rs = ps.executeQuery();
if (rs.next()) {
return "用户名已存在!";
}
String insertSql = "insert into user values(null,?,?,?)";
PreparedStatement insertPs = conn.prepareStatement(insertSql);
insertPs.setString(1,user.getUsername());
insertPs.setString(2,user.getPassword());
insertPs.setString(3,user.getNick());
insertPs.executeUpdate();
} catch (SQLException throwables) {
throwables.printStackTrace();
}
return "注册成功!";
}
@RequestMapping("/login")
@ResponseBody
public String login(User user){
System.out.println("user = " + user);//soutp
try (Connection conn = DBUtils.getConn()){
String sql = "select password from user where username=?";
PreparedStatement ps = conn.prepareStatement(sql);
ps.setString(1,user.getUsername());
ResultSet rs = ps.executeQuery();
if (rs.next()){//代表查询到了信息
//判断用户输入的和查询到的数据是否一致
if (rs.getString(1).equals(user.getPassword())){
return "登录成功!";
}
return "密码错误!";
}
} catch (SQLException throwables) {
throwables.printStackTrace();
}
return "用户名不存在!";
}
}
Title
登录页面
2、!! Mybatis框架：boot(2-2、3-1/2)
此框架是目前最流行的数据持久层框架,是对JDBC代码进行了封装, 程序员只需要通过注解或配置文件的方式提供需要执行的SQL语句, 框架会自动根据SQL语句生成出JDBC代码,从而提高执行效率！00.如何创建使用Mybatis框架?
- ①创建boot2-2工程 , 创建工程时需要勾选3个内容分别是:
- a.Web->Spring Web
- b.SQL-> Mybatis Framework
- c.SQL-> MySQL Driver
②在application.properties配置文件中书写连接数据库的信息
spring.datasource.username=root spring.datasource.password=root spring.datasource.url=jdbc:mysql://localhost:3306/empdb?characterEncoding=utf8&serverTimezone=Asia/Shanghai&useSSL=false
③
启动该boot2-2项目，若报错，就删除项目，重新创建时，试着换一下下载的网址
然后重复上面的步骤即可！
页面中可以修改创建工程的网址： - https://start.spring.io 默认 - https://start.springboot.io 备用1 - https://start.aliyun.com 备用201.英雄表的{增删改查}：boot2-2 (0)创建hero表，否则运行会报错：
上图中说表不存在，可以添加英雄表来解决： (1)把老师的emp.zip(在IDEA中Jdbc01的文件里)解压出来得到一个emp.sql文件, 建议把这个文件放到某个盘的根目录 比如 F盘根目录, 然后在mysql客户端执行指令:————>格式:source 路径; 例: source f:/danei/Java/emp/emp.sql; (2)在mysql客户端测试以下SQL语句 检查是否成功: show databases; //检查里面是否多了一个empdb; show tables; //会出现两个表 emp 和dept select * from emp; //检查是否出现了数据, 如果格式错乱 正常 (3)如果出现乱码执行 set names utf8;(1)添加英雄的功能: —增
1.创建boot2-2 打钩 3个 2.在application.properties配置文件中添加内容 3.停止之前工程, 运行新工程测试是否能正常运行 4.创建index.html 页面 里面添加超链接 添加英雄 访问地址为https://blog.csdn.net/weixin_59404863/article/details/add.html 5.创建https://blog.csdn.net/weixin_59404863/article/details/add.html页面 里面添加form表单 请求地址为 /add 6.创建controller.HeroController, 里面添加@Controller注解,添加@RequestMapping注 解处理 /add请求 并添加add方法, 7.创建entity.Hero实体类 并提供get和set方法 还有tostring方法 8.在HeroController的add方法参数列表中声明Hero对象 用来接收传递过来的参数 ,此时打桩 输出hero对象 检查是否接收到了参数 9.创建mapper.HeroMapper接口, 里面添加@Mapper注解, 声明一个insert方法通过@Insert注 解修饰,注解里面添加插入数据的SQL语句 10.在HeroController里面 通过@Autowired注解把HeroMapper装配进来, 在add方法里面调用mapper.insert方法把接收到的hero对象传递进去, 重启工程测试即可!
1.添加英雄功能并在数据库可以查到
新建类User、Hero、HeroController
新建接口HeroMapper 新建页面index.html、https://blog.csdn.net/weixin_59404863/article/details/add.html
(1)①在boot2-2下：src/mian/java/cn/tedu/boot22下：创建包：entity
②在entity下创建User类 和 Hero类，
写上成员变量后alt+insert调用get、set、toString方法
③创建接口：
在boot2-2下：src/mian/java/cn/tedu/boot22下：创建包mapper，包内新建类HeroMapper
(2)在boot2-2下的src/main/resources/static下：新建index.html(添加英雄的页面)
(3)①创建controller去处理请求：在src/main/java/cn/tedu/boot22下创建包：controller
②在①中的controller包下创建HeroController
(4)测试：http://localhost:8080/add 会跳转到一个 添加完成的页面!
(5)创建页面https://blog.csdn.net/weixin_59404863/article/details/add.html——>在boot2-2下的src/main/resources/static下：新建https://blog.csdn.net/weixin_59404863/article/details/add.html(添加英雄的页面)
(6)①在Hero中写一个@Autowired注解：
@Autowired
HeroMapper mapper;
②测试：http://localhost:8080/https://blog.csdn.net/weixin_59404863/article/details/add.html
输入信息，点击添加——>跳转到添加成功页面！
打开数据库：输入：
use empdb;
select * from hero;
会发现有刚才添加的几个任务信息！成功！
package cn.tedu.boot22.entity;
public class User {
private Integer id;
private String username;
private String password;
private String nick;
@Override
public String toString() {
return "User{" +
"id=" + id +
", username='" + username + ''' +
", password='" + password + ''' +
", nick='" + nick + ''' +
'}';
}
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String getNick() {
return nick;
}
public void setNick(String nick) {
this.nick = nick;
}
}
package cn.tedu.boot22.entity;
public class Hero {
//Integer 默认值为null 保存到数据库里 可以表示未赋值的状态
private Integer id;
private String name;
private Integer money;
@Override
public String toString() {
return "Hero{" +
"id=" + id +
", name='" + name + ''' +
", money=" + money +
'}';
}
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 Integer getMoney() {
return money;
}
public void setMoney(Integer money) {
this.money = money;
}
}
package cn.tedu.boot22.controller;
import cn.tedu.boot22.entity.Hero;
import cn.tedu.boot22.mapper.HeroMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.List;
@Controller
public class HeroController {
@Autowired
HeroMapper mapper;
@RequestMapping("/add")
@ResponseBody
public String add(Hero hero){
System.out.println("hero = "+hero);
mapper.insert(hero);
return "添加完成!返回首页";
}
}
package cn.tedu.boot22.mapper;
import cn.tedu.boot22.entity.Hero;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
@Mapper
public interface HeroMapper {
@Insert("insert into hero values(null,#{name},#{money})")
void insert(Hero hero);
}
Title
首页
添加英雄
Title
添加英雄页面
(2)删除英雄的功能: —删
1.在首页中添加删除英雄超链接 访问地址为 https://blog.csdn.net/weixin_59404863/article/details/delete.html 2.创建https://blog.csdn.net/weixin_59404863/article/details/delete.html页面 在里面添加form表单 提交地址为https://blog.csdn.net/delete 3.在HeroController 中创建delete方法 处理路径为https://blog.csdn.net/delete 参数列表中声明name 接收页面传递过来的名字 4.在HeroMapper里面添加deleteByName方法， 通过@Delete注解修饰,里面填写 删除的SQL语句 5.在HeroController里面的delete方法中调用mapper的deleteByName方法
2.删除英雄
改动的页面index 新建页面delete
改动的类HeroController 改动的接口HeroMapper
(1)index页面添加删除页面代码 ； static下添加delete删除页面
(2)HeroController类里添加删除英雄功能的方法
(3)HeroMapper接口里 写一个删除name的条件
(4)回到HeroController用mapper调用HeroMapper的deleteByName方法
(5)测试：http://localhost:8080/https://blog.csdn.net/weixin_59404863/article/details/delete.html
输入(孙悟空)，点击删除——>跳转到删除完成页面
打开数据库，输入：
use empdb;
select * from hero;
发现 孙悟空 被删除成功!!
Title
首页
添加英雄
删除英雄
Title
请输入要删除的英雄名称
package cn.tedu.boot22.controller;
import cn.tedu.boot22.entity.Hero;
import cn.tedu.boot22.mapper.HeroMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
public class HeroController {
@Autowired
HeroMapper mapper;
@RequestMapping("/add")
@ResponseBody
public String add(Hero hero){
System.out.println("hero = "+hero);
mapper.insert(hero);
return "添加完成!";
}
@RequestMapping("https://blog.csdn.net/delete")
@ResponseBody
public String delete(String name){
//调mapper里面删除的方法
mapper.deleteByName(name);
return "删除完成";
}
}
package cn.tedu.boot22.mapper;
import cn.tedu.boot22.entity.Hero;
import org.apache.ibatis.annotations.Delete;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
@Mapper
public interface HeroMapper {
@Insert("insert into hero values(null,#{name},#{money})")
void insert(Hero hero);
@Delete("delete from hero where name=#{name}")
void deleteByName(String name);
}
(3)修改英雄的功能: —改
1.在首页添加修改英雄超链接, 地址为https://blog.csdn.net/weixin_59404863/article/details/update.html页面 2.创建https://blog.csdn.net/weixin_59404863/article/details/update.html页面 并添加form表单 提交地址为/update 3.在Controller中添加update方法 处理/update请求 4.在HeroMapper里面添加update方法 通过@Update注解进行修饰,里面添加修改的SQL语句 5.在HeroController里面的update方法中调用mapper的update方法把接收到的hero对象 传递到方法中
3.修改英雄
改动的页面index 新建页面update(修改英雄页面)
改动的类HeroController 改动的接口HeroMapper
(1)index页面添加修改英雄代码 ；static下添加update修改英雄页面
(2)HeroController类里添加修改英雄功能的方法
(3)HeroMapper接口里 写一个修改英雄的条件
(4)回到HeroController用mapper调用HeroMapper的update方法
(5)测试：http://localhost:8080/https://blog.csdn.net/weixin_59404863/article/details/update.html
输入信息(1/神龙啊/2000)，点击修改——>跳转到修改完成的页面
打开数据库，输入：
use empdb;
select * from hero;
发现 第一个id 的信息被改为神龙啊，即刚才浏览器页面中修改的内容!成功！
Title
首页
添加英雄
删除英雄
修改英雄
Title
修改英雄页面
package cn.tedu.boot22.controller;
import cn.tedu.boot22.entity.Hero;
import cn.tedu.boot22.mapper.HeroMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
public class HeroController {
@Autowired
HeroMapper mapper;
@RequestMapping("/add")
@ResponseBody
public String add(Hero hero){
System.out.println("hero = "+hero);
mapper.insert(hero);
return "添加完成!";
}
@RequestMapping("https://blog.csdn.net/delete")
@ResponseBody
public String delete(String name){
//调mapper里面删除的方法
mapper.deleteByName(name);
return "删除完成";
}
@RequestMapping("/update")
@ResponseBody
public String update(Hero hero){
System.out.println("hero = "+hero);
//调用mapper的update方法
mapper.update(hero);
return "修改完成";
}
}
package cn.tedu.boot22.mapper;
import cn.tedu.boot22.entity.Hero;
import org.apache.ibatis.annotations.Delete;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Update;
@Mapper
public interface HeroMapper {
@Insert("insert into hero values(null,#{name},#{money})")
void insert(Hero hero);
@Delete("delete from hero where name=#{name}")
void deleteByName(String name);
@Update("update hero set name=#{name},money=#{money} where id=#{id} ")
void update(Hero hero);
}
(4)查询英雄的功能: —查
1.在首页添加查询的超链接,请求地址为https://blog.csdn.net/select 2.在HeroController中添加select方法处理https://blog.csdn.net/select请求 3.在HeroMapper里面添加select方法用@Select注解进行修饰,里面写查询的SQL语句 4.在HeroController的select方法中 调用mapper的select方法, 把查询到的List集合返回给客户端展示
4.查询英雄 改动的页面index 改动的类HeroController (1)index页面中添加一个查询英雄的代：【查询英雄】 (2)HeroController类里添加查询英雄功能的方法 (3)HeroMapper接口里 写一个查询英雄的条件，把hero装在list集合里 (4)回到HeroController用mapper调用HeroMapper的List中的select方法， 并将查询到的集合的hero信息转成字符串返回给客户端 (5)测试：http://localhost:8080 点击超链接： 查询英雄——>跳转到一个集合显示的hero信息的页面 成功！！！02.商品表的{增删改查}：boot3-1 (1)添加商品的功能：—增Title 首页
添加英雄 删除英雄 修改英雄 查询英雄 package cn.tedu.boot22.controller; import cn.tedu.boot22.entity.Hero; import cn.tedu.boot22.mapper.HeroMapper; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import java.util.List; @Controller public class HeroController { @Autowired HeroMapper mapper; @RequestMapping("/add") @ResponseBody public String add(Hero hero){ System.out.println("hero = "+hero); mapper.insert(hero); return "添加完成!"; } @RequestMapping("https://blog.csdn.net/delete") @ResponseBody public String delete(String name){ //调mapper里面删除的方法 mapper.deleteByName(name); return "删除完成"; } @RequestMapping("/update") @ResponseBody public String update(Hero hero){ System.out.println("hero = "+hero); //调用mapper的update方法 mapper.update(hero); return "修改完成"; } @RequestMapping("https://blog.csdn.net/select") @ResponseBody public String select(){ Listlist = mapper.select(); //将查询到的集合的hero信息转成字符串返回给客户端： return list.toString(); } } package cn.tedu.boot22.mapper; import cn.tedu.boot22.entity.Hero; import org.apache.ibatis.annotations.*; import java.util.List; @Mapper public interface HeroMapper { @Insert("insert into hero values(null,#{name},#{money})") void insert(Hero hero); @Delete("delete from hero where name=#{name}") void deleteByName(String name); @Update("update hero set name=#{name},money=#{money} where id=#{id} ") void update(Hero hero); @Select("select * from hero") List select(); }
0.前提：若创建项目运行时报错，需要配置文件
(1)在application.properties配置文件中书写连接数据库的信息:
spring.datasource.username=root
spring.datasource.password=root
spring.datasource.url=jdbc:mysql://localhost:3306/empdb?characterEncoding=utf8&serverTimezone=Asia/Shanghai&useSSL=false
(2)创建商品表：在数据库中完成以下两个指令：
use empdb;
create table product(id int primary key auto_increment,title varchar(100),price double(10,2),sale_count int)charset=utf8;
(3)创建boot3-1工程 打3个勾
(4)从别的工程中复制application.properties配置文件的信息到新工程, 启动工程测试是否成功.
1.添加商品的信息
新建页面index、insert 新建类ProductController 新建接口ProductMapper
(1)①在boot3-1下：src/main/resources/static下：创建页面：index
②在boot3-1下：src/main/resources/static下：创建页面：insert
③启动该项目进行测试：http://localhost:8080
只有超链接:添加商品，可以跳转到添加的页面
(2)①在boot3-1下：src/main/java/cn/tedu/boot31下：创建包：controller
②在从controller下创建类：ProductController
(3)①在boot3-1下：src/main/java/cn/tedu/boot31下：创建包：entity
②在entity下创建Product类，写上成员变量后alt+insert调用get、set、toString方法
(4)创建接口：在boot3-1下：src/main/java/cn/tedu/boot31下：
创建包mapper，包内新建类ProductMapper
(5)测试：http://localhost:8080
输入信息(哈哈哈/200/20),点击添加——>会跳转到添加成功的页面！
打开数据库：输入：
use empdb;
select * from product;
会发现有刚才添加的商品信息！成功！
Title
商品管理首页
添加商品
Title
添加商品页面
package cn.tedu.boot31.controller;
import cn.tedu.boot31.entity.Product;
import cn.tedu.boot31.mapper.ProductMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
//此注解相当于在每一个方法上面添加ResponseBody注解
@RestController
public class ProductController {
@Autowired
ProductMapper mapper;
@RequestMapping("/insert")
public String insert(Product product){
System.out.println("product = " + product);
mapper.insert(product);
return "添加完成!返回首页";
}
}
package cn.tedu.boot31.mapper;
import cn.tedu.boot31.entity.Product;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Result;
import org.apache.ibatis.annotations.Select;
import java.util.List;
@Mapper
public interface ProductMapper {
@Insert("insert into product values(null,#{title},#{price},#{saleCount})")
void insert(Product product);
}
(2)查询商品的功能：—查
2.查询商品的信息 改动的类ProductController 改动的接口ProductMapper 改动的页面index (1)index页面中添加一个查询商品的代码：【查询商品】 (2)ProductController类添加查询商品的功能方法 (3)在ProductMapper接口中写一个查询商品的条件，把商品信息装到list集合里 测试：http://localhost:8080 点击查询商品超链接，会跳转到list集合表示的商品信息页面 (4)回到ProductController用mapper调用ProductMapper的List中的select方法， 并把商品数据装进表格标签里面， 测试：http://localhost:8080 点击超链接 查询商品——>跳转到:商品列表页面，显示刚才添加的信息， 成功！！！ package cn.tedu.boot31.controller; import cn.tedu.boot31.entity.Product; import cn.tedu.boot31.mapper.ProductMapper; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import java.util.List; //此注解相当于在每一个方法上面添加ResponseBody注解 @RestController public class ProductController { @Autowired ProductMapper mapper; @RequestMapping("/insert") public String insert(Product product){ System.out.println("product = " + product); mapper.insert(product); return "添加完成!返回首页"; } @RequestMapping("https://blog.csdn.net/select") public String select(){ List(3)删除商品的信息：—删list = mapper.select(); String html = " "; html+="
"; return html; } } package cn.tedu.boot31.mapper; import cn.tedu.boot31.entity.Product; import org.apache.ibatis.annotations.Insert; import org.apache.ibatis.annotations.Mapper; import org.apache.ibatis.annotations.Result; import org.apache.ibatis.annotations.Select; import java.util.List; @Mapper public interface ProductMapper { @Insert("insert into product values(null,#{title},#{price},#{saleCount})") void insert(Product product); @Select("select * from product") @Result(column = "sale_count",property = "saleCount") List商品列表 "; html += ""; //把商品数据装进表格标签里面 for (Product p: list) { html+=" 标题 价格 销量 "; html+=" "; } html+=""+p.getTitle()+" "; html+=""+p.getPrice()+" "; html+=""+p.getSaleCount()+" "; html+="select(); } Title 商品管理首页
添加商品 查询商品
3.删除商品的信息
改动的类ProductController 改动的接口ProductMapper
(1)①在ProductController中的【查询商品的功能】下的：
【把商品数据装进表格标签里面】中的for中，再写一个html删除的代码：
html+="删除 ";
②在①中的html删除代码中：把id传过去
③在下面写一个【删除商品的功能】的方法
(2)测试：http://localhost:8080
点击查询商品超链接，跳转到商品列表页面，
点击删除，跳转到删除成功页面！
但是返回商品列表页面暂时还不会真的被删除。
此时idea的控制台会输出【id=1】
(3)ProductController中的删除商品的方法中用mapper调用删除id方法：mapper.deleteById(id);
(4)ProductMapper中写一个删除商品的条件
(5)测试：http://localhost:8080
点击查询商品超链接，跳转到商品列表页面，
点击删除，跳转到删除成功页面！
此时返回商品列表页面发现商品已经被删除。
成功！！！
打开数据库：输入：
use empdb;
select * from product;
会发现在浏览器的页面中被删除的商品已经没有了！成功！
package cn.tedu.boot31.controller;
import cn.tedu.boot31.entity.Product;
import cn.tedu.boot31.mapper.ProductMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
//此注解相当于在每一个方法上面添加ResponseBody注解
@RestController
public class ProductController {
@Autowired
ProductMapper mapper;
@RequestMapping("/insert")
public String insert(Product product){
System.out.println("product = " + product);
mapper.insert(product);
return "添加完成!返回首页";
}
@RequestMapping("https://blog.csdn.net/select")
public String select(){
List list = mapper.select();
String html = "";
html+="商品列表 ";
html += "标题 价格 销量 ";
html+=""+p.getTitle()+" ";
html+=""+p.getPrice()+" ";
html+=""+p.getSaleCount()+" ";
//把id传过去： ?是请求地址和请求参数的分隔符：
html+="+p.getId()+"'>删除 ";
html+=" ";
}
html+="
";
return html;
}
@RequestMapping("https://blog.csdn.net/delete")
public String delete(int id){
System.out.println("id = "+id);
mapper.deleteById(id);
return "删除完成!返回列表页面";
}
}
package cn.tedu.boot31.mapper;
import cn.tedu.boot31.entity.Product;
import org.apache.ibatis.annotations.*;
import java.util.List;
@Mapper
public interface ProductMapper {
//insert into product values(null,‘手机’,500,100);
@Insert("insert into product values(null,#{title},#{price},#{saleCount})")
void insert(Product product);
@Select("select * from product")
@Result(column = "sale_count",property = "saleCount")
List select();
@Delete("delete from product where id=#{id}")
void deleteById(int id);
}
(4)修改商品的功能：—改
4.修改商品的功能
新建商品修改页面update 改动的类ProductController
改动的接口ProductMapper
(1)static下新建修改商品的页面：update
(2)①ProductController类中添加一个修改商品的功能方法
②ProductController中的修改商品的方法中用mapper调用修改方法：mapper.update(product);;
(3)ProductMapper中写一个修改商品的条件
(4)测试：http://localhost:8080
点击修改
输入信息(2/大哥大/200/2),点击修改
跳转到修改完成页面！
返回点击查询商品超链接，发现之前的id序号为2的已经被修改位刚才改的！
成功！！！
Title
修改商品信息
package cn.tedu.boot31.controller;
import cn.tedu.boot31.entity.Product;
import cn.tedu.boot31.mapper.ProductMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
//此注解相当于在每一个方法上面添加ResponseBody注解
@RestController
public class ProductController {
@Autowired
ProductMapper mapper;
@RequestMapping("/insert")
public String insert(Product product){
System.out.println("product = " + product);
mapper.insert(product);
return "添加完成!返回首页";
}
@RequestMapping("https://blog.csdn.net/select")
public String select(){
List| id | 标题 | 价格 | 销量 | |
|---|---|---|---|---|
| "+p.getId()+" | "; html+=""+p.getTitle()+" | "; html+=""+p.getPrice()+" | "; html+=""+p.getSaleCount()+" | "; //把id传过去： ?是请求地址和请求参数的分隔符： html+="+p.getId()+"'>删除 | "; html+="
同步: 指单线程依次做几件事
异步: 指多线程同时做几件事
同步请求: 指客户端浏览器只有一个主线程, 此线程负责页面的渲染和发出请求等操作,
如果此主线程发出请求的话则停止渲染而且会清空页面显示的内容 直到服务器响应了
数据后才能再次显示, 由于主线程清空了原有显示的内容所以只能实现
页面的整体刷新(整体改变) 。
异步请求: 指客户端的主线程只负责页面渲染相关操作,发请求的事儿由新的子线程操作,
这样子线程发出请求时页面不需要清空,而且可以将查询回来的数据展示在原有页面基
础之上, 这样实现的效果就叫做 页面的局部刷新。
(1)客户端发出请求的几种方式
通过浏览器的地址栏中发出请求 同步请求 通过html页面中的超链接发出请求 同步请求 通过html页面中的form 表单发出请求 同步请求 通过前端框架发出请求 异步请求(2)Get请求和Post请求
从字面意思理解, Get是跟服务器要数据, Post是给服务器传数据 Get: 请求参数写在请求地址的后面(可见),请求参数有大小限制只能传几k的数据 (不能处理文件上传) 应用场景: 查询请求一般都会使用get,删除也会使用get请求 ———————————————————————————————————————————————————————————————————————— Post: 请求参数放在请求体里面(不可见),参数没有大小限制 应用场景: 文件上传, 带有敏感信息的请求(比如注册登录时有密码)(3)客户端发出:异步请求get传参：boot3-1
一、客户端如何发出异步请求：——————>异步请求get 时如何传参？
改动的页面：index 新建页面https://blog.csdn.net/weixin_59404863/article/details/helloAxios
创建AxiosController
01.通过Axios框架发出异步请求
02.此框架就是一个普通的js文件 页面需要使用此框架时需要将此文件引入到页面中
03.从苍老师文档服务器中找到axios框架地址:
配置文件下载——>JavaScript 组件库 CDN——>引入axios:
04.打开boot3-1工程：
(1)①src/main/resources/static下新建 商品管理首页 页面：https://blog.csdn.net/weixin_59404863/article/details/helloAxios
引入vue 和 axios本地文件
②index页面中添加：【
、 异步请求测试】
(2)①打开之前的Web工程：eui目录下的js文件夹复制到：src/main/resources/static下
②把js文件夹下的eui.js文件删掉，再从上边第三步【引入axios】中复制地址,
进入浏览器将内容保存下来并存放到该js文件夹下命名为"axios.min.js"文件
此时js文件夹下有：axios.min.js 和 vue.js
(3)启动工程进行测试：http://localhost:8080
点击超链接异步请求测试：显示：{{info}}，
说明vue.js没有正常运转，页面右键检查发现html源码报错：vue.js404 axios.min.js404
此时因为改动了static中的东西————>需要重新build编译一下!
发现此时页面再次点击(超链接异步请求测试)时：
成功显示：【测试vue】文本页面！
05.(1)https://blog.csdn.net/weixin_59404863/article/details/helloAxios中:
①添加测试异步请求get按钮，并用事件绑定(@事件名="方法":@click 点击事件)调用f1()方法
②在下边写一个methods，并在其中写f1方法并写一个点击事件(即点击某个按钮时触发弹窗)
【alert("xxx");】
③再Build一下进行测试：http://localhost:8080 点击测试异步请求，会弹出框显示：xxx
④注释掉上边的②中的代码
⑤f1方法里继续添加【发出异步get请求】代码
06.(1)①在src/main/java/cn/tedu/boot31/controller下新建：AxiosController类
②类上加注解：@RestController 并写一个https://blog.csdn.net/weixin_59404863/article/details/hello1方法用来返回“请求成功”
③build一下后重新启动工程：快捷键(shift+F10)，
此时发现弹出框内容变为：“请求成功“！
————>即完成了异步请求(页面的局部刷新)
07.(1)在https://blog.csdn.net/weixin_59404863/article/details/helloAxios中：f1方法调用get中，“/https://blog.csdn.net/weixin_59404863/article/details/hello1Axios”加个参数：?info=tom
变为：【axios.get("/https://blog.csdn.net/weixin_59404863/article/details/hello1Axios?info=tom")】
(2)AxiosController中：https://blog.csdn.net/weixin_59404863/article/details/hello方法中添加参数：String info
并改动return为：【return "请求成功! info="+info;】
08.重新启动并测试：http://localhost:8080
点击超链接异步请求测试：显示：【测试vue 测试异步请求get按钮】
点击按钮，弹出框会显示参数info：【请求成功! info=tom】
即实现了发请求的时候如何传参！
Title
商品管理首页
添加商品
查询商品
修改商品
异步请求测试
Title
{{info}}
package cn.tedu.boot31.controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class AxiosController {
@RequestMapping("/https://blog.csdn.net/weixin_59404863/article/details/hello1Axios")
public String https://blog.csdn.net/weixin_59404863/article/details/hello1(String info){
return "请求成功! info="+info;
}
}
(4)客户端发出:异步请求post传参：boot3-1
2、异步请求post时 如何传参？
改动页面https://blog.csdn.net/weixin_59404863/article/details/helloAxios 改动类AxiosController
01.(1)https://blog.csdn.net/weixin_59404863/article/details/helloAxios中:
①添加测试异步请求post按钮，并用事件绑定(@事件名="方法":@click 点击事件)调用f2()方法:
②f2方法里继续添加【发出异步post请求】代码：
(2)按【ctrl+shift+F9】重新编译一下该页面！
测试：http://localhost:8080
点击超链接异步请求测试时，
显示：【测试vue 测试异步请求get按钮 测试异步请求post按钮】
点击post按钮，不会弹出框，
因为AxiosController中需要添加异步post请求条件！
(3)在AxiosController中添加条件：【异步请求post时：进行点击事件弹窗的传参用info表示】
测试：http://localhost:8080
点击超链接异步请求测试时，
显示：【测试vue 测试异步请求get按钮 测试异步请求post按钮】
点击post按钮，会弹出框，
会显示参数info：【请求成功! info='刘德华'】
成功！！！
Title
{{info}}
package cn.tedu.boot31.controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class AxiosController {
@RequestMapping("/https://blog.csdn.net/weixin_59404863/article/details/hello1Axios")
public String https://blog.csdn.net/weixin_59404863/article/details/hello1(String info){
return "请求成功! info="+info;
}
//@RequestBody注解作用, 当客户端发出post请求并且提交的是自定义对象时,
// 服务器端接收参数必须使用此注解 否则得不到传递过来的参数.
@RequestMapping("/https://blog.csdn.net/weixin_59404863/article/details/hello2Axios")
public String https://blog.csdn.net/weixin_59404863/article/details/hello2(@RequestBody String info){
return "请求成功! info="+info;
}
}
04.重要>弹出框显示注册登录：boot3-2
实现注册登录功能：boot3-2
新建页面index、reg、login
新建类UserController、User、UserMapper
注：若没有User表，需要:
(1)首先在mysql客户端例：
①use empdb;
②create table user(id int primary key auto_increment,username varchar(50),password varchar(50),nick varchar(50))charset=utf8;
③执行【工程Jdbc01Demo09】的程序后在控制台用户名唐僧 密码root 昵称root
一、前提：
(1)创建工程boot3-2 打钩3个
(2)从之前工程中复制application.properties里面的连接数据库的信息,
复制完之后立即启动工程，测试是否创建成功,
如果工程启动不起来:检查报错是不是因为端口被占用, 如果不是，刷新maven 再次启动,
如果还是启动不了，删除工程重新创建新工程，直至启动成功。
二、实现注册(1-6)、登录功能(7-8)
1.创建index.html页面 在里面添加两个超链接访问注册和登录页面
2.创建reg.html页面 在页面中引入vue和axios两个框架文件 从之前工程中复制js文件
夹(检查里面是不是包含这两个框架文件) 在页面中 点击按钮时向/reg发出异步请求,
同时把用户输入的信息提交给服务器,然后在then方法里面判断返回的response.data值
为1代表注册成功 显示首页 值为2代表用户名已存在
3.src/main/java/cn/tedu/boot32下：
创建包controller 下：创建UserController
并且boot32下：创建包entity 下：创建User实体类
4.在UserController里面添加reg方法处理/reg请求
声明User变量用来接收传递过来的用户信息
5.src/main/java/cn/tedu/boot32下：创建包mapper 下：创建类UserMapper
在里面提供两个方法,分别是 selectByUsername 和 insert两个方法
6.回到UserController里面把UserMapper通过@Autowired装配进来,
在reg方法中先调用mapper里面的selectByUsername方法 判断返回值是否有值
如果有值则给客户端返回2,代表用户名已存在,
如果没有值,则调用mapper的insert方法,把用户信息保存到数据库,
最后返回1代表注册成功.
(1)测试：http://localhost:8080
点击注册，输入信息(admin/root/admin)————>点击注册，出现提示框:注册成功
点击注册，输入信息(admin/root/admin)————>点击注册，出现提示框:用户名已存在
7.下一步开始实现登录功能, 步骤类似注册
(1)先创建login.html页面 然后在页面中通过Vue对内容进行管理
当点击登录按钮的时候 向/login发出异步请求
(2)同样把输入的用户信息提交给服务器, 在then方法中判断response.data的值：
值为1代表登录成功显示首页,值为2代表用户名不存在, 值为3代表密码错误
8.在UserController里面添加login方法【处理/login请求】,
用注解@RequestBody：声明User对象接收传递过来的用户信息,
在方法中调用mapper的selectByUsername 通过用户输入的用户名查询对应的用户信息,
如果没有查询到 直接返回2：代表用户名不存在,
如果查询到了 继续通过输入的密码和查询到的密码比较
如果一直返回1代表登录成功, 如果不一直返回2代表密码错误.
(1)测试：http://localhost:8080
点击登录，输入信息(admin/root/admin)————>点击注册，出现提示框:登录成功
点击登录，输入信息(admin/123)————>点击登录，出现提示框:密码错误
点击登录，输入信息(dd/123)————>点击登录，出现提示框:用户名不存在
Title
工程首页
注册
登录
Title
注册页面
Title
登录页面
package cn.tedu.boot32.controller;
import cn.tedu.boot32.entity.User;
import cn.tedu.boot32.mapper.UserMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class UserController {
@Autowired
UserMapper mapper;
@RequestMapping("/reg")
public int reg(@RequestBody User user) {
//拿用户输入的用户名去数据库中查询用户信息
User u = mapper.selectByUsername(user.getUsername());
if (u != null) {
return 2; //代表用户名已存在
}
//执行注册
mapper.insert(user);
return 1; //代表注册成功
}
//@RequestBody注解作用, 当客户端发出post请求并且提交的是自定义对象时,
// 服务器端接收参数必须使用此注解 否则得不到传递过来的参数.
@RequestMapping("/login")
public int login(@RequestBody User user){
//拿用户输入的用户名查询数据库里面的用户信息
User u = mapper.selectByUsername(user.getUsername());
if (u!=null){//代表查询到了用户信息
//判断用户输入的密码和查询到的密码是否一致
if (user.getPassword().equals(u.getPassword())){
return 1;//登录成功!
}
return 3; //密码错误!
}
return 2;//代表用户名不存在
}
}
package cn.tedu.boot32.entity;
public class User {
private Integer id;
private String username;
private String password;
private String nick;
@Override
public String toString() {
return "User{" +
"id=" + id +
", username='" + username + ''' +
", password='" + password + ''' +
", nick='" + nick + ''' +
'}';
}
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String getNick() {
return nick;
}
public void setNick(String nick) {
this.nick = nick;
}
}
package cn.tedu.boot32.mapper;
import cn.tedu.boot32.entity.User;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
@Mapper
public interface UserMapper {
//如果返回值为一个对象而非List集合 要求查询回来的结果必须是0条或1条
//如果出现了大于1条的情况会报错
@Select("select * from user where username=#{username}")
User selectByUsername(String username);
@Insert("insert into user values(null,#{username},#{password},#{nick})")
void insert(User user);
}
3、!!后端MVC设计模式：*boot4-1和2
(1)后端的MVC设计模式
把实现一个业务的代码划分为三部分,分别是: 页面相关(V),业务逻辑相关(C),数据相关(M) M:Model 数据模型, 对应的代码是数据库相关的Mapper部分 V:View 视图, 对应所有页面相关内容 C:Controller 控制器,对应的是Controller相关代码 实现一个业务的顺序: V页面相关代码->C Controller相关代码->M 数据库Mapper相关代码 排错时也是从这三部分代码中找问题 后端MVC涉及模式中的V页面相关,前端工程师将页面又划分为了MVC三部分(2)前后端分离
①：
如果前后端不分离, 后端服务器需要两套代码来应对 手机客户端和浏览器客户端, 因为不同的客户端的需求内容是不一样的,这样后端的开发效率就会受影响。
②：
前后端分离: 指在Controller中不再处理页面相关内容, 浏览器客户端需要先请求页面,页面加载完之后 从页面中再次发出请求获取数据, 得到数据后把数据展示在页面中, 这个过程属于页面的局部刷新, 同步请求只能实现页面的整体刷新无法实现局部刷新, 所以以后不再使用同步请求, 全部使用异步请求,因为以后工作基本全是前后端分离思想。(3)JSON
JSON是一种轻量级的数据交换格式(数据封装格式)
客户端和服务器之间需要互相传递数据,当需要传递复杂数据时需要按照特定的格式将数据进
行封装,JSON就是这样一个通用格式。
登录成功
用户名已存在
密码错误
1
2
3
"id=1, title=手机 , price=1000, saleCount=500"
[{"id":1,"title":"阿迪袜子","price":10.0,"saleCount":1000},
{"id":3,"title":"裤子","price":50.0,"saleCount":400},
{"id":4,"title":"袜子","price":5.0,"saleCount":100}]
(4)服务器和客户端之间如何传递复杂数据
01. !!!商品管理步骤：boot4-1
(0)问题：代码没错但功能有问题：
代码可以确定没有错误，
但是boot4-1工程【添加商品】的时候：
弹出框显示成功
但商品列表里是空的
这个空的商品信息但是能修改成功后就有信息；
经过仔细查看该工程，发现boot4-1 的pom.xmlmaven里有一个和boot3-1相关的：
cn.tedu
boot3-1
0.0.1-SNAPSHOT
compile
删除掉：【.... 】中内容重写进行功能测试
发现可以正常添加商品了！！！
(1)增—添加商品提示框显示添加成功：
0.前提：若没有商品product表，现在数据库创建：
(1)创建商品表：在数据库中完成以下两个指令：
use empdb;
create table product(id int primary key auto_increment,title varchar(100),price double(10,2),sale_count int)charset=utf8;
1.创建工程 3个打钩 修改application.properties配置文件,
启动工程测试是否成功
2.创建index.html首页 和 insert.html页面
3.在insert.html页面中添加三个文本框和一个添加按钮, 通过Vue对页面内容进行管理,
此时需要把之前工程中的js文件夹复制到新工程, 当点击添加按钮时向/insert地址发出
异步post请求把用户输入的商品信息提交
4.创建controller.ProductController 添加insert方法处理/insert请求
创建Product实体类 在insert方法中声明用来接收传递过来的参数(此参数需要通过
@RequestBody注解进行修饰
5.创建ProductMapper 在里面添加insert方法通过@Insert注解修饰
6.在Controller中将ProductMapper装配进来, 在insert方法中调用mapper的insert方法
把接收到的Product对象传递过去
0、前提：
(1)创建工程boot4-1 打钩3个
(2)从之前工程中复制application.properties里面的连接数据库的信息,
复制完之后立即启动工程，测试是否创建成功,
如果工程启动不起来:检查报错是不是因为端口被占用, 如果不是，刷新maven 再次启动,
如果还是启动不了，删除工程重新创建新工程，直至启动成功。
一、商品管理步骤：
0.前提：若没有商品product表，现在数据库创建：
(1)创建商品表：在数据库中完成以下两个指令：
use empdb;
create table product(id int primary key auto_increment,title varchar(100),price double(10,2),sale_count int)charset=utf8;
1、添加商品提示框显示添加成功：
新建页面index、insert 新建类ProductController、Product
新建接口ProductMapper
(1)创建index.html页面 在里面添加两个超链接访问注册和登录页面
(2)①创建insert页面
②引入vue.js 和 axios.min.js文件
把：js文件夹从之前的工程粘到static下
(3)在src/main/java/cn/tedu/boot41下：创建包controller 下：创建ProductController类
(4)在src/main/java/cn/tedu/boot41下：创建包entity 下：创建Product实体类
(4)①把数据保存在Mapper里 创建在src/main/java/cn/tedu/boot41下：创建包mapper
②mapper下创建接口：ProductMapper
测试：http://localhost:8080
点击添加商品超链接：跳转到添加商品信息页面，
输入信息(小米手机/100/100)，点击添加，
弹出框显示:添加完成
成功！！！
Title
商品管理首页
添加商品
Title
添加商品
package cn.tedu.boot41.controller;
import cn.tedu.boot41.mapper.ProductMapper;
import cn.tedu.boot41.entity.Product;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
@RestController
public class ProductController {
@Autowired(required = false)
ProductMapper mapper;
@RequestMapping("/insert")
public void insert(@RequestBody Product product){
System.out.println("product = " + product);
mapper.insert(product);
}
}
package cn.tedu.boot41.entity;
public class Product {
private Integer id;
private String title;
private Double price;
private Integer saleCount;
@Override
public String toString() {
return "Product{" +
"id=" + id +
", title='" + title + ''' +
", price=" + price +
", saleCount=" + saleCount +
'}';
}
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public Double getPrice() {
return price;
}
public void setPrice(Double price) {
this.price = price;
}
public Integer getSaleCount() {
return saleCount;
}
public void setSaleCount(Integer saleCount) {
this.saleCount = saleCount;
}
}
package cn.tedu.boot41.mapper;
import cn.tedu.boot41.entity.Product;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Result;
import org.apache.ibatis.annotations.Select;
import java.util.List;
@Mapper
public interface ProductMapper {
@Insert("insert into product values(null,#{title},#{price},#{saleCount})")
void insert(Product product);
}
(2)查—商品管理商品列表步骤:
1.在index.html页面中添加商品列表超链接 请求地址为https://blog.csdn.net/list.html页面 2.创建list.html页面, 在页面中添加表格,并且通过Vue进行管理,在Vue的created方法中 发出异步的get请求,把请求回来的数据交给一个数组变量, 然后让页面中表格的内容和数据 变量进行绑定, 当数组有值时页面会自动显示数据 3.在ProductController中添加select方法 处理https://blog.csdn.net/select请求, 方法中调用mapper的select方法 把得到的List集合直接返回给客户端 4.实现 mapper里面的select方法
2、查询数据库商品功能： 改动页面index 新建页面list 改动的类ProductController 改动的接口ProductMapper (5)①index添加一个超链接：【商品列表】 ②创建页面商品列表list (6)测试列表是否有假数据(自己在arr里自定义的)：http://localhost:8080 点击商品列表超链接： 发现跳转到： 罗列的数组中的商品列表页面 (7)①list列表写一个方法：create:function () ②回到ProductController中，写一个select方法 此时select()会爆红，按住alt+回车，会自动在ProductMapper中生成该方法 (8)①测试1：http://localhost:8080 点击商品列表： 跳转到商品列表页面： 发现已经变为数据库里的product的信息！ 成功！ ②测试2：http://localhost:8080https://blog.csdn.net/select 可以跳转到一个用list集合显示product商品的页面！ index添加一个超链接：【商品列表】Title 商品列表
| 商品 | 商品标题 | 商品价格 | 商品销量 |
|---|---|---|---|
| {{p.id}} | {{p.title}} | {{p.price}} | {{p.saleCount}} |
1.在商品列表页面中添加删除的超链接 ,废掉超链接的跳转功能添加点击事件,调用del方法, 在方法中向https://blog.csdn.net/delete发出异步get请求并且把商品的id传递过去 2.在ProductController中 添加delete方法处理https://blog.csdn.net/delete请求在方法中调用mapper的 deleteById方法把接收到的id传递进去 3.实现mapper里面的deleteById方法
3、删—商品管理删除商品步骤: 改动的页面list 改动的类ProductController 改动的接口ProductMapper 1. (1)list页面中把arr数组里的内容清空 (2)①在商品列表页面中表格最后添加一列【操作】用来删除商品 ②表格中最后添加删除的超链接:【删除 】, ③废掉超链接的跳转功能添加点击事件,调用del方法,在方法中向https://blog.csdn.net/delete发出异步get请求并且把商品的id传递过去 把②红代码改为:【删除 】 ④在list最下边添加一个methods里的【del(id)】方法 2.在ProductController中 添加delete方法处理https://blog.csdn.net/delete请求在方法中调用mapper的 deleteById方法把接收到的id传递进去 3.在接口ProductMapper中：实现mapper里面的deleteById方法 4.测试：http://localhost:8080 点击超链接查询商品， 跳转到商品列表页面， 测试发现右侧有一列删除的按钮， 删除一个商品的信息， 弹出框显示:删除完成，此时该商品已经被删除 成功!!!Title 商品列表
| 商品 | 商品标题 | 商品价格 | 商品销量 | 操作 |
|---|---|---|---|---|
| {{p.id}} | {{p.title}} | {{p.price}} | {{p.saleCount}} | 删除 |
4、改—商品管理修改商品步骤: 改动页面list 新建页面update 改动的类ProductController 改动的接口ProductMapper 1.给列表页面添加 修改超链接 往/https://blog.csdn.net/weixin_59404863/article/details/update.html页面跳转 并且传递过去商品id 2.创建https://blog.csdn.net/weixin_59404863/article/details/update.html页面 在Vue的created方法中得到传递过来的id 然后向https://blog.csdn.net/selectById 发出异步的get请求 把id传递过去 把服务返回的数据用一个product对象接收, 并且页面 内容和此对象进行绑定 这样对象有值页面就能跟着显示 3.在ProductController里面添加selectById方法 处理https://blog.csdn.net/selectById请求, 在方法中调用Mapper的selectById方法 4.实现mapper里面的selectById方法 5.给https://blog.csdn.net/weixin_59404863/article/details/update.html页面中的修改按钮添加点击事件, 点击时向/update地址发出异步的 post请求把商品的信息一起提交 6.在ProductController里面添加update方法处理/update请求,在方法中掉用mapper 的update方法 7.实现mapper里面的update方法 .Title 商品列表
| 商品id | 商品标题 | 商品价格 | 商品销量 | 操作 |
|---|---|---|---|---|
| {{p.id}} | {{p.title}} | {{p.price}} | {{p.saleCount}} | 删除 修改 |
修改商品页面
0、前提： (1)创建工程boot4-1 打钩3个 (2)从之前工程中复制application.properties里面的连接数据库的信息, 复制完之后立即启动工程，测试是否创建成功, 如果工程启动不起来:检查报错是不是因为端口被占用, 如果不是，刷新maven 再次启动, 如果还是启动不了，删除工程重新创建新工程，直至启动成功。 一、文件上传 新建页面index、upload 新建类UploadController 1. (1)创建文件上传index页面 (2)复制css和js文件夹——>到src/main/resources/static下 (3)把Web工程里day07下的【start.html】复制到上边的static目录下 (4)在elementUI网站:https://element.eleme.cn ①找到组件中的Upload上传 ②找到下面的照片墙：复制标签