先来贴一窜代码让大家理解前端/后端/数据库的工作原理，

首先简要说明：前端向后端请求数据，后端根据前端请求数据的类别分析其需求，并连接到数据库获取相应数据：

来一段简单的实例代码模拟淘宝商城：

前端代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

        <script src="js/socket.io.js" type="text/javascript" charset="utf-8"></script>

        <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>

    </head>

    <body>

        <div id="app">

            <div class="conList">

                <div class="content" v-for='item in contentList'>

                    <h3>{{item[]}}</h3>

                    <img :src="item[2]"/>

                    <p>价格：{{item[]}}</p>

                    <p>数量：{{item[]}}</p>

                </div>

            </div>

        </div>

        <script type="text/javascript">
　　　　　　//连接到本地服务器

            var socket=io('http://localhost:7444')

            var app=new Vue({

                el:'#app',

                data:{

                    contentList:[],

                },

                mounted:function(){

                    //数据加载后向后台请求数据，请求数据名称为getContentList

                    socket.emit('message','getContentList')

                    }

            })

            //监听后端返回的数据

            socket.on('reply',function(data){

                //如果返回数据类型为contentList则做如下操作

                if (data.type=='getContentList'){

                    app.contentList=data.data

                }

//            console.log('data',data.data)

            })

        </script>

    </body>

</html>

后端socketio框架服务器：

import  socketio

import eventlet

import random

import pymysql

# 实例化socketio对象

sio=socketio.Server()

@sio.on('connect')

def connect(sid,environ):

    print('environ123',environ)

#  监听前端传入的请求数据

# 根据请求数据连接数据库获取目标数据

@sio.on('message')

def message(sid,data):

    print('message',data)

    if data=='getContentList':

        # 连接数据库

        db=pymysql.connect('localhost','root','','python1')

        # 使用 cursor() 方法创建一个游标对象 cursor

        cursor=db.cursor()

        #mysql语句

        sql='select item_id,item_title,item_image,item_price,num from tb_cart;'

        # 执行sql语句

        cursor.execute(sql)

        # 获取所有游标

        data1=cursor.fetchall()

        # 因为data1为元组，到传到前端只能读取到一条信息，所以要转成列表

        data=list(data1)

        # 给前端返回数据标名数据类型，前端好区分需求数据

        content={'type':'getContentList','data':data}

        print(data,'')

        # 将整理好的数据返回到前端

        sio.emit('reply',content)

@sio.on('disconnect')

def disconnect(sid):

    print('disconnect123',sid)

if __name__=='__main__':

    # sio通过middleware转为应用服务

    app=socketio.Middleware(sio)

    # 依赖eventlet网关服务器

    eventlet.wsgi.server(eventlet.listen(('',)),app)

python后端从数据库请求数据给到前端的具体实现的更多相关文章

  1. python后端将svc文件数据读入数据库具体实现

    如何用python将svc文件的数据读入到MySQL数据库里,在此直接上代码了,感兴趣的朋友可以贴代码测试: import pandas as pd import os from sqlalchemy ...

  2. echarts通过ajax向服务器发送post请求,servlet从数据库读取数据并返回前端

    1.echarts的官网上的demo,都是直接写死的随机数据,没有和数据库的交互,所以就自己写了一下,ok,我们开始一步一步走一遍整个流程吧. 就以官网最简单的那个小demo来做修改吧.官网上的小de ...

  3. 使用python将mysql数据库的数据转换为json数据

    由于产品运营部需要采用第三方个推平台,来推送消息.如果手动一个个键入字段和字段值,容易出错,且非常繁琐,需要将mysql的数据转换为json数据,直接复制即可. 本文将涉及到如何使用Python访问M ...

  4. 使用python脚本从数据库导出数据到excel

    python从数据库导出数据到excel 最近需要从数据库里导出一些数据到excel,刚开始我是使用下面的命令 select * from xxx where xxx into outfile 'xx ...

  5. Python向mysql数据库插入数据

    一.向表tcolor中插入数据的主要流程如下: import datetimeimport pymysql.cursorsconnection = pymysql.connect(host='loca ...

  6. 【转】用python比对数据库表数据的脚本

    最近在做一个数据库异构复制的项目,客户表示需要一个数据比对的工具,我就自己写了一个异构数据库的比对python脚本.这个比对脚本只能比对数量,不能比对具体的记录.使用的sql语句也是最基础的selec ...

  7. 三、Python系列——Pandas数据库读取数据

    Pandas主要先读取表格类型的数据,然后进行分析. import pandas as pd# 由于是用pandas模块操作数据,因此不用在路径前加open,否则就是python直接打开文件,可能还会 ...

  8. Python连接MySQL数据库获取数据绘制柱状图

    一.Python通过pymysql包获取MySQL数据库中的数据(没有对应包的可以通过pip install pymysql 安装对应的包) import matplotlib.pyplot as p ...

  9. 用Python向MySQL数据库插入数据

    最近一直在学习MySQL数据库,很感兴趣.这次我做了一个简单的尝试,使用Python3.4与MySQL数据库进行交互,将一份从雪球网上下载的某股票数据上传至MySQL数据库.仅为初学者提供参考,高手请 ...

随机推荐

  1. zxing二维码的生成与解码(C#)

    ZXing是一个开源Java类库用于解析多种格式的1D/2D条形码.目标是能够对QR编码.Data Matrix.UPC的1D条形码进行解码. 其提供了多种平台下的客户端包括:J2ME.J2SE和An ...

  2. 网页HTML代码在线运行器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. Linux列字符替换

    假如存在file1.txt,其内容如下: aa bb cc dd ee ff gg hh 现将第一列(aa 和 ee)统一修改为mm 则需要输入命令行: awk '{$1="mm" ...

  4. Vector使用测试

    1.测试vector是否自动释放分配的空间 vector有大致两类申请空间的方式,一是vector(n,T()),一是vector(p,p+n)(p是自己申请的空间的指针). 其中第一种估计肯定会释放 ...

  5. 函数式编程 lodash 常用api

    1.forEach _.forEach({ 'a': 1, 'b': 2 }, function(value, key) { console.log(key); }); _.forEach([3,4] ...

  6. java方法笔记： split,instanceof，StringBuilder（），append()，string ,Integer,Math，正则表达式

    http://swiftlet.net/archives/709 如果分隔符在前方,会显示“”,在尾部不显示: *|做分割,需要加\\ API文档如下 1.instanceof 查看前者是否是后者的实 ...

  7. c#文件管理

    Directory类-------目录管理 Directory.CreateDirectory(_Path); bool IsExit=Directory.Exists(_Path); Directo ...

  8. IAR STM32 ------ CSTACK HEAP 设置一次可用栈的大小，HardFault_Hander

    CSTACK:限制函数中定义数组的最大值,否则进入HardFault_Hander HEAP:限制动态分配内存(C函数库中的malloc)的大小,不用可以设置为0

  9. angular 中如果表单有相同的name一般会出现如下错误

    Unhandled Promise rejection Cannot assign to a reference or variable

  10. Storm 消息分发策略

    1.Shuffle Grouping:随机分组,随机派发stream里面的tuple,保证每个bolt接收到的tuple数目相同.2.Fields Grouping:按字段分组,比如按userid来分 ...