devbox
数据科学创新者
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

快速上手Vue+SpringBoot+Element UI+Mybatis-PLUS+Echarts_前后端springboot+vue+element 图表

作者：数据科学创新者 | 2024-02-03 18:12:50

赞

踩

前后端springboot+vue+element 图表
  • 创建Vue工程
  • 安装Element UI、axios插件
  • 安装echarts
cnpm install echarts@4.9.0 --save

  • 1

main.js中引入

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

  • 1
  • 2

echarts模板文件，需要不同的图去Echarts官网

<template>
    <div id="myChart" :style="{width: '800px', height: '600px'}"></div>
</template>
<script>
    export default {
        name: 'Echarts',
        mounted(){
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById('myChart'))
            // 绘制图表
            myChart.setOption({
                title: {
                    text: '水果销量统计',
                    left: 'center',
                    top: 20,
                    textStyle: {
                        color: '#555555'
                    }
                },
                tooltip: {},
                xAxis: {
                    data: [
                        "苹果",
                        "香蕉",
                        "橘子",
                        "火龙果",
                        "葡萄",
                        "西瓜"
                    ]
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: [
                        {
                            value: 333,
                            itemStyle: {
                                color: "#3fb1e3"
                            }
                        },
                        {
                            value: 133,
                            itemStyle: {
                                color: "#c4ebad"
                            }
                        },
                        {
                            value: 99,
                            itemStyle: {
                                color: "#c4ebad"
                            }
                        },
                        {
                            value: 222,
                            itemStyle: {
                                color: "#6be6c1"
                            }
                        },
                        {
                            value: 399,
                            itemStyle: {
                                color: "#3fb1e3"
                            }
                        },
                        {
                            value: 123,
                            itemStyle: {
                                color: "#c4ebad"
                            }
                        }
                    ]
                }]
            });
        }
    }
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77

Element UI 表格嵌入图片

<template slot-scope="scope">
    <img :src="scope.row.icon" style="height: 70px"/>
</template>

  • 1
  • 2
  • 3

Vue表单的数据校验

<template>
    <el-form ref="fruitRules" :model="fruit" :rules="rules" label-width="80px" class="demo-ruleForm" style="width: 600px">
        <el-form-item label="名称" prop="name">
            <el-input v-model="fruit.name"></el-input>
        </el-form-item>
        <el-form-item label="销量" prop="sale">
            <el-input v-model.number="fruit.sale"></el-input>
        </el-form-item>
        <el-form-item label="图片" prop="icon">
            <el-input v-model="fruit.icon"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit('fruitRules')">立即创建</el-button>
            <el-button>取消</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    export default {
        name: "Add",
        data() {
            return {
                fruit: {
                    name: '',
                    sale: '',
                    icon: ''
                },
                rules:{
                    name:[
                        { required: true, message: '请输入水果名称', trigger: 'blur' }
                    ],
                    sale:[
                        { required: true, message: '请输入销量', trigger: 'blur' },
                        { type: 'number', message: '销量必须为数字值'}
                    ],
                    icon:[
                        { required: true, message: '请输入图片链接', trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            onSubmit(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let _this = this
                        axios.post('http://localhost:8181/fruit/add',this.fruit).then(function (response) {
                            if(response.data){
                                _this.$alert(_this.fruit.name+'添加成功！', '添加数据', {
                                    confirmButtonText: '确定',
                                    callback: action => {
                                        //跳转到/table
                                        _this.$router.push('/table')
                                    }
                                });
                            }
                        })
                    }
                });
            }
        }
    }
</script>

<style scoped>

</style>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68

Vue的登录功能实现

<template>
    <div class="login-wrap">
        <el-form class="login-container" ref="loginFormRef" :model="loginForm">
            <h1 class="title">用户登陆</h1>
            <el-form-item label="">
                <el-input type="text"  placeholder="用户账号" v-model="loginForm.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="">
                <el-input type="text"  placeholder="用户密码" v-model="loginForm.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
                <template slot-scope="scope">
                    <el-button type="primary" @click="doLogin()" style="width: 100%;">用户登录</el-button>
                    <!-- <el-button style="width: 48%;" @click="gotoRegister" >用户注册</el-button> -->
                </template>
            </el-form-item>
            <el-row style="text-align: center;">

                <el-link @click="gotoRegister()">用户注册</el-link>
                <el-link>忘记密码</el-link>

            </el-row>
        </el-form>
    </div>
</template>

<script>
    export default {
        data: function () {
            return {
                loginForm: {
					username: '',
					password: '',
                  } 
            }
        },
		
        methods: {
            gotoRegister: function () {
                this.$router.push({
                    name: 'register'
                });
            },
			doLogin(){
			            this.$refs.loginFormRef.validate(async valid => {
			                if( !valid ) return;
			                const{data:res} = await this.axios.post("http://106.14.223.42:8181/user/login",this.loginForm)
			                if( res == "ok" ){
			                    this.$message.success("操作成功")
			                    this.$router.push({path:"/index"});
			                }else{
			                    this.$message.error("操作失败")
			                }
			            })
			        }
            }
        }

    
</script>
//scoped="scoped" 表示样式仅仅规范当前VUE
<style scoped="scoped">
    .login-wrap {
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        padding-top: 10%;
        background-repeat: no-repeat;
        background-position: center right;
        background-size: 100%;
    }

    .login-container {
        border-radius: 10px;
        margin: 0px auto;
        width: 350px;
        padding: 30px 35px 15px 35px;
        background: #fff;
        border: 1px solid #eaeaea;
        text-align: left;
        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
    }

    .title {
        margin: 0px auto 40px auto;
        text-align: center;
        color: #505458;
    }
</style>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89

Vue的页面显示

<template>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column fixed prop="id" label="习题id" width="150">
    </el-table-column>
    <el-table-column prop="name" label="习题名称" width="200">
    </el-table-column>
    <el-table-column prop="chapter" label="章节" width="200"> </el-table-column>
    <el-table-column prop="knowledge" label="知识点" width="200">
    </el-table-column>
    <el-table-column prop="difficulty" label="难度" width="150"> </el-table-column>
    <el-table-column fixed="right" label="操作" width="200">
      <template slot-scope="scope">
        <el-button @click="updateExercise(scope.row)" type="text" size="mesdium"
          >修改</el-button
        >
        <el-button @click="deleteExercise(scope.row)" type="text" size="medium"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  methods: {
    updateExercise(row) {
      this.$router.push('/updateExercise?id='+row.id)
    },
    deleteExercise(row) {
      let _this=this
      this.$confirm('是否确定删除'+row.name+'?','删除数据',{
      	confirmButtonText: '确定',
      	cancelButtonText: '取消',
      	type: 'warning'
      }).then(()=>{
      	axios.delete('http://106.14.223.42:8181/exercise/delete/'+row.id).then(function (response){
      		if(response.data){
      			_this.$alert(row.name+'删除成功!', '删除数据',{
      				confirmButtonText: '确定',
      				callback: action =>{
      					location.reload()
      				}
      			});
      		}
      	})
      }).catch(()=>{
      	
      });
    },
  },
  created(){
  	let _this=this;
  	axios.get("http://106.14.223.42:8181/exercise/list").then(function (response){
  		_this.tableData=response.data
  	})
  },

  data() {
    return {
      tableData: null,
    };
  },
};
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65

Vue的数据修改

<template>
  <div>
      <h2>修改习题</h2>
    <el-form style="width: 60%" ref="form" :model="form" label-width="120px">
      <el-form-item label="习题名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="所属章节">
        <el-select v-model="form.chapter" placeholder="请选择章节">
          <el-option label="章节一" value="Html"></el-option>
          <el-option label="章节二" value="CSS"></el-option>
          <el-option label="章节三" value="JS"></el-option>
          <el-option label="章节四" value="vue"></el-option>
          <el-option label="章节五" value="element"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="考察知识点">
        <el-input v-model="form.knowledge"></el-input>
      </el-form-item>
      <el-form-item label="难度">
        <el-radio-group v-model="form.difficulty">
          <el-radio label="高"></el-radio>
          <el-radio label="中"></el-radio>
          <el-radio label="低"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="题型">
        <el-select v-model="form.type" placeholder="请选择题型">
          <el-option label="单选题" value="单选"></el-option>
          <el-option label="多选题" value="多选"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选项一">
        <el-input v-model="form.option1"></el-input>
      </el-form-item>
      <el-form-item label="选项二">
        <el-input v-model="form.option2"></el-input>
      </el-form-item>
      <el-form-item label="选项三">
        <el-input v-model="form.option3"></el-input>
      </el-form-item>
      <el-form-item label="选项四">
        <el-input v-model="form.option4"></el-input>
      </el-form-item>
       <el-form-item label="答案">
        <el-input v-model="form.answer"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit('form')">修改</el-button>
        <el-button>重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: "",
        chapter: "",
        knowledge: "",
        difficulty: "",
        type: "",
        option1: "",
        option2: "",
        option3: "",
        option4: "",
        answer:""
      },
    };
  },
  created(){
  	let id=this.$route.query.id
  	let _this=this
  	axios.get('http://106.14.223.42:8181/exercise/find/'+id).then(function (response){
  		_this.form = response.data
  	})
  },
  methods: {
    onSubmit(form) {
      this.$refs[form].validate((valid) => {
          if (valid) {
              let _this = this
              axios.put('http://106.14.223.42:8181/exercise/update',this.form).then(function (response) {
                  if(response.data){
                      _this.$alert(_this.form.name+'修改成功！', '修改数据', {
                          confirmButtonText: '确定',
                          callback: action => {
                              //跳转到/table
                              _this.$router.push('/exercise')
                          }
                      });
                  }
              })
          }
      });
    },
  },
};
</script>

<style>
h2{
    margin: 20px 120px;
}
</style>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109

pom.xml 导入 MBP 依赖

<dependency>
    <groupId>com.baomidou</groupId>
    <artifactId>mybatis-plus-boot-starter</artifactId>
    <version>3.4.2</version>
</dependency>

<dependency>
    <groupId>com.baomidou</groupId>
    <artifactId>mybatis-plus-generator</artifactId>
    <version>3.3.2</version>
</dependency>

<dependency>
    <groupId>org.apache.velocity</groupId>
    <artifactId>velocity</artifactId>
    <version>1.7</version>
</dependency>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

代码生成器

package com.southwind;

import com.baomidou.mybatisplus.annotation.DbType;
import com.baomidou.mybatisplus.generator.AutoGenerator;
import com.baomidou.mybatisplus.generator.config.DataSourceConfig;
import com.baomidou.mybatisplus.generator.config.GlobalConfig;
import com.baomidou.mybatisplus.generator.config.PackageConfig;
import com.baomidou.mybatisplus.generator.config.StrategyConfig;
import com.baomidou.mybatisplus.generator.config.rules.NamingStrategy;

public class GenerateTest {
    public static void main(String[] args) {
        //创建generator对象
        AutoGenerator autoGenerator = new AutoGenerator();
        //数据源
        DataSourceConfig dataSourceConfig = new DataSourceConfig();
        dataSourceConfig.setDbType(DbType.MYSQL);
        dataSourceConfig.setDriverName("com.mysql.cj.jdbc.Driver");
        dataSourceConfig.setUsername("root");
        dataSourceConfig.setPassword("123456");
        dataSourceConfig.setUrl("jdbc:mysql://localhost:3306/test11");
        autoGenerator.setDataSource(dataSourceConfig);
        //全局配置
        GlobalConfig globalConfig = new GlobalConfig();
        globalConfig.setOutputDir(System.getProperty("user.dir")+"/src/main/java");
        globalConfig.setAuthor("admin");
        globalConfig.setOpen(false);
        globalConfig.setServiceName("%sService");
        autoGenerator.setGlobalConfig(globalConfig);
        //包信息
        PackageConfig packageConfig = new PackageConfig();
        packageConfig.setParent("com.southwind");
        packageConfig.setEntity("entity");
        packageConfig.setMapper("mapper");
        packageConfig.setService("service");
        packageConfig.setServiceImpl("service.impl");
        packageConfig.setController("controller");
        autoGenerator.setPackageInfo(packageConfig);
        //策略配置
        StrategyConfig strategyConfig = new StrategyConfig();
        strategyConfig.setInclude("fruit");
        strategyConfig.setNaming(NamingStrategy.underline_to_camel);
        strategyConfig.setColumnNaming(NamingStrategy.underline_to_camel);
        strategyConfig.setEntityLombokModel(true);
        autoGenerator.setStrategy(strategyConfig);
        //运行
        autoGenerator.execute();
    }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49

application.yml

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/test11
    username: root
    password: 123456
    driver-class-name: com.mysql.cj.jdbc.Driver
mybatis-plus:
  configuration:
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
  mapper-locations: classpath:com/southwind/mapper/xml/*.xml
server:
  port: 8181

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

跨域问题的解决方案

package com.southwind.configuration;

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 CrosConfiguration implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOriginPatterns("*")
                .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS")
                .allowCredentials(true)
                .maxAge(3600)
                .allowedHeaders("*");
    }

}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号