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

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

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

前端代码：

<!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[1]}}</h3>
                    <img :src="item[2]"/>
                    <p>价格：{{item[3]}}</p>
                    <p>数量：{{item[4]}}</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\',\'123456\',\'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,\'12311111\')
        # 将整理好的数据返回到前端
        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((\'\',7444)),app)

 

版权声明：本文为Dark-fire-liehuo原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/Dark-fire-liehuo/p/9818858.html