首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Python

用pycharm开发django项目示例代码

Posted in Python onJune 13, 2019

在pycharm（企业版）中新建Django工程，注意使用虚拟环境

用pycharm开发django项目示例代码

用pycharm开发django项目示例代码

创建成功后，在pycharm显示的工程目录结构如下：

用pycharm开发django项目示例代码

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

python3 manage.py startapp django_web

执行成功后，工程目录结构如下：

用pycharm开发django项目示例代码

修改settings.py文件，注册该工程

用pycharm开发django项目示例代码

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

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

<!DOCTYPE html>

<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>The blah</title>
 <link rel="stylesheet" type="text/css" href=" new_blah.css" rel="external nofollow" >
</head>
<body>

<div class="header">
 <img src="images/blah.png">
 <ul class="nav">
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Home</a></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Site</a></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Other</a></li>
 </ul>

</div>

<div class="main-content">
 <h2>Article</h2>
 <ul class="article">

  <li>
   <img src="images/0001.jpg" width="100" height="90">
   <h3><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >The blah</a></h3>
   <p>This is a dangerously delicious cake.</p>
  </li>

  <li>
   <img src="images/0002.jpg" width="100" height="90">
   <h3><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >The blah</a></h3>
   <p>It's always taco night somewhere!</p>
  </li>

  <li>
   <img src="images/0003.jpg" width="100" height="90">
   <h3><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >The blah</a></h3>
   <p>Omelette you in on a little secret </p>
  </li>

  <li>
   <img src="images/0004.jpg" width="100" height="90">
   <h3><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >The blah</a></h3>
   <p>It's a sandwich. That's all we .</p>
  </li>
 </ul>
</div>

<div class="footer">
 <p>© Mugglecoding</p>
</div>
</body>
</html>

<--!http://css3gen.com/box-shadow/-->

首先编写views.py文件，定义访问这个index.html文件的操作

def index(request): 

  return render(request, 'index.html')

编写urls.py文件，定义访问这个index.html的url路径（使用正则表达式）

from django.conf.urls import url 
from django.contrib import admin 
from django_web.views import index #导入views.py文件中的index函数 

urlpatterns = [ 
 url(r'^admin/', admin.site.urls), 
 url(r'^index/', index), #在url中凡是以url开头的访问都使用index函数来处理该请求 
]

在pycharm的Terminal中输入命令运行服务器：

python3 manager.py runserver

在浏览器中输入url：http://127.0.0.1:8000/index/ 可以看到如下的格式，接下来要做的就是添加资源

用pycharm开发django项目示例代码

将css文件（css文件的内容在最后）和图片（随意找几张图片，更名为如下所示即可）都复制到env5工程下的一个名为static的文件，工程结构如下：

用pycharm开发django项目示例代码

注意：一定要保证与templates目录同级

修改index.html如下

{% load static %}

<html>

<head>
 <link rel="stylesheet" type="text/css" href="{% static 'css/new_blah.css' %}" rel="external nofollow" >
</head>
<body>

<div class="header">
 <img src="{% static 'images/blah.png' %}">
 <ul class="nav">
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Home</a></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Site</a></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >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>

在settings.py文件的最后增加如下配置

STATICFILES_DIRS = (os.path.join(BASE_DIR, "static"),)

再次打开浏览器就可以看到正常的显示

用pycharm开发django项目示例代码

css文件

body {
 padding: 0 0 0 0;
 background-color: #ffffff;
 background-image: url(../images/bg3-dark.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;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

用pycharm开发django项目示例代码

- Author -

kylinlin

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Python 相关文章推荐
python实现逆波兰计算表达式实例详解
May 06 Python
python发送告警邮件脚本
Sep 17 Python
python实现对任意大小图片均匀切割的示例
Dec 05 Python
对Python 除法负数取商的取整方式详解
Dec 12 Python
python利用thrift服务读取hbase数据的方法
Dec 27 Python
Python实现监控Nginx配置文件的不同并发送邮件报警功能示例
Feb 26 Python
python爬虫之自制英汉字典
Jun 24 Python
Python字符串中删除特定字符的方法
Jan 15 Python
Python 如何对文件目录操作
Jul 10 Python
解决Pycharm 运行后没有输出的问题
Feb 05 Python
python制作图形界面的2048游戏, 基于tkinter
Apr 06 Python
python APScheduler执行定时任务介绍
Apr 19 Python
pyqt5 实现工具栏文字图片同时显示
Jun 13 #Python
Python自动化运维之Ansible定义主机与组规则操作详解
Jun 13 #Python
pyqt 实现在Widgets中显示图片和文字的方法
Jun 13 #Python
详解PyCharm+QTDesigner+PyUIC使用教程
Jun 13 #Python
PyCharm+Qt Designer+PyUIC安装配置教程详解
Jun 13 #Python
python之pyqt5通过按钮改变Label的背景颜色方法
Jun 13 #Python
python3.4+pycharm 环境安装及使用方法
Jun 13 #Python
NoSQL(1) Pickle(1) JOIN(1) apt命令(1) 缓冲区(1) json_extract(1) 类加载器(1) logging(1) Launch Mode(1) netty(1)
You might like
《超神学院》霸气归来, 天使彦上演维多利亚的秘密
2020/03/02 国漫
php使用Jpgraph创建柱状图展示年度收支表效果示例
2017/02/15 PHP
Jquery之美中不足小结
2011/02/16 Javascript
扩展jquery实现客户端表格的分页、排序功能代码
2011/03/16 Javascript
情人节之礼 js项链效果
2012/02/13 Javascript
Javascript无阻塞加载具体方式
2013/06/28 Javascript
Jquery解析Json格式数据过程代码
2014/10/17 Javascript
AngularJS基础学习笔记之指令
2015/05/10 Javascript
JS实现可点击展开与关闭的左侧广告代码
2015/09/02 Javascript
JS组件Bootstrap实现图片轮播效果
2016/05/16 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
2016/11/13 Javascript
EasyUI学习之DataGird分页显示数据
2016/12/29 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
2017/01/04 Javascript
详解Vue组件之作用域插槽
2018/11/22 Javascript
JavaScript实现单英文金山打字通
2020/07/24 Javascript
原生JavaScript之es6中Class的用法分析
2020/02/23 Javascript
[00:58]2016年国际邀请赛勇士令状宣传片
2016/06/01 DOTA
python共享引用(多个变量引用)示例代码
2013/12/04 Python
在树莓派2或树莓派B+上安装Python和OpenCV的教程
2015/03/30 Python
Windows下Anaconda的安装和简单使用方法
2018/01/04 Python
python2 与python3的print区别小结
2018/01/16 Python
Python使用add_subplot与subplot画子图操作示例
2018/06/01 Python
基于Django框架的权限组件rbac实例讲解
2019/08/31 Python
Python文件操作基础流程解析
2020/03/19 Python
pyCharm 实现关闭代码检查
2020/06/09 Python
Python pip使用超时问题解决方案
2020/08/03 Python
Python中用xlwt制作表格实例讲解
2020/11/05 Python
python 批量下载bilibili视频的gui程序
2020/11/20 Python
详解css3中的伪类before和after常见用法
2020/11/17 HTML / CSS
申请任职学生会干部自荐书范文
2014/02/13 职场文书
社区党支部公开承诺书
2015/04/29 职场文书
小学主题班会教案
2015/08/17 职场文书
详解CSS故障艺术
2021/05/25 HTML / CSS
给numpy.array增加维度的超简单方法
2021/06/02 Python
MySQL 时间类型的选择
2021/06/05 MySQL
go使用Gin框架利用阿里云实现短信验证码功能
2021/08/04 Golang