vue+spring boot前后端分离 vue和springboot前后端分离

Spring Boot+Vue前后端分离开发笔记①（b站 楠哥教你学Java P1）

• 前言
• 前端

• vue ui创建项目
• 创建Language.vue
• 在router的main.js处引入Language.vue文件
• 添加插件：axios
• Language.vue文件添加代码：

• 后端

• 依赖选择
• yml格式
• 实体类
• 持久层repository(继承JpaRepository，相当于Dao类)
• 测试
• 控制层

• 跨域问题的解决（后端）：

• 项目运行

前言

首先

1. 需要安装好nodejs，并且配置好环境变量，然后安装vue-cli。
2. 需要用到 IDEA，安装好MySql

前端

---

vue ui创建项目

命令行窗口输入：vue ui（注意在你想要创建项目的位置上，如我的：D:\Program\web-FrontEnd）

---

进入图形界面创建项目

使用 IDEA 打开项目

---

创建Language.vue

在views文件夹处创建vue文件

---

在router的main.js处引入Language.vue文件

---

添加path：

---

添加插件：axios

终端terminal处输入语句：vue add axios，自动添加plugins文件夹

---

Language.vue文件添加代码：

---

后端

IDEA创建新程序

（网址：https://start.aliyun.com/）

---

依赖选择

选上这四个

：lombok、Spring Web、Spring Data JPA、MySql Driver

---

yml格式

将resources的application.properties文件删去，使用application.yml格式

spring:
  datasource:
    url: jdbc:mysql://127.0.0.1:3306/sakila?useUnicode=true&characterEncoding=UTF-8&useSSL=false&serverTimezone=UTC
    //sakila为我的数据库名
    driver-class-name: com.mysql.cj.jdbc.Driver
    username: root
    password: 123456
  jpa:
    show-sql: true
    properties:
      hidernate:
        format_sql: true
server:
  port: 8181

---

实体类

创建名为entity的package

---

在entity处创建Language类

1. 加入代码 @Entity，使类与数据库的表绑定，表名与类名的映射关系
2. 加入代码@Data，自动生成get、set方法
3. 写属性的对应，如id @Id

package com.linsanity.springboottest.entity;

import lombok.Data;

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

@Entity
@Data
public class Language {
    @Id
    private Integer languageId;
    private String name;
}

---

持久层repository(继承JpaRepository，相当于Dao类)

创建repository的包，然后创建名为LanguageRepository类，选择接口

---

方法继承JpaRepository，泛型的第一个是实体类类型，第二个是主键的类型

package com.linsanity.springboottest.repository;

import com.linsanity.springboottest.entity.Language;
import org.springframework.data.jpa.repository.JpaRepository;

public interface LanguageRepository extends JpaRepository<Language,Integer> {
}

---

测试

然后测一下这个能不能用，使用单元测试
在接口的右键选择goto，test，create new test，在test那就会自动生成一个test类

@SpringBootTest
class SpringboottestApplicationTests {
    @Autowired
    private LanguageRepository languageRepository;

    @Test
    void findAll(){

            System.out.println(languageRepository.findAll());

    }


}

运行就可以将数据库里的数据显示在IDEA

---

控制层

添加controller包，在control下创建LanguageHandler类

package com.linsanity.springboottest.controller;

import com.linsanity.springboottest.entity.Language;
import com.linsanity.springboottest.repository.LanguageRepository;
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;

@RestController
@RequestMapping("/language")
public class LanguageHandler
{
    @Autowired
    private LanguageRepository languageRepository;

    @GetMapping("/findAll")
     public List<Language> findAll(){
        return languageRepository.findAll();
     }
}

---

跨域问题的解决（后端）：

创建config包

创建CrosConfig类

---

代码：

@Configuration
public class CrosConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET","HEAF","POST","PUT","DELETE")
                .allowCredentials(true)
                .maxAge(3600)
                .allowedHeaders("*");
    }
}

---

项目运行

将项目运行起来，就可以把前后端的数据连接起来了！