前后端分离基础入门(2) 前端简单项目编写+后端简单项目编写

vue组件编写

在views文件夹下新创建一个组件Book.vue
由于还没有和后端进行交互,这里我们制造一点测试数据即可

data(){
    return {
        books:[
          {
            id: 1,
            name: 'java',
            author: 'jie'
          },
          {
            id: 2,
            name: 'vue',
            author: 'jiejie'
          },
          {
            id: 3,
            name: 'spring-boot',
            author: '张三'
          }
        ]
    }
  }

使用v-for获得并渲染数据

<template>
  <div>
    <table>
      <tr>
        <td>编号</td>
        <td>图书名称</td>
        <td>作者</td>
      </tr>
      <tr v-for="book in books">
        <td>{{book.id}}</td>
        <td>{{book.name}}</td>
        <td>{{book.author}}</td>
      </tr>
    </table>
  </div>
</template>

后端程序编写

整合mybatis

导入Mybatis依赖

<dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.2.0</version>
        </dependency>

创建实体类

package com.jie.springboottest.entity;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@NoArgsConstructor
@AllArgsConstructor
public class Book {
    private Integer id;
    private String name;
    private String author;
}

在测试类使用下面代码测试数据库能否正常连接

package com.jie.springboottest;

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.Connection;
import java.sql.SQLException;

@SpringBootTest
class SpringboottestApplicationTests {

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

}

编写接口

package com.jie.springboottest.mapper;

import com.jie.springboottest.entity.Book;
import org.apache.ibatis.annotations.Mapper;
import org.springframework.stereotype.Repository;

import java.util.List;
//@Mapper : 表示本类是一个 MyBatis 的 Mapper
@Mapper
@Repository
public interface BookMapper {
    List<Book> getBooks();
    Book getBookbyId(Integer id);
}

在resources文件夹下 创建mybatis/mapper文件夹 创建BookMapper.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.jie.springboottest.mapper.BookMapper">

    <select id="getBooks" resultType="Book">
       select * from book;
    </select>

    <select id="getBookbyId" resultType="Book" parameterType="int">
       select * from book where id = #{id};
    </select>

</mapper>

创建controller类

package com.jie.springboottest.controller;

import com.jie.springboottest.entity.Book;
import com.jie.springboottest.mapper.BookMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController
public class BookController {
    @Autowired
    BookMapper bookMapper;
    @GetMapping("getBooks")
    public List<Book> getBooks(){
        return bookMapper.getBooks();
    }
    @GetMapping("/getBook/{id}")
    public Book getBook(@PathVariable("id") Integer id){
        return bookMapper.getBookbyId(id);
    }
}

在启动类上加上扫描mapper

package com.jie.springboottest;

import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
@MapperScan("com.jie.springboottest.mapper")
public class SpringboottestApplication {

    public static void main(String[] args) {
        SpringApplication.run(SpringboottestApplication.class, args);
    }

}

启动项目测试能否获得数据

整合Mybatis成功