项目实训第三周01

项目实训第三周01（7.13）

7.11-7.13工作概要：完成了股票选择页面的设计和功能实现

（1）功能概述
用户在股票分类界面选择好一个分类后，跳转到股票选择页面，该页面以表格形式显示该分类下的所有股票，包含股票代码和股票名信息，以及相应的预测操作，同时支持搜索框搜索在该分类下的股票。

（2）设计思路
这里利用了复用的思想，对股票信息的显示和搜索联系在一起。设置变量input记录搜索框内容，默认为空，加载页面时调用load_stock_select(ts_code,input)方法，当用户输入关键词对信息进行检索时也调用该方法（input内容会有变化），后端响应该方法时，数据库查询中使用到了like语句，具体后端代码如下：

@app.route('/load_stock_select', methods=['GET'])
def load_stock_select():
    click_sort = request.args.get('click_sort')
    input = request.args.get('input')
    sqlStr = 'SELECT ts_code,name FROM stock WHERE industry = ? AND name LIKE ?'
    rs = query_db(sqlStr, (click_sort, "%" + input + "%"))
    if rs:
        return jsonify({'success_code': 200, 'table_data': rs})
    else:
        return jsonify({'error_code': 1, 'message': '未查询到该行业股票信息！'})

由于初始加载时input为空，sql语句能够查询到所有股票数据，这样就很好的将该方法进行了复用，减少了代码量。

（3）分页的实现
由于数据量较多，需要对要显示的数据分页，利用element-ui中的标签：

<el-pagination align='center'
                     @current-change="handleCurrentChange"
                     :current-page="currentPage"
                     layout=" prev, pager, next, jumper"
                     :total="table_data.length"
                     :page-size="pageSize">
      </el-pagination>

current-page是当前页码，total是数据总条目，page-size是每页显示的条目，点击事件定义如下：

handleCurrentChange(val) {
          console.log(`当前页: ${val}`);
          this.currentPage = val;
        }

（4）其他
前面提到，针对每支股票，可以对其进行相应的预测（核心算法部分），在此处还涉及了与算法同学的对接等等，后续会对该页面的实现进行补充。