web开发
web学习笔记
小小白学计算机
这个作者很懒,什么都没留下…
展开
-
HTML文件上传对象file
window.URL.createObjectURL(fileObj)原创 2021-06-28 11:16:30 · 367 阅读 · 0 评论 -
Ajax 编程基础(一)
一、Ajax 基础传统网站中存在的问题:网速慢的情况下,页面加载时间长,用户只能等待表单提交后,如果一项内容不合格,需要重新填写所有表单内容页面跳转,重新加载页面,造成资源浪费,增加用户等待时间二、Ajax 概述Ajax:标准读音 [ˈeɪˌdʒæks] ,中文音译:阿贾克斯。它是浏览器提供的一套方法,可以实现页面无刷新更新数据,提高用户浏览网站应用的体验。三、Ajax的应用场景页面上拉加载更多数据列表数据无刷新分页表单项离开焦点数据验证搜索框提示文字下拉列表四、A原创 2020-06-17 10:12:16 · 403 阅读 · 0 评论 -
jQuery学习笔记系列(三)——事件注册、事件处理、事件对象、拷贝对象、多库共存、jQuery插件、toDoList综合案例
day03 - jQuery学习目标:能够说出4种常见的注册事件能够说出 on 绑定事件的优势能够说出 jQuery 事件委派的优点以及方式能够说出绑定事件与解绑事件能够说出 jQuery 对象的拷贝方法能够说出 jQuery 多库共存的2种方法能够使用 jQuery 插件1.1. jQuery 事件注册 jQuery 为我们提供了方便的事件注册机制,是开发人员抑郁操作优缺点如下:优点: 操作简单,且不用担心事件覆盖等问题。缺点: 普通的事件注册不能做事件委托,且无法实现事件原创 2020-06-15 09:20:41 · 383 阅读 · 0 评论 -
移动端WEB开发之响应式布局(响应式开发原理、bootstrap、阿里百秀案例)
移动端WEB开发之响应式布局1.1 响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。设备的划分情况:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0"/> <meta http-e原创 2020-06-12 23:10:45 · 1111 阅读 · 0 评论 -
移动web开发之rem布局(rem基础、媒体查询、 less 基础、rem适配方案)
移动web开发之rem布局rem基础rem单位rem (root em)是一个相对单位,类似于em,em是父元素字体大小。不同的是rem的基准是相对于html元素的字体大小。比如,根元素(html)设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。/* 根html 为 12px */html { font-size: 12px;}/* 此时 div 的字体大小就是 24px */ div { font-size:原创 2020-06-12 19:57:33 · 591 阅读 · 0 评论 -
Web框架——Flask系列之蓝图Blueprint(二十一)
一、为什么学习蓝图?我们学习Flask框架,是从写单个文件,执行hello world开始的。我们在这单个文件中可以定义路由、视图函数、定义模型等等。但这显然存在一个问题:随着业务代码的增加,将所有代码都放在单个程序文件中,是非常不合适的。这不仅会让代码阅读变得困难,而且会给后期维护带来麻烦。如下示例:我们在一个文件中写入多个路由,这会使代码维护变得困难。 from flask import Flask app = Flask(__name__) @app.route原创 2020-06-07 22:59:49 · 508 阅读 · 0 评论 -
Web框架——Flask系列之数据库迁移(二十)
一、Flask-Migrate扩展在开发过程中,需要修改数据库模型,而且还要在修改之后更新数据库。最直接的方式就是删除旧表,但这样会丢失数据。更好的解决办法是使用数据库迁移框架,它可以追踪数据库模式的变化,然后把变动应用到数据库中。在Flask中可以使用Flask-Migrate扩展,来实现数据迁移。并且集成到Flask-Script中,所有操作通过命令就能完成。为了导出数据库迁移命令,Flask-Migrate提供了一个MigrateCommand类,可以附加到flask-script的manag原创 2020-06-07 21:19:47 · 263 阅读 · 0 评论 -
Web框架——Flask系列之Flask中的特殊变量和方法(十九)
在Flask中,有一些特殊的变量和方法是可以在模板文件中直接访问的。一、config对象config 对象就是Flask的config对象,也就是 app.config 对象。{{ config.SQLALCHEMY_DATABASE_URI }}二、request 对象就是 Flask 中表示当前请求的 request 对象,request对象中保存了一次HTTP请求的一切信息。request常用的属性如下:{{ request.url }}三、url_for 方法url_fo原创 2020-06-06 16:31:00 · 316 阅读 · 0 评论 -
Web框架——Flask系列之请求上下文与应用上下文&请求钩子&Flask-Script扩展命令行(十七)
请求上下文(request context)request和session都属于请求上下文对象。应用上下文(application context)current_app和g都属于应用上下文对象。current_app:表示当前运行程序文件的程序实例。g:处理请求时,用于临时存储的对象,每次请求都会重设这个变量。...原创 2020-06-06 10:25:21 · 206 阅读 · 0 评论 -
Web框架——Flask系列之session机制(十六)
一、session机制图解二、设置和获取sessionfrom flask import Flask,sessionapp = Flask(__name__)# flask的session需要用到的密钥字符串app.config["SECRET_KEY"] = "Zepppppp"@app.route("/login",methods=["GET","POST"])def login(): # 设置session数据 session["name"] = "python"原创 2020-06-05 22:03:21 · 454 阅读 · 0 评论 -
Web框架——Flask系列之设置和读取cookie(十五)
设置cookie,默认有效期是临时cookie,浏览器关闭就会失效from flask import Flask,make_responseapp = Flask(__name__)@app.route("/set_cookie",methods=["GET"])def set_cookie(): resp = make_response("success") # 设置cookie,默认有效期是临时cookie,浏览器关闭就会失效 resp.set_cookie(".原创 2020-06-05 20:57:43 · 261 阅读 · 0 评论 -
Web框架——Flask系列之json、jsonify模块的使用(十四)
一、字典与json之间的格式转换json.dumps(字典) :将python的字典转换为json字符串json.loads(字符串) :将字符串转换为python中的字典from flask import Flaskimport jsonapp = Flask(__name__)@app.route("/index",methods=["GET"])def index(): # json就是字符串 data = { "name" : "python原创 2020-06-05 20:28:39 · 749 阅读 · 0 评论 -
Web框架——Flask系列之abort函数与自定义异常处理(十三)
一、abort函数使用abort函数可以立即终止视图函数的执行,并可以返回给前端特定的信息传递状态码信息,必须是标准的http状态码abort(403)传递响应体信息resp = Response(“login failed”)abort(resp)from flask import Flask,request,abort,Responseapp = Flask(__name__)@app.route("/login",methods=["GET"])def login():原创 2020-06-05 19:44:44 · 932 阅读 · 0 评论 -
Web框架——Flask系列之Flask创建app对象 & 路由(十二)
一、初始化参数import_name: 当前模块名static_url_path:静态资源的url前缀,默认为‘static’static_folder: 静态文件目录名,默认‘static’template_folder: 模板文件目录名,默认‘templates’二、配置参数app.config.from_pyfile(“yourconfig.cfg”) 或app.config.from_object()三、在视图读取配置参数app.config.get() 或者 curren原创 2020-06-03 19:43:16 · 701 阅读 · 1 评论 -
Web框架——Flask系列之request请求参数详解(十一)
requestrequest 就是flask中代表当前请求的 request对象,其中一个请求上下文变量(理解成全局变量,在视图函数中直接使用可以取到当前本次请求)常用的属性如下:原创 2020-05-31 16:58:42 · 2143 阅读 · 0 评论 -
Web框架——Flask系列之综合案例——图书管理系统(十)
一、知识点:表单创建数据库操作一对多关系演练二、实现步骤:创建数据库配置信息,定义模型类创建数据库表,添加测试数据编写html页面,展示数据添加数据删除书籍,删除作者三、创建数据库连接信息,定义模型from flask import Flask, render_template, redirect, url_for, flash, requestfrom flask_sqlalchemy import SQLAlchemyfrom flask_wtf.csrf import原创 2020-05-31 16:40:33 · 3550 阅读 · 2 评论 -
Web框架——Flask系列之Flask-SQLAlchemy数据库的基本操作(九)
数据库基本操作在Flask-SQLAlchemy中,插入、修改、删除操作,均由数据库会话管理。会话用 db.session 表示。在准备把数据写入数据库前,要先将数据添加到会话中然后调用db.session.commit()方法提交会话。在 Flask-SQLAlchemy 中,查询操作是通过 query 对象操作数据。最基本的查询是返回表中所有数据,可以通过过滤器进行更精确的数据库查询。一、在视图函数中定义模型类from flask import Flaskfrom fla原创 2020-05-30 22:52:27 · 1283 阅读 · 0 评论 -
Web框架——Flask系列之Flask-SQLAlchemy安装与使用 & 定义数据模型(八)
Flask-SQLAlchemy安装及设置SQLALchemy 实际上是对数据库的抽象,让开发者不用直接和 SQL 语句打交道,而是通过 Python 对象来操作数据库,在舍弃一些性能开销的同时,换来的是开发效率的较大提升SQLAlchemy是一个关系型数据库框架,它提供了高层的 ORM 和底层的原生数据库的操作。flask-sqlalchemy 是一个简化了 SQLAlchemy 操作的flask扩展。文档地址:http://docs.jinkan.org/docs/flask-sqlalchem原创 2020-05-30 22:18:36 · 293 阅读 · 0 评论 -
Web框架——Flask系列之WTF表单验证练习(七)
一、效果图及目录结构二、模板代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <form method="post"> {# 设置csrf_token #} {{ form.csrf_to原创 2020-05-30 19:34:02 · 528 阅读 · 0 评论 -
Web框架——Flask系列之模板使用练习(六)
一、实现的效果如下:二、实现要求:给定如下5条数据,只显示4行数据,背景颜色依次为:黄,绿,红,紫my_list = [ { "id": 1, "value": "我爱工作" }, { "id": 2, "value": "工作使人快乐" }, { "id": 3, "value": "沉迷于工作无法自拔" }, { "id": 4,原创 2020-05-30 19:19:50 · 254 阅读 · 0 评论 -
Web框架——Flask系列之自定义过滤器详解(五)
一.为什么要自定义过滤器过滤器的本质是函数。当模板内置的过滤器不能满足需求,可以自定义过滤器。二.自定义过滤器两种方式方式一先定义函数后添加到过滤器列表,app.add_template_filter(‘函数名’,‘过滤器名称’)def do_listreverse(li): # 通过原列表创建一个新列表 temp_li = list(li) # 将新列表进行返转 temp_li.reverse() return temp_liapp.add_te原创 2020-05-30 19:10:05 · 250 阅读 · 0 评论 -
Web框架——Flask系列之CSRFToken详解(四)
CSRF(理解)一. 什么是CSRFToken?CSRF全拼为Cross Site Request Forgery,译为跨站请求伪造。CSRF指攻击者盗用了你的身份,以你的名义发送恶意请求。包括:以你名义发送邮件,发消息,盗取你的账号,甚至于购买商品,虚拟货币转账…造成的问题:个人隐私泄露以及财产安全。二.CSRF攻击示意图客户端访问服务器时没有同服务器做安全验证三.防止CSRF攻击在客户端向后端请求界面数据的时候,后端会往响应中的 cookie 中设置 csrf_token原创 2020-05-30 17:57:11 · 408 阅读 · 0 评论 -
Web框架——Flask系列之Jinja2自带过滤器(三)
一.过滤器概述过滤器的本质就是函数。有时候我们不仅仅只是需要输出变量的值,我们还需要修改变量的显示,甚至格式化、运算等等,而在模板中是不能直接调用 Python 中的某些方法,那么这就用到了过滤器。二.两种过滤器2.1字符串使用格式:{{ 字符串 | 字符串过滤器 }}safe:禁用转义<p>{{ '<em>hello</em>' | safe }}</p>capitalize:把变量值的首字母转成大写,其余字母转小写<p>原创 2020-05-30 17:48:47 · 195 阅读 · 0 评论 -
Web框架——Flask系列之Jinja2模板引擎(二)
Jinja2模板引擎简介一、Jinja2模板概述用来展示数据的html页面,这个过程也通常称为渲染,属于Jinja2的功能 使用模板的好处:视图函数只负责业务逻辑和数据处理(业务逻辑方面)而模板则取到视图函数的数据结果进行展示(视图展示方面)代码结构清晰,耦合度低二、Jinja2特点Jinja2:是 Python 下一个被广泛应用的模板引擎,是由Python实现的模板语言,他的设计思想来源于 Django 的模板引擎,并扩展了其语法和一系列强大的功能,其是Flask内置的模板语言。模板语原创 2020-05-30 16:10:09 · 472 阅读 · 0 评论 -
Web框架——Flask系列之Flask简介(一)
一、Web应用程序作用Web(World Wide Web)诞生最初的目的,是为了利用互联网交流工作文档二、关于Web框架(一)什么是Web框架?已经封装好了一段代码,协助程序快速开发,相当于项目半成品开发者只需要按照框架约定要求,在指定位置写上自己的业务逻辑代码例如:在某个区需要成立一家医院,有两种方式:圈地,打地基,盖楼,装修,入驻买楼,装修,入驻(二)为什么要用Web框架?1.web网站发展至今,特别是服务器端,涉及到的知识、内容,非常广泛。这对程序员的要求会越来越原创 2020-05-28 23:33:16 · 1414 阅读 · 0 评论 -
JavaScript+ Canvas开发趣味小游戏《贪吃蛇》
一、效果展示二、《贪吃蛇》基本实现思路蛇头部分+蛇身体部分:采用对象形式来存储坐标,并将每个坐标对象放到一个snake数组中,方便使用。设置每个方格宽度30px,高度30px,画布高度600px,宽度600px。a.新蛇头newHead等于旧蛇头oldHead的x坐标或者y坐标+1b.蛇的头部+身体部分,每次更新(动起来)的规律:每次将蛇的身体部分的最后1个方块(尾部)删除,然后在蛇的头部的前面增加1个方块:该新增的方块(newHead)的坐标与原来头部方块(oldHead)的坐标关系为原创 2020-05-23 18:38:47 · 3795 阅读 · 1 评论 -
jQuery学习笔记系列(二)
day02 - jQuery学习目标:能够操作 jQuery 属性能够操作 jQuery 元素能够操作 jQuery 元素尺寸、位置1.1. jQuery 属性操作 jQuery 常用属性操作有三种:prop() / attr() / data() ;1.1.1 元素固有属性值 prop() 所谓元素固有属性就是元素本身自带的属性,比如 <a> 元素里面的 href ,比如<input> 元素里面的 type。语法 注意:prop() 除了普通属原创 2020-05-11 15:38:06 · 224 阅读 · 0 评论 -
jQuery学习笔记系列(一)——入口函数,jQuery对象和DOM对象,jQuery选择器、样式操作、效果(显示隐藏、滑入滑出、淡入淡出、自定义动画、停止动画队列)
day01 - jQuery学习目标:能够说出什么是 jQuery能够说出 jQuery 的优点能够简单使用 jQuery能够说出 DOM 对象和 jQuery 对象的区别能够写出常用的 jQuery 选择器能够操作 jQuery 样式能够写出常用的 jQuery 动画1.1. jQuery 介绍1.1.1 JavaScript 库 JavaScript库:即 library,是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库,就是在这个库中,封装了很多预先定义原创 2020-05-11 00:08:48 · 403 阅读 · 1 评论 -
十五、CSS 3新特性详解(三)——3D转换(位移、旋转、呈现)、透视perspective、旋转rotateX、Y、Z、呈现transform-style
HTML5 第三天一、 认识 3D 转换3D 的特点近大远小物体和面遮挡不可见三维坐标系x 轴:水平向右 – 注意:x 轴右边是正值,左边是负值y 轴:垂直向下 – 注意:y 轴下面是正值,上面是负值z 轴:垂直屏幕 – 注意:往外边的是正值,往里面的是负值二、3D 转换3D 转换知识要点3D 位移:translate3d(x, y, z)3D 旋转:rotate3d(x, y, z)透视:perspctive3D呈现 tran原创 2020-05-10 09:58:58 · 1139 阅读 · 0 评论 -
十四、CSS 3新特性详解(二)——2D转换(transform)、动画(animation)、动画序列
HTML5 第二天一、rotate2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转使用步骤:给元素添加转换属性 transform属性值为 rotate(角度) 如 transform:rotate(30deg) 顺时针方向旋转30度div{ transform: rotate(0deg);}二、三角<!DOCTYPE html><html> <head> <meta charset="utf-8">原创 2020-05-09 18:54:47 · 331 阅读 · 0 评论 -
十三、CSS 3新特性详解(一)——属性、结构伪类、伪元素选择器,nth-child与nth-of-type区别,2D rotate,calc函数、滤镜filter、过渡transition
七、CSS3 属性选择器(上)什么是 CSS3在 CSS2 的基础上拓展、新增的样式CSS3 发展现状移动端支持优于 PC 端CSS3 目前还草案,在不断改进中CSS3 相对 H5,应用非常广泛属性选择器列表属性选择器代码演示(1)E[att] 选择具有att属性的E元素(2)E[att = ‘val’] 选择具有att属性并且属性值为val的E...原创 2020-05-06 23:52:15 · 451 阅读 · 0 评论 -
十二、HTML5新增标签特性详解(audio、video、input)
HTML5 第一天一、什么是 HTML5HTML5 的概念与定义定义:HTML5 定义了 HTML 标准的最新版本,是对 HTML 的第五次重大修改,号称下一代的 HTML两个概念:是一个新版本的 HTML 语言,定义了新的标签、特性和属性拥有一个强大的技术集,这些技术集是指: HTML5 、CSS3 、javascript, 这也是广义上的 HTML5HTML5 ...原创 2020-05-06 22:15:57 · 866 阅读 · 0 评论 -
十一、CSS初始化详解
CSS初始化不同浏览器对有些标签的默认值是不同的,为了消除不同浏览器对HTML文本呈现的差异,照顾浏览器的兼容性,我们需要对CSS初始化。简单理解:CSS初始化是指重设浏览器的样式。(也称为CSS reset)每个网页都必须首先进行CSS初始化。Unicode编码字体:把中文字体的名称用相应的Unicode编码来代替,这样就可以有效的避免浏览器解程CSS代码时候出现乱码的问题。比如:黑...原创 2020-05-06 17:44:45 · 694 阅读 · 0 评论 -
十、CSS三行代码实现 溢出的文字省略号显示(white-space: nowrap;overflow: hidden;text-overflow: ellipsis;)
4. 溢出的文字省略号显示4.1 white-spacewhite-space设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容white-space:normal ;默认处理方式white-space:nowrap ; 强制在同一行内显示所有文本,直到文本结束或者遭遇br标签对象才换行。4.2 text-overflow 文字溢出设置或检索是否使用一个省略标记(…...原创 2020-05-06 15:34:44 · 3954 阅读 · 1 评论 -
九、一篇文章帮助你读懂CSS属性:vertical-align 垂直对齐
3. vertical-align 垂直对齐有宽度的块级元素居中对齐,是margin: 0 auto;让文字居中对齐,是 text-align: center;但是我们从来没有讲过有垂直居中的属性。vertical-align 垂直对齐,它只针对于行内元素或者行内块元素,vertical-align : baseline |top |middle |bottom 设置或检索对象...原创 2020-05-06 15:17:38 · 354 阅读 · 0 评论 -
八、pink老师的学习笔记—— CSS用户界面样式(鼠标样式、轮廓线、防止拖拽文本域)
2. CSS用户界面样式所谓的界面样式, 就是更改一些用户操作样式,以便提高更好的用户体验。更改用户的鼠标样式 (滚动条因为兼容性非常差,我们不研究)表单轮廓等。防止表单域拖拽2.1 鼠标样式cursor设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。属性值描述default小白 默认pointer小手move移动...原创 2020-05-06 11:56:59 · 287 阅读 · 0 评论 -
七、CSS 三大特性(完整详细解析)
**CSS 三大特性(完整详细解析)**1.优先级:定义CSS样式时,经常出现两个或更多规则应用在同一元素上,此时,选择器相同,则执行层叠性选择器不同,就会出现优先级的问题。1)权重计算公式a.简单记忆法: 通配符和继承权重为0标签选择器 权重为1类(伪类)选择器为10id 选择器 权重为100行内样式表 权重为 1000!important 权重为 无穷...原创 2020-04-23 20:21:07 · 325 阅读 · 0 评论 -
六、pink老师学习笔记——CSS三角形之美& margin负值之美&文字围绕浮动元素&行内块元素布局的巧妙运用
7. 拓展@7.1 margin负值之美1). 负边距+定位:水平垂直居中咱们前面讲过, 一个绝对定位的盒子, 利用 父级盒子的 50%, 然后 往左(上) 走 自己宽度的一半 ,可以实现盒子水平垂直居中。2). 压住盒子相邻边框7.2 CSS三角形之美 div { width: 0; height: 0; line-height:0; font...原创 2020-05-06 11:29:26 · 443 阅读 · 1 评论 -
五、pink老师的学习笔记——CSS精灵技术(sprite)
5. CSS精灵技术(sprite) 重点5.1 为什么需要精灵技术图所示为网页的请求原理图,当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户。然而,一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接受和发送请求,这将大大降低页面的加载速度。pink老师告诉你我们为什么需要精灵技术:为了有效地减少服务器接受...原创 2020-05-06 10:59:28 · 1009 阅读 · 0 评论 -
四、pink老师的学习笔记——元素的显示与隐藏
1. 元素的显示与隐藏目的让一个元素在页面中消失或者显示出来场景类似网站广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现!1.1 display 显示(重点)display 设置或检索对象是否及如何显示。display: none 隐藏对象display:block 除了转换为块级元素之外,同时还有显示元素的意思。特点: 隐藏之后,不再保留位...原创 2020-05-06 10:17:48 · 503 阅读 · 4 评论