用Django写网页通过tcp—client，接收单片机所发的数据，进行数据处理后绘图展示。

        暑假的时候老师布置了一个作业，使用STM32f103c8t6制作简易示波器将波形检测后上传到网页进行描点绘图，这个小项目是我和同学一起完成的，我是负责网页的那一部分，我同学则是负责硬件部分。

        附带网址：基于STM32的ESP8266WiFi模块波形检测仪

        我是用Django为框架进行网页的编写。因为要绘图，所以要涉及到Echarts。

        有关于Echarts可以进入官网进行了解：Echarts官网

        下面是我的html代码

<script type="text/javascript" src="{% static 'echarts.js' %}"></script>引入E charts
<script type="text/javascript" src="{% static 'jquery.js' %}"></script>
<div class="box1"></div>
<script>
        var myChart = echarts.init(document.querySelector(".box1"));
        //var shuju=[1,2,3,45,6,4,10000]
    	function printf() {
            $.getJSON('http://127.0.0.1:8000/text/shujuku/', function (context) {
                shuju = context['date'];
                {#console.log(shuju);#}
            })
             {#console.log("======"+shuju)#}
        //3.初始化实例对象 echarts.init(dom容器)

        //4.指定配置项和数据
        var option = {
            title: {
                text: '电压'
            },
            xAxis: {
                boundaryGap: true,// 刻度离纵轴有无间隙，默认true有间距
                type: 'category',//'value' 数值轴，适用于连续数据。 'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
                // 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，
                // 在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。 'log' 对数轴。适用于对数数据。
                name: '  ',// 横轴名称
                nameTextStyle: {// 名称样式
                fontSize:15,
                color:'#333',
                fontWeight: 'bold'
                },
                axisLabel : {//坐标轴刻度标签的相关设置。如果这个字段不设置，echarts会根据屏宽及横坐标数据自动给出间隔
                // clickable:true,//并给图表添加单击事件  根据返回值判断点击的是哪里
                interval: 0,// 间隔长度，可自定义（如果是时间格式，echarts会自动处理）
                rotate: 40,// 文字倾斜度
                },
                data: ['  ', '  ', '  ','  ','  ','  ','  ', '  ', '  ', '  ','  ', '  ', '  ','  ','  ','  ','  ', '  ', '  ', '  ','  ', '  ', '  ','  ','  ','  ','  ', '  ', '  ', '  ','  ', '  ', '  ','  ','  ','  ','  ', '  ', '  ', '  ','  ', '  ', '  ','  ','  ','  ','  ', '  ', '  ', '  ',
                        '  ', '  ', '  ','  ','  ','  ','  ', '  ', '  ', '  ','  ', '  ', '  ','  ','  ','  ','  ', '  ', '  ', '  ','  ', '  ', '  ','  ','  ','  ','  ', '  ', '  ', '  ','  ', '  ', '  ','  ','  ','  ','  ', '  ', '  ', '  ','  ', '  ', '  ','  ','  ','  ','  ', '  ', '  ', '  ',],// 横轴坐标值
                splitLine: {show: false},// 显示隐藏刻度线
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name:"电压",
                type: 'line',
                data: shuju,//[1, 23, 45, 5, 69, 69, 69, 69, 69],
                smooth:true,
            }]
        };
            myChart.setOption(option);
            window.addEventListener("resize", function() {
            // 让我们的图表调用 resize这个方法
            myChart.resize();
            });
        }
         var time1 = setInterval(function () {
                printf();

            }, 1000);
            clearInterval(function () {
                time1;
            })

</script>

        views视图函数代码

def sendtohtml():
    n = 1
    while n == 1:
        tcp_socket = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
        tcp_socket.connect(('192.168.4.1', 8888))
        print("连接成功")
        recv_data = tcp_socket.recv(1024)
        if n == 1:
            print("接收到数据：")
            date = []
            for i in recv_data.decode("utf-8"):
                date = date+[i]
                if len(date) > 3:
                    date = date[0]+date[1]+date[2]+date[3]
                    msg = ChartModel()
                    msg.c_time = date
                    msg.save()
                    print(msg.c_time)
                    date = []
            data_list = []
            time1 = ChartModel.objects.all()
            for a in time1:
                data_list = data_list + [a.c_time]
            if len(data_list) > 100:
                for c in range(25):
                    ChartModel.objects.all().first().delete()
            tcp_socket.close(),
            time.sleep(0.1)
            continue

    return HttpResponse()

def shujuku(request):
    data_list = []
    time1 = ChartModel.objects.all()
    for a in time1:
        data_list = data_list+[a.c_time]
    context = {
        'date': data_list,
    }
    return JsonResponse(data=context)

def send(request):
    t = threading.Thread(target=sendtohtml)  #双线程
    t.start()

    return render(request,'tubiao1.html')

        接下来我会解释一下视图函数里面的代码

        第一个sendtohtml()，这个函数主要是进行数据的接受和数据的处理，因为我们所接受到的数据是一串串字符串，并不是我们想要的数据，所以只能对这些数据进行数据处理，当我们把数据处理完之后，我们就把数据存进我们的数据库里面，当我们所存进的数据达到一定的量的时候，我们就会把多出来的数据进行删除。

        第二个shujuku(request)，这个函数是把数据库里面的数据一个个提取出来，之后发送到网页端，网页再把数据绘成图展示出来。

        第三个send(request)，这个函数的作用是对函数sendtohtml()进行引用，最后的再返回网页。

        下面的是我的model代码

class ChartModel(models.Model):
    c_time = models.CharField(max_length=16,unique=False)
    class Meta:
        db_table = 'Chart'

        这个代码只是单纯的创建一个数据库进行数据存储。

        这些代码组合在一起就能实现数据的接收和绘图。

 

        作者本人学代码是断断续续的学了一年，这是本人的第一个博客，语言有可能不通顺，当然代码也不一定是最好的，若有错误之处，望各位大佬赐教。