学会Spring Boot+Vue前后端分离开发（1）之前后端搭建

学会Spring Boot+Vue前后端分离开发

说明：本文从   B站    上面学习的Springboot+Vue  一些过程  仅供学习使用，如有错误  可提出。

安装Node.js

https://nodejs.org/en/

 安装完：

安装cnpm:  淘宝镜像

  npm install -g cnpm --registry=https://registry.npm.taobao.org

安装vue-cli 3.0以上版本

npm install -g @vue/cli

说明：npm install -g vue-cli  这个命令下完的版本是2.9.6   很显然不适合我  当然关键是vue-cli3.0以上可以进行vue ui

这个界面是我想要的   也是该视频里面用到的。 

 导入到IDEA中 （import）

idea记得下一个Vue.js插件

前端开发部分：

创建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>


     </div>
 </template>

 <script>
     export default {
         name :"Book",
         data(){
             return{

                 books:[
                     {
                         id:1,
                         name:'Java零基础实战',
                         author:'宁楠'
                     },
                     {
                         id:2,
                         name:'JVue零基础实战',
                         author:'李超'
                     },
                     {
                         id:3,
                         name:'Springboot零基础实战',
                         author:'大仙'
                     }
                 ]
             }

         },
          created() {
              const _this = this
                  // axios.get('http://localhost:8181/book/findAll').then(function (resp) {
                  //     _this.books=resp.data
              this.$axios.get('http://localhost:8181/book/findAll ').then(function (resp) {
                 _this.books = resp.data
                  alert("123")
              })
          }
     }
 </script>

 <style scoped>

 </style>

 其中 跨域问题和出现的axios未定义 见该文：点这

后端：

entity-》Book   其用的是JPA  

package com.lin.springbootvuetest.entity;

import lombok.Data;

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

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

repository-》BookRepository （就是DAO层）

package com.lin.springbootvuetest.repository;

import com.lin.springbootvuetest.entity.Book;
import org.springframework.data.jpa.repository.JpaRepository;

public interface BookRepository  extends JpaRepository<Book, Integer> {
}

controller-》BookHandler

package com.lin.springbootvuetest.controller;

import com.lin.springbootvuetest.entity.Book;
import com.lin.springbootvuetest.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 javax.annotation.Resource;
import java.util.List;

@RestController
@RequestMapping("/book")
public class BookHandler {

    @Resource
    private BookRepository bookRepository;

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

    }

}

config -》CrosConfig(解决跨域问题）

package com.lin.springbootvuetest.config;

import org.springframework.beans.factory.annotation.Configurable;
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 {

    //解决跨域问题
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS")
                .allowCredentials(true)
                .maxAge(3600)
                .allowedHeaders("*");
    }
}

测试：使用go to 会方便些

package com.lin.springbootvuetest.repository;

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

import javax.annotation.Resource;

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

@SpringBootTest
class BookRepositoryTest {

    @Autowired
    private BookRepository bookRepository;
    @Test
    void findAll(){
        System.out.println(bookRepository.findAll());


    }


}

运行：返回Json

 前后端整合：

 至此  简单的前后端分离完成了~

本文地址：https://blog.csdn.net/weixin_40924974/article/details/107587920