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

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

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

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

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

        下面是我的html代码

引入E charts

        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'

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

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

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