從.Net到Java學習第十二篇——SpringBoot+JPA提供跨域接口

時間 2019-11-05

標籤 java 學習第十二 springboot+jpa springboot jpa 提供接口欄目 Java 简体版

原文原文鏈接

最近又擼了半個月的前端代碼，作app離線存儲，而後又花了一週去將過去的wcf項目轉webapi，java又被落下了，總感受我特麼像鬥地主中的癩子牌，變來變去.....前端

Spring Data JPA 是Spring Data 的一個子項目，它經過提供基於JPA的Repository極大了減小了操做JPA的代碼。我以爲它就是一個封裝好了的泛型倉儲。vue

點擊JpaRepository進去看下它的源碼：java

@NoRepositoryBean
public interface JpaRepository<T, ID extends Serializable> extends PagingAndSortingRepository<T, ID>, QueryByExampleExecutor<T> {
    List<T> findAll();
    List<T> findAll(Sort var1);
    List<T> findAll(Iterable<ID> var1);
    <S extends T> List<S> save(Iterable<S> var1);
    void flush();
    <S extends T> S saveAndFlush(S var1);
    void deleteInBatch(Iterable<T> var1);
    void deleteAllInBatch();
    T getOne(ID var1);
    <S extends T> List<S> findAll(Example<S> var1);
    <S extends T> List<S> findAll(Example<S> var1, Sort var2);
}

關於JPA的詳細介紹請移步：spring boot 中使用 jpa以及jpa介紹mysql

有了前面文章的基礎以後，下面的操做就信手捏來了，因此就不作過多的解釋。webpack

這裏用到了mysql數據庫，先運行已經準備好mysql腳本，進行數據庫初始化。web

SET FOREIGN_KEY_CHECKS=0;

-- ----------------------------
-- Table structure for `tb_book`
-- ----------------------------
DROP TABLE IF EXISTS `tb_book`;
CREATE TABLE `tb_book` (
  `id` bigint(11) NOT NULL AUTO_INCREMENT,
  `bookname` varchar(50) DEFAULT NULL COMMENT '書名',
  `price` decimal(10,0) DEFAULT '0' COMMENT '價格',
  `author` varchar(30) DEFAULT NULL COMMENT '做者',
  `publishdate` date DEFAULT NULL COMMENT '出版日期',
  `pagesize` int(11) DEFAULT '0' COMMENT '頁數',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8;

-- ----------------------------
-- Records of tb_book
-- ----------------------------
INSERT INTO `tb_book` VALUES ('1', 'ASP.NET MVC企業級實戰', '89', '鄒瓊俊', '2017-04-01', '476');
INSERT INTO `tb_book` VALUES ('2', 'Java瘋狂講義', '99', '李陽', '2016-05-02', '890');

修改pom.xml文件，添加jpa引用，固然這裏用到了mysql數據庫，那麼還要添加mysql數據庫引用spring

 <!--jpa-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>
        <!--集成druid，使用鏈接池-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.1.0</version>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>

修改配置文件application.yml，對數據庫和jpa進行配置sql

spring:
  profiles:
    active: dev
  datasource:
      name: demo
      url: jdbc:mysql://127.0.0.1:3306/demo?&useSSL=false
      username: root
      password: yujie
      # 使用druid數據源
      type: com.alibaba.druid.pool.DruidDataSource
      driver-class-name: com.mysql.jdbc.Driver
      filters: stat
      maxActive: 20
      initialSize: 1
      maxWait: 60000
      minIdle: 1
      timeBetweenEvictionRunsMillis: 60000
      minEvictableIdleTimeMillis: 300000
      validationQuery: select 'x'
      testWhileIdle: true
      testOnBorrow: false
      testOnReturn: false
      poolPreparedStatements: true
      maxOpenPreparedStatements: 20
  jpa:
    hibernate:
      ddl-auto: update
    show-sql: true
  jackson:
    serialization: true

建立實體類Book，建立包model，而後建立類Book，須要注意的是java中沒有decimal類型，對，沒錯，一開始我習慣性的輸入decimal，結果果斷報錯了，而後一查文檔，發現要用BigDecimal。數據庫

package com.yujie.model;

import javax.persistence.*;
import java.math.BigDecimal;
import java.util.Date;

@Entity
@Table(name = "tb_book")
public class Book {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    public long id;
    public String bookname;
    public BigDecimal price;
    public String author;
    public Date publishdate;
    public int pagesize;

    public long getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getBookname() {
        return bookname;
    }

    public void setBookname(String bookname) {
        this.bookname = bookname;
    }

    public BigDecimal getPrice() {
        return price;
    }

    public void setPrice(BigDecimal price) {
        this.price = price;
    }

    public String getAuthor() {
        return author;
    }

    public void setAuthor(String author) {
        this.author = author;
    }

    public Date getPublishdate() {
        return publishdate;
    }

    public void setPublishdate(Date publishdate) {
        this.publishdate = publishdate;
    }

    public int getPagesize() {
        return pagesize;
    }

    public void setPagesize(int pagesize) {
        this.pagesize = pagesize;
    }

    @Override
    public String toString() {
        return "Book{" +
                "id=" + id +
                ", bookname='" + bookname + '\'' +
                ", price=" + price +
                ", author='" + author + '\'' +
                ", publishdate=" + publishdate +
                ", pagesize=" + pagesize +
                '}';
    }
}

View Code

建立數據庫訪問接口IBookRepository，這裏繼承JPA封裝的泛型接口JpaRepository

package com.yujie.dao;

import com.yujie.model.Book;
import org.springframework.data.jpa.repository.JpaRepository;

public interface IBookRepository extends JpaRepository<Book,Long> {

}

建立控制器BookController，爲了讓這個控制器直接變成相似.net 中的webapi，我直接在控制器上面添加註解@RestController，這樣返回的就是json數據了。

package com.yujie.controller;

import com.yujie.dao.IBookRepository;
import com.yujie.model.Book;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

@RestController
public class BookController {
    @Autowired
    private IBookRepository repository;
    @GetMapping("/book/{id}")
    public Book getBookDetail(@PathVariable("id") long id){
        return repository.findOne(id);
    }
}

添加跨域配置類CorsConfig

package com.yujie.filter;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

/**
 * 解決前端站點(主要爲JavaScript發起的Ajax請求)訪問的跨域問題
 */
@Configuration
public class CorsConfig extends WebMvcConfigurerAdapter {

    @Override
    public void addCorsMappings(CorsRegistry registry) {

        registry.addMapping("/**")
                .allowedOrigins("*")    //容許全部前端站點調用
                .allowCredentials(true)
                .allowedMethods("GET", "POST", "DELETE", "PUT")
                .maxAge(1728000);
    }
}

運行測試

沿用上一篇vue中引用swiper輪播插件來測試。

1.安裝vue-resource

npm install vue-resource --save

2.在main.js中引入vue-resource

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import VueResource from 'vue-resource'

Vue.config.productionTip = false
Vue.use(VueResource)
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  http:{
    root:''
  }
})

3.修改BookDetail.vue代碼：

<template>
<div class="bookdetail">
  <div>書名：<span v-text="bookdata.bookname"></span></div>
  <div>做者：<span v-text="bookdata.author"></span></div>
  <div>頁數：<span v-text="bookdata.pagesize"></span></div>
  <div>訂價：<span v-text="bookdata.price"></span></div>
  <div>出版日期：<span v-text="bookdata.publishdate"></span></div>
</div>
</template>

<script>
    export default {
      name: "BookDetail",
      data(){
        return{
          id:this.$route.params.id,
          bookdata:{bookname:'',author:'',price:0,publishdate:'',pagesize:0}
        }
      },
      created(){
        var self=this;
        this.$http.get("http://localhost:8083/book/"+this.id).then(res=>{
          self.bookdata.bookname=res.body.bookname;
          self.bookdata.author=res.body.author;
          self.bookdata.price=res.body.price;
          self.bookdata.publishdate=res.body.publishdate;
          self.bookdata.pagesize=res.body.pagesize;
        });
      },
      props:[

      ]
    }
</script>

<style scoped>
.bookdetail div{text-align: left;}
</style>