1 在pycharm(企业版)中新建Django工程
2 完成基础目录结构
3 打开pycharm的Terminal,进入该工程的目录新建一个django工程
4 完成后的项目目录
5 修改配置文件settings.py文件,添加新创建的模块名
6 在模板目录中创建html页面
Django的开发遵循MTV模式(models, templates, views),views.py负责执行操作,models.py负责数据处理(如数据库连接),templates目录下存放网页的模板
首先在templates下新建一个ok.html文件,并把以下内容替换到该文件中
7 修改views.py内容,添加页面映射函数
from django.shortcuts import render
# Create your views here.
def myview(request):
return render(request,'ok.html')
8 修改urls.py文件,添加url映射
from django.contrib import admin
from django.urls import path
# 导入自定义views映射函数
from my_web.views import myview
urlpatterns = [
path('admin/', admin.site.urls),
path('ok/',myview)
]
9 在终端输入启动命令
10 在项目中添加static目录,并在该目录下创建css和images目录
在css目录下创建ok.css,内容:
body {
padding:0 0 0 0;
background-color:#ffffff;
background-image:url(../images/bg.jpg);
background-position:top left;
background-repeat:no-repeat;
background-size:cover;
font-family:Helvetica,Arial,sans-serif;
}
.main-content {
width:500px;
padding:20px 20px 20px 20px;
border:1px solid #dddddd;
border-radius:15px;
margin:30px auto 0 auto;
background:#fdffff;
-webkit-box-shadow:0 0 22px 0 rgba(50,50,50,1);
-moz-box-shadow:0 0 22px 0 rgba(50,50,50,1);
box-shadow:0 0 22px 0 rgba(50,50,50,1);
}
.main-content p {
line-height:26px;
}
.main-content h2 {
color:#585858;
}
.articles {
list-style-type:none;
padding:0;
}
.articles img {
float:left;
padding-right:11px;
}
.articles li {
border-top:1px solid #F1F1F1;
background-color:#ffffff;
height:90px;
clear:both;
}
.articles h3 {
margin:0;
}
.articles a {
color:#585858;
text-decoration:none;
}
.articles p {
margin:0;
}
.article-info {
float:left;
display:inline-block;
margin:8px 0 8px 0;
}
.rate {
float:right;
display:inline-block;
margin:35px 20px 35px 20px;
}
.rate-score {
font-size:18px;
font-weight:bold;
color:#585858;
}
.rate-score-hot {
}
.meta-info {
}
.meta-cate {
margin:0 0.1em;
padding:0.1em 0.7em;
color:#fff;
background:#37a5f0;
font-size:20%;
border-radius:10px ;
}
.description {
color:#cccccc;
}
.nav {
padding-left:0;
margin:5px 0 20px 0;
text-align:center;
}
.nav li {
display:inline;
padding-right:10px;
}
.nav li:last-child {
padding-right:0;
}
.header {
padding:10px 10px 10px 10px;
}
.header a {
color:#ffffff;
}
.header img {
display:block;
margin:0 auto 0 auto;
}
.header h1 {
text-align:center;
}
.footer {
margin-top:20px;
}
.footer p {
color:#aaaaaa;
text-align:center;
font-weight:bold;
font-size:12px;
font-style:italic;
text-transform:uppercase;
}
11 修改ok.html页面
{%load static %}
<html>
<head>
<link rel="stylesheet" type="text/css" href="{%static 'css/ok.css' %}">
</head>
<body>
<div class="header">
<img src="{%static 'images/blah.png' %}">
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Site</a></li>
<li><a href="#">Other</a></li>
</ul>
</div>
<div class="main-content">
<h2>Article</h2>
<ul class="articles">
<li>
<img src="{%static 'images/0001.jpg' %}" width="100" height="91">
<div class="article-info">
<h3><a href="#">The blah</a></h3>
<p class="meta-info">
<span class="meta-cate">fun</span>
<span class="meta-cate">Wow</span>
</p>
<p class="description">Just say something.</p>
</div>
<div class="rate">
<span class="rate-score">4.5</span>
</div>
</li>
<li>
<img src="{%static 'images/0002.jpg' %}" width="100" height="91">
<div class="article-info">
<h3><a href="#">The blah</a></h3>
<p class="meta-info">
<span class="meta-cate">butt</span>
<span class="meta-cate">NSFW</span>
</p>
<p class="description">Just say something.</p>
</div>
<div class="rate">
<img src="{%static 'images/Fire.png' %}" width="18" height="18">
<span class="rate-score">5.0</span>
</div>
</li>
<li>
<img src="{%static 'images/0003.jpg' %}" width="100" height="91">
<div class="article-info">
<h3><a href="#">The blah</a></h3>
<p class="meta-info">
<span class="meta-cate">sea</span>
</p>
<p class="description">Just say something.</p>
</div>
<div class="rate">
<span class="rate-score">3.5</span>
</div>
</li>
<li>
<img src="{%static 'images/0004.jpg' %}" width="100" height="91">
<div class="article-info">
<h3><a href="#">The blah</a></h3>
<p class="meta-info">
<span class="meta-cate">bay</span>
<span class="meta-cate">boat</span>
<span class="meta-cate">beach</span>
</p>
<p class="description">Just say something.</p>
</div>
<div class="rate">
<span class="rate-score">3.0</span>
</div>
</li>
</ul>
</div>
<div class="footer">
<p>© Mugglecoding</p>
</div>
</body>
</html>
12 以上静态目录系统不能自动识别,修改settings.py文件
在最后添加,目录映射
STATICFILES_DIRS = (os.path.join(BASE_DIR,"static"),)
13 处理json格式请求并返回json,在views.py添加代码
import json
from django.httpimport JsonResponse
def __get_response_json_dict(data, err_code=0, message="Success"):
ret = {
'err_code': err_code,
'message': message,
'data': data
}
return ret
def get_sum(request):
# received_data = json.loads(request.body.decode('utf-8'))
# var1 = received_data['var1']
# var2 = received_data['var2']
#
# sum = var1 + var2
response_data = {"sum":886}
return JsonResponse(
__get_response_json_dict(data=response_data)
)
14 修改urls.py映射请处理函数
# 导入自定义views映射函数
from my_web.viewsimport myview
from my_web.viewsimport get_sum
urlpatterns = [
path('admin/', admin.site.urls),
path('ok/',myview),
path('getsum/',get_sum)
]
15 在浏览器中请求http://localhost:8000/getsum/
返回json格式数据:
{"err_code": 0, "message": "Success", "data": {"sum": 886}}