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

用pycharm开发django项目示例代码

Posted in Python onOctober 24, 2018

在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">
</head>
<body>

<div class="header">
  <img src="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="article">

    <li>
      <img src="images/0001.jpg" width="100" height="90">
      <h3><a href="#">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="#">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="#">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="#">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' %}">
</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>

在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中Collection的使用小技巧
Aug 18 Python
Python version 2.7 required, which was not found in the registry
Aug 26 Python
Python中shutil模块的常用文件操作函数用法示例
Jul 05 Python
200 行python 代码实现 2048 游戏
Jan 12 Python
初探TensorFLow从文件读取图片的四种方式
Feb 06 Python
python实现将excel文件转化成CSV格式
Mar 22 Python
Python实现找出数组中第2大数字的方法示例
Mar 26 Python
对Python中的条件判断、循环以及循环的终止方法详解
Feb 08 Python
使用Rasterio读取栅格数据的实例讲解
Nov 26 Python
解决Tensorboard 不显示计算图graph的问题
Feb 15 Python
python 回溯法模板详解
Feb 26 Python
Python如何通过百度翻译API实现翻译功能
Apr 02 Python
使用python采集脚本之家电子书资源并自动下载到本地的实例脚本
Oct 23 #Python
Python读取mat文件,并保存为pickle格式的方法
Oct 23 #Python
Python读取系统文件夹内所有文件并统计数量的方法
Oct 23 #Python
Python实现按逗号分隔列表的方法
Oct 23 #Python
Python解析Excle文件中的数据方法
Oct 23 #Python
使用python对excle和json互相转换的示例
Oct 23 #Python
Python实现将Excel转换成为image的方法
Oct 23 #Python
软件工程师面试题(40) J2EE面试题(19) UNIX面试题(27) Javascript面试题(44) PYTHON面试题(27) 软件测试工程师面试题(53) MySQL面试题(19) Servlet面试题(20) EJB面试题(46) Ruby面试题(15)
You might like
php登陆页的密码处理方式分享
2013/10/14 PHP
PHP文件大小格式化函数合集
2014/03/10 PHP
php字符串函数学习之strstr()
2015/03/27 PHP
Linux环境下php实现给网站截图的方法
2016/05/03 PHP
php中__toString()方法用法示例
2016/12/07 PHP
IE与Firefox下javascript getyear年份的兼容性写法
2007/12/20 Javascript
javascript-表格排序(降序/反序)实现介绍(附图)
2013/05/30 Javascript
JavaScript获取图片真实大小代码实例
2014/09/24 Javascript
jquery实现网站列表切换效果的2种方法
2016/08/12 Javascript
jQuery Ajax使用FormData对象上传文件的方法
2016/09/07 Javascript
微信小程序Server端环境配置详解（SSL， Nginx HTTPS，TLS 1.2 升级）
2017/01/12 Javascript
防止重复发送 Ajax 请求
2017/02/15 Javascript
jQuery上传多张图片带进度条样式（DEMO）
2017/03/02 Javascript
vue+vuex+json-seiver实现数据展示+分页功能
2019/04/11 Javascript
element中的$confirm的使用
2020/04/26 Javascript
python实现的udp协议Server和Client代码实例
2014/06/04 Python
python模拟鼠标拖动操作的方法
2015/03/11 Python
python自然语言编码转换模块codecs介绍
2015/04/08 Python
谈谈如何手动释放Python的内存
2016/12/17 Python
深入浅析Python中的yield关键字
2018/01/24 Python
浅谈python在提示符下使用open打开文件失败的原因及解决方法
2018/11/30 Python
使用PIL(Python-Imaging)反转图像的颜色方法
2019/01/24 Python
Django shell调试models输出的SQL语句方法
2019/08/29 Python
Pycharm同步远程服务器调试的方法步骤
2020/11/04 Python
CSS3与动画有关的属性transition、animation、transform对比（史上最全版）
2017/08/18 HTML / CSS
将SVG图引入到HTML页面的实现
2019/09/20 HTML / CSS
如何利用cmp命令比较文件
2013/09/23 面试题
自我评价个人范文
2013/12/16 职场文书
社区优秀志愿者材料
2014/02/02 职场文书
法律系毕业生自荐信范文
2014/03/27 职场文书
《花瓣飘香》教学反思
2014/04/15 职场文书
无传销社区工作方案
2014/05/13 职场文书
绿色环保标语
2014/06/12 职场文书
工资收入证明
2014/10/07 职场文书
最新的离婚协议书范本！
2019/07/02 职场文书
关于golang高并发的实现与注意事项说明
2021/05/08 Golang