用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;
}

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

Python 相关文章推荐
Python中文件遍历的两种方法
Jun 16 Python
Python3实现从指定路径查找文件的方法
May 22 Python
详解详解Python中writelines()方法的使用
May 25 Python
深入浅析Python中的yield关键字
Jan 24 Python
pandas数值计算与排序方法
Apr 12 Python
Python读写及备份oracle数据库操作示例
May 17 Python
详解分布式任务队列Celery使用说明
Nov 29 Python
Python argparse模块应用实例解析
Nov 15 Python
python 读写文件包含多种编码格式的解决方式
Dec 20 Python
python实现翻译word表格小程序
Feb 27 Python
python实点云分割k-means(sklearn)详解
May 28 Python
关于python3.7安装matplotlib始终无法成功的问题的解决
Jul 28 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
You might like
PHP 高手之路(二)
2006/10/09 PHP
php开发微信支付获取用户地址
2015/10/04 PHP
老生常谈PHP面向对象之命令模式(必看篇)
2017/05/24 PHP
PHP基于SimpleXML生成和解析xml的方法示例
2017/07/17 PHP
PHP实现的分解质因数操作示例
2018/08/01 PHP
Centos7.7 64位利用本地完整安装包安装lnmp/lamp套件教程
2021/03/09 Servers
ASP SQL防注入的方法
2008/12/25 Javascript
JS中判断JSON数据是否存在某字段的方法
2014/03/07 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
2015/04/30 Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
2015/07/02 Javascript
jquery判断复选框是否选中进行答题提示特效
2015/12/10 Javascript
js仿百度切换皮肤功能(html+css)
2016/07/10 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
2016/12/24 Javascript
基于vue实现多引擎搜索及关键字提示
2017/03/16 Javascript
简单的JS控制button颜色随点击更改的实现方法
2017/04/17 Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
2017/11/03 Javascript
Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)
2018/02/08 Javascript
彻底揭秘keep-alive原理(小结)
2019/05/05 Javascript
Vue实现微信支付功能遇到的坑
2019/06/05 Javascript
JavaScript中的this基本问题实例小结
2020/03/09 Javascript
Selenium定时刷新网页的实现代码
2018/10/31 Python
Python3网络爬虫中的requests高级用法详解
2019/06/18 Python
Python使用ffmpy将amr格式的音频转化为mp3格式的例子
2019/08/08 Python
pytorch 更改预训练模型网络结构的方法
2019/08/19 Python
python scipy卷积运算的实现方法
2019/09/16 Python
Python TCPServer 多线程多客户端通信的实现
2019/12/31 Python
Python中私有属性的定义方式
2020/03/05 Python
Python中and和or如何使用
2020/05/28 Python
Python 抓取数据存储到Redis中的操作
2020/07/16 Python
eBay奥地利站:eBay.at
2019/07/24 全球购物
Ibatis如何使用动态表名
2015/07/12 面试题
数据库测试通常都包括哪些方面
2015/11/30 面试题
525心理活动总结
2014/07/04 职场文书
2015年农村党员公开承诺事项
2015/04/28 职场文书
幼儿园师德师风心得体会
2016/01/12 职场文书
python使用opencv对图像添加噪声(高斯/椒盐/泊松/斑点)
2022/04/06 Python