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

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/mike-mei/p/13597036.html