SpingBoot + Vue + Element UI + Echarts 整合的小 Demo

SpingBoot + Vue + Element UI + Echarts 整合的小 Demo

Vue 工程

• 创建 Vue 工程 （两种创建方式：vue ui 、手动初始化创建）
• 安装 Element UI、axios 插件
• 安装 Echarts 官网 https://echarts.apache.org/zh/index.html

1、执行命令

cnpm install echarts@4.9.0 --save

2、main.js 中引入

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

3、代码

<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()  //一般从官网复制Option过来直接放到setOption()里面
        }
    }
</script>

• App.vue

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/add">添加数据</router-link> |
      <router-link to="/table">数据管理</router-link> |
      <router-link to="/pie">饼图</router-link> |
      <router-link to="/bar">柱状图</router-link>
    </div>
    <div style="border:0px solid red;width: 800px;height: 600px;margin-left: 366px;">
      <router-view/>
    </div>
  </div>
</template>

• 使用Element UI 官网 https://element.eleme.io/#/zh-CN 直接复制使用

• Element UI 表格嵌入图片

<template slot-scope="scope">
    <img :src="scope.row.icon" style="height: 70px"/>
</template>
=================================================================
<template>
  <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      prop="icon"
      label="图片"
      width="160">
      <template slot-scope="liu">
        <img :src="liu.row.icon" style="height: 70px"/>
      </template>
    </el-table-column>

    <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
		//传递参数把操作的此行对象传入  fruitDelete(scope.row)
        <el-button @click="fruitDelete(scope.row)" type="text" size="small">删除</el-button>
        <el-button @click="findFruit(scope.row)" type="text" size="small">编辑</el-button>
      </template>
        
    </el-table-column>
  </el-table>
</template>

<script>
export default {
   
    ===============
  methods: {
   
    findFruit (object) {
   
      this.$router.push('/edit?id=' + object.id) // 页面跳转到我们的edit页面带上id
        //let id = this.$route.query.id // 获取id 在edit页面中这样获取id
    },
    fruitDelete (row) {
    // 传入我们的数据 row
      let _this = this
      this.$confirm('是否确定要删除' + row.name + '？', '删除数据', {
   
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
    // 点击确定就进入这个回调中
        _this.$axios.delete('http://localhost:8181/fruit/delete/' + row.id).then(function (response) {
   
          if (response.data) {
   
            _this.$alert(row.name + '删除成功！', '删除数据', {
   
              confirmButtonText: '确定',
              callback: action => {
   
                // 跳转到/table
                location.reload() // 点击确定就执行这个  ---刷新页面
              }
            })
          }
        })
      }).catch(() => {
   
      })
    }

  },
    ======================
  // get 去请求  then 去回调
  // this 表示的vue对象，在回调中我们拿的是回调的对象  所以我们设置_this来表示全局的对象
  created () {
   
    let _this = this
    this.$axios.get('http://localhost:8181/fruit/list').then(function (response) {
   
      _this.tableData = response.data
    })
  },
    =====================
  data () {
   
    return {
   
      tableData: null
    }
  }
}
</script>

• 数据校验

<template>
    <el-form ref="fruitRules" :model="fruit" :rules="rules" label-width="80px" class="demo-ruleForm" style="width: 600px">
        <!-- prop 就是跟我们的校验规则绑定的-->
        <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 @click="onSubmit1('form')">取消</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    export default {
   
        name: "Add",
        data() {