网站建立初步教案,网页版梦幻西游洞天幻境,wordpress正体中文版,网络推广商城网站前言
前面一篇文章介绍了获取个股数据的方法#xff0c;本文将会对获取的接口进行一些优化#xff0c;并且添加查询数据的接口#xff0c;并且基于后端返回数据编写一个前端页面对数据进行展示。
具体的获取个股数据的接口可以看上一篇文章
【java爬虫】基于springbootjd…前言
前面一篇文章介绍了获取个股数据的方法本文将会对获取的接口进行一些优化并且添加查询数据的接口并且基于后端返回数据编写一个前端页面对数据进行展示。
具体的获取个股数据的接口可以看上一篇文章
【java爬虫】基于springbootjdbcTemplatesqliteOkHttp获取个股的详细数据-CSDN博客
下面是操作演示首先是爬虫获取股票数据 接着是进行获取个股详细数据并且进行数据展示 数据图表还可以下载下来下面是下载下来的图片不过下载下来的图片就不能查看每个点的详细数据了 后端接口
相对于前文后端接口进行了一定优化每年的数据分3次获取时间段分别是0101-0501,0501-0901和0901-1231并且每次请求都是从2023年开始逐年往前获取一旦发现没有数据了就停止获取。
服务类的详细代码如下 Slf4j
Service
public class StockService {// 没有数据对应的返回private final String NO_DATA_RESPONSE1 historySearchHandler({});private final String NO_DATA_RESPONSE2 history({});Autowiredprivate SQLiteStockDao sqLiteStockDao;// 获取一个OKHttp实例private OkHttpClient client new OkHttpClient().newBuilder().connectTimeout(1000, TimeUnit.SECONDS).build();public void clearAll() {sqLiteStockDao.clearAll();}public void createTbaleIfNotExist() {sqLiteStockDao.createTbaleIfNotExist();}// 查询所有的数据public ListStockEntity queryAllByCode(String code) {return sqLiteStockDao.queryAllByCode(code);}// 获取数据并且存入数据库// 三个参数分别是股票代码开始时间和结束时间// 开始时间和结束时间都填年份代码中会自动补全具体时间public int getDataByYear(String code, String start, String end) {String url https://q.stock.sohu.com/hisHq?;Request request null;Response response null;int num 0;// 一年的数据分三次请求String[] startTime {0101, 0501, 0901};String[] endTime {0501, 0901, 1231};try {for (int i Integer.parseInt(end); i Integer.parseInt(start); i--) {for (int j startTime.length-1; j 0; j--) {HttpUrl.Builder httpBuiler HttpUrl.parse(url).newBuilder();String starttime i startTime[j];String endtime i endTime[j];log.info(开始计算时间段[ starttime , endtime ]内数据);httpBuiler.addQueryParameter(code, cn_ code);httpBuiler.addQueryParameter(start, starttime);httpBuiler.addQueryParameter(end, endtime);httpBuiler.addQueryParameter(stat, 1);httpBuiler.addQueryParameter(order, D);httpBuiler.addQueryParameter(period, d);httpBuiler.addQueryParameter(callback, history);httpBuiler.addQueryParameter(rt, jsonp);request new Request.Builder().url(httpBuiler.build()).get() //默认就是GET请求可以不写.addHeader(User-Agent, Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.122 Safari/537.36).build();response client.newCall(request).execute();String res response.body().string();log.info(请求得到的数据 res);if (res.contains(NO_DATA_RESPONSE1) || res.contains(NO_DATA_RESPONSE2)) {// 如果返回为空就认为后面没有数据了log.info(时间段[ starttime , endtime ]没有数据);return num;} else {ListStockEntity entities parseStrToArr(res, code);sqLiteStockDao.insertItems(entities);log.info(时间段[ starttime , endtime ]内有 entities.size() 条数据);num entities.size();}}}} catch (IOException e) {e.printStackTrace();}return num;}// 将string数据解析成List列表private ListStockEntity parseStrToArr(String res, String code) {if (res.contains(NO_DATA_RESPONSE1) || res.contains(NO_DATA_RESPONSE2)) {return new ArrayList();}ListStockEntity entities new ArrayList();res res.split(\\(\\[)[1].split(]\\))[0];JSONObject jsonObject JSON.parseObject(res);// 获取 hq 字段的值Object hq jsonObject.get(hq);// 判断 hq 的值是否为数组if (hq instanceof JSONArray) {// 遍历数组for (Object arr : (JSONArray) hq) {JSONArray jsonArray (JSONArray) arr;StockEntity entity new StockEntity();entity.setRecord_date((String) jsonArray.get(0));Double open_price Double.parseDouble((String) jsonArray.get(1));Double close_price Double.parseDouble((String) jsonArray.get(2));Double change_amend Double.parseDouble((String) jsonArray.get(3));Double change_range Double.parseDouble(((String) jsonArray.get(4)).split(%)[0]);Double max_price Double.parseDouble((String) jsonArray.get(5));Double min_price Double.parseDouble((String) jsonArray.get(6));Double volume Double.parseDouble((String) jsonArray.get(7));Double turnover Double.parseDouble((String) jsonArray.get(8));Double turnover_rate Double.parseDouble(((String) jsonArray.get(9)).split(%)[0]);entity.setOpen_price(open_price);entity.setClose_price(close_price);entity.setChange_amend(change_amend);entity.setChange_range(change_range);entity.setMax_price(max_price);entity.setMin_price(min_price);entity.setVolume(volume);entity.setTurnover(turnover);entity.setTurnover_rate(turnover_rate);entity.setCode(code);entity.setId(entity.getCode() _ (String) jsonArray.get(0));entities.add(entity);}}return entities;}}Dao层新增了查询某一只股票详细数据的方法详细代码如下
Slf4j
Repository
public class SQLiteStockDao implements StockDao {private final String TABLE_NAME stock_table;Autowiredprivate JdbcTemplate jdbcTemplate;Overridepublic void clearAll() {String sql DELETE FROM TABLE_NAME;jdbcTemplate.batchUpdate(sql);log.info(成功清空数据表 TABLE_NAME);}Overridepublic void createTbaleIfNotExist() {Integer count jdbcTemplate.queryForObject(SELECT COUNT(*) FROM sqlite_master WHERE typetable AND name ?, Integer.class, TABLE_NAME);if (count 0) {String sql CREATE TABLE TABLE_NAME ( id VARCHAR(50) PRIMARY KEY, code VARCHAR(20), // 股票代码record_date VARCHAR(20), // 记录的时间open_price float, // 开盘价close_price float, // 收盘价change_ament float, // 涨跌额change_range float, // 涨跌幅max_price float, // 最高价格min_price float, // 最低价格volume float, // 成交量手turnover float, // 成交额万turnover_rate float); // 换手率jdbcTemplate.execute(sql);log.info(TABLE_NAME 建表成功);} else {log.info(建表失败表格已存在);}}Overridepublic void insertItems(ListStockEntity entityList) {String sql INSERT OR IGNORE INTO TABLE_NAME (id, code, record_date, open_price, close_price, change_ament, change_range, max_price, min_price, volume, turnover, turnover_rate) values (?,?,?,?,?,?,?,?,?,?,?,?);// 将列表转为Object数组ListObject[] arr new ArrayList();for(int i0; ientityList.size(); i) {arr.add(entityList.get(i).changeToArray());}jdbcTemplate.batchUpdate(sql, arr);}Overridepublic ListStockEntity queryAllByCode(String code) {String sql SELECT open_price, close_price, record_date, volume FROM TABLE_NAME WHERE code? ORDER BY record_date DESC;log.info(执行sql sql);ListStockEntity stockEntities jdbcTemplate.query(sql, new Object[]{code}, new BeanPropertyRowMapper(StockEntity.class));return stockEntities;}}Dao层对应的实体类如下
Data
NoArgsConstructor
AllArgsConstructor
public class StockEntity {private String id;private String code;private String record_date;private Double open_price;private Double close_price;private Double change_amend;private Double change_range;private Double max_price;private Double min_price;private Double volume;private Double turnover;private Double turnover_rate;// 将数据转换为Object数组public Object[] changeToArray() {Object[] arr new Object[]{id,code,record_date,open_price.toString(),close_price.toString(),change_amend.toString(),change_range.toString(),max_price.toString(),min_price.toString(),volume.toString(),turnover.toString(),turnover_rate.toString()};return arr;}}最后就是提供给前端调用的接口了主要是获取某一只股票的数据只需要传入股票代码就能开始获取数据还有查询的接口同样是输入股票代码进行查询控制类的详细代码如下
Controller
CrossOrigin
RequestMapping(/stock)
public class StockController {private final String START_YEAR 1985;private final String END_YEAR 2023;Autowiredprivate StockService stockService;RequestMapping(/clear)ResponseBodypublic String clear() {stockService.clearAll();return success;}RequestMapping(/createTable)ResponseBodypublic String getData() {stockService.createTbaleIfNotExist();return success;}RequestMapping(/getDataByYear/{code}/{start}/{end})ResponseBodypublic String getDataByYear(PathVariable(code) String code,PathVariable(start) String start,PathVariable(end) String end) {Integer num stockService.getDataByYear(code, start, end);return num.toString();}RequestMapping(/getData/{code})ResponseBodypublic String getData(PathVariable(code) String code) {Integer num stockService.getDataByYear(code, START_YEAR, END_YEAR);ListStockEntity stockEntityList stockService.queryAllByCode(code);return JSON.toJSONString(stockEntityList);}RequestMapping(/queryData/{code})ResponseBodypublic String queryData(PathVariable(code) String code) {ListStockEntity stockEntityList stockService.queryAllByCode(code);return JSON.toJSONString(stockEntityList);}
}前端页面
下面来说一下前端页面的编写前端页面一共分为三个大块
沪深300成分股数据和操作按钮通过按钮可以进行数据获取或者数据展示个股详细数据这一个表格的内容会在你选定具体的股票后变更数据展示选定个股后会动态生成展示的数据 前端主要用了vueelement-plusaxiosecharts进行编写echarts表格参数参考了官方示例由于数据量比较大所以选用了大数据量的图表参考的地址如下
Examples - Apache ECharts
下面展示页面的详细代码
templatedivel-row classcontainerdiv classleft-gridel-card classbox-cardtemplate #headerdiv classcard-headerspan沪深300成分股/span/div/templateel-table:datatable_data:show-headertrue:max-height250stripeel-table-columntypeindexlabel序号width65%/el-table-columnel-table-columnpropcodelabel股票代码width85%/el-table-columnel-table-columnpropnamelabel公司简称width85%/el-table-columnel-table-column propindustry label操作template #defaultscopeel-buttontypeprimarysizesmallclickqueryData(scope.row)查询/el-buttonel-buttontypeprimarysizesmallclickgetData(scope.row)获取/el-button/template/el-table-column/el-table/el-cardel-cardtemplate #headerdiv classcard-headerspan{{ table_title }}/span/div/templateel-tablev-loadingloading:datastock_data:show-headertrue:max-height220stripeel-table-column proprecord_date label时间/el-table-columnel-table-column propopen_price label开盘价/el-table-columnel-table-columnpropclose_pricelabel收盘价/el-table-columnel-table-columnpropvolumelabel成交量手/el-table-column/el-table/el-card/divdiv classright-grid refmyChart/div/el-row/div
/templatescript
import axios from axios;
import { ElMessage } from element-plus;
import { getCurrentInstance } from vue;
export default {data() {return {update_status: 未开始,loading: true,table_title: 个股数据,// 沪深300成分股数据table_data: [],// 个股详细数据stock_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;});},// 绘制折线图create_axis() {//3.初始化实例对象 echarts.init(dom容器)var data_xAxis [];var data_yAxis [];for (var i this.stock_data.length - 1; i 0; i--) {data_xAxis.push(this.stock_data[i].record_date);data_yAxis.push(this.stock_data[i].close_price);}console.log(data_xAxis);console.log(data_yAxis);var dom this.$refs[myChart]; // 获取dom节点var myChart this.echarts.init(dom);//4.指定配置项和数据var option {tooltip: {trigger: axis,position: function (pt) {return [pt[0], 10%];},},title: {left: center,text: this.table_title,},toolbox: {feature: {dataZoom: {yAxisIndex: none,},restore: {},saveAsImage: {},},},xAxis: {type: category,boundaryGap: false,data: data_xAxis,},yAxis: {type: value,boundaryGap: [0, 100%],},dataZoom: [{type: inside,start: 0,end: 10,},{start: 0,end: 10,},],series: [{name: this.table_title,type: line,symbol: none,sampling: lttb,itemStyle: {color: rgb(135,206,235),},areaStyle: {color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: rgb(135,206,250),},{offset: 1,color: rgb(135,206,235),},]),},data: data_yAxis,},],};//5.将配置项设置给echarts实例对象使用刚指定的配置项和数据显示图表。myChart.setOption(option);},// 查询数据queryData(row) {var url http://localhost:9001/stock/queryData/ row.code;this.loading true;this.table_title row.code row.name;ElMessage(开始查询 this.table_title 的数据);axios.get(url).then((response) {this.stock_data response.data;console.log(response);this.loading false;ElMessage({message: 查询 this.table_title 的数据成功,type: success,});// 绘制数据this.create_axis();}).catch((error) {console.log(error);this.loading false;ElMessage.error(查询 this.table_title 的数据失败);});},// 获取数据getData(row) {var url http://localhost:9001/stock/getData/ row.code;this.loading true;this.table_title row.code row.name;ElMessage(开始获取 this.table_title 的数据);axios.get(url).then((response) {this.stock_data response.data;console.log(response);this.loading false;ElMessage({message: 获取 this.table_title 的数据成功,type: success,});// 绘制数据this.create_axis();}).catch((error) {console.log(error);this.loading false;ElMessage.error(获取 this.table_title 的数据失败);});},},
};
/scriptstyle 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前端页面有一个问题就是数据量非常非常大页面会很卡这个问题的其中一个解决办法就是在获取数据的时候颗粒度可以小一点比如一个星期获取一个数据之类的因为一张图表也不可能展示出所有的数据大家可能也只是想看一个总体的走势图不过本文没有进行相关的优化因为个人自用的话这点卡顿是可以接受的。
结语
本文展示了通过网络爬虫获取个股详细数据并且进行数据展示的方法通过这个方法可以查询个股数据并且用图表的方式将股票价格展示出来这样可以非常直观地观察某一只股票的价格走势由于获取到的数据量非常大后期还可以进行一定的数据分析如果你有什么想法欢迎和我交流下面展示一下获取到的股票走势图。
