Springboot+Vue 前后端分离简单演示

首先设计数据库设计一个简单地数据库，目的是为了测试前后端数据交互。

 接着利用代码生成器，自动生成文件目录结构并整合Mybatis-plus。

代码生成器步骤请参考这篇文章 Mybatis-Plus 代码生成器。

生成的目录结构如下

 在控制器中写接口。

@RequestMapping("/dong")
@Api(tags = "测试")
public class DongController {

    @Autowired
    private DongService dongService;

    //获取所有对象
    @GetMapping("/getDongList")
    @ApiOperation("获取所有测试对象")
    public CommonResult getDongList(){
        List<Dong> dongUser=dongService.getAll();
        return CommonResult.success(dongUser);
    }
}

编写服务接口和接口实现类

// 服务接口
public interface DongService extends IService<Dong> {

     List<Dong> getAll();
}

// 服务接口的实现类
@Service
public class DongServiceImpl extends ServiceImpl<DongMapper, Dong> implements DongService {

    @Autowired
    private DongMapper dongMapper;

    @Override
    public List<Dong> getAll() {
        return dongMapper.selectList(null); //返回表的所有数据
    }
}

到这里，后端已经做好，接下来写前端。

首先定义与后端对接的端口号，这里是8080，后端端口也要设置为8080

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  BASE_API: '"http://localhost:8080"'
})

在api中定义后端接口

export function getDongList() {
  return request({
    url:'/dong/getDongList',
    method:'get'
  })
}

创建test.vue页面

<template>
  <div>
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      border
      stripe
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>

      <el-table-column
        prop="id"
        label="序号"
        width="120">
      </el-table-column>

      <el-table-column
        prop="name"
        label="姓名"
        show-overflow-tooltip>
      </el-table-column>

      <el-table-column
        prop="age"
        label="年龄"
        show-overflow-tooltip>
      </el-table-column>

      <el-table-column
        prop="high"
        label="身高">
        show-overflow-tooltip>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {getDongList} from "@/api/dong";
export default {
  name: "test",
  data(){
    return{
      tableData:[]
    }
  },

  created() {
    this.getDongList()
  },

  methods:{
    getDongList(){
      getDongList()
          .then(result => {
              this.tableData = result.data
          });
    }
  }
}
</script>

<style scoped>

</style>

接着同时运行前后端项目，得到如图所示界面效果