前言
大家好，我是yma16，本文分享spring_vue读取mysql简单记录2（跨端口）
spring简介
Java Spring是一种基于Java的开源应用程序框架，它主要用于构建企业级Web应用程序。Spring框架提供了一系列的库和API，用于简化常见的Web开发任务，例如处理HTTP请求、进行数据访问、管理事务等。
Spring框架的设计理念是基于依赖注入和面向接口编程的，这使得应用程序易于测试、易于扩展和易于维护。Spring框架还提供了大量的模块，用于应用程序的各个方面，例如Spring MVC、Spring Security、Spring Data等。
Java Spring成为了流行的Java框架之一，尤其在企业级应用程序中得到了广泛应用。
spring的准备
config
跨端口访问的问题
实现webMvcConfigure的接口
package com.southwind.springboottest.config; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; @Configuration public class CrosConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("*") .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS") .allowCredentials(true) .maxAge(3600) .allowedHeaders("*"); } }
controller
控制视图
package com.southwind.springboottest.controller; import com.southwind.springboottest.entity.Book; import com.southwind.springboottest.repository.BookRepository; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.data.domain.Page; import org.springframework.data.domain.PageRequest; import org.springframework.web.bind.annotation.*; import java.util.List; @RestController @RequestMapping("/book") public class BookHandler { @Autowired private BookRepository bookRepository; @GetMapping("/findalltest") public List<Book> finAllTest() { return bookRepository.findAll();//测试 } }
entity
实体匹配数据库的book类
package com.southwind.springboottest.entity; import lombok.Data; import javax.persistence.Entity; import javax.persistence.GeneratedValue; import javax.persistence.GenerationType; import javax.persistence.Id; @Entity @Data public class Book { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Integer id; private String name; private String auth; }
repository
继承jpa
package com.southwind.springboottest.repository; import com.southwind.springboottest.entity.Book; import org.springframework.data.jpa.repository.JpaRepository; public interface BookRepository extends JpaRepository<Book,Integer> { }
测试访问定义的url
数据与数据库的book表一致
vue的跨域请求
其中vue的是8000的端口号，spring是8181的端口号
安装axios
安装成功出现plugins的axios.js
在book.vue中添加axios的请求
将数据赋予vue中的data
created(){ const _temp=this; axios.get('http://localhost:8181/book//findalltest').then(function(resp) { console.log(resp.data) _temp.books=resp.data; }) } }
访问books.vue可以查询数据库中的内容
结束
本文分享到这结束，如有错误或者不足之处欢迎指出，感谢大家的阅读！
