pycharm+python+bootstrap写一个登陆界面_Python--day56(前后台数据交互、bootstrap)
1. 前后台数据交互
1.1 socket搭建后台
【注意点】:
1. 前台发送的数据是用\r\n进行换行
2. 路由:请求的路径,获得路由的途径是通过后台对前台发送的数据进行拆分(split)得到,一般路径在前台发送的数据的信息头的1号位
3. 后台响应信息时,不仅需要发送响应的数据给前台,还要再次之前想浏览器发送响应头信息
#用socket建立一个服务器
importsocket
server=socket.socket()
server.bind(('localhost', 8801))
server.listen(5)print('浏览器访问:http://localhost:8801')whileTrue:
client, _,=server.accept()
data= client.recv(1024)#print(data) # 用\r\n作为换行
#print(data.decode('utf-8'))
request_data = data.decode('utf-8') #type: str
#拿到请求的路径(路由)
header = request_data.split('\r\n')[0]
router= header.split(' ')[1]print('前台请求路径:', router)#响应时,不仅需要发送响应数据,还要高旭浏览器响应头的信息
client.send(b'HTTP1.1 200 OK\r\nContent-Type: text/html;charset=utf8\r\n\r\n')#client.send('
后台页面
'.encode('utf-8'))
if router == '/index':
with open('要返回给前台的页面.html', 'rb') as rf:
client.send(rf.read())else:
client.send(b'
404
')
client.close()
socket搭建后台
1.2 flask搭建后台(ajax获取前台数据)
原生socket搭建后台时候,需要我们自己对前台发送的数据进行切分,这样比较麻烦。
于是,可以通过ajax获取前台的数据发送个给后台。这样不需要进行拆分就可以直接获
得我们所需要的信息。
1.2.1 ajax获取前台数据
http协议:前台发送请求给后台(请求方式、请求路径、请求内容),后台返回响应给前台(页面、数据)
ajax完成的是页面中的局部数据请求,不会页面改变
环境:
# pip3 install flask
# pip3 install -i https://pypi.douban.com/simple flask
# pip3 install -i https://pypi.douban.com/simple flask-cors
【注意点】:
1. 固定使用方式:$.ajax() ,前台发送请求给后台(可以携带数据),拿到后台响应的数据
2. 携带是数据以字典的形式发送:{
url: 请求的后台地址:接口,
type: 请求的方式 get post,
data: 要提交给后台的数据,
success: 后台成功的响应,
error: 后台错误的响应
...
}
请求
ajax请求
请求
user=$('#username').val();
pwd=$('#password').val();if(user&&pwd) {
$.ajax({
url:'http://localhost:8888/get_data',
type:'post',
data: {
username: user,
password: pwd
},
success:function(response) {
console.log(response)
},
error:function(error) {
console.log(error)
}
})
}
});
ajax请求响应
1.2.2 flask搭建后台
【注意点】:
1. 需要解决跨域问题,因为前台可能是pycharm打开的,后台是flask打开,他们不是来自 同源,非同源的数据会影响浏览器的功能,所以要解决跨域问题。
2. flask处理路由时候,一个响应对应一个路由
from flask importFlask, request#解决跨域问题,因为前台是pycharm开启的,后台是flask开启
from flask_cors importCORS
app= Flask(__name__)
CORS(app, supports_credentials=True)#flask处理路由:一个响应对应一个路径
@app.route('/')
@app.route('/index')defhome():return '
Home Page
'
#@app.route('/favicon.ico')#def icon():#return
@app.route('/get_data', methods=['GET]', 'POST'])defget_data():print(request.method)if request.method == 'GET':
username= request.args['username']
password= request.args['password']print(username, password)if request.method == 'POST':
username= request.form['username']
password= request.form['password']if username == 'wangyong' and password == "123":return 'login success'
return 'login failed'
if __name__ == '__main__':
app.run(host='localhost', port='8888')
flask搭建后台
2. bootstrap
pycharm+python+bootstrap写一个登陆界面_Python--day56(前后台数据交互、bootstrap)相关推荐
- 用PYQT5写一个登陆界面
PYQT5的使用 通过写一个登陆界面来学习PYQT5的一些基础功能 代码如下 QT designer的使用 用户输入部分 按钮 插入背景 通过写一个登陆界面来学习PYQT5的一些基础功能 代码如下 # ...
- python如何写一个图片进去_python写个图片爬虫
[root@MGServer pythonscript]# vim getimg.py #!/usr/bin/python #encoding:utf8 import requests,sys,re ...
- 【tk制作一个登陆界面】
简单的用tk写一个登陆界面 前言 一.安装模块 二.敲代码 1.引入库 2.代码思路 总结 前言 看着qq的登陆界面,不知在座的各位有没有想过他是怎么出来的,我今天用python中的tk模块小小的还原 ...
- 【PYTHON】tkinter如何设置界面消失 当制作一个登陆界面时,登陆成功之后,如何让登陆界面本身消失...
tkinter如何设置界面消失 当制作一个登陆界面时,登陆成功之后,如何让登陆界面本身消失 tkinter如何设置界面消失 当制作一个登陆界面时,登陆成功之后,如何让登陆界面本身消失 1 if que ...
- 用Python写一个UI界面
要用Python写一个UI界面,你可以使用一些图形用户界面(GUI)工具包,如:Tkinter,wxPython,PyQt 等. Tkinter 是 Python 内置的 GUI 库,是一个轻量级的工 ...
- 写一个登录界面——用窗体界面实现
写一个登录界面--用窗体界面实现 我们在上网的时候总能看到各种各样的窗体界面,比如:网页角落突然弹出的小广告.登录界面.画图板--接下来我就来讲讲如何创建一个窗体界面并制作一个登录界面. 窗体类的英文 ...
- python restful api_用Python语言写一个restful API
本文主要向大家介绍了用Python语言写一个restful API,通过具体的内容向大家展示,希望对大家学习Python语言有所帮助. """ package.modul ...
- 【Qt教程】2.2 - Qt5 布局管理器(水平、垂直、栅格布局)、弹簧、设计一个登陆界面
使用布局管理器,来设计一个登陆界面 都是操作,没代码没理论.参照:Qt设计一登陆窗口布局 1. 新建空工程 双击.ui文件,进入界面设计区. 我们新建工程时候,使用的是QMainWindow类,会自动 ...
- 用bootstrap写一个简洁的网页
在最近两周,我学习了bootstrap前端开发框架来快速制作一个网页,以往自己用html,css等学习的网页知识来写一个网页,往往需要挺长的时间.这次用bootstrap写的这个demo前后大概用了2 ...
最新文章
- 时钟极性和时钟相位概念
- 解决 MariaDB无密码就可以登录的问题
- python fpga_如何实现用Python开发FPGA?
- SqlDataAdapter和SqlCommandBuilder删除数据
- 华为p20pro投屏到笔记本_新荣耀笔记本与微软系统合作,网友:一碰即传投屏功能还有吗...
- PKI与证书服务应用-要点总结
- jmeter测试mysql数据库_【JMeter】JMeter完成一个MySql压力测试
- NOI题库练习1.4(08)
- 如何测试扫码支付二维码?
- JAVA设计模式——享元模式
- 10大H5前端ui框架,ui让你开发不愁
- 恢复linux硬盘数据,Linux下的硬盘数据如何恢复?
- 【Windows】外接USB键盘报“无法找到驱动”——手动指定驱动
- 《旅行青蛙》的代码揭秘,攻略,体验
- 基于javaweb的学生综合素质评价系统(java+ssm+thymeleaf+layui+mysql)
- 如何取SQL结果集的第一条记录
- Windows 7 彻底退出历史舞台
- python数学建模(二)线性规划2.实战(思路清晰\过程完整、详细)
- HTTP协议中的幂等性介绍
- 调试InfoPath 2007脚本
热门文章
- 学习《送东阳马生序》
- three.js 一个页面可以存在多个render吗_你确定把Spring MVC的视图机制吃透了吗?...
- mysql运行报错64bit_关于MySQL5.6.25在Win7 64bit下重装后无法启动的解决方法
- 【JVM调优工具篇】使用JProfiler追踪GC Roots溯源
- Mybatis-sql语句的抽取
- 云原生系列「二」Kubernetes网络详解
- springboot实现上传文件
- 酷Q 小i——添加应用
- Power Transmission
- Miniconda管理多版本python环境