为什么用Djiago
- 免费开源
- 功能丰富
- 开发迅速
- 可拓展性强
- 模版系统
- 后台管理
新建python虚拟环境
作用：多项目时可能要使用不同版本的包、库
步骤：
- 新建一个项目文件夹，比如website
- 在命令行利用cd命令进入到website
- 输入python3 -m venv djangoenv
- 在website文件夹内会出现一个djangoenv文件夹
- windows输入djangoenv\scripts\activate激活虚拟环境
- mac输入source djangoenv/bin/activate激活虚拟环境
- 命令行开头会出现(djangoenv)字样
安装Django并新建项目
-
安装Django
pip install django报错：ERROR: Could not find a version that satisfies the requirement django (from versions: none)
ERROR: No matching distribution found for django- 解决：升级pip命令
pip install --upgrade pip
- 解决：升级pip命令
-
安装完成后输入
django-admin startproject my_blog创建网站项目其中my_blog是django网站项目的名称，自己命名，注意不要取django或者test之类的名称容易冲突，就会在website文件夹下生产一个
my_blog文件夹，image
-
初始化生成文件的用途
- manage.py 一个在命令行中可以调用的网站管理工具
- my_blog文件夹下：
- init.py 告诉python这个文件夹是一个模块
- setting.py my_blog项目的一些配置
- urls.py 网站内的各个网址声明
- wsgi.py web服务器与Django项目的接口
-
检查Djngo项目是否安装成功
-
cd my_blog -
python3 manage.py runserver如下图，没有报错，红字提示可以暂时忽略：
image
-
可访问http://127.0.0.1:8000/
image
-
前端入门
-
什么是前端？什么是后端
- 前端：你所能看见的，图、文字
- 后端：存储、逻辑数据
-
前端开发用什么？
- Chrome浏览器调试网站
-
前端三个重要方面
-
HTML
- HyperText Markup Language 超文本标记语言
- 网页最基本的元素
- 通过标记语言的方式来组织内容（文字、图片、视频）
- HTML元素解析
-
<开始标签 属性名=属性值>内容<结束标签>
<p class='info-list'>这是一个段落<\p>
-
- 建立一个HTML文件，保存为index.html
<!DOCTYPE html> <html> <head> <title> 我 的 博 客</title> </head> <body> <h1>静夜思</h1> <p>窗前明月光</p> <p>疑似地上霜</p> <p>举头望明月</p> <p>低头思故乡</p> </body> </html>
-
CSS
-
Cascading Style Sheets 样式层叠表
-
它定义一个网页该如何显示里面的元素，比如这个段落在左边还是右边，这段文字是什么颜色、字体等。
-
建立一个css文件，保存为index-style.css
p { color:blue; font-family:KaiTi; } -
建立css与html的联系，在index.html的
<title>下添加<link><!DOCTYPE html> <html> <head> <title> 我 的 博 客</title> <!--建立css与html的联系--> <link rel="stylesheet" type="text/css" href="index-style.css"> </head> <body> <h1>静夜思</h1> <p>窗前明月光</p> <p>疑似地上霜</p> <p>举头望明月</p> <p>低头思故乡</p> </body> </html> -
css解析
选择器{ 属性名:属性值; } -
id与class
- id在每个html文件只有一个
- class可以有多个 -
盒子模型
image
- 内容及盒子边框中间是padding,即内边距
- 边框与边框外其他元素之间是margin，即外边距
-
-
JavaScript
-
主要用于前端的编程语言
-
为网站提供动态、交互效果
-
建立一个js文件，保存为index.js
//定义一个字符串变量 var alertText="hello world"; //在网页弹出一个提示框 alert(alertText); -
建立js与html的关系，同
<link>标签一样，在<title>下加一个<script>标签<script type="text/javascript" src="index.js"></script>
-
-
作业
image
网友评论