PythonWeb前端

已于 2024-06-19 21:11:29 修改
阅读量739 收藏 23
点赞数 22
文章标签： 前端 数据库 python flask 后端 pycharm
于 2024-06-19 21:06:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_74889578/article/details/139722666
版权

摘要

学校的一门选修课，PythonWeb开发从入门到实践，用到的技术有Python,Flask,MySQL,前端三件套等，但因为是选修课，所以都只涉及到了一点点

Web前端基础

1.Web工作原理

概念：

Web，万维网，一个通过互联网访问，许多互相链接的超文本组成的系统。

Web开发的组成部分，前后端：

  • 前端：HTML,CSS,JS
  • 后端：Python,Java,PEEP等前端看不到的东西

2.HTML基础

具体见：http://t.csdnimg.cn/l0dm0

3.CSS基础

具体见：http://t.csdnimg.cn/Ypeas

课后题：

2be6e12f597743aaa2aa8fce7f08491a.png

1.选择器，及一条或多条声明 。声明由一个属性和一个值组成，冒号分开。

2.元素选择器h1{}，类选择器.center{}，id选择器#name{}，标签类选择器p.center{}

3.字体、颜色等

4.内联样式、内部样式、外部样式

4.JavaScript基础

定义：

JavaScript一种可以嵌入在HTML代码中由客户端浏览器运行的脚本语言，可以实现网页特效和用户动态交互。

和Java之间的关系就像雷锋和雷峰塔

基础语法：

<body>
<script>
//定义变量
var q = '123';      
var qq = "123";
//定义无参函数:
function fun1(){
    console.log("使用function创建函数~~~");
    console.log("哈哈哈");
}
</script>
</body>

JS使用外部文件：

  • 语法格式：<script src='main.js'></script>
  • 优点：便于代码阅读；同时被多个页面调用
//main.js文件：
function reloop()
{
 var time = new Date( ); //获得当前时间
 //获得年、月、日，Date()函数中的月份是从0－11计算
 var year = time.getFullYear();  
 var month = time.getMonth()+1;
 var date = time.getDate();
}
//html文件引入
<head>
<script src='main.js'></script>
</head>

5.JQuery基础

一个快速、小巧且功能丰富的 JavaScript 库。它极大简化了 HTML 文档遍历和操作、事件处理、动画以及 Ajax 交互。

JQuery基本语法：

e81c524c1f44414ba58a324ad366aba8.png

fd2c0daf84f44d74afe330beeedcee3c.png

选择器：

c36897e786874f7e8ead538418b9b16f.png

触发事件：

d840f06d159f41dfba208d13ff3121e6.png

    <script src="./jquery-3.7.1.js"></script>
    <script>
        function di(){
            alert('只是个弹窗');
        }
    </script>
    <script>
        function dic(){
            alert('只是张照片');
        }
         $(document).ready(function() {
            $("img").hover(dic);
<!--鼠标悬停-->
        });
    </script>
<body>
<button onclick="di()" type="submit">出现弹窗</button>
</body>

主要特点和功能：

// 选择所有 p 元素并将其隐藏
$("p").hide();

// 当用户点击按钮时显示一个警告框
$("button").click(function() {
    alert("Button clicked!");
});

// 隐藏一个元素，然后在 1 秒后显示它
$("#myElement").hide().fadeIn(1000);

// 自定义 jQuery 插件示例
(function($) {
    $.fn.greenify = function() {
        this.css("color", "green");
        return this;
    };
})(jQuery);
$("p").greenify();// 使用自定义插件

MySQL数据库基础

简介：

MySQL是一个关系型数据库管理系统。由于windows中对大小写不敏感，方便书写，以下命令均小写。

1.数据库操作命令

增删改查数据库，库命名为字母数字下划线和$

//增
create database db_name;
//查
show databases;
//删
drop database db_name;
//使用数据库
use db_name;
//查看当前数据库
select database();
//查看当前数据库版本
select version();

2.数据表操作命令

//查
show tables from db_name;
//增
create table table_name from db_name(id int(8) NOT NULL,name....);
//查看表
describe table_name;
show columns from db_name.table_name
//增加属性
alter table table_name add gender char(8) NOT NULL;
//删
alter table table_name drop gender;
//删表
drop table table_name;

3.MySQL数据类型

数值型：

3d2a5a59c4234effb577aca4a62d4eaf.png

日期和时间型：

82f414ce2b3d4dbdbf82c4f09c2e03ae.png

字符串类型：

ac40a766ff394e658c1a02fb92492e23.png

drop and delete? 

4.数据增删改查

增加数据：

INSERT INTO table_name(id,name,gender) VALUES('123','frank','male'),
('1234','lili','female');

删除数据：

delete from A where id='3';

修改数据：

update A set name='frank' where id='3';

查看数据：

//查询所有
SELECT * FROM table_name;
//查询某一列
select id,name from table_name;
//多表查询
select A.id,B.name from A,B where A.id=B.id;
//去除重复行
select age distinct from A;
//显示前三行结果 desc降序排列，默认升序
select * from A order by id desc limit 3;
//分组查询,having限定第二个查询条件
select gender avg(price) from A group by gender having avg(price)>50;
//模糊查询,含li的数据
select * from A where like'%li%';
//联合多列
select id,concat(name,':',gender) as info from A;

5.Python操作MySQL

pip install mysql-connector安装完成后进行下面操作：

数据库连接：

//创建数据库连接
import mysql.connector
mydb = mysql.connector.connect(
    host = 'localhost',
    user = 'root',
    password = '1234',  # 改成自己的
    database = 'db_name'
)

创建数据库：

mycursor = mydb.cursor()
mycursor.execute('create database db_name')  # 执行SQL
#关于占位符
mycursor.execute("INSERT INTO table_name (column1, column2) VALUES (%s, %s)", (value1, value2))

#当data为列表
data = [(value1_1, value2_1), (value1_2, value2_2), ...]
cursor.executemany("INSERT INTO table_name (column1, column2) VALUES (%s, %s)", data)

#如果存在，删除表A
mycursor.execute('drop table if exists A')
print(mycursor.rowcount,'条记录被修改')

#提交事务并关闭连接
mydb.commit()
mycursor.close()
mydb.close()

5bc6dab794a4458eaa16d14b758568bb.png

Web框架基础（Flask）

1.Web框架概述

Web发展历程：

  • 静态页面：浏览器向服务器发送HTTP请求，服务器返回静态HTML信息
  • 动态内容
  • 脚本语言
  • Web框架

简介： 

简化Web开发的软件框架 。提供功能：支持数据库、路由分发、请求处理、模板渲染、安全性

主流框架有：Flask，Django，Tornado

2.初识Flask

介绍：基于python的轻量级、可定制的Web开发框架

Flask微框架的两个主要依赖：

  • Werkzeug：WSGI工具库，提供路由、调试和Web服务器网关接口
  • Jinja2：模板渲染库，提供模板
  • 第三方库：其他的由第三方库完成

关于安装：pip install flask==版本号

如何在Pycharm使用就自行百度 ~因为有的是专业版有的是社区版

Flask目录结构： 

  • app.py:主程序，定义路由和视图函数
  • static:存放静态文件如CSS、JS、图片
  • templates:存放HTML文件渲染网页

第一个Flask程序：

写在app.py中 ，点击运行出的URl即可看到浏览器页面显示helloworld

from flask import Flask
app = Flask(__name__)

@app.route('/')  #app.route装饰器中的URL可自由修改，但注意以/开头
# 下面为视图函数，其返回值还可以是HTML标签
# 与上面的URL绑定，视图函数可以绑定多个URL，附加多个装饰器即可
def hello_world()：
    return 'helloworld'
if __name__ == '__main__':
    app.run(debug=True,port=5001)  # port设置端口号

URL用于标识和定位互联网上资源的字符串。通常用于在Web浏览器中指定要访问的网页、文件或其他资源的地址。 

一个URL由几个部分组成：

  1. 协议（Protocol）：指定了访问资源所使用的协议，如HTTP、HTTPS、FTP等。
  2. 主机名（Host）：标识了存储资源的服务器的名称或IP地址。
  3. 端口号（Port）：可选的，用于指定连接服务器时使用的端口号，默认值根据协议而定。
  4. 路径（Path）：指定了服务器上资源的具体路径或位置。
  5. 查询参数（Query Parameters）：可选的，用于向服务器传递额外的参数，以便资源的定制化访问。
  6. 片段标识（Fragment Identifier）：可选的，用于指定资源中的具体片段或位置。

Flask项目配置：

#1.通过app.config:
from flask import Flask
app = Flask(__name__)
# 设置 SECRET_KEY
app.config['SECRET_KEY'] = 'your_secret_key_here'

#2.通过update：
app = Flask(__name__)
app.config.update(SECRET_KEY='xxx')

#3.配置模块from_object()
# 所有的配置项放在一个config.py文件中，通过下面代码加载
# 通过模块字符串
app.config.from_object('config.config')
# 通过模块对象
from config import config
app.config.from_object(config)

#4.配置文件from_pyfile()
app.config.from_pyfile('config/config.py',silent=True) #silent表示不存在不跑出

3.Jinja2模板使用

Jinja2渲染模板、参数传递：

简介：

Jinja2是一个模板语言，比较符合Python语法。模板可以理解为一个文件，经过动态赋值（渲染）后返回给用户。

渲染模板：

即执行模板中的代码，并传入所有在模板中使用的变量，渲染结果返回HTML。

使用方式即在视图函数中使用Flask提供的渲染函数render_template()

# 关于jinja2模板的使用
from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")  # 定义路由
def introduce():
    username = ['小明', '小黑']
    gender = '男生'
    school = '清华大学'
    college = 'xx学院'
    profession = {'key1': '人工智能1', 'key2': '人工智能'}
    outlook = 'helloworld'
    return render_template(template_name_or_list='introduce.html',
                           username=username, gender=gender,
                           school=school, college=college,
                           profession=profession, outlook=outlook
                           )
if __name__ == '__main__':
    app.run(debug=True, port=5001)

introduce.html文件：

<body>
<div>
    <h1 align="center">个人介绍</h1>
    <img src="../static/微信图片_20240429212536.jpg" width="130px" align="right" onclick="dic()">
    <br>
    <p>我是：<b>{{username[1]}}</b></p>
    <p>性别：<em>{{gender}}</em></p>
    <p>就读于：<a href="https://www.haut.edu.cn/"></a>{{school}}</p>
    <p>所在学院：<b>{{college}}</b></p>
    <p> 专业：{{profession['key2']}}<br></p>
    <p>简介：{{outlook|length}}</p>
    <button onclick="di()" type="submit">出现弹窗</button>
</div>
</body>

模板参数和模板的控制语句： 

是写在HTML文件里的：

  • 模板参数：使用{{}}表示一个变量，即一个特殊的占位符。变量可以是列表、字典、对象等
  • 控制语句：使用{%%}包围的，常用的控制语句有if、for，由{%end xx%}结束 

过滤器：

相当于一个函数，把当前的变量传入到过滤器中，然后过滤器根据自己的功能在返回相应的值，之后将结果渲染到页面中。管道符号|使用，如{{outlook|length}}

682602f89b584ba58c85e8e606141fcd.png

b2f9fccc95b949738f773b5016cbf308.png 

自定义过滤器：

  • 通过add_template_filter:
#自定义过滤器

def length(args):
    return len(args)

app.add_template_filter(length, name='length')
  • 通过add.template_filter()装饰器实现：
app = Flask(__name__)
@app.template_filter()
def length(args):
    return len(args)

宏的应用和模板的继承：

宏功能类似于Python中函数，可传递参数，但没有函数返回值

宏定义：

包含声明和调用两部分。声明一个宏需要macro和endmacro标志

#标签之间的部分定义了一个名为 greeting 的宏
#该宏接受一个参数 name 并输出一个简单的问候语。

{% macro greeting(name) %}
    Hello, {{ name }}!
{% endmacro %}

#在模板的其他地方，我们可以通过 {{ greeting(...) }} 多次调用这个宏
#并传递不同的参数。
{{ greeting("Alice") }}
{{ greeting("Bob") }}

宏导入：

为方便不同模板使用，将宏放在单独模板文件macros.html，用时导入即可。

// 方法一
{%from 'macros.html' import greeting%}
 
//方法二
{%import 'macros.html' as macros%}
{{macros.greeting(name)}}

宏的include使用：

Jinja2模板继承允许定义一个基模板，把网页通用内容如导航栏，背景通过include放在基模板中，而每一个继承基模板的子模版在渲染时会自动包含这些内容。

//基模板引入方式，将父模板header.html引入到基模板生效
{% include "header.html" %}
{% block content %}{% endblock %} //用于定义一个命名的块的语法

//继承使用extends
{% extends "common.html" %}
{% block content %}
<!--允许子模板重写父模板中定义的块内容。-->
{% endblock %}

{% block content %}{% endblock %} 是在 Jinja2 模板中用于定义一个命名的块的语法。这个语法通常与模板继承结构一起使用，允许子模板重写父模板中定义的块内容。 

 4.蓝图与数据库 

Flask路由：

路由指用户请求的URL与视图函数之间的映射，处理函数与URL之间关系的程序称为路由。分为：

  • 静态路由：路径固定不变。即装饰器里写的url是固定的
  • 动态路由：指带有参数的页面路径。

常见的动态路由类型转换器：

  • string：默认可不用写
  • int、float
  • path：和string相似，但接受斜线          
# 结构：/prefix/<类型转换器：参数>

@app.route('/user/<name>')
def user(name):
    return '<h1>my name is %s</h1>'%name

@app.route('/user/<path：name>')
def user(name):
    return '<h1>my name is %s</h1>'%name

绑定视图函数：

绑定的两种方法：

  • app.route():和上面写的一样
  • app_url_rule():有三个参数，rule设置url，endpoint给url设置的名称，可在代码中引用，view_func指定视图函数的名称
def test():
    return 'hello'
add_url_rule(rule:'/test/',endpoint:'test',view_func=test)

定义类视图函数 ：

  • 定义一个视图类，继承于Flask.views.View
  • 视图类中定义方法dispatch_request，处理请求，返回HTML文本给客户端
  • 使用app_url_rule()绑定url和视图类

Flask蓝图：

蓝图，组织Flask应用程序代码的方式，允许将程序代码分成更小的模块，这些模块用于构建更大的应用程序。

步骤：

  • 创建蓝图对象：使用Blueprint类
  • 定义视图函数：定义蓝图中的视图函数
  • 注册蓝图：即将蓝图对象和URL前缀绑定在一起，app.register_blueprint
#写在__init__.py

#创建Flask蓝图、定义视图函数
from flask import Blueprint

home = Blueprint('home',__name__)

@home.route('/')
def index():
    return 'hello'

上述代码创建了一个home的蓝图对象，并定义了一个路由视图函数index。下面在应用程序中注册该蓝图，并将其绑定到/home下： 

# 写在app.py
# 注册蓝图
from flask import Flask
from home import home

app = Flask(__name__)
app.register_blueprint(home, url_prefix='/home')  # url中写入的才是转入要用的


if __name__ == '__main__':
    app.run(debug=True)

Flask-SQLAIchemy:

SQLAIchemy，一个数据库抽象层和数据库关系映射包，通常使用Flask-SQLAIchemy来操作。

安装依旧是pip install Flask-SQLAIchemy

连接数据库并创建表 ：

from flask import Flask
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URL'] = 'mysql+pymysql://root:yourpassword@localhost:3306/db_name'
db = SQLAlchemy(app)

#定义数据库模型
class User(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(80), unique=True, nullable=False)
    email = db.Column(db.String(120), unique=True, nullable=False)

    def __repr__(self):
        return f'<User {self.username}>'

if __name__ == '__main__':
    with app.app.context():
        db.create_all()

云浮万里_1
关注
  • 22
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Python Web前端开发JavaScript视频教程（四）
06-13
在本套"Python Web前端开发JavaScript视频教程（四）"中，主要聚焦于JavaScript这门重要的编程语言在Web前端开发中的应用。JavaScript是构建交互式网页的关键技术，无论是对于有基础还是无基础的学习者，都能从中...
Python Web前端开发HTML+CSS视频教程（三）
06-13
在本课程"Python Web前端开发HTML+CSS视频教程（三）"中，主要涵盖了Web前端开发的核心技术，特别是HTML5和CSS3的应用。这是一门针对想要提升前端开发技能的学员设计的教程，旨在帮助他们从基础知识到实战案例全面...
Python-web前端.ppt
04-09
Web开发这样一个大概念，对我...在网上广泛地浏览了一下这个方面的文章后，我发现当今Web开发的一大热门语言是Python（最大的当然还是PHP），而恰好我平常用Python也多，从Python入手，学习Web后端开发，也许要容易些。
Python Web前端开发jQuery从入门到精通视频教程（五）
06-13
了解Web前端开发技术掌握JavaScript和jQuery的基础语法及ajax方法的使用，并且使用他们可以编写简单的网页脚本，导航轮播图等内容。可以对js的使用有一个完整的了解 对于想从事web全栈开发的小伙伴是一个必不可少的...
my_blog：写一点博客，python web前端运维
02-20
#python基础教程 我是一只程序员，最近在写一个python的系列教程，帮助运维人员学python，在此记录一下。ppt基于nodeppt做的，博客文章会放到issue里 log_visual日志可视化 监视器10min手写一个简易的实时内存监控...
Web 性能入门指南 - 2.2 理解和改进最大内容绘制 (LCP)
weixin_43303603的博客
07-15 404
最大内容绘制 (LCP) 衡量的是页面上最大视觉元素的渲染时间。为了让 Google 满意，请将 LCP 时间控制在 2 秒以内。
＜Rust＞＜GUI＞rust语言GUI库tauri体验：前、后端结合创建一个窗口并修改其样式
用沸腾的热血，支付我们的人生吧！
07-16 1159
前言 本文是rust语言下的GUI库：tauri来创建一个窗口的简单演示，主要说明一下，使用tauri这个库如何创建GUI以及如何添加部件、如何编写逻辑、如何修改风格等，所以，这也是一个专栏，将包括tauri库的多个方面。 环境配置 系统：windows 平台：visual studio code 语言：rust、javascript、html、css 库：tauri概述 本文是tauri库系列博文的第一篇，主要是简单实现一个窗口程序并成功运行，当然，这是基于官方的示例，事实上官方给出的上手例程非常详细，不
博客前端项目学习day03——框架页
qq_53237241的博客
07-19 65
【代码】博客前端项目学习day03——框架页。
基于 Gunicorn、Flask 和 Docker 的 Web 应用开发
2401_85639015的博客
07-19 792
Docker 是一个开源的应用容器引擎，它允许开发者打包他们的应用以及应用的运行环境到一个可移植的容器中。容器可以运行在任何支持 Docker 的机器上，确保了环境的一致性。通过本教程，你将学会如何使用 Docker、Gunicorn 和 Flask 构建一个高效、可扩展的 Web 应用。每个步骤都提供了详细的指导和示例代码，确保你能够理解和实践每个环节。希望本教程能够作为你进入微服务架构领域的起点。
前端性能优化--懒加载
weixin_43799793的博客
07-19 76
3、同时还可结合 lazy loading 属性，利用浏览器的原生属性，进一步优化图片加载，不过其延迟加载机制完全是由浏览器自身决定的，在不同浏览器上效果不同(BTW，部分浏览器可能并不支持)。2、然后对元素进行监听，当图片进入可视区域时，提取元素的 data-src 即真实的图片地址赋值给 src 属性，就会去发送请求加载图片，实现了懒加载。设置为 1 张 1px*1px 的透明图片用作占位符，以防止出现出错图标。TinyPNG 网站: https://tinypng.com/
网站开发：使用VScode安装yarn包和运行前端项目
m0_67412019的博客
07-15 548
再次输入以下命令，无报错说明yarn安装成功。
自定义 Hooks 在 Vue3 中的应用和重要性
CodeQi技术小栈的博客
07-16 975
自定义Hooks是Vue3提供的一种将可复用逻辑提取到独立函数中的方式。这不仅可以减少代码的重复，还能让你的代码更加清晰易读，维护起来也更加方便。在这篇文章中，我将通过详细的步骤和实例，带你深入了解如何在Vue3中使用自定义Hooks，以及它们在实际项目中的应用和重要性。首先，我们来看一下如何创建一个简单的自定义Hook。在Vue3中，自定义Hook本质上就是一个返回特定功能的函数。让我们从一个简单的计数器例子开始。
原生html贪吃蛇？
weixin_52236586的博客
07-18 178
【代码】原生html贪吃蛇？
前端小项目-强调鼠标悬停时效果的名片
关注收藏，可以私信解决问题！
07-19 701
在学习完HTML和CSS之后，我们就可以开始做一些小项目了。本篇文章所讲的小项目为——动态效果名片。通过这个项目，你将学会如何使用HTML和CSS来创建一个具有动态效果的名片。
【简历】惠州某二本学院：前端简历指导，秋招面试通过率为0
shuize123的博客
07-16 655
因为基本上写网址简历的，直接会被扔掉，会让面试官觉得你要么是上过网课，要么是上过培训，因为现在特别是二本的简历，非常之多，所以HR会一直找一个条件，能够去筛选掉简历，同学说是专业的TOP2，那这个至少比98%的他们同校的同学要好，整体来讲的话，还是不错的，后面可以再补充一下放最好的奖项，，所以这个同学，在二本的这个小群体里面，也是在小公司的秋招里面，在教育背景这块，是可以比大部分二本同学要好一点的。，但是他不会给你减分，他有怀疑，但是他不确定的情况下，他是会给你机会往下去看的，
vue3前端开发-小兔鲜项目-一级页面banner图渲染
yrldjsbk的博客
07-19 211
其实，首页的banner渲染代码可以拿来复用的，只是区别在于，传递的接口参数不一样而已。我们的一级页面就可以成功拿到了后端接口反馈过来的一级栏目的banner图信息了。我们增加了一个参数对象params.而且做好了默认值的设置。（用的是一种解构赋值的模式）1：改造一下之前的获取banner的接口调用函数，增加一个参数对象。2：把之前HomeBanner.vue里面的代码，拿过来，在template里面新增banner的渲染模块内容。写好默认的值1.（不赋值的情况下，就是这个默认值1）3：修改完善页面内容。
React
weixin_45836841的博客
07-15 187
create-react-app（创建项目）：npx create-react-app xxx（xxx 项目名）
vue-print-nb 前端打印的一个实现方案
weixin_59685936的博客
07-19 346
vue-print-nb 前端打印的一个实现方案
使用JWT双令牌机制进行接口请求鉴权
最新发布
北海之灵的博客
07-19 394
1.JWT的使用 2.双令牌模式 3.无感刷新 token
python web前端
07-15
Python 在 web 前端开发中的主要作用是使用框架（如 Django、Flask）进行后端开发，而不是直接用于前端开发。Python 提供了丰富的库和工具，可以帮助前端开发者处理各种任务，比如数据处理、接口调用、服务器管理等...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值