本文共 7293 字，大约阅读时间需要 24 分钟。

??????+??????? ????

????

?????SpringBoot+Vue??????????????????????????????????????????????????????????B?UP??????????????

????

[???????]

??????

1. ????

• ????

  npm install axios
  npm install element-ui -S
  npm install echarts --save

• ????

  import ElementUI from 'element-ui';
  import 'element-ui/lib/theme-chalk/index.css';
  Vue.use(ElementUI);
  import axios from 'axios';
  Vue.prototype.$axios = axios;
  import echarts from 'echarts';
  Vue.prototype.$echarts = echarts;

2. ????

• ???
  • ??????????????????
  • ?????????
  • ?????????
• ??

• ??

  export default {
    name: "Edit",
    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' }
          ]
        }
      }
    },
    created() {
      let id = this.$route.query.id;
      let _this = this;
      this.$axios.get('http://localhost:8081/fruit/find/' + id).then(function(response) {
        _this.fruit = response.data;
      });
    },
    methods: {
      onSubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let _this = this;
            this.$axios.put('http://localhost:8081/fruit/update', this.fruit).then(function(response) {
              if(response.data) {
                _this.$alert(_this.fruit.name + '?????', '????', {
                  confirmButtonText: '??',
                  callback: action => {
                    _this.$router.push('/table');
                  }
                });
              }
            });
          }
        });
      }
    }
  }

3. ???

• ???
  • ????????????
  • ?????????????
• ??

  fruitDelete(object) {
    let _this = this;
    this.$confirm('???????' + object.name + '?', '????', {
      confirmButtonText: '??',
      cancelButtonText: '??',
      type: 'warning'
    }).then(() => {
      this.$axios.delete('http://localhost:8081/fruit/delete/' + object.id).then(function(response) {
        if (response.data) {
          _this.$alert(object.name + '?????', '????', {
            confirmButtonText: '??',
            callback: action => {
              location.reload();
            }
          });
        }
      });
    }).catch(() => {
    });
  }

4. ???

• ???
  • ?????????
• ??

• ??

  export default {
    mounted() {
      let _this = this;
      this.$axios.get('http://localhost:8081/fruit/barVO').then(function(response) {
        let myChart = _this.$echarts.init(document.getElementById('myChart'));
        myChart.setOption({
          title: {
            text: 'XX??',
            left: 'center',
            top: 20,
            textStyle: { color: '#555555' }
          },
          tooltip: {},
          xAxis: {
            data: response.data.names
          },
          yAxis: {},
          series: [{
            name: '??',
            type: 'bar',
            data: response.data.values
          }]
        });
      });
    }
  }

??????

1. ????

• ??

  package com.lut.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("*");
    }
  }

2. ?????

• ????

  package com.lut;
  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) {
      AutoGenerator autoGenerator = new AutoGenerator();
      DataSourceConfig dataSourceConfig = new DataSourceConfig();
      dataSourceConfig.setDbType(DbType.MYSQL);
      dataSourceConfig.setDriverName("com.mysql.cj.jdbc.Driver");
      dataSourceConfig.setUsername("root");
      dataSourceConfig.setPassword("88888888");
      dataSourceConfig.setUrl("jdbc:mysql://localhost:3306/test");
      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.lut.fruit_java");
      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();
    }
  }

3. ????

• spring??

  spring:
    datasource:
      url: jdbc:mysql://localhost:3306/test?serverTimezone=GMT%2B8&useUnicode=true&characterEncoding=UTF-8
      username: root
      password: 88888888
      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: 8081

4. ????

• VO?

  public class BarVO {
    private List
       
         names;
    private List
        
          values;
  }
        
       

• DataVO?

  public class DataVO {
    private Integer value;
    private Map
       
         itemStyle;
  }
       

• PieVO?

  public class PieVO {
    private Integer value;
    private Map
       
         itemStyle;
    private String name;
  }
       

• REST??

  @GetMapping("/barVO")
  public BarVO barVO() {
    return this.fruitService.barVOList();
  }
  @GetMapping("/pieVO")
  public List
       
         pieVOList() {
    return this.fruitService.pieVOList();
  }
       

??BUG??

BUG1?axios is not defined

• ????

  [Vue warn]: Error in created hook: "ReferenceError: axios is not defined"

• ????

  import VueAxios from 'vue-axios';
  import axios from 'axios';
  Vue.prototype.$axios = axios;

  ???main.js?????axios?

BUG2????????

• ????

  ???????????? ???

• ????

  spring.datasource.url=jdbc:mysql://localhost:3306/test?serverTimezone=GMT%2B8&useUnicode=true&characterEncoding=UTF-8

  ??????URL???useUnicode?characterEncoding???