开篇

当下前后端分离的趋势很明显，的确这也是很有必要的。前后端分离让前端专注于前端，后端专注于后端，而不是哪一方都要学习前后端。学习过JSP的都知道，前后端之前都是套模板，这会让项目很繁琐，而且也提高了项目的耦合性，不利于二次开发，所以现在来通过一个简单的demo来简单的体验一下前后端分离。

涉及技术

Vue
SprtingBoot
Mybatis-plus

准备数据

这里的数据我就使用Mybatis-plus官方提供样例的数据了。

CREATE DATABASE IF NOT EXISTS Company;

USE `Company`;

DROP TABLE IF EXISTS user;

CREATE TABLE user
(
	id BIGINT(20) NOT NULL COMMENT '主键ID',
	name VARCHAR(30) NULL DEFAULT NULL COMMENT '姓名',
	age INT(11) NULL DEFAULT NULL COMMENT '年龄',
	email VARCHAR(50) NULL DEFAULT NULL COMMENT '邮箱',
	PRIMARY KEY (id)
);

DELETE FROM user;

INSERT INTO user (id, name, age, email) VALUES
(1, 'Jone', 18, 'test1@baomidou.com'),
(2, 'Jack', 20, 'test2@baomidou.com'),
(3, 'Tom', 28, 'test3@baomidou.com'),
(4, 'Sandy', 21, 'test4@baomidou.com'),
(5, 'Billie', 24, 'test5@baomidou.com');

前端部分

前端就随便展示一下好了。

创建一个Vue的项目

在项目的views的文件夹下编写test.vue页面用来展示数据

<template>
  <div>
      <table>
          <tr>
              <td>主键ID</td>
              <td>姓名</td>
              <td>年龄</td>
              <td>邮箱</td>
          </tr>
          <tr v-for="item in user" :key="item.id">
              <td>{{item.id}}</td>
              <td>{{item.name}}</td>
              <td>{{item.age}}</td>
              <td>{{item.email}}</td>
          </tr>
      </table>
  </div>
</template>

<script>
export default {
    name: "test",
    data(){
        return{
            user: [{
                id : 1,
                name : 'yww',
                age : 10,
                email : '1141@qq.com'
            }]
        }
    },
}
</script>
<style>
</style>

前端开始主要注重页面，所以先用假数据。

编写路由，在router的文件下编写index.js文件

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
// 添加test的路由
  {
    path: '/test',
    name: 'Test',
    component: () => import('../views/test.vue')
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

在页面上添加路由跳转，编写App.vue

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/test">Test</router-link>
    </div>
    <router-view/>
  </div>
</template>

运行vue项目，查看http://localhost:8080/test是否出现假数据，出现则为成功

后端部分

首先先创建一个SpringBoot的项目，我的版本是2.4.2。

然后在pom.xml导入依赖

<dependencies>
        <!--web启动器-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!--数据库驱动-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <!--lombok-->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <!--mybatis-plus-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.4.1</version>
        </dependency>
        <!--单元测试-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
</dependencies>

创建一个实体类，该类在pojo的包下

package com.yww.springboottest.pojo;

import lombok.Data;

@Data
public class User {
    private Long id;
    private String name;
    private Integer age;
    private String email;
}

创建一个Mapper接口，该接口在Mapper的包下

package com.yww.springboottest.Mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.yww.springboottest.pojo.User;
import org.springframework.stereotype.Repository;

// 这里只需要基础BaseMapper接口，泛型放入实体类就好了
@Repository
public interface UserMapper extends BaseMapper<User> {}

配置SpringBoot，这里使用的配置文件是application.yaml

# 配置MySQL
spring:
  datasource:
    username: root
    password: password
    url: jdbc:mysql://localhost:3306/Company?userUnicode=true&characterEncoding=utf-8&serverTimezone=UTC
    driver-class-name: com.mysql.cj.jdbc.Driver
# 配置日志，以便更好查看结果 
mybatis-plus:
  configuration:
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
# 端口自定义，注意和Vue的端口分开，Vue使用了8080，这里就使用8081好了
server:
  port: 8081

扫描注册Mapper接口

package com.yww.springboottest;

import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
@MapperScan("com.yww.springboottest.Mapper")
public class SpringboottestApplication {
	public static void main(String[] args) {
		SpringApplication.run(SpringboottestApplication.class, args);
	}

查询测试

package com.yww.springboottest;

import com.yww.springboottest.Mapper.UserMapper;
import com.yww.springboottest.pojo.User;
import org.junit.jupiter.api.Test;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;

import java.util.List;

@SpringBootTest
class SpringboottestApplicationTests {
	@Autowired
	private UserMapper userMapper;

	@Test
	public void FindAll() {
		List<User> userList = userMapper.selectList(null);
		System.out.println(userList);
	}
}

得到结果

==>  Preparing: SELECT id,name,age,email FROM user
==> Parameters: 
<==    Columns: id, name, age, email
<==        Row: 1, Jone, 18, test1@baomidou.com
<==        Row: 2, Jack, 20, test2@baomidou.com
<==        Row: 3, Tom, 28, test3@baomidou.com
<==        Row: 4, Sandy, 21, test4@baomidou.com
<==        Row: 5, Billie, 24, test5@baomidou.com
<==        Row: 1327829723124920321, lili, 10, sssss
<==        Row: 1327839061415620609, lili, 10, sssss
<==        Row: 1327839257776095234, yww, 20, 1141950370@qq.com
<==      Total: 8

由此可以看到查询结果没有什么问题，然后就可以写接口返回数据了。

编写接口，该接口在Controller的包下

package com.yww.springboottest.Controller;

import com.yww.springboottest.Mapper.UserMapper;
import com.yww.springboottest.pojo.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController
public class UserController {
    @Autowired
    private UserMapper userMapper;

    @GetMapping("/findall")
    public List<User> FindAll() {
        return userMapper.selectList(null);
    }
}

访问http://localhost:8081/findall即可查询到查询返回的数据。

前后端交互

在vue项目里添加axios插件，用来请求接口
```
	vue add axios
```

修改test.vue里的数据

<template>
  <div>
      <table>
          <tr>
              <td>主键ID</td>
              <td>姓名</td>
              <td>年龄</td>
              <td>邮箱</td>
          </tr>
          <tr v-for="item in user" :key="item.id">
              <td>{{item.id}}</td>
              <td>{{item.name}}</td>
              <td>{{item.age}}</td>
              <td>{{item.email}}</td>
          </tr>
      </table>
  </div>
</template>

<script>
export default {
    name: "test",
    data(){
        return{
            user: []
        }
    },
    created() {
        //	请求端口数据，并将数据赋值给user数组
        axios.get('http://localhost:8081/findall').then(response => (this.user = response.data))
    }

}
</script>
<style>
</style>

在后端部分增加一个工具类，用于解决跨域问题（因为是不同端口的请求），该类在config包下

package com.yww.springboottest.config;

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("/**")
                .allowCredentials(false)
                .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")
                .allowedOrigins("*");
    }
}

然后访问前端项目的页面http://localhost:8080/test，就能看到后端查询并返回的数据了

结尾

这次是一个简单的demo，实际项目还要复杂很多，这个demo虽然简单，但是也是能让你简单了解一下前后端分离的开发流程。

目录

yw

前后端分离demo

开篇

涉及技术

准备数据

前端部分

后端部分

前后端交互

结尾