用pycharm开发django项目

1 在pycharm(企业版)中新建Django工程


12892840-b3cb9c858d7c3767.png

2 完成基础目录结构


12892840-f34f07835fd15b01.png

3 打开pycharm的Terminal,进入该工程的目录新建一个django工程


12892840-2e319c6e3f32c30e.png

4 完成后的项目目录


12892840-5aec3a0afdf530c2.png

5 修改配置文件settings.py文件,添加新创建的模块名


12892840-086b51d9091888d8.png

6 在模板目录中创建html页面

Django的开发遵循MTV模式(models, templates, views),views.py负责执行操作,models.py负责数据处理(如数据库连接),templates目录下存放网页的模板

首先在templates下新建一个ok.html文件,并把以下内容替换到该文件中


12892840-f2244bbb16ace19b.png

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 在终端输入启动命令


12892840-59a17f74f1674b63.png

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>&copy; 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}}

猜你喜欢

转载自blog.csdn.net/weixin_33862514/article/details/87032943