# study_web **Repository Path**: myclms/study_web ## Basic Information - **Project Name**: study_web - **Description**: django,前端,数据库mysql - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-01-10 - **Last Updated**: 2025-03-01 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 网站开发学习之旅 Flask -> Django ## 1. HTML 标签语言 ```html 网页名

标题系列标签

整行标签1
整行标签2
行内标签1 行内标签2 超链接
  1. 中国
  2. 亚洲
id name
0 阿斯旺
1 阿斯旺

inout系列

男 女 篮球 足球 乒乓球 棒球
``` ## 2. CSS 美化标签。一般美化同一类标签即**class**。**id**一般用来指定某一个标签。 三种写的位置： 1. 标签里 2. head里 3. 单独的.css文件+head引入 cursor : pointer; // 放上去的鼠标变成手 ### 选择器 1. 标签 li{} 2. 类 .className{} 3. id #idName{} 4. 属性选择 搭配前三种使用[propertyName=".."] 5. 后代选择 空格（递归查找） > （直接子孙） 6. 动态 :hover 补充： 类有两个
123
. .c2{color:red;} .c1{color:green;}. 会使用下面的即green. 不想被覆盖要写： .c2{color:red !important;} ### 宽高 height, width width 支持百分比;**块级标签不支持高宽度，只会对子标签有意义**。 ### display display: block; display: inline-block; display: inline;display: none; // 不显示 // **行内标签默认设置高度和边距无效** 需要使用display: inline-block ### 文字 color font-size font-weight font-family text-align: center;// 文字水平居中 line-heght: 59px; // (==height)垂直居中 ### 浮动 float: right; // 可修改块级标签为行内 // 解决 脱离文档流（离开父标签） // 在最后 增加孩子节点
### 边距 **边距 body默认有边距** 内 padding 外 margin 消除body边距 body{margin:0;} ### 居中 ​ 文字 ​ text-align: center;// 文字水平居中 ​ line-heght: 59px; // (==height)垂直居中 ​ 区域水平居中 ​ margin: auto; ​ 通用 ​ 计算+添加外边距 ### 超链接 // **去除超链接文本下划线** a{ text-decoration: none; } ```html ``` ### 伪类 :hover :after 清除浮动 .clearfix:after{ content: "" display: block; clear: both; } ### position position: fixed; position: relative; // 父标签 position: absolute; // 子标签 z-index: 1000; // 谁大谁在上面一层（用于遮罩层） ### border border: 粗细 样式 颜色; border-left ### 颜色 background-color 颜色： 1. red transparent ... 2. #777 ... ### 阴影 box-shadow: 水平宽度 垂直宽度 模糊程度 颜色 ### 蒙版 ```html .mask{ background-color: black; capacity: 0.9; display: none; }
``` ### 模板与框架 框架： 别人写好的CSS。首先要下载，然后引用，要按照规定的类名等定义标签+自定制。 [BootStrap](https://www.bootcss.com/) 导航，栅格系统，列偏移 container, container-fluid + clearfix 面板 表格 图标 ： [bootstrap](https://icons.bootcss.com/) / [fontawesome](https://fontawesome.com.cn/v4/cheatsheet) js类库 #### 引入 1. *.css 开发版本（开发使用，更易查看） 2. *.min.css 生产版本（去掉换行以压缩，发布使用） #### 响应式 1. 响应式 当屏幕小于一定像素，本来一行的会自动变成两行，以适应屏幕。 2. 非响应式 固定 ## 3. JavaScript 用户交互逻辑，页面动态。 setinterval(func, 1000); // 每1s执行一次func函数 DOM、BOM -> JQuery、VUE、React、... (内置模块 -> 第三方模块) ### 3.1. jQuery选择器 #### 直接寻找 $(“#idName”) $(“.className”) $(“tagName”) ... **和CSS一样** 多选择器:$(“#id,.class,tag,...”) #### 间接寻找 兄弟： $(“.c1”).prev().next() // 自己 .siblings() // 所有 父子：.parent() .children() // 所有孩子 .children(“.c2”) .find(“.c2”) ### 3.2. 内容 删除样式：$(self).next() .removeClass(“hide”) .hasClass(“hide”) .addClass(“hide”) #### 标签之间 $(“#id”).text() // 获取 $(“#id”).text(“修改后的内容”) #### 输入 $(“#input”).val() $(“#input”).val(“修改后的内容”) ### 3.3. 添加、删除标签 **创建标签** : var newli = $(“
  • ”).text(“...”); $(“ul”).append(newli); **删除** ： $(this).remove(); ### 3.4. 事件 ```javascript $(“li”).click(function(){ // 点击li,自动执行 // $(this) ... }) ``` ### 3.5. 框架加载后执行 ```javascript $(function(){ // 框架加载完成就执行，比如不等待图片内容加载 }) ``` ### 3.6. 时间选择器 bootstrap datepicker ## 4. Mysql 第三方模块 ：pymysql ```python # 模板 import pymysql # 创建连接 conn = pymysql.connect(host='localhost', port=3306, user='root', password='1', db='test', charset='utf8') # 创建游标 cursor = conn.cursor(cursor=pymysql.cursors.DictCursor) # 执行SQL语句 # sql = "insert into test(username, password) values('xty', '123456')" # cursor.execute(sql) # conn.commit() sql = "select * from test where username=%s" cursor.execute(sql, ['zzz',]) res = cursor.fetchone() print(res) # 关闭游标和连接 cursor.close() conn.close() ``` ```python cursor.execute("...", [ , ,]) # 执行 conn.commit() # 查询 [dict, dict, ...] / dict cursor.fetchall() cursor.fetchone() ``` [mysql语句](https://www.runoob.com/mysql/mysql-tutorial.html) ## 5. Flask / Django 动态页面 ：需要借助Web框架实现。Web框架基于**模板**和**数据**整合实现动态页面。 - 模板 ： 前端 - 数据 ： 数据库管理系统 ### 5.1. Flask 需要文件夹 ：templates, static ```python @app.route('/login', methods=["GET"]) # 参数会体现到url def get_login(): print(request.args) return "

    登陆成功

    " @app.route('/login', methods=["POST"]) # 参数不会体现到url def post_login(): print(request.form) return "

    登陆成功

    " ``` ```html {% for item in item_list %} 1 {{item}} Otto @mdo {% endfor %} ``` ### 5.2. Django [菜鸟教程](https://www.runoob.com/django/django-tutorial.html) #### 5.2.1. 创建项目 ```shell django-admin startproject project_name project_name ├── manage.py [*] └── project_name ├── __init__.py ├── settings.py [! 项目配置] ├── urls.py [! url --> 函数] ├── asgi.py └── wsgi.py ``` #### 5.2.2. 创建app ```shell python manage.py startapp appname app1 ├── views.py [!函数] ├── tests.py ├── models.py [!数据库] ├── migrations │ └── __init__.py ├── __init__.py ├── apps.py └── admin.py ``` #### 5.2.3.快速上手 1. 注册app [settings.py] ![](https://gitee.com/myclms/pictures/raw/master/image-20241221171403449.png) 2. **编写url和视图函数对应关系** [urls.py] ![](https://gitee.com/myclms/pictures/raw/master/image-20241221163057346.png) 3. **编写视图函数** [views.py] ![](https://gitee.com/myclms/pictures/raw/master/image-20241221163306790.png) 4. 启动项目 ```shell python manage.py runserver 8000 ``` #### 5.2.4. templates 与 static ```python return render(request, “index.html”) # 默认按照app注册顺序,分别在app目录下的templates目录找html # 如果在settings.py添加配置，可以实现先到项目根目录下的templates找 # 'DIRS': [os.path.join(BASE_DIR, 'templates')] ``` **（没错，还是这两个文件夹）都最好放在对应的app目录下** ```python # settings.py ... TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [], 'APP_DIRS': True, 'OPTIONS': { 'context_processors': [ 'django.template.context_processors.debug', 'django.template.context_processors.request', 'django.contrib.auth.context_processors.auth', 'django.contrib.messages.context_processors.messages', 'app1.apps.App1Config', ], }, }, ] ... STATIC_URL = 'static/' ... ``` 支持“**动态引入**” ```html {% load static %} Title ... ``` #### 5.2.5. 模板语法 类似于pascal ```/span {{ n1 }} {{ list.0 }} {{ list.1 }} ... {{ dict.key_name }} {% for item in item_list %} {{ item }} {% endfor %} {% for item in dict.keys/dict.values/dict.items %} {{ item }} {% endfor %} {% if ... %} ... {% else if ... %} ... {% else %} ... {% endif %}
    {% csrf_token %}
    ``` #### 5.2.6. 请求和响应 1. django处理 ```python # 请求 request.method request.GET request.POST request.POST.get("key_name") # 响应 return HTTPResponse("...") return render(request, "*.html", params) return redirect("new_url")#重定向，返回用户一个url，让他自己再请求这个url # urls.py : path("index//", views.index) # views.py def index(request, nid): pass ``` 2. 前端通过表单发起请求 ```html

    注册

    用户：

    密码：

    注册

    用户：

    密码：

    ``` 3. #### 5.2.7. 内部集成[ORM框架](https://www.cnblogs.com/My-IronMan/p/15931961.html) 底层仍然调用pymysql之类的模块。提供方便的使用方法。 配置settings.py models.py ```python """ ORM:对象关系映射 作用：目的就是为了能够让不懂SQL语句的人通过python面向对象的知识点也能够轻松自如的操作数据库 缺陷:封装程度太高，有时候sql语句的效率偏低，需要自己写SQL语句 """ 类 ---------------->>> 表 对象 --------------->>> 表里面的数据 对象点属性 ---------->>> 字段对应的值 # 建表 / 改变表结构 class User(models.Model): # 由于一张表中必须要有一个主键字段 并且一般情况下都叫id字段 # 所以orm当你不定义主键字段的时候 orm会自动帮你创建一个名为id主键字段 # 也就意味着 后续我们在创建模型表的时候如果主键字段名没有额外的叫法 那么主键字段可以省略不写 username = models.CharField(max_length=32, verbose_name="用户名") password = models.CharField(max_length=64, verbose_name="密码") birth = models.DateField(verbose_name="生日") ``` 同步： ```shell 打开terminal输入命令 ******************************************************************** 2 数据库迁移命令 将操作记录记录到(migrations文件夹) python3 manage.py makemigrations 2.将操作真正的同步到数据库中 python3 manage.py migrate ******************************************************************** ``` 注意：如果已经有表，**新增列**一般要添加 default参数 或者 添加 null=True, blank=True ```python # 增加一行 User.objects.create(username="...", password="...") # 删除一行 (先筛选再删除) User.objects.filter(id=3).delete() # 删除所有行 User.objects.all().delete() # 筛选获取数据 User.objects.all() --> QuerySet User.objects.filter(id=3) --> QuerySet User.objects.filter(id=3).first() --> object # 注意: 数据类型为日期时需要使用datetime转换，obj.birth.strftime("%Y-%m-%d-%h-%s") # html中: obj.birth|date:"Y-m-d H:i:s" , "|"调用后面的"date"函数，并且传递前面的值作为参数 # choices obj.gender --> 1,2 obj.get_gender_display() --> "男"，"女" # foreignKey obj.keyname.colName --> 去参照表中获取数据 # 更新 User.objects.filter(id=3).update(username="...") ``` #### 5.2.8. 模板继承 ```html {% load static %} 影视人生 {% block css %}{% end block %} {% block content %}{% end block %} {% extends 'layout.html' %} {% block css %} 独特的css {% end block %} {% block content %}

    独特的内容

    {% end block %} ``` #### 5.2.9 ModelForm组件 非常简便、安全、高效！！！ 外键显示对象？ 在被参照类里定义函数： ```python class Department(models.Model): title = ... def __str__(self): return self.title # 和print解决方法一样 ``` 就会显示title ```html {{ field.foreignKeyName.fieldName }} ``` ~~带choices的field: {{ field.display_fieldName }}~~ 自定义校验规则： 1. validator 2. 钩子函数 def clean_字段名 ```python from django.core.exceptions import ValidationError def clean_xx(self): if 校验未通过: raise ValidationError("错误提示词") return self.cleaned_data.get("xx") ``` 校验错误提示汉化：(settings.py) ```python LANGUAGE_CODE = 'zh-hans' ``` 主动添加错误信息: ```python form.add_error("fieldName", "errorMsg") ``` ModelForm(data, instance) ```python class Formxx(xx): self.instance.pk self.data request.GET.get(“p”, “”) # 默认值"" fields:"__all__" ``` **应用样式** 1. 添加插件 ```python # 1 class Meta: model = xx fields = ["name", "password"] widgets = { "name":forms.TextInput(attrs={"class":"form-control"}), "password":forms.PasswordInput(attrs={"class":"form-control"}, render_value=True), } # 2 class xx(forms.ModelForm): name = forms.CharField( min_length = 3, label = "用户名", widget = forms.TextInput(sttrs={"class":"form-control"}) ) ``` 2. 重定义__init__函数 ```python class BootstrapModelForm(forms.ModelForm): def __init__(self, *args, **kwargs): super().__init__(*args, **kwargs) for name, field in self.fields.items(): if field.widget.attrs: field.widget.attrs["class"] = "form-control" field.widget.attrs["placeholder"] = field.label else: field.widget.attrs = { "class":"form-control", "placeholder":field.label, } class xx(BootstrapModelForm): ... ``` #### 5.2.10. 搜索+分页 自定义逻辑组件(类) #### 5.2.11. 密码数据md5加密存储 ![](https://gitee.com/myclms/pictures/raw/master/image-20250101134121968.png) #### 5.2.12. 用户登陆 Cookie,Session ```python request.session["info"] = {"name":username, "id":userid} # 自动完成。并且存到django_session表中 ``` **其他页面都需要验证登录状态** **中间件** 简化视图验证添加 #### 5.2.13 middleware settings.py MIDDLEWARE ```python class M1(MiddlewareMixin): def process_request(self, request): if request.path_info == "/login/": return None if request.session.get("info"): return None return redirect("/login/") return xxx # 直接走自己的process_response返回,不再往后走。return None才会继续走 def process_responnse(self, request, response): return response ``` #### 5.2.14 DRF(djangorestframwork) 基于Django的 **Restful Api开发框架** 1. django -- include 2. django -- 提供方便的数据库管理后台界面(superuser) 3. drf -- **serializer** 相当于表单类；@api_view([‘GET’]) 4. drf -- 提供方便的网页界面进行api测试！ ## 6. Ajax 一般传输数据为json格式 django : ```python JsonResponse(dict) ``` html: ```html ``` js: ```javascript ``` ## 7. 图表 [echarts](https://echarts.apache.org/handbook/zh/get-started/)