代码交易网站,网站开发不兼容ie8,中山专业外贸网站建设,磁力猫引擎入口前言
前面的文章我们讲述了获取详细个股数据的方法#xff0c;并且使用echarts对个股的价格走势图进行了展示#xff0c;本文将编写一个页面#xff0c;对个股详细数据进行展示。别问涉及到了element-plus中分页的写法#xff0c;对于这部分知识将会做重点讲解。
首先看一…前言
前面的文章我们讲述了获取详细个股数据的方法并且使用echarts对个股的价格走势图进行了展示本文将编写一个页面对个股详细数据进行展示。别问涉及到了element-plus中分页的写法对于这部分知识将会做重点讲解。
首先看一下效果 之前我一直认为前端分页很难写不过今天写完这个页面之后我发现有了element-plus这样的框架前端真的变得非常简单。
获取所有有数据的股票代码
我们的页面主要分为两个部分第一部分是获取所有有数据的股票代码一旦选择了某一个股票代码就会进行相对应数据的展示
本节我们先来说一下获取所有可展示的数据
和本页面相关的数据表一共有两张一张是沪深300成分股表表中记录了股票代码和股票名称 另一张表是个股详细数据表就是我们在之前的文章介绍过的表
【java爬虫】基于springbootjdbcTemplatesqliteOkHttp获取个股的详细数据-CSDN博客 这样表对应的详细信息如下图所示 我们要分页展示的也是这张表中的数据之所以需要两张表联动是因为这张表中没有股票名称为了能够同时将股票代码和股票名称查出来我们需要首先查询个股数据表然后再从沪深300成分股表中查询出股票代码对应的股票名称 public ListStockOptionVO getAllCode() {ListStockEntity stockEntities sqLiteStockDao.queryAllCode();ListCSI300Entity csi300Entities sqlIteCSI300Dao.queryAllItems();ListStockOptionVO stockOptionVOList new ArrayList();for (int i0; istockEntities.size(); i) {StockOptionVO stockOptionVO new StockOptionVO();stockOptionVO.setCode(stockEntities.get(i).getCode());for (int j0; jcsi300Entities.size(); j) {if (csi300Entities.get(j).getCode().equals(stockEntities.get(i).getCode())) {stockOptionVO.setName(csi300Entities.get(j).getName());break;}}stockOptionVOList.add(stockOptionVO);}return stockOptionVOList;} 其中两个SQL语句都很简单就是SELECT查询数据 Overridepublic ListStockEntity queryAllCode() {String sql SELECT DISTINCT code FROM TABLE_NAME;log.info(执行sql sql);ListStockEntity stockEntities jdbcTemplate.query(sql, new Object[]{}, new BeanPropertyRowMapper(StockEntity.class));return stockEntities;} Overridepublic ListCSI300Entity queryAllItems() {String sql SELECT * FROM tableName;ListCSI300Entity csi300Entities jdbcTemplate.query(sql, new Object[]{}, new BeanPropertyRowMapperCSI300Entity(CSI300Entity.class));return csi300Entities;}
控制层代码如下 // 获取所有有详细数据的股票代码RequestMapping(/queryCodeOptions)ResponseBodypublic String queryCodeOptions() {ListStockOptionVO stockOptionVOList stockService.getAllCode();return JSON.toJSONString(stockOptionVOList);}
该接口调用的结果如下所示
[{code:000001,name:平安银行},{code:000063,name:中兴通讯},{code:000002,name:万科A},{code:688981,name:中芯国际},{code:000568,name:泸州老窖}]
然后我们回到前端我们使用了el-select组件进行多个选项的选择其中el-option是对应的选项我们使用v-for将后端请求到的数据渲染成选项 el-cardel-form label-widthautoel-form-item label选择要查询的股票el-select v-modelcode placeholder请选择股票el-optionclickhandleSelect(item)v-foritem in options:labelitem.code item.name:valueitem.code:keyitem.code/el-option/el-select/el-form-item/el-form/el-card
注意看el-option中有一个click选项就是我们点击的时候会触发的相应操作实际上这个函数的逻辑就是点击后就进行相对应股票数据的查询。
获取个股详细数据并分页展示
分页有非常多好处在SQL端主要就是使用LIMIT和OFFSET这两个关键字来实现的
接口层面接收三个参数分别是股票代码每一页的数据量和当前页数 // 分页查询某一只股票的详细数据RequestMapping(/queryDataByPage/{code}/{pagesize}/{page})ResponseBodypublic String queryDataByPage(PathVariable(code) String code,PathVariable(pagesize) Integer pagesize,PathVariable(page) Integer page) {ListStockEntity stockEntities stockService.queryDataByPage(code, pagesize, page);return JSON.toJSONString(stockEntities);}
在Service层将页数转换为SQL语句中的LIMIT和OFFSET其中LIMIT是固定的就是你的每一页的数据量OFFSET的计算公式为(page - 1) * pagesize // 分页查询某一只股票的详细数据public ListStockEntity queryDataByPage(String code, Integer pagesize, Integer page) {Integer limit pagesize;Integer offset (page - 1) * pagesize;ListStockEntity stockEntities sqLiteStockDao.queryDataByPage(code, limit, offset);return stockEntities;}
最后就是DAO层的代码 Overridepublic ListStockEntity queryDataByPage(String code, Integer limit, Integer offset) {String sql SELECT * FROM TABLE_NAME WHERE code? ORDER BY record_date DESC LIMIT ? OFFSET ?;log.info(执行sql sql);ListStockEntity stockEntities jdbcTemplate.query(sql, new Object[]{code, limit, offset},new BeanPropertyRowMapper(StockEntity.class));return stockEntities;}这样一来我们就编写好了分页查询的后端接口。
我们还需要一个获取数据总量的接口从控制层到服务层再到Dao层的代码如下 // 查询数据的总条数RequestMapping(/queryNumByCode/{code})ResponseBodypublic Integer queryNumByCode(PathVariable(code) String code) {int num stockService.queryNumByCode(code);return num;} // 查询数据的总条数public int queryNumByCode(String code) {return sqLiteStockDao.queryNumByCode(code);} Overridepublic int queryNumByCode(String code) {String sql SELECT COUNT(id) FROM TABLE_NAME WHERE code?;log.info(执行sql sql);int num jdbcTemplate.queryForObject(sql, new Object[]{code},Integer.class);return num;}
下面来看一下前端的分页组件element-plus提供了el-pagintion进行分页我们拿一个官网的例子来讲解这个组件的用法 从上到下依次为
current-page表示当前页数这是一个动态的值page-size表示每一页的数据量这也是一个动态的值small是否采用小型分页样式disabled是否禁用分页background是否为分页按钮添加背景颜色添加了背景颜色会更好看layout组件的排版方式total总的数据量这是需要提前获取的size-change当每一页的数据量变化时触发的事件current-change当前页面变化时触发的事件
关于这个样式我给大家举一个例子比如我是这样写的 可以看到从左到右分别是sizesprevpagernext和total那么对应的呈现的效果如下
这样子说不知道大家是否能更好地理解这个属性的用法。
那么有了基本的样式后我们还需要编写当前页和每一页数据量这两个变量改变时的响应事件其实逻辑都很简单就是改变一下变量的值然后再请求新的数据 handleSizeChange(number) {this.current_size number;var url http://localhost:9001/stock/queryDataByPage/ this.current_code / this.current_size / this.current_page;this.loading true;axios.get(url).then((response) {this.table_data response.data;console.log(response);this.loading false;}).catch((error) {console.log(error);this.loading false;});},handleCurrentChange(number) {this.current_page number;var url http://localhost:9001/stock/queryDataByPage/ this.current_code / this.current_size / this.current_page;this.loading true;axios.get(url).then((response) {this.table_data response.data;console.log(response);this.loading false;}).catch((error) {console.log(error);this.loading false;});},
下面展示一下前端页面的完整代码
templateel-containerel-mainel-cardel-form label-widthautoel-form-item label选择要查询的股票el-select v-modelcode placeholder请选择股票el-optionclickhandleSelect(item)v-foritem in options:labelitem.code item.name:valueitem.code:keyitem.code/el-option/el-select/el-form-item/el-form/el-cardel-cardtemplate #headerdiv classcard-headerspan{{ table_title }}/span/div/templateel-tablev-loadingloading:datatable_data:show-headertrue:max-height500stripeel-table-column proprecord_date label时间/el-table-columnel-table-column propopen_price label开盘价/el-table-columnel-table-column propclose_price label收盘价/el-table-columnel-table-column propchange_ament label涨跌额/el-table-columnel-table-columnpropchange_rangelabel涨跌幅:formatterformatter1/el-table-columnel-table-column propmax_price label最高价格/el-table-columnel-table-column propmin_price label最低价格/el-table-columnel-table-column propvolume label成交量手/el-table-columnel-table-columnpropturnoverlabel成交额万/el-table-columnel-table-columnpropturnover_ratelabel换手率:formatterformatter2/el-table-column/el-tableel-divider /el-pagination:current-pagecurrent_page:page-sizecurrent_size:page-sizes[10, 20, 30]:smallfalse:backgroundtruelayoutsizes, prev, pager, next, total:totaltotal_numsize-changehandleSizeChangecurrent-changehandleCurrentChange//el-card/el-main/el-container
/templatescript
import axios from axios;
import { getCurrentInstance } from vue;
export default {data() {return {update_status: 未开始,loading: false,// 当前选中的股票code: ,// 所有的选项options: [],table_title: 个股数据,// 个股详细信息table_data: [],// 分页相关选项// 当前查询的股票代码current_code: ,// 当前页current_page: 1,// 每一页的数量current_size: 10,// 数据总数total_num: 0,echarts: getCurrentInstance().appContext.config.globalProperties.$echarts,};},mounted() {this.init();},methods: {init() {var url http://localhost:9001/stock/queryCodeOptions;axios.get(url).then((response) {this.options response.data;console.log(response);}).catch((error) {console.log(error);});},handleSelect(item) {this.current_code item.code;this.current_page 1;// 获取表格详细数据var url1 http://localhost:9001/stock/queryDataByPage/ this.current_code / this.current_size / this.current_page;this.loading true;this.table_title item.code item.name;axios.get(url1).then((response) {this.table_data response.data;console.log(response);this.loading false;}).catch((error) {console.log(error);this.loading false;});// 获取当前股票数据总数var url2 http://localhost:9001/stock/queryNumByCode/ item.code;axios.get(url2).then((response) {this.total_num response.data;console.log(response);}).catch((error) {console.log(error);});},formatter1(row) {return row.change_range %;},formatter2(row) {return row.turnover_rate %;},handleSizeChange(number) {this.current_size number;var url http://localhost:9001/stock/queryDataByPage/ this.current_code / this.current_size / this.current_page;this.loading true;axios.get(url).then((response) {this.table_data response.data;console.log(response);this.loading false;}).catch((error) {console.log(error);this.loading false;});},handleCurrentChange(number) {this.current_page number;var url http://localhost:9001/stock/queryDataByPage/ this.current_code / this.current_size / this.current_page;this.loading true;axios.get(url).then((response) {this.table_data response.data;console.log(response);this.loading false;}).catch((error) {console.log(error);this.loading false;});},},
};
/scriptstyle scoped
.card-header {display: flex;justify-content: space-between;align-items: center;
}
/style还有一点需要额外说一下大家可以看一下我们表格中的数据 这两列是由百分号但是数据库中存的数据是没有百分号的我们选择在前端进行处理在表格相应的列中添加一个formatter属性属性的值是一个函数函数返回值就是最后渲染到页面上的字符串。
这两个函数的具体实现如下 结语
本文介绍了后端分页接口以及基于element-plus的分页实现方法希望对你有所帮助。
