spring_vue读取mysql简单记录2（跨端口）-摩杜云开发者社区

spring结合vue

前言

spring的准备

config
controller
entity
repository

vue的跨域请求

安装axios

结束

spring_vue读取mysql简单记录2（跨端口）_spring

前言

大家好，我是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类

spring_vue读取mysql简单记录2（跨端口）_java_02

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表一致

spring_vue读取mysql简单记录2（跨端口）_vue_03

vue的跨域请求

其中vue的是8000的端口号，spring是8181的端口号

spring_vue读取mysql简单记录2（跨端口）_spring_04

安装axios

spring_vue读取mysql简单记录2（跨端口）_vue_05

安装成功出现plugins的axios.js

spring_vue读取mysql简单记录2（跨端口）_spring_06

在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可以查询数据库中的内容

spring_vue读取mysql简单记录2（跨端口）_spring_07

spring_vue读取mysql简单记录2（跨端口）_vue_08

结束

本文分享到这结束，如有错误或者不足之处欢迎指出，感谢大家的阅读！