day-56前端
原生socket搭建后台
import socket server = socket.socket() # 用socket建立一个服务器 server.bind(('localhost', 8801)) server.listen(5) print('浏览器访问:http://localhost:8801') # 浏览器要访问的端口号 while True: client, _, = server.accept() data = client.recv(1024) # 接收的数据用\r\n作为换行 request_data = data.decode('utf-8') # 想要拿到请求的路径(链接/后面的东西) header = request_data.split('\r\n')[0] #拿到第一行请求 router = header.split(' ')[1] #拿到 链接/后面的东西 client.send(b'HTTP1.1 200 OK\r\nContent-Type: text/html;charset=utf8\r\n\r\n') # 返回的响应头 if router == '/index': with open('1.请求.html', 'rb') as rf: #拿到链接/后面的东西,是'/index'返回一个html页面 client.send(rf.read()) else: client.send(b'<h1 style="color:red;text-align:center">404</h1>') #不是404 client.close()
Flask搭建后台
需要安装flask、flask-cors
from flask import Flask, request from flask_cors import CORS # 解决跨越(服务器之间相互访问) app = Flask(__name__) #开启flack服务器 CORS(app, supports_credentials=True) @app.route('/') # 处理浏览器请求 @app.route('/index') def home(): return '<h1>Home Page</h1>' #给浏览器返回信息 @app.route('/favicon.ico') #第一次请求服务器,经过这个函数,返回图片 def icon(): with open('图片路径','rb') as f: data=f.read() return data @app.route('/get_data', methods=['GET', 'POST']) # 拿到前台的数据(ajax),完成数据的响应(允许get、post请求) def get_data(): print(request.method) #获取请求信息,get还是post if request.method == 'GET': username = request.args['username'] #通过前台的key,拿到值(get) print(username) if request.method == "POST": username = request.form['username'] #通过前台的key,拿到值(post) password = request.form['password'] if username == 'owen' and password == '123': return 'login success' return 'login failed' if __name__ == '__main__': app.run(host='localhost', port=6601) # 规定ip,端口号
ajax前后台交互
jq包要有
ajax完成的是页面中的局部数据请求,不会改变页面(如登录、注册)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Title</title> </head> <body> <h1>ajax请求</h1> <form action=""> <input type="text" name="username(写不写都行)" id="username"> <input type="text" name="password(写不写都行)" id="password"> <button id="btn" type="button">请求</button> //为了让后台用ajax获取数据,不靠提交按钮获取数据 </form> </body> <script src="js/jquery-3.4.1.js"></script> <script> $('#btn').click(function () { usr = $('#username').val(); //获取表单信息 pwd = $('#password').val(); if (usr && pwd) { // 有内容才打印 $.ajax({ // $.ajax() 发送请求给后台 // url: 'http://localhost:6601/get_data', //请求的后台地址(接口),'/get_data’ 是要找到flask对应的函数 type: 'post', // 请求的方式 get post // data: { username: usr, // 要提交给后台的数据,{后台取数据的key: 前台要发送的数据} password: pwd }, success: function (response) { // 后台成功的返回信息,response成功过后拿到的结果 console.log(response); alert(response) }, error: function (error) { // 后台错误的返回信息 console.log(error) } }) } }) </script> </html>
bootspart
什么是bs:
前端框架--bs提前帮你写了一套样式(css)、一套逻辑(js)、一套图标库(字体图标)、还可以拓展功能(支持插件)
注意:
bs的逻辑(js)是依赖jq环境的,使用使用bs提前要导入jq
使用方法:
第一种:官网下载
本地导入
第二种:CDN链接
https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css
https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js
案例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Title</title> <link rel="stylesheet" href="bs-3.3.7/css/bootstrap.css"> <!--bs的样式--> <style> .o-btn { <!--自定义样式写在导入之后,可以再修改bs规定好的样式--> width: 120px; } .o-i { font-size: 100px; color: red; } </style> </head> <body> <hr> <button class="btn btn-danger btn-block">按钮</button> <hr> <i class="o-i glyphicon glyphicon-magnet"></i> <!--图标字体--> <hr> <!-- Single button --> <div class="btn-group"> <button type="button" class="o-btn btn btn-lg btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 菜单 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">菜单1</a></li> <li role="separator" class="divider"></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> </body> <script src="js/jquery-3.4.1.js"></script> <!--必须提前导入jq--> <script src="bs-3.3.7/js/bootstrap.js"></script> <!--bs的逻辑--> </html>
bootspart栅格系统
1.一共有四种尺寸
超小屏幕 手机 (<768px)
小屏幕 平板 (≥768px)
中等屏幕 桌面显示器 (≥992px)
大屏幕 大桌面显示器 (≥1200px)
2.默认将父级等分12分,子级可以选取占多少份 (比如就占8份也可以),写完后浮动,清浮动也做了
col-xs-等分 | col-sm-等分 | col-md-等分(经常使用) | col-lg-等分
超小屏幕显示 小屏幕显示 中等屏幕显示 大屏幕显示
min-width: 800px;
可以规定父级最小(最大)宽度,就只需要考虑在允许尺寸(比如中等屏幕以上)中的布局
3.默认有两种容器
a.<div class="container">
b.<div class="container-fluid">
<div class="row"> //填充了两边的空余
jq补充:
width: obj.width()
height: obj.height()
padding左右+ width:obj.innerWidth()
padding上下+ height:obj.innerHeight()
div.remove() #自己删除自己