- 练习前后端整合,包括入库
- Java代码
package cn.tedu.hello;
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;
@RestController
@RequestMapping("car")
public class CarController2 {
//1,解析浏览器发来的请求参数
//http://localhost:8080/car/save3?
//id=1&color=red&price=100&pinpai=BMW&type=X7
@RequestMapping("save3")
public Object save3(Car c) throws Exception {
//TODO 把解析到的请求参数 getXxx()入库--jdbc
//1,pom里加jdbc的坐标
//2,在数据库里创建car表(提供id,color,price,pinpai,type字段)
/* CREATE TABLE car(
id INT PRIMARY KEY AUTO_INCREMENT,
color VARCHAR(20),
price DOUBLE,
pinpai VARCHAR(10),
TYPE VARCHAR(10)
) */
//注册驱动
Class.forName("com.mysql.jdbc.Driver");
//获取数据库连接
String url="jdbc:mysql://localhost:3306/cgb2107?characterencoding=utf8";
Connection con = DriverManager.getConnection(url,"root","root");
//获取传输器
String sql = "insert into car values(null,?,?,?,?)";
PreparedStatement p = con.prepareStatement(sql);
//给SQL设置参数---参数的顺序一定要和字段的顺序一致
p.setObject(1,c.getColor());
p.setObject(2,c.getPrice());
p.setObject(3,c.getPinpai());
p.setObject(4,c.getType());
//执行SQL
p.executeUpdate();
//释放资源
p.close(); con.close();
//{"id":1,"color":"red","price":100.0,"pinpai":"BMW","type":"X7"}
return c;
}
}
- 前端代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>前后端整合</title>
</head>
<body>
<a href="http://localhost:8080/user/insert">普通访问</a>
<a href="http://localhost:8080/user/insert?id=10&name=rose&age=20">
普通的get提交方式</a>
<a href="http://localhost:8080/user/insert2/10/rose/20">restful方式</a>
<a href="http://localhost:8080/car/save3?
id=1&color=red&price=100&pinpai=BMW&type=X7">点我获取汽车数据 </a>
<a href="http://localhost:8080/car/save3?
id=1&color=red&price=100&pinpai=BMW&type=X7">点我保存汽车数据</a>
</body>
</html>
- 测试
启动服务器后 ,打开浏览器测试
- 总结
- SpringMVC框架解析post提交的请求参数
- 项目结构
- 准备表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
font-size: 17px; /* 字号 */
background-color: lightpink; /* 背景色 */
}
/* 输入框 */
.a{
width: 300px; /* 宽度*/
height: 40px; /* 高度 */
font-size: 20px; /* 字号 */
}
/* 保存按钮 */
input[type="submit"]{
/* 背景色 字的颜色 边框颜色 宽度 高度 */
background-color: #0000FF;
border-color: #0000FF;
color: white;
width: 100px;
height: 40px;
font-size: 20px; /* 字号 */
}
/* 取消按钮 */
input[type="button"]{
/* 背景色 字的颜色 边框颜色 宽度 高度 */
background-color: #FF69B4;
border-color: #FF69B4;
color: white;
width: 100px;
height: 40px;
font-size: 20px; /* 字号 */
}
</style>
</head>
<body>
<!-- 表单可以提交数据,默认get方式.
method="post"指定提交方式,action=""指定跳转的网址
要求:1,必须是form 2,必须有submit按钮 3,必须配置name属性
-->
<form method="post" action="http://localhost:8080/student/save">
<table>
<tr>
<td>
<h2>学生信息管理系统MIS</h2>
</td>
</tr>
<tr>
<td>姓名:</td>
</tr>
<tr>
<td>
<input class="a" type="text" placeholder="请输入姓名"
name="name">
</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="1" checked="checked"/>男
<input type="radio" name="sex" value="0"/>女
</td>
</tr>
<tr>
<td>
爱好:(多选)
<input type="checkbox" name="hobby" value="ppq"
checked="checked"/>乒乓球
<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="button" value="取消"/>
</td>
</tr>
</table>
</form>
</body>
</html>
- 准备启动类
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);
}
}
- 准备Controller类,解析请求数据
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("save")
// public String save(String name,Integer age,String sex,String hobby){
public String save(Student s){
//Student{name='jack', age=20, sex=0,
hobby=[ppq, ps, cg], edu=2, intime=Wed Sep 15 00:00:00 CST 2021}
System.out.println(s);
return "保存成功!" ;
}
}
- 创建Student类,用来封装数据
package cn.tedu.pojo;
import java.util.Arrays;
import java.util.Date;
//充当了MVC的M层,model层,用来封装数据
//pojo类里只有属性和set() get()
public class Student {
//规则: 属性的类型 属性的名字
//和HTML页面保持一致:参考页面输入的值 参考页面中name属性的值
private String name;//用来封装用户在浏览器输入的用户名
private Integer age;//用来封装用户在浏览器输入的年龄
private Integer sex;//用来封装用户在浏览器选择的性别
private String[] hobby;
//用来封装用户在浏览器选择的爱好--多选的结果存入数组
private Integer edu;
//400异常的原因:页面上输入的日期是String类型
//String->Date: @DateTimeFormat,需要指定日期的格式y是年M是月d是天
@DateTimeFormat(pattern="yyyy-MM-dd")
private Date intime;//用来封装用户在浏览器选择的日期
//get set tostring
public String getName() {
return name;
}
@Override
public String toString() {
return "Student{" +
"name='" + name + '\'' +
", age=" + age +
", sex=" + sex +
", hobby=" + Arrays.toString(hobby) +
", edu=" + edu +
", intime=" + intime +
'}';
}
public void setName(String name) {
this.name = name;
}
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;
}
public Date getIntime() {
return intime;
}
public void setIntime(Date intime) {
this.intime = intime;
}
}
- 测试
- 扩展:入库
修改pom,添加jdbc的jar包
(1)直接在最外面的pom里加就行了,里面的每个module都可以用
<!--添加了jdbc的jar包 右键-generate-dependency-搜 -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.48</version>
</dependency>
- 创建数据库表
CREATE TABLE student(
id INT PRIMARY KEY AUTO_INCREMENT,
NAME VARCHAR(20),
age INT,
sex INT,
hobby VARCHAR(100),
edu INT,
intime DATE
)
- 创建StudentController类,接受请求,包括入库
package cn.tedu.controller;
import cn.tedu.pojo.Student;
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;
import java.util.Arrays;
//和浏览器交互,接受请求,给出响应
@RestController
@RequestMapping("student")
public class StudentController {
//解析请求参数
@RequestMapping("save")
// public String save(String name,Integer age,String sex,String hobby){
public String save(Student s) throws Exception {
//TODO 把解析成功的学生数据 入库
//1,修改pom添加jar包(直接改了project里的pom.xml)
//2,建表student
/*
CREATE TABLE student(
id INT PRIMARY KEY AUTO_INCREMENT,
NAME VARCHAR(20),
age INT,
sex INT,
hobby VARCHAR(100),
edu INT,
intime DATE
)
*/
//3,写jdbc
//注册驱动
Class.forName("com.mysql.jdbc.Driver");
//获取数据库连接
String url="jdbc:mysql://localhost:3306/cgb2107?characterencoding=utf8";
Connection con = DriverManager.getConnection(url,"root","root");
//获取传输器--插入的值的个数参考字段的个数,
顺序也是参考字段的顺序
String sql="insert into student values(null,?,?,?,?,?,?)";
PreparedStatement p = con.prepareStatement(sql);
//设置SQL的参数
p.setObject(1,s.getName());
p.setObject(2,s.getAge());
p.setObject(3,s.getSex());
//注意:数据库里根本没有数组的类型,需要String[]->String,
否则Data too long for column 'hobby' at row 1
p.setObject(4, Arrays.toString(s.getHobby()) );
p.setObject(5,s.getEdu());
p.setObject(6,s.getIntime());
//执行SQL
p.executeUpdate();
//释放资源
p.close(); con.close();
return "保存成功!" ;
}
}
- 总结
- 扩展:修改Tomcat端口号
- Spring框架
- 概述
Spring框架重点提供的: IOC DI AOP
IOC : 控制翻转, 是指把创建对象的权利交给spring.
DI : 依赖注入, 是指把有依赖关系的对象也同时new出来.
AOP : 面向切面编程, 补充了OOP不足
- IOC的使用
- 创建类
package cn.tedu.spring;
public class Hello {
public void hi(){
System.out.println("hello springioc~");
}
}
- 创建配置文件,配置类的信息
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd">
<!-- spring认为万物皆是bean,配置bean的位置,spring自动完成ioc
class属性用来描述类的全路径, id属性用来作为bean的唯一标识
-->
<bean class="cn.tedu.spring.Hello" id="hello"></bean>
</beans>
- IOC的xml方式 - 了解
- 项目结构
- 创建Hello类
package cn.tedu.spring;
public class Hello {
public void hi(){
System.out.println("hello springioc~");
}
}
- 创建User
package cn.tedu.spring;
public class User {
public void eat(){
System.out.println(123);
}
}
- 创建配置文件
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd">
<!--spring认为万物皆是bean,配置bean的位置,spring自动完成ioc
class属性用来描述类的全路径, id属性用来作为bean的唯一标
识
scope="prototype"用来设置对象是多例的,默认是singleton单例
的
IOC底层是Map结构,Map<id的值,类的对象>,数据结类似: {"hello",new Hello()}
spring只能用反射创建对象:
{"hello",Class.forName("cn.tedu.spring.Hello").newInstance() }
-->
<bean class="cn.tedu.spring.Hello" id="hello"></bean>
<bean class="cn.tedu.spring.User" id="user"></bean>
</beans>
- 创建测试类
package cn.tedu.spring;
import org.junit.jupiter.api.Test;
import org.springframework.
context.support.ClassPathXmlApplicationContext;
public class Test1 {
//测试IOC(创建类+配置类)
@Test//junit单元测试方法:@Test void public 没有参数
public void ioc(){
//1,读取配置文件--参数是配置文件的路径
ClassPathXmlApplicationContext spring =
new ClassPathXmlApplicationContext(
"spring-config.xml");
//2,获取spring创建好的对象--参数是配置文件里bean标签的id
的值
Object o = spring.getBean("hello");
System.out.println(o);//cn.tedu.spring.Hello@43bc63a3
Hello h = (Hello) o;
h.hi();
//单例对象:节省内存和时间,spring框架默认的创建单例对象的
方式
Hello h2 = (Hello) spring.getBean("hello");
// System.out.println(o2);//cn.tedu.spring.Hello@43bc63a3
h2.hi();
//java.lang.ClassCastException:cn.tedu.spring.Hello cannot be cast to cn.tedu.spring.User
//User uu = (User) spring.getBean("hello");
//System.out.println(uu);
Object o3 = spring.getBean("user");
System.out.println(o3);//cn.tedu.spring.User@38425407
//向下转型:把父类类型变成子类类型,目的要用子类的功能
User u = (User) o3 ;
u.eat();
}
}
- IOC的注解方式 - 重点
(1)创建类, 类上使用IOC的注解
(2)创建配置文件, 指定包扫描的路径
(3)直接getBean(“类名首字母要变成小写”)
pring认为万物皆是bean,配置bean的位置,spring自动完成ioc
class属性用来描述类的全路径, id属性用来作为bean的唯一标识
scope="prototype"用来设置对象是多例的,默认是singleton单例的
IOC底层是Map结构,Map<id的值,类的对象>,数据结类似: {"hello",new Hello()}
spring只能用反射创建对象:
{"hello",Class.forName("cn.tedu.spring.Hello").newInstance() }
- 项目结构
- 创建类
package cn.tedu.spring;
import org.springframework.stereotype.Component;
@Component //用来让spring完成ioc {"person"=new Person()}
public class Student {
public void study(){
System.out.println("Student.study()");
}
}
package cn.tedu.spring;
import org.springframework.stereotype.Component;
@Component //用来让spring完成ioc {"person"=new Person()}
public class Person {
public void show(){
System.out.println("Person.show()");
}
}
- 配置包扫描
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:context="http://www.springframework.org/schema/context"
xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd">
<!--包扫描:扫描 指定包 以及 子包里的所有资源,找到有IOC注解的类就进行new
IOC的注解包括: @Component @Service @Controller
base-package 用来指定包路径,范围越小越好,性能高
-->
<context:component-scan base-package="cn.tedu"></context:component-scan>
</beans>
- 测试
package cn.tedu.spring;
import org.junit.jupiter.api.Test;
import org.springframework.context.support.ClassPathXmlApplicationContext;
public class Test1 {
//单元测试方法
@Test
public void ioc(){
//1,读取配置文件---参数是配置文件的路径
ClassPathXmlApplicationContext spring =
new ClassPathXmlApplicationContext(
"spring.xml");
//2,getBean()---参数是类名,首字母小写
Object o = spring.getBean("person");
System.out.println(o);
//cn.tedu.spring.Person@7e5afaa6
Object o1 = spring.getBean("student");
System.out.println(o1);
Object o2 = spring.getBean("animal");
System.out.println(o2);
}
}
- 模拟DI依赖性
- 概述
维护了两个对象间的关系,方便在使用A的同时可以看到关联 的B的数据
- 测试
- 创建Emp类
package cn.tedu.di;
public class Emp {
String name = "吴谦";
//绑定了两个类的关系--依赖
private Dept d;
//get set
public Dept getD() {
return d;
}
public void setD(Dept d) {
this.d = d;
}
@Override
public String toString() {
return "Emp{" +
"name='" + name + '\'' +
", d=" + d +
'}';
}
}
- 创建Dept类
package cn.tedu.di;
public class Dept {
String name = "java软件开发一部";
@Override
public String toString() {
return "Dept{" +
"name='" + name + '\'' +
'}';
}
}
- 创建测试类
package cn.tedu.di;
import org.junit.Test;
public class TestDi {
@Test
public void di(){
//1,创建对象
Emp e = new Emp();
Dept d = new Dept();
//Emp{name='吴谦', d=null}
System.out.println(e);
//2,di维护了两个对象间的关系-set()
e.setD(d);
//Emp{name='吴谦', d=Dept{name='java软件开发一部'}}
System.out.println(e);
}
}
- Spring提供的ID依赖注入
- 创建UserInfo
package cn.tedu.di2;
import org.springframework.stereotype.Component;
@Component//ioc -- {"userInfo"=new UserInfo()}
public class UserInfo {
String name="jack";
@Override
public String toString() {
return "UserInfo{" +
"name='" + name + '\'' +
'}';
}
}
- 创建Order类
package cn.tedu.di2;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
@Component//ioc--{"order"=new Order()}
public class Order {
String name = "iphone13";
//get set
@Autowired //di
private UserInfo ui;
@Override
public String toString() {
return "Order{" +
"name='" + name + '\'' +
", ui=" + ui +
'}';
}
}
- 测试
package cn.tedu.di2;
import org.junit.Test;
import org.springframework.context.support.ClassPathXmlApplicationContext;
public class TestDI {
@Test
public void di(){
//1,读取配置文件
ClassPathXmlApplicationContext spring =
new ClassPathXmlApplicationContext(
"spring.xml");
//2,getBean()--DI:获取A的同时也获取到B的信息
Object o = spring.getBean("order");
//Order{name='iphone13',ui=UserInfo{name='jack'}}
System.out.println(o);
}
}
- 总结
IOC: 控制翻转,Spring框架创建对象.
使用步骤: 1, 在类上使用注解@Component @Service @Controller 2, 配置包扫描
DI: 依赖注入,把两个对象之间的关系依赖.
使用步骤: 1, 先完成IOC 2, 用注解@Autowired
扩展:SpringMVC源码里的核心方法
- SpringAOP
- 概述
是面向切面编程,扩展了面向对象的不足.
切面Aspect: 其实就是一个类, 要用@Aspect注解
通知Advice: 就是类里的方法, 分为:前置通知 后置通知 环绕通知 返回后通知 异常通知
切点Pointcut: 就是定义了方法的触发时间,切入点表达式
- 使用步骤
加入jar包
<dependencies>
<!--添加aop依赖包-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-aop</artifactId>
</dependency>
</dependencies>
- 创建切面
package cn.tedu.service;
import org.aspectj.lang.JoinPoint;
import org.aspectj.lang.ProceedingJoinPoint;
import org.aspectj.lang.annotation.*;
import org.springframework.stereotype.Component;
@Component
@Aspect //切面:通知 + 切点
public class Timer {
//2,切点表达式,通过execution属性声明
//* cn.tedu.service.*.*(..) 方法返回值 包名.类名.方法名(参数列表)
@Pointcut("execution(* cn.tedu.controller.*.*(..))")
public void pointcut(){}
//1,通知:分类: 前置通知 后置通知 环绕通知 返回后通知 异常通知
//前置通知:在调用你的目标方法前,就要执行
@Before("pointcut()")
public void beforeMethod(JoinPoint joinPoint){
System.out.println("我是前置通知~~~~~");
//常见的使用场景:权限 缓存 开启事务 日志
}
//后置通知:在调用你的目标方法后,就要执行
@After("pointcut()")
public void afterMethod(JoinPoint joinPoint){
System.out.println("我是后置通知~~~~~");
//常见的使用场景:结束事务 日志 释放资源
}
//环绕通知:在调用你的目标方法之前和之后,都要执行
@Around("pointcut()")
public Object doAround(ProceedingJoinPoint joinPoint) throws Throwable {
long start = System.currentTimeMillis();//计时开始
Object o = joinPoint.proceed();//继续执行你的目标方法
long end = System.currentTimeMillis();//计时结束
System.out.println("aop统计的总耗时是:"+(end-start));
return o;//放回给调用者,继续执行方法
}
}
- 测试
- 创建启动类
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);
}
}
- 创建HelloController类
package cn.tedu.controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController//Controller + ResponseBody
@RequestMapping("hello")
public class HelloController {
@RequestMapping("hello")
public String hello(){
for (int i = 0; i <100 ; i++) {
System.out.println("=");
}
return "恭喜您,访问成功~";
}
//统计hello()方法的性能
//缺点:目前只能统计hello()方法的性能,想要统计其他方法的性能--AOP
//AOP思想好处:让程序员更加关注业务本身,把通用的代码形成切面
@RequestMapping("hello2")
public String hello2(){
long start = System.currentTimeMillis();
hello();
long end = System.currentTimeMillis();
return "访问时间:"+(end-start) ;
}
}
- 测试
访问HelloController 里的每个方法,都会执行对应的通知
- 两个框架的整合
- 需求
获取汽车数据
- 开发结构
- 项目结构
- 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);
}
}
- application.yml改端口
server:
port: 8090
- Car类,封装数据
package cn.tedu.pojo;
import org.springframework.stereotype.Component;
//模型层,用来封装数据
@Component//交给spring框架进行ioc
public class Car {
private Integer id;
private String name;
private String color;
private Double price;
//get set tostring
@Override
public String toString() {
return "Car{" +
"id=" + id +
", name='" + name + '\'' +
", color='" + color + '\'' +
", price=" + price +
'}';
}
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 getColor() {
return color;
}
public void setColor(String color) {
this.color = color;
}
public Double getPrice() {
return price;
}
public void setPrice(Double price) {
this.price = price;
}
}
- CarService接口,定义抽象方法
package cn.tedu.service;
import cn.tedu.pojo.Car;
import java.util.List;
//接口里都是抽象方法
//jdk1.8也可以有static或者default的普通方法
public interface CarService {
//简写形式,public abstract
List<Car> get();//获取Car数据
}
- CarServiceImpl实现类,重写抽象
package cn.tedu.service;
import cn.tedu.pojo.Car;
import org.springframework.stereotype.Component;
import org.springframework.stereotype.Service;
import java.util.ArrayList;
import java.util.List;
//实现类实现了接口要重写抽象方法,否则就是一个抽象类
@Service//和Component一样,都可以完成ioc,只是更好的表示了是service层的代码
public class CarServiceImpl implements CarService{
//重写的要求:方法声明和父类一样,有权限
public List<Car> get(){
Car c1 = new Car();//空对象,属性都是默认值null
c1.setId(10);c1.setName("bmw");c1.setColor("red");
c1.setPrice(9.9);
Car c2 = new Car();//空对象,属性都是默认值null
c2.setId(20);c2.setName("audi");c2.setColor("black");c2.setPrice(6.6);
List<Car> list = new ArrayList<>();
list.add(c1);
list.add(c2);
return list;//给调用者返回list数据
}
}
- CarController,接受请求
package cn.tedu.controller;
import cn.tedu.pojo.Car;
import cn.tedu.service.CarService;
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;
@RestController
@RequestMapping("car")
public class CarController {
//1,调用CarServiceImpl里准备好的汽车数据--DI
@Autowired
private CarService carService;
//2,提供方法,给浏览器返回汽车数据
@RequestMapping("get")
public List<Car> get(){
//调用service的功能,service会把结果返回来
return carService.get() ;
}
}
- 测试
- 总结
- 改造前端代码
- 使用axios语法发起请求
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>前后端整合起来</title>
<!-- 1.导入js文件 -->
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
</head>
<body>
<!-- 2.准备数据渲染区 -->
<div id="app">
<!-- 按钮的点击事件 -->
<button @click="get()">
点我获取汽车数据</button>
</div>
<!-- 3.创建Vue对象 -->
<script>
new Vue({
el : "#app" , //挂载点
methods : { //定义函数
get(){
//使用axios技术,访问后端服务器
axios.get("http://localhost:8090/car/get").then(
//a是服务器的返回值交给a变量保存 箭头函数
//data属性用来获取数据, a.data就是获取a的数据
a => { console.log(a.data) }
)
}
}
})
</script>
</body>
</html>
- 修改后端服务器的Controller,加一个特殊的注解,@CrossOrigin
package cn.tedu.controller;
import cn.tedu.pojo.Car;
import cn.tedu.service.CarService;
import cn.tedu.service.CarServiceImpl;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
@RestController
@RequestMapping("car")
@CrossOrigin//放行js的访问请求
public class CarController {
@Autowired
private CarService carService;
@RequestMapping("get")
public List<Car> get(){
return carService.get() ;
}
}
- Vue路由
- 测试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 vue路由</title>
<!-- 1.导入js文件,要注意顺序 -->
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
</head>
<body>
<!-- 2.准备数据渲染区 -->
<div id="app">
<!-- 4.使用路由 router-link被HTML翻译
成a标签,to属性被翻译成href属性-->
<router-link to="/test1">点我显示主页
</router-link>
<router-link to="/test2">点我显示帮助页
</router-link>
<!-- 5.展示路由匹配到的组件效果 -->
<router-view></router-view>
</div>
<!-- 3.创建Vue对象 -->
<script>
//3.3.定义组件
var home = { template : "<h1>我是主页
</h1>" }
var help = { template : "<h1>我是帮助页
</h1>" }
//3.2.创建路由实例
var luyou = new VueRouter({
routes : [
//属性用来定义路由规则
//规定哪个路径匹配哪个名字的组件
{ path:"/test1" , component:home },
{ path:"/test2" , component:help }
]
})
new Vue({
el : "#app", //挂载点
router : luyou
//3.1.通过router属性配置路由
})
</script>
</body>
</html>
- 总结