SpringBoot+Vue前后端分离的 HelloWorld案例
文章目录前言前台页面部分User.vue后台部分yml 文件pom.xmljava 类CorsConfigUserUserRepositoryUserControllerSpringbootVueDemoApplication案例测试user 表的信息启动步骤前言关于 Vue 项目的创建，请参考：Vue UI 创建并运行前端项目idea 导入 Vue 项目并运行（超级详细步骤）Vue项...
·
文章目录
前言
关于 Vue 项目的创建，请参考：
前台页面部分
当您参考完这前面的 3 篇博客，里边的 User.vue 文件的内容，和这次练习的内容相差不大。只是做了些许更改。
User.vue
<template>
<div>
<table>
<tr>
<th>编号</th>
<th>姓名</th>
<th>生日</th>
<th>备注</th>
</tr>
<tr v-for = "user in users">
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.birthday}}</td>
<td>{{user.note}}</td>
</tr>
</table>
</div>
</template>
<script>
// vue add axios 先增加插件，使用命令行操作
// 导入
import axios from 'axios'
export default {
data () {
return {
users: [
{
id: '1001',
name: '小冯',
birthday: '2020-02-24',
note: '太帅了'
},
{
id: '1002',
name: '小王',
birthday: '2019-03-23',
note: '漂亮'
}
]
}
},
created () {
// 将当前对象赋值给 _this
const _this = this;
// 发出请求：这里的 URL 是 SpringBoot项目的一个可用路径
axios.get('http://localhost:8088/user/findAll').then(function (resp) {
// 响应结果：将返回的数据赋值给 users 这个变量
_this.users = resp.data
})
}
}
</script>
<style scoped>
table {
border: 1px solid red;
color: forestgreen;
background-color: burlywood;
}
</style>
后台部分
yml 文件
spring:
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://localhost:3306/vue?serverTimezone=UTC
username: root
password: root
jpa:
show-sql: true
properties:
hibernate:
format_sql: true
server:
port: 8088
pom.xml
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.2.4.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>org.feng</groupId>
<artifactId>springboot_vue_demo</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>springboot_vue_demo</name>
<description>Demo project for Spring Boot</description>
<properties>
<java.version>1.8</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
<exclusions>
<exclusion>
<groupId>org.junit.vintage</groupId>
<artifactId>junit-vintage-engine</artifactId>
</exclusion>
</exclusions>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
java 类
CorsConfig
package org.feng.config;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
/**
* Created by Feng on 2020/3/4 16:40
* CurrentProject's name is springboot_vue_demo
* 解决跨域问题
* @author Feng
*/
@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("GET", "POST", "PUT", "DELETE", "HEAD")
.allowCredentials(true)
.maxAge(3600)
.allowedHeaders("*");
}
}
User
package org.feng.entity;
import lombok.Data;
import javax.persistence.Entity;
import javax.persistence.Id;
import java.time.LocalDate;
/**
* Created by Feng on 2020/3/4 14:01
* CurrentProject's name is springboot_vue_demo
* 实体类
* @author Feng
*/
@Entity
@Data
public class User {
@Id
private Integer id;
private String name;
private LocalDate birthday;
private String note;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public LocalDate getBirthday() {
return birthday;
}
public void setBirthday(LocalDate birthday) {
this.birthday = birthday;
}
public String getNote() {
return note;
}
public void setNote(String note) {
this.note = note;
}
}
UserRepository
package org.feng.repository;
import org.feng.entity.User;
import org.springframework.data.jpa.repository.JpaRepository;
/**
* Created by Feng on 2020/3/4 14:19
* CurrentProject's name is springboot_vue_demo
* @author Feng
*/
public interface UserRepository extends JpaRepository<User, Integer> {
}
UserController
package org.feng.controller;
import org.feng.entity.User;
import org.feng.repository.UserRepository;
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 java.util.List;
/**
* Created by Feng on 2020/3/4 14:31
* CurrentProject's name is springboot_vue_demo
* @author Feng
*/
@RestController
@RequestMapping("/user")
public class UserController {
private final UserRepository userRepository;
@Autowired
public UserController(UserRepository userRepository) {
this.userRepository = userRepository;
}
@GetMapping("/findAll")
public List<User> findAll(){
return userRepository.findAll();
}
}
SpringbootVueDemoApplication
package org.feng;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class SpringbootVueDemoApplication {
public static void main(String[] args) {
SpringApplication.run(SpringbootVueDemoApplication.class, args);
}
}
案例测试
user 表的信息
启动步骤
先启动 Vue 项目；
启动 SpringBoot 项目；
直接运行。
然后是访问 User 页面，查看结果。
至此，一个前后端分离的 HelloWorld就完成了！
前往低代码交流专区
更多推荐
2
0- 0
已为社区贡献3条内容
所有评论(0)