当前位置:首页 » 《随便一记》 » 正文

cgb2107-day18_cgblpx的博客

17 人参与  2021年12月14日 16:49  分类 : 《随便一记》  评论

点击全文阅读


文章目录

    • 一,Spring AOP
      • --1,概述
      • --2,使用步骤
      • --3,创建切面
      • --4,测试
        • 创建启动类
        • 创建HelloController 类
        • 测试
    • 二,两个框架的整合
      • --1,需求
      • --2,开发步骤
        • 0,项目结构
        • 1,RunApp启动类
        • 2,application.yml改端口
        • 3,Car类,封装数据
        • 4,CarService接口,定义抽象方法
        • 5,CarServiceImpl实现类,重写抽象方法
        • 6,CarController,接受请求
      • --3,测试
      • --4,总结
    • 三,改造前端代码
      • --1,使用axios语法发起请求
      • --2,修改后端服务器的Controller,加一个特殊的注解,@CrossOrigin
    • 四,Vue路由
      • --1,测试
      • --2,总结

一,Spring AOP

–1,概述

是面向切面编程,扩展了面向对象的不足.
切面Aspect: 其实就是一个类, 要用@Aspect注解
通知Advice: 就是类里的方法, 分为:前置通知 后置通知 环绕通知 返回后通知 异常通知
切点Pointcut: 就是定义了方法的触发时间,切入点表达式

–2,使用步骤

加入jar包

<dependencies>
     <!--添加aop依赖包-->
     <dependency>
         <groupId>org.springframework.boot</groupId>
         <artifactId>spring-boot-starter-aop</artifactId>
     </dependency>
 </dependencies>

–3,创建切面

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;//放回给调用者,继续执行方法
    }
}

–4,测试

创建启动类

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 里的每个方法,都会执行对应的通知

二,两个框架的整合

–1,需求

获取汽车数据

–2,开发步骤

0,项目结构

在这里插入图片描述
在这里插入图片描述

1,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);
    }
}

2,application.yml改端口

server:
  port: 8090

3,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;
    }
}

4,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数据
    
}

5,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数据
    }
}

6,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() ;
    }
}

–3,测试

在这里插入图片描述

–4,总结

在这里插入图片描述
在这里插入图片描述

三,改造前端代码

–1,使用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>

–2,修改后端服务器的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路由

–1,测试

<!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>

–2,总结

在这里插入图片描述


点击全文阅读


本文链接:http://m.zhangshiyu.com/post/31544.html

方法  通知  数据  
<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1