haohulala的博客

先来说后端的代码，计算行业涨跌幅的原理就是将某个行业所有成分股的涨跌幅加起来，然后除以股票数量得到一个平均涨跌幅。本文我们来计算2023年沪深300行业涨跌幅，最后呈现的页面是这样的。最后计算得到的行业涨跌幅排行榜如下。

我们的项目是前后端分离的项目，但是部署的时候实际上可以将前端页面放到springboot中进行部署，springboot使用theamleaf引擎来分发页面。首先打开命令行，cd到前端项目目录，然后执行 npm run build 命令，执行成功后会看到如下的显示。本文我们将在首页添加沪深300指数成立以来的整体走势数据展示，最后的效果是这样的。我感觉从总体上来看指数还是比较稳的，没有特别大的波动，当然，这只是相对而言哈哈。对应的后端接口就是添加了获取沪深300指数数据的代码，比较简单，这里不赘述了。

由于使用的数据库是sqlite，因此数据都保存在db文件里了，我们配置的db文件存放在resource文件夹下面。后端技术栈：springboot，sqlite，jdbcTemplate，okhttp。前端技术栈：vue，element-plus，echarts，axios。除了以上功能以外，本文还添加了一个一次性获取沪深300成分股数据的接口。前面我们有好多文章都是在介绍股票数据获取工具，这是一个前后端分离项目。数据获取的时间还挺久的，数据资源存在百度网盘自取。代码可以随意取用，做毕设或者二开都可以。

前面的文章我们讲述了获取详细个股数据的方法，并且使用echarts对个股的价格走势图进行了展示，本文将编写一个页面，对个股详细数据进行展示。别问涉及到了element-plus中分页的写法，对于这部分知识将会做重点讲解。首先看一下效果之前我一直认为前端分页很难写，不过今天写完这个页面之后我发现，有了element-plus这样的框架，前端真的变得非常简单。本文介绍了后端分页接口以及基于element-plus的分页实现方法，希望对你有所帮助。

前面一篇文章介绍了获取个股数据的方法，本文将会对获取的接口进行一些优化，并且添加查询数据的接口，并且基于后端返回数据编写一个前端页面对数据进行展示。具体的获取个股数据的接口可以看上一篇文章【java爬虫】基于springboot+jdbcTemplate+sqlite+OkHttp获取个股的详细数据-优快云博客下面是操作演示，首先是爬虫获取股票数据接着是进行获取个股详细数据并且进行数据展示数据图表还可以下载下来，下面是下载下来的图片，不过下载下来的图片就不能查看每个点的详细数据了。

我们知道echarts是一个非常强大的绘图库，基于这个库，我们可以绘制出精美的图表。对于一张图来说，其实比较重要的就是配置项，填入不同的配置内容就可以呈现出不同的效果。当然配置项中除了样式之外，最重要的就是数据了，因为图表本身就是用来展示数据的，我们在使用echarts的时候，通常都是通过网络去接受数据，然后进行展示，如果需要绘制特定数据的图表，则需要编程实现，这非常麻烦。为了解决这个我们，我们可以写一个可以动态更改数据的页面来进行动态图表的绘制。

前面的文章我们已经介绍了如何获取沪深300成分股所述行业以及权重的数据，想要了解这部分内容的小伙伴可以阅读上一篇文章springboot+jdbcTemplate+sqlite编程示例——以沪深300成分股数据处理为例-优快云博客那么有了上文获取的数据，我们实际上可以计算一下沪深300按照行业分布的权重占比数据，最后的成果如下所示是不是效果还挺库的，下面就来介绍一下技术细节。

我们都知道网页的echarts可以画图，但是很多情况下都需要编码实现绘图逻辑，如果有一个前端页面可以让我输入数据然后动态生成图表的话那么该多好，其实这个需求不难实现，先看效果。整体页面分为左右两个部分，其中左边的部分用来编辑数据，右边的部分用来显示图表，左边上半部分用来编辑插入数据和生成表格，下半部分用来展示数据。总体的思路就是使用一个数据维护数据，然后在插入和删除数据的时候都是修改这个数组，完整的代码如下所示。这边需要提一下在vue3中echarts的引入和使用。

本文将介绍一个基于html+js的生命游戏，该项目只有一个html代码，无任何其他以来，UI方面采用了vue+element-plus进行渲染，游戏的界面基于canvas进行渲染，先来看一下成果。我不知道游戏规则有没有写错，感觉经常会陷入循环中。本次项目可以算是对canvas的简单应用吧，我发现其实可以用canvas做很多东西，甚至可以用来制作一些简单的2D游戏，不过如果要做游戏的话，可能需要自己实现一下逻辑，还是挺复杂的。

前面我们已经将某宝联盟的数据获取下来了，并且编写了一个接口将数据返回，现在我们需要使用vue+element-plus编写一个简单的管理页面进行数据展示，由于第一次使用vue编写前端项目，所以只是编写了一个非常简单的页面。本文只是简单介绍了一下使用vue+element-plus编写一个管理系统前端页面的基本项目结构，根据这个项目结构就可以不断完善功能，编写出自己想要的效果。最后附上element-plus组件的使用文档。

在学习Vue和Element plus整合使用的时候打算先写一个使用cdn方式引入的入门级案例，没想到遇到了一个坑，在网上查了资料也没有解决问题，最后发现是引入cdn的顺序错了。整合vue和Element plus的时候我们需要引入三个cdn，这三个cdn的引入是需要严格按照顺序的，具体的写法如下。也就是先引入样式，然后引入Vue，最后引入Element plus。我一开始以为前端非常简单，没想到学习起来比后端的坑还多。完整的代码如下，这也是一个入门级的例程。

使用vue实现分页的逻辑并不复杂，接收后端传输过来的数据，然后根据数据的总数和每一页的数据量就可以计算出一共可以分成几页。可以发现list中的每一项就是构成我们前端页面中一行的数据，这在vue中体现为数据的绑定，下面就来看看详细的html代码。上图中方框内的数据就是后端返回的数据，msg中记录的就是我们需要用到的数据，里面有交给数据项。isnull：表示一次查询的结果数量是否为0，用来控制没有结果的显示逻辑。我编写了一个简单的前端页面用来查询数据，页面一共有几个逻辑。具体的效果可以看下面的演示。

今天在编写前端页面的时候，打算引入axios进行ajax请求，可以在这个过程中遇到了一个非常大的坑，先来看看有坑的代码。这个问题我真的处理了非常久，后来发现这种写法在then()里面是没有办法拿到this的，解决的办法在下面这篇文章。下面贴一下完整的代码，代码非常简单，就是和后端交互，将查询出来的数据在渲染到页面上。说起来也非常简单，实际上就是在then()里面将函数的形式修改为=>的形式。可以看到，第二次打印this.msg的时候我们拿到了一个空值。我们看一下浏览器端的console的打印情况。

那么我们也可以使用vue框架进行页面渲染，使用vue进行渲染的话，后端只需要将json字符串传给前端，然后前端拿到数据后在浏览器端进行渲染，实际上就是使用了客户端的资源进行页面渲染，这样子做可以减轻服务端的压力。以往我写前端页面的时候都是使用theamleaf模板引擎，模板引擎的原理其实就是服务端进行页面的渲染，这里需要说一下，渲染的意思实际上就是将相应的数据编程html标签，比如我们使用了 th:each 标签，那么在服务端，就会用for循环将数据装填成html代码。