原生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) # 接收的数据用 作为换行 request_data = data.decode('utf-8') # 想要拿到请求的路径（链接/后面的东西） header = request_data.split(' ')[0] #拿到第一行请求 router = header.split(' ')[1] #拿到 链接/后面的东西 client.send(b'HTTP1.1 200 OK Content-Type: text/html;charset=utf8 ') # 返回的响应头 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- 800px;
可以规定父级最小（最大）宽度，就只需要考虑在允许尺寸（比如中等屏幕以上）中的布局
3.默认有两种容器
a.<div class="container">
b.<div class="container-fluid">
<div class="row"> //填充了两边的空余
jq补充：
obj.width()
height: obj.height()
padding左右+ width：obj.innerWidth()
padding上下+ height：obj.innerHeight()
div.remove() #自己删除自己