添加首页

本文我们将在首页添加沪深300指数成立以来的整体走势数据展示，最后的效果是这样的

单独贴一张沪深300整体走势图

 

我感觉从总体上来看指数还是比较稳的，没有特别大的波动，当然，这只是相对而言哈哈。

首先是前端页面

<template>
  <div>
    <el-row class="container">
      <div class="left-grid">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>更新沪深300成分股数据</span>
            </div>
          </template>
          <el-form>
            <el-form-item>
              <el-text>信息更新状态：{{ update_status }}</el-text>
            </el-form-item>
            <el-form-item>
              <el-text>操作：</el-text>
              <el-button type="primary" size="medium" @click="updateCSI300"
                >重新更新信息</el-button
              >
            </el-form-item>
          </el-form>
        </el-card>
        <el-card>
          <el-table
            v-loading="loading"
            :data="table_data"
            :show-header="true"
            :max-height="430"
            stripe
          >
            <el-table-column
              type="index"
              label="序号"
              width="65%"
            ></el-table-column>
            <el-table-column prop="code" label="股票代码"></el-table-column>
            <el-table-column prop="name" label="公司简称"></el-table-column>
            <el-table-column prop="industry" label="所属行业"></el-table-column>
            <el-table-column prop="weight" label="权重占比"></el-table-column>
          </el-table>
        </el-card>
      </div>

      <div class="right-grid" ref="myChart"></div>
    </el-row>
  </div>
</template>

<script>
import axios from "axios";
import { ElMessage } from "element-plus";
import { getCurrentInstance } from "vue";
export default {
  data() {
    return {
      update_status: "未开始",
      loading: true,
      table_data: [],
      pie_data: [],
      echarts: getCurrentInstance().appContext.config.globalProperties.$echarts,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      var url = "http://localhost:9001/queryAll";
      axios
        .get(url)
        .then((response) => {
          this.table_data = response.data;
          console.log(response);
          this.loading = false;
        })
        .catch((error) => {
          console.log(error);
          this.loading = false;
        });
      this.create_pie();
    },
    // 绘制饼状图
    create_pie() {
      var url = "http://localhost:9001/queryDist";
      axios
        .get(url)
        .then((response) => {
          console.log(response);
          this.pie_data = [];
          for (var i = 0; i < response.data.length; i++) {
            this.pie_data.push({
              value: response.data[i].weight,
              name: response.data[i].industry,
            });
          }
          console.log(this.pie_data);
          var myChart = this.echarts.init(this.$refs["myChart"]);
          var option = {
            title: {
              text: "沪深300行业权重分布", //标题
            },
            toolbox: {
              feature: {
                dataZoom: {
                  yAxisIndex: "none",
                },
                saveAsImage: {},
              },
            },
            legend: {
              y: 50,
              textStyle: {
                fontSize: 14,
              },
            },
            label: {
              show: true,
            },
            series: [
              {
                name: "分布", //数据的名字
                type: "pie", //表示柱状图
                radius: "70%", //圆的半径
                center: ["50%", "60%"],
                label: {
                  formatter: function (params) {
                    console.log(params.name + " " + params.value + "%");
                    return params.name + " " + params.value + "%";
                  },
                  textStyle: {
                    fontSize: 14,
                    fontWeight: "bolder",
                  },
                  color: "inherit",
                },
                data: this.pie_data,
                selectedMode: "single", //选中效果，使选中区域偏离圆心一小段距离，single或者multiple
                selectedOffset: 10, //偏离圆心的一小段距离
              },
            ],
          };
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 更新沪深300成分股数据
    updateCSI300() {
      var url = "http://localhost:9001/parse";
      this.update_status = "更新中";
      ElMessage("开始更新数据");
      axios
        .get(url)
        .then((response) => {
          console.log(response);
          // 调用接口成功则返回成功提示框
          ElMessage({
            message: "更新数据成功",
            type: "success",
          });
          this.update_status = "更新成功";
          // 重新初始化数据
          this.loading = true;
          this.init();
        })
        .catch((error) => {
          console.log(error);
          this.update_status = "更新失败";
          // 调用接口失败则返回失败提示框
          ElMessage.error("更新数据失败");
        });
    },
  },
};
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.container {
  display: grid;
  grid-template-columns: 35% 65%;
  width: 100%;
  height: 80vh;
}
.left-grid {
  background-color: #f0f0f0;
  border-radius: 2%;
  padding: 10px;
  height: 95%;
}
.right-grid {
  background-color: #f9ecc3;
  border-radius: 2%;
  padding: 10px;
  height: 95%;
}
</style>

对应的后端接口就是添加了获取沪深300指数数据的代码，比较简单，这里不赘述了。

前后端整合部署

我们的项目是前后端分离的项目，但是部署的时候实际上可以将前端页面放到springboot中进行部署，springboot使用theamleaf引擎来分发页面。

这篇文章有介绍前后端整合部署的方法

vue+springboot前后端分离项目整合部署流程_springboot vue前后端分离项目部署-CSDN博客

下面我来介绍一下我们这个项目整合部署的方法

 首先打开命令行，cd到前端项目目录，然后执行 npm run build 命令，执行成功后会看到如下的显示

我们去到项目目录，会看到多了一个dist文件夹

 

我们需要把文件夹中的内容复制到springboot项目中的resource文件夹下面

然后新建一个Controller类用来跳转，里面的内容如下

@Controller
public class IndexController {

    @RequestMapping("/")
    public String parse() {
        return "index";
    }

}

这样一来我们编译出jar包后就可以直接用 9001 端口访问前端页面了。