springboot+vue前后端分离项目入门（简单实现访问数据库数据）

实现简单数据交接

前端部分(vue)

1.控制台输入 vue ui,,,创建项目

2.idea打开vue项目

3.idea Terminal输入 nmp run serve 启动该工程

前后端分离图解：

 

前端：

 <template>//template下只能有一个根节点，即只能有一个div

<template>//template下只能有一个根节点，即只能有一个div
  <table>//创建表格
    <tr>
        <td>图书编号</td>
        <td>图书名字</td>
        <td>图书数量</td>
    </tr>
    <tr v-for="item in book">//遍历book数组（增强for循环）
      <td>{{item.bookID}}</td>
      <td>{{item.bookName}}</td>
      <td>{{item.bookCounts}}</td>
    </tr>
  </table>
</template>

<script>
export default {
  name: "Book",
  data(){
    return{
      book:[
        {
          bookCounts:5,//假数据，可以用于测试
          bookID:1,
          bookName:'java'
        },
      ]
    }
  },
  created() {
    const that=this
    axios.get('http://localhost:8181/books').then(function (resp) {
      that.book=resp.data
      console.log(resp)
  })
  }
}
</script>

<style scoped>

</style>

 

将book.vue配置到路由当中

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Book from '../views/Book.vue'  //引入book

Vue.use(VueRouter)
//配置映射
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '/book',
    component: Book
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

 

此时npm run serve访问前端页面，发现数据已经加载进去

后端：

连接数据库

编写配置文件application.ymal

 

spring:
  datasource:
    username: root
    password: 123456
    url: jdbc:mysql://localhost:3306/mybatis?useSSL=true&useUnicode=true&characterEncoding=UTF-8&serverTimezone=UTC
    driver-class-name: com.mysql.cj.jdbc.Driver
mybatis:
  type-aliases-package: com.zhao.pojo
  mapper-locations: classpath:mybatis/mapper/BooksMapper.xml
server:
  port: 8181//后端端口为8181

可在测试类中测试是否链接数据库成功

package com.zhao;

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

import javax.sql.DataSource;
import java.sql.SQLException;

@SpringBootTest
class ZhaoApplicationTests {

    @Autowired
    DataSource dataSource;
    @Test
    void contextLoads() throws SQLException {
        System.out.println(dataSource.getClass());
        System.out.println(dataSource.getConnection());
    }

}

创建实体类pojo

 

package com.zhao.pojo;


public class Books {
    private int bookID;
    private String bookName;
    private int bookCounts;

    public Books() {
    }

    public Books(int bookID, String bookName, int bookCounts) {
        this.bookID = bookID;
        this.bookName = bookName;
        this.bookCounts = bookCounts;
    }

    public int getBookID() {
        return bookID;
    }

    public void setBookID(int bookID) {
        this.bookID = bookID;
    }

    public String getBookName() {
        return bookName;
    }

    public void setBookName(String bookName) {
        this.bookName = bookName;
    }

    public int getBookCounts() {
        return bookCounts;
    }

    public void setBookCounts(int bookCounts) {
        this.bookCounts = bookCounts;
    }
}

接下来写mapper层（对数据库进行持久化操作）

在mapper接口中写方法用于对数据库进行操作

package com.zhao.Mapper;

import com.zhao.pojo.Books;
import org.apache.ibatis.annotations.Mapper;
import org.springframework.stereotype.Repository;

import java.util.List;

@Mapper
@Repository
public interface BooksMapper {
    List<Books> querryAllBooks();
}

接下来写mapper.xml

写在

 

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.zhao.Mapper.BooksMapper">
    <select id="querryAllBooks" resultType="Books">
        select * from Books ;
    </select>
</mapper>

控制层：

package com.zhao.Controller;

import com.zhao.Mapper.BooksMapper;
import com.zhao.pojo.Books;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@CrossOrigin
@RestController//返回数据而不是页面
@ResponseBody
public class BooksController {
    @Autowired
    private BooksMapper booksMapper;
    @GetMapping("/books")
    public List<Books> querryAllBooks(){
        List<Books> booksList=booksMapper.querryAllBooks();
        for (Books books : booksList) {
            System.out.println(books);
        }
        return booksMapper.querryAllBooks();
    }

}

访问localhost:8181 看数据是否显示

前后端交互：

前端：

<template>
  <table>
    <tr>
        <td>图书编号</td>
        <td>图书名字</td>
        <td>图书数量</td>
    </tr>
    <tr v-for="item in book">
      <td>{{item.bookID}}</td>
      <td>{{item.bookName}}</td>
      <td>{{item.bookCounts}}</td>
    </tr>
  </table>
</template>

<script>
export default {
  name: "Book",
  data(){
    return{
      book:[
        {
          bookCounts:5,
          bookID:1,
          bookName:'java'
        },
      ]
    }
  },
  created() { //访问后端页面并返回信息
    const that=this
    axios.get('http://localhost:8181/books').then(function (resp) {
      that.book=resp.data
      console.log(resp)//控制台输出测试
  })
  }
}
</script>

<style scoped>

</style>

此时发现无法获得数据(跨域问题)

需在后端配置

后端：

创建Config文件：

 

package com.zhao.Config;
//解决跨域问题
import org.springframework.context.annotation.Bean;
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 {
    @Bean
    public WebMvcConfigurer corsConfigurer(){
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")
                        .allowedHeaders("*")
                        .allowedMethods("*")
                        .allowedOrigins("*");
            }
        };
    }
}