Web前端开发之初体验

零基础开始Web前端开发，记录下学习理解的过程以及一些开发过程中遇到的问题。

基本流程

(1) 熟悉 HTML CSS 基本知识，了解 Django 开发的基本流程
（推荐教程：HTML CSS教程   Django教程）
(2) 设计 HTML 模板。利用 HTML 搭建结构，CSS 设计样式（主要使用 HTML+CSS，某些 JS 模块借助网上例程编写）
(3) 开始进行 Django 开发

背景知识

浏览器上网流程（HTTP请求/响应过程）

1. 用户输入网址后，浏览器生成相应的 HTTP 请求信息
2. 浏览器与对应的服务器建立 TCP 连接，发送 HTTP 请求
3. 服务器解析 HTTP 请求，并生成 HTTP 响应给浏览器
4. 释放 TCP 连接
5. 浏览器解析HTML代码，经过渲染后展示出来

Django 的作用是搭建Web服务器，即接收浏览器发来的 HTTP 请求，并返回相应的 HTTP 响应。

Django – MVC设计模式

• Django应用中主要的四个文件及作用：
  a. Models,py ( the database tables )：用python类来描述数据表。可通过简单的python代码来操作数据库（包括存、取、改、删数据）。
  b. Views.py ( the business logic )：包含页面的业务逻辑（视图函数）。
  c. Urls.py ( the URL configuration )：将URL与相应的视图函数绑定。
  d. Xxx.html ( the template )：html模板，描述了页面的设计。
• MVC（Model-View-Controller） 软件开发方法：将代码的定义和数据访问的方法（模型-a）与请求逻辑（控制器-c）还有用户接口（视图-b）分开。

Django 负责完成 URL 和 HTML 页面的匹配、HTML 页面与数据库的连接、多级 HTML 页面之间的响应。

问题整理

HTML + CSS遇到的问题

1. 各个模块的定位 position（层模型）

    - absolute
        - 脱离原来的位置进行定位 (绝对定位)
        - 相对于最近的有定位的父级进行定位，如果没有就相对于文档进行定位
    - relative
        - 保留原来位置进行定位
        - 相对于自己原来的位置进行定位
    - fix
        广告定位 固定定位
    -- 用 relative 作为参照物，用 absolute 进行定位

    - 居中方法：
        left: 50%;
        top: 50%;
        margin-left: -1/2 width px;
        margin-top: -1/2 height px;
        transform: translate(-50%, -50%); /* Method 2 */

2. 无法为表格标签 <th> /<td> 设置 margin

• 原因：表格元素中<tbody>子级标签（display: table-xx）的盒子模型没有 margin
  • 一般的盒子模型：
    外边距（margin）+ 盒子壁（border）+ 内边距（padding）+ 盒子内容（width / height）
  • <tr> ： border + width / height
  • <th> / <td> ： border + padding + width / height
• 解决方法：改变相应标签的 display 属性，如

	display: inline-block;

3. Inline-block 内容垂直居中问题

• 问题描述：原本表格标签默认文本内容垂直居中显示，但是改变其 display 属性后不再居中
• 解决方法：

	.value {
	    height: 100px;
	    display: inline-block;
	}
	.value:before {
	    content: "";
	    display: inline-block;
	    height: 100%;
	    vertical-align: middle;
	}
	/* vertical-align 就是基于该元素所在行的基线的垂直对齐，利用before伪元素在value容器之前构造一个height为100%的空inline-block，以改变父元素的基线高度 */
	.value {
	    vertical-align: middle;
	}

Django 遇到的问题

1. 创建数据库模型
   难点主要是确定数据库表之间的关联形式：一对一、一对多、多对多
   以博客文章Post与分类Category、标签Tag为例作说明：
   (1) 一对多（ForeignKey）：一篇文章只能对应一个分类，但是一个分类下可以有多篇文章；
   (2) 多对多（ManyToManyField）：一篇文章可以有多个标签，同一个标签下也可能有多篇文章

当时设计数据库表时一直在查找多对一的关联方式应该怎么表达，但后来顿悟多对一与一对多其实是一个意思，只需要调换一下主宾

2. 修改数据库失败

• 问题描述：在之后的开发过程发现原先设计的数据库不合理，需要增加某个模型的属性，但是修改后数据库迁移失败
• 解决方法：删除数据库 main 下除 sqlite_master 和 sqlite_sequence 表下的其他表然后重新执行迁移操作
  （详细操作参考：删除和重建数据库）
  
  

3. 根据id筛选数据库内容

• 问题描述：需要查找某个分类下所有的文章
• 解决方法:

	queryset = Post.objects.all().filter(category=category_id)
	# 只有一个对象
	queryset = Post.objects.all().get(category=category_id)

4. Pycharm操作问题：无法查看数据库的内容

• 原因：没有下载驱动
• 解决方法：db Settings – Test Connection
  
  
  

5. 在 JavaScript 中获取数据库对象

• 问题描述：若想在 HTML 模板中显示数据库中的数据，可以使用模板变量 {{ xx }}；但是在 JavaScript 中该方法不适用，而是需要将数据库对象（queryset）转换为 js 对象。
• 解决方法：

	# 1. 在 views.py 中： queryset --> json 对象
	district_list = serializers.serialize("json", queryset)

	// 2. 在需要调用的文件 xx.js 中： json 字符串 --> json 对象 --> js 对象
    var jsonStr = '{{ district_list | escapejs}}'; // 得到 json 字符串
    var jsonObj = JSON.parse(jsonStr); // json 字符串 转化成 json 对象
    // let jsonObj = $.parseJSON(jsonStr);

    // 将 json 对象转化成 json 数组对象
    let data_info=[];
        for(let i in jsonObj){
            data_info.push(jsonObj[i]);
        }