欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-09 10:26:01
学会Spring Boot+Vue前后端分离开发说明:本文从 B站 上面学习的Springboot+Vue 一些过程 仅供学习使用,如有错误 可提出。安装Node.jshttps://nodejs.org/en/安装完:安装cnpm: 淘宝镜像npm install -g cnpm --registry=https://registry.npm.taobao.org安装vue-cli 3.0以上版本npm install -g @vue/c......

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

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

安装Node.js

https://nodejs.org/en/

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

 安装完:

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

安装cnpm:  淘宝镜像

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

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

安装vue-cli 3.0以上版本

npm install -g @vue/cli

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

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

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

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

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

 导入到IDEA中 (import)

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

idea记得下一个Vue.js插件

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

前端开发部分:

创建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未定义 见该文:点这

后端:

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

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 会方便些

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

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

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

 前后端整合:

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

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

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

相关标签: SpringBoot