springBoot+vue初始化前后端分離項目搭建（含數據庫）

所學材料數據庫資源

# Host: 127.0.0.1  (Version: 5.5.53)
# Date: 2020-09-01 16:46:58
# Generator: MySQL-Front 5.3  (Build 4.13)

/*!40101 SET NAMES utf8 */;

#
# Source for table "book"
#

DROP TABLE IF EXISTS `book`;
CREATE TABLE `book` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `name` varchar(20) DEFAULT NULL,
  `author` varchar(20) DEFAULT NULL,
  `publish` varchar(20) DEFAULT NULL,
  `pages` int(10) DEFAULT NULL,
  `price` float(10,2) DEFAULT NULL,
  `bookcaseid` int(10) DEFAULT NULL,
  `abled` int(10) DEFAULT NULL,
  PRIMARY KEY (`id`),
  KEY `FK_ieh6qsxp6q7oydadktc9oc8t2` (`bookcaseid`)
) ENGINE=MyISAM AUTO_INCREMENT=15 DEFAULT CHARSET=utf8;

#
# Data for table "book"
#

/*!40000 ALTER TABLE `book` DISABLE KEYS */;
INSERT INTO `book` VALUES (1,'解憂雜貨店','東野圭吾','電子工業出版社',102,27.30,9,1),(2,'追風箏的人','卡勒德·胡賽尼','中信出版社',330,26.00,1,1),(3,'人間失格','太宰治','作家出版社',150,17.30,1,1),(4,'這就是二十四節氣','高春香','電子工業出版社',220,59.00,3,1),(5,'白夜行','東野圭吾','南海出版公司',300,27.30,4,1),(6,'擺渡人','克萊兒·麥克福爾','百花洲文藝出版社',225,22.80,1,1),(7,'暖暖心繪本','米攔弗特畢','湖南少兒出版社',168,131.60,5,1),(8,'天才在左瘋子在右','高銘','北京聯合出版公司',330,27.50,6,1),(9,'我們仨','楊絳','生活.讀書.新知三聯書店',89,17.20,7,1),(10,'活着','余華','作家出版社',100,100.00,6,1),(11,'水滸傳','施耐庵','三聯出版社',300,50.00,1,1),(12,'三國演義','羅貫中','三聯出版社',300,50.00,2,1),(13,'紅樓夢','曹雪芹','三聯出版社',300,50.00,5,1),(14,'西游記','吳承恩','三聯出版社',300,60.00,3,1);
/*!40000 ALTER TABLE `book` ENABLE KEYS */;

 

vue前端配置

查看需要安裝好nodejs和npm,然后輸入下面的cmd命令查看是否安裝好

（我看到一篇博客上說nodejs於vue相當於jvm於java，我不知道這個比喻是不是恰當）

 

 版本出現，說明已經安裝好了，

 還有一個vue-cli，vue腳手架 我之前已經安裝好了，下面的命名行

 

進入我們的工作目錄，使用腳手架安裝項目

vue init webpack vuetest

 

 

 

 出現命令，參考

 

 完成后效果

 

 

 

運行項目 npm run dev

瀏覽器打開：localhost:8080，即可看到vue項目

 

 

 vue目錄

 

 這個圖挺不錯的，講述vue入口，啟動的順序

 

數據展示頁面 可以與后端交互

在src下的components創建Book.vue

 

 

<template>
  <div>
      <table>
        <tr>
            <td>編號</td>
            <td>圖書名稱</td>
            <td>作者</td>
        </tr>
    </table>
    {{msg}}
  </div>
</template>

<script>
    export default {
        name: "book",
        data(){
          return{
            msg:'Hello Vue'
          }
        }
    }
</script>

<style scoped>

</style>

 

 配置路由訪問book

 

 瀏覽器輸入顯示

book.vue加強

<template>
  <div>
      <table>
        <tr>
            <td>編號</td>
            <td>圖書名稱</td>
            <td>作者</td>
        </tr>
        <tr v-for="item in books">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.author}}</td>
        </tr>
    </table>
    {{msg}}
  </div>
</template>

<script>
    export default {
        name: "book",
        data(){
          return{
            msg:'Hello Vue',
            books:[
              {
                  id: 1,
                  name:'Java零基礎實戰',
                  author:'寧楠'
              },
              {
                  id: 2,
                  name:'Vue零基礎實戰',
                  author:'張三'
              },
              {
                  id: 3,
                  name:'Spring Boot零基礎實戰',
                  author:'小明'
              }
            ]
          }
        }
    }
</script>

<style scoped>

</style>

 

 

 

創建后端springBoot應用

快速構建springBoot項目

 

 

 

 勾選以上幾條，快速構建完成

配置application.yml

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/library?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai
    username: root
    password: root
    driver-class-name:  com.mysql.cj.jdbc.Driver
  jpa:
    show-sql: true
    properties:
      hibernate:
        format_sql: true
server:
  port: 8181

 

然后創建實體類

 

 上面應該大寫

 

 

package com.southwind.springboottest.entity;

import lombok.Data;

import javax.persistence.Entity;
import javax.persistence.Id;

/**
 * @author
 * @create-date 2020/9/1 0001 15:23
 */

@Entity
@Data
public class Book {
    @Id
    private Integer id;
    private String name;
    private String author;
}

創建BookReposipory 繼承 JpaReposipory

 

 測試下JPA

 

 

package com.southwind.springboottest.repository;

import org.junit.jupiter.api.Test;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;

import static org.junit.jupiter.api.Assertions.*;

/**
 * @author
 * @create-date 2020/9/1 0001 15:33
 */
@SpringBootTest //首先加一個這樣一個注解
class BookRepositoryTest {

    @Autowired
    private BookRepository bookRepository;//測試需要注入

    @Test
    void findAll(){
        System.out.println(bookRepository.findAll());
    }
}

測試結果

 

 寫controller層外部可以調用內部的sql語句

 

 

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.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

/**
 * @author
 * @create-date 2020/9/1 0001 15:51
 */
@RestController //全部基於rest
@RequestMapping("/book")
public class BookHandler {
    @Autowired
    private BookRepository bookRepository;

    @GetMapping("/findAll")
    public List<Book> findAll(){
        return bookRepository.findAll();
    }
}

 

 

前后端對接 axios 跨域

安裝axios

在命令行內輸入
npm install axios -S
進行安裝。
安裝完成后在main.js中使用axios，在main.js中加入以下代碼
import axios from 'axios'
Vue.prototype.$axios = axios

 

book.vue加上發送后端請求

 

<template>
  <div>
      <table>
        <tr>
            <td>編號</td>
            <td>圖書名稱</td>
            <td>作者</td>
        </tr>
        <tr v-for="item in books">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.author}}</td>
        </tr>
    </table>
    {{msg}}
  </div>
</template>

<script>
    export default {
        name: "book",
        data(){
          return{
            msg:'Hello Vue',
            books:[
              {
                  id: 1,
                  name:'Java零基礎實戰',
                  author:'寧楠'
              },
              {
                  id: 2,
                  name:'Vue零基礎實戰',
                  author:'張三'
              },
              {
                  id: 3,
                  name:'Spring Boot零基礎實戰',
                  author:'小明'
              }
            ]
          }
        },
        created(){
          this.$axios.get('http://localhost:8181/book/findAll').then(
            function(resp){
                console.log(resp);
            }
          )
        }
    }
</script>

<style scoped>

</style>

 

 

 

 有跨域問題

后端配置CrosConfig

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;

/**
 * @author
 * @create-date 2020/9/1 0001 16:27
 */
@Configuration//自動配置
public class CrosConfig implements WebMvcConfigurer { //實現這個接口

    //重新addCorsMappings方法
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")      //添加映射路徑，“/**”表示對所有的路徑實行全局跨域訪問權限的設置
                .allowedOrigins("*")            //開放哪些ip、端口、域名的訪問權限
                .allowedMethods( "GET", "POST", "PUT", "OPTIONS", "DELETE")        //開放哪些Http方法，允許跨域訪問
                .allowCredentials(true)         //是否允許發送Cookie信息
                .maxAge(3600)
                .allowedHeaders("*");            //允許HTTP請求中的攜帶哪些Header信息
    }
}

界面顯示相關數據解決

然后response賦值過去

        created(){
          const _this = this;
          this.$axios.get('http://localhost:8181/book/findAll').then(
            function(resp){
                _this.books = resp.data;
            }
          )
        }

整體結果 調用數據庫

 

 

 資源地址

 https://download.csdn.net/download/m1195900241/12794021