使用vue+springboot 完成前后端分离，实现查询数据库中的数据并展示

1.创建vue项目，创建springboot项目。

使用指令在黑窗口创建vue项目，执行指令

vue init webpack "项目名"

在创建项目的时候，选择安装路由，router，安装npm

然后还需要安装element-ui axios 以及 qs

npm install element-ui -S

npm install axios 

npm install qs

安装完成之后，在main.js中引入这三项

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios'
import qs from 'qs'

Vue.use(ElementUI)

Vue.prototype.$axios = axios.create({
  baseURL:'http://localhost:8083/',
  withCredentials:true
});
Vue.prototype.$qs = qs;

对于springboot项目 要引入依赖

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>

<dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
    <version>5.1.46</version>
    <scope>runtime</scope>
</dependency>
<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>druid</artifactId>
    <version>1.2.5</version>
</dependency>
<dependency>
    <groupId>com.baomidou</groupId>
    <artifactId>mybatis-plus-boot-starter</artifactId>
    <version>3.4.1</version>
</dependency>
<dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
    <optional>true</optional>
</dependency>

2.在vue 项目中创建一个新的vue组件，用来存放table表格

<template>
  <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      fixed
      prop="userid"
      label="id">
    </el-table-column>
    <el-table-column
      prop="username"
      label="姓名">
    </el-table-column>
    <el-table-column
      prop="userpwd"
      label="密码">
    </el-table-column>
    <el-table-column
      prop="salt"
      label="盐值">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">修改</el-button>
        <el-button type="text" size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

编写脚本，向后端发出axios请求，查询全部的用户数据

<script>
    export default {
      data() {
        return {
          tableData:[]
        }
      },
      methods: {
          showTable() {
            this.$axios({
              method: 'get',
              url: 'user/queryAll'
            }).then( result => {
              this.tableData = result.data.data
            })
          }
      },
      created() {
        this.showTable()
      }
    }
</script>

创建 HomePage组件，项目运行的时候，默认直接展示HomePage，并且将查询出的用户数据在HomePage中进行展示

<template>
  <el-container>
    <el-aside width="200px">
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        :router="true">
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>操作</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/showUser">查询全部</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-aside>
    <el-main>
      <router-view></router-view>
    </el-main>
  </el-container>
</template>

<script>
    export default {
        name: ""
    }
</script>

<style>
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>

3.编写springboot项目，创建一个配置文件，让前端发出的请求可以被后端接收，并且前端可以接收到后端返回的数据

package com.hyn.vueshiro.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class CrossConfig {
    @Bean
    public CorsFilter corsFilter() {
        final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        final CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.setAllowCredentials(true);
        corsConfiguration.addAllowedHeader("*");
        // 前端路径
        corsConfiguration.addAllowedOrigin("http://localhost:8080");
        corsConfiguration.addAllowedMethod("*");
        source.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsFilter(source);
    }
}