学会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......
说明:本文从 B站 上面学习的Springboot+Vue 一些过程 仅供学习使用,如有错误 可提出。
安装Node.js
安装完:
安装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
下一篇: 花菜产地在哪里