前言

本文介绍的是蛋卷基金最近七天的数据用Flask框架展示并绘出七天内的基金涨幅趋势。本文仅使用于个人学习参考！！！

前提准备

解析器python 3.7.0 编辑工具pycharm；
python库：flask,requests,re,datetime；
没安装python库的可以打开cmd使用 pip install + 库名进行python库的安装。
目标网站：https://danjuanapp.com/rank/performance‎

步骤说明

首先我们要从蛋卷基金上获取近七天的股票涨跌数据，接着从天天基金上获取所有的基金代码及名称以便于查，最后把获取的数据传递给前端。

基本步骤

访问蛋卷基金->基金筛选
随便找个基金点击进入详细页面
右键点击检查，查找接口最近30天的数据

🌴点击接口预览，查看30天的数据。

🌴写代码获取数据。注：数据类型是列表形式(便于前端获取使用)。

🌴访问天天基金->基金排行，找基金的所有代号以及其对应的名称对应的接口，以便于之后在前端查找。

🌴访问接口查看是否有内容(所有基金的代号与其对应的名称)，写正则获取对应的数据，类型为列表。

🌴开启一个Flask项目

🌴编写templates文件(存放视图后缀为html)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>股票数据可视化</title>
		<style>
		*{
			padding: 0;
			margin: 0;
		}
		body{
			/* 颜色从上到下 */
			background: -webkit-repeating-radial-gradient(deepskyblue,pink);
		}
		.w{
			width: 1200px;
			height: auto;
			margin: auto;		
				}
		.box{
			height: 60px;
			margin-top: 60px;
			/* border: 5px solid black; */
			display: flex;
			justify-content: center;
		}
		.box input{
			width: 800px;
			height: 50px;
			/* border-radius: 15px; */
			color: gray;
			font-size: 26px;
			border: 1px solid black;
			border-right: 0;
			padding-left: 15px;
		}
		.box #btn{
			width: 80px;
			height: 50px;
			color: gray;
			font-size: 18px;
			background-color: deepskyblue;
			border: 1px solid black;
			cursor: pointer;
					}
		#data{
			height: 600px;
			justify-content: center;
			font-size: 26px;
			margin-top: 60px;
			/*border: 5px solid pink;*/
			
		}
		</style>
	</head>
	<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js"></script>
	<body>
		<div class="box w">
			<input type="text" placeholder="请输入你要查询的股票代号" />
			<button id="btn">搜索</button>
		</div>
		<div class="w" id="data">大家好</div>
	<script>
		option = {
			title:{
				text:'大家好'
			},
			tooltip:{
			    trigger:'axis',
			    axisPointer:{
			      type:'line',
			      lineStyle:{
			        color:'red'
			      }
			    }
			  },
		  xAxis: {
		    type: 'category',
		    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
		  },
		  yAxis: {
		    type: 'value'
		  },
		  series: [
		    {
		      data: [150, 230, 224, 218, 135, 147, 260],
		      type: 'line'
		    }
		  ]
		};
		var ff = echarts.init(document.getElementById('data'));
		// ff.setOption(option)
	</script>
	
	<script>
		$('#btn').click(function () {
			var text = $('.box input').val()
			console.log(text)
			$.ajax({
				url: '/api',
				type: 'GET',
				data: {'data': text},
				success: function (response) {
					// console.log('response响应')
					if (response.success===0){
						option.xAxis.data = response.data.time;
						option.series[0].data = response.data.price;
						option.title.text = response.data.title;
						ff.setOption(option)
					}
				},
				error: function () {
					console.log('响应失败')
				}

			})
		})
	</script>
	</body>
</html>

🌴编写app.py

'''
coding:utf-8
@Software:PyCharm
@Time:2022/2/14 19:19
@Author:小久
'''

from flask import Flask,render_template,request,jsonify
from view_shares import View_Share

app = Flask(__name__)
@app.route('/')
def index():
    return render_template('index.html')
@app.route('/api')
def get_params():
    # params = request
    print(1)
    params = request.args.get('data')
    # print(params)
    data = View_Share().crawl(params)
    return jsonify({'data':data,'success':0})

if __name__ == '__main__':
    app.run()

🌴爬虫文件view_shares.py 由于版权投诉问题爬虫文件代码未能显示，有问题可以在评论区留言~~~~