ruoyi笔记

1. 生成的代码：后端代码我是直接放到system下，前端建立自己想要的路由，改代码。但直接生成system的代码，会默认在前端页面“系统管理”下生成相应页面，要去数据库的sys_menu下删除parentId为3的字段。

2.在若依中使用echars后，如何动态从后端获取数据？

前端项目中，新建对应api，格式如下，格式很重要：

import request from '@/utils/request'

// 查询商品销量信息
export function getBarVO() {
  return request({
    url: '/system/product/getSaleInfo',
    method: 'get',
  })
}

views中新建页面，代码如下：

<template>
  <div className="Echarts">
    <div id="main" style="width: 800px;height:500px; margin:auto;" ></div>
  </div>
</template>

<script>
import { getBarVO } from '@/api/shopping/productbar/bar'

export default {
  name: 'Echarts',
  methods: {
    myEcharts() {



      //get：查询数据
      getBarVO().then(response => {
        // alert(response.data.quantities);

        // 基于准备好的dom，初始化echarts实例
        var myChart = this.$echarts.init(document.getElementById('main'));

        // 显示标题，图例和空的坐标轴
        myChart.setOption({
          title: {
            text: '数据示例'
          },
          tooltip: {},
          legend: {
            data: ['销量']
          },
          xAxis: {
            data: response.data.names
          },
          yAxis: {},
          series: [
            {
              name: '销量',
              type: 'bar',
              data: response.data.quantities
            }
          ]
        });

      })

    }
  },
  mounted() {
    this.myEcharts();
  }
}
</script>

<style>

</style>

注意，getBarVO().then(response => {}）获取后端数据。

最终效果：