先来贴一窜代码让大家理解前端/后端/数据库的工作原理，
首先简要说明：前端向后端请求数据，后端根据前端请求数据的类别分析其需求，并连接到数据库获取相应数据：
来一段简单的实例代码模拟淘宝商城：
前端代码：
<!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)