SpringBoot + MyBaits+ Vue + ElementUi简单的数据流传递(从0开始搭建)

置顶 muziiiii

已于 2024-05-10 08:07:48 修改

阅读量1.8k

点赞数 53

分类专栏： demo 文章标签： spring boot vue.js elementui mybatis

于 2024-05-04 01:46:11 首次发布

本文链接：https://blog.csdn.net/muziiiii/article/details/138424853

版权

demo 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文末有git 地址

创建目录

dataStream

前端创建

环境版本

进入目录 dataStream，打开终端输入命令

vue create client(client 为项目名称)

上述命令无法使用时需要全局安装，用如下命令进行安装

sudo npm install -g @vue/cli

回车确认，空格取消选项

等待项目创建完成

用vscode 打开项目文件夹

打开终端, 输入命令 npm run serve 运行项目

访问http://localhost:8080/ ，出现下图，则表示你的项目创建成功

初始Vue 文件的删除

删除文件

删除App.vue 中的文件至跟下图所示一样即可

<template>
  <div id="app">


  </div>
</template>

<script>


export default {
  name: 'App',
  components: {

  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

安装ElementUI，安装axios

ElementUI官方文档https://element.eleme.cn/#/zh-CN
终端分别输入命令

npm i element-ui -S
npm install axios

全局导入ElmentUI, 如下代码

main.js

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false
Vue.use(ElementUI);


new Vue({
  el: '#app',
  render: h => h(App),
}).$mount('#app')

创建一个自定义组件compoennts.TableComponent.Vue(这个组件名称需要为两个单词的组合否则会报错)

到ElementUI 官方寻找一个表格进行复制它的代码至我们创建的自定义组件中(这里我选择的是第一个)

https://element.eleme.cn/#/zh-CN/component/table

TableComponent.Vue

<template>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </template>

  <script>
    export default {
      data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
        }
      }
    }
  </script>

将我们自定义的组件引入和挂载到根组件下App.vue 中，并进行调用

<template>
  <div id="app">
    <!-- 调用 -->
    <TableComponent></TableComponent>
  </div>
</template>

<script>
// 引入
import TableComponent from './components/TableComponent.vue'
export default {
  name: 'App',
  components: {
    // 挂载
    TableComponent
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

npm run serve 运行看看，页面出现表格，即你的ElementUi 的引用，自定义组件的创建，代码都是正确的，给你一个respect。

后端创建

Idea 创建SpringBoot 项目，如图

点击next ，搜索web勾选Spring Web，如图，create

创建数据库

 create database dataStream;

创建一张表user

CREATE TABLE user (
    id INT PRIMARY KEY AUTO_INCREMENT,
    username VARCHAR(255),
    password VARCHAR(255)
);

添加依赖pom.xml

<!--MybaitsPlus-->
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis-spring</artifactId>
            <version>3.0.3</version>
        </dependency>
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.5.5</version>
            <exclusions>
                <exclusion>
                    <groupId>com.mybatis</groupId>
                    <artifactId>mybatis-spring</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
        <!-- 数据库连接池 -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid-spring-boot-starter</artifactId>
            <version>1.1.20</version>
        </dependency>
        <!--Mysql-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.29</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <optional>true</optional>
        </dependency>

配置application.properties 文件

spring.application.name=server
# ?????????
spring.datasource.type=com.alibaba.druid.pool.DruidDataSource
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
# dataStream 为数据库名字
spring.datasource.url=jdbc:mysql://localhost:3306/dataStream?useSSl=flase
# 数据库名称和密码
spring.datasource.username=
spring.datasource.password=
mybatis-plus.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl


# 热加载
spring.devtools.restart.enabled=true
# ??????
spring.devtools.restart.additional-paths=src/main/java
# ??classpath ????WEB?INF ?????????
spring.devtools.restart.exclude=static/**

创建文件com.lz.server.entity.User

package com.lz.server.entity;

public class User {
//    这里的属性和数据库一样
    private int id;
    private String username;

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    private String password;

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", username='" + username + '\'' +
                ", password='" + password + '\'' +
                '}';
    }
}

创建文件com.lz.server.mapper

package com.lz.server.mapper;

import com.lz.server.entity.User;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;

import java.util.List;

@Mapper
public interface UserMapper {
    //
    @Select("select * from user")
    public List<User> find();
}

在文件ServerApplication.java 中添加

@MapperScan("com.lz.server.mapper")

创建文件com.lz.server.controller.UserController

package com.lz.server.controller;

import com.lz.server.entity.User;
import com.lz.server.mapper.UserMapper;
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("/user")
    public List<User>  query(){
        List<User> list = userMapper.find();
        System.out.println(list);
        return list;
    }
}

添加5条数据到表中

INSERT INTO user (username, password) VALUES
    ('user1', 'pass1'),
    ('user2', 'pass2'),
    ('user3', 'pass3'),
    ('user4', 'pass4'),
    ('user5', 'pass5');

运行SpringBoot 项目

访问端口号localhost:8080/user，出现如下图所示即为成功

配置后端的端口，因为Vue 的默认端口和SpringBoot 的默认端口冲突

application.properties

server.port=8085

运行程序并查看

后端配置跨域

创建文件com.lz.server.config

package com.lz.server.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 CorsConfig {

    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        corsConfiguration.addExposedHeader("x-auth-token");
        corsConfiguration.addExposedHeader("access-control-allow-headers");
        corsConfiguration.addExposedHeader("access-control-allow-methods");
        corsConfiguration.addExposedHeader("access-control-allow-origin");
        corsConfiguration.addExposedHeader("access-control-max-age");
        corsConfiguration.addExposedHeader("X-Frame-Options");
        corsConfiguration.setAllowCredentials(false);
        corsConfiguration.setMaxAge(3600L);
        return corsConfiguration;
    }

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", buildConfig());
        return new CorsFilter(source);
    }
}

前端全局配置axios main. js 中添加

import axios from 'axios'

axios.defaults.baseURL = "http://localhost:8085"
Vue.prototype.$http = axios

获取后端数据并将之前写的死数据改为活数据TableComponent.vue

<template>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="id"
        width="180">
      </el-table-column>
      <el-table-column
        prop="username"
        label="username"
        width="180">
      </el-table-column>
      <el-table-column
        prop="username"
        label="password">
      </el-table-column>
    </el-table>
  </template>

  <script>
    export default {
      methods: {},
      created:function(){
      this.$http.get("http://localhost:8085/user").then((response)=>{
      console.log(response.data);
      this.tableData = response.data
    })
  },
      data() {
        return {
          tableData: []
        }
      },
      
    }
  </script>