首页
所有分类
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 实现一个颜色色值转换的小工具
Dec 06 Python
python+opencv实现的简单人脸识别代码示例
Nov 14 Python
利用Python对文件夹下图片数据进行批量改名的代码实例
Feb 21 Python
Python安装与基本数据类型教程详解
May 29 Python
对Python 中矩阵或者数组相减的法则详解
Aug 26 Python
python GUI库图形界面开发之PyQt5下拉列表框控件QComboBox详细使用方法与实例
Feb 27 Python
python tkiner实现 一个小小的图片翻页功能的示例代码
Jun 24 Python
tensorflow基于CNN实战mnist手写识别(小白必看)
Jul 20 Python
python使用matplotlib的savefig保存时图片保存不完整的问题
Jan 08 Python
安装不同版本的tensorflow与models方法实现
Feb 20 Python
matplotlib部件之套索Lasso的使用
Feb 24 Python
python使用torch随机初始化参数
Mar 22 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
太空(1) 对撞机(1) 粒子对撞机(1) 国际空间站(1) 塑料(1) 天问一号(1) 人造肉(1) DNS服务器(2) 夸克(1) 界面设计(1)
You might like
全世界最小的php网页木马一枚 附PHP木马的防范方法
2009/10/09 PHP
php编写一个简单的路由类
2011/04/13 PHP
PHP使用fopen与file_get_contents读取文件实例分享
2016/03/04 PHP
javascript中字符串替换函数replace()方法与c# 、vb 替换有一点不同
2010/06/25 Javascript
编程语言JavaScript简介
2014/10/16 Javascript
JavaScript实现三阶幻方算法谜题解答
2014/12/29 Javascript
JavaScript中实现map功能代码分享
2015/06/11 Javascript
原生js实现返回顶部缓冲效果
2017/01/18 Javascript
微信小程序开发之map地图实现教程
2017/06/08 Javascript
JS 设置Cookie 有效期 检测cookie
2017/06/15 Javascript
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
2018/11/21 Javascript
jQuery实现的隔行变色功能【案例】
2019/02/18 jQuery
编写v-for循环的技巧汇总
2020/12/01 Javascript
vue3 watch和watchEffect的使用以及有哪些区别
2021/01/26 Vue.js
python list中append()与extend()用法分享
2013/03/24 Python
python调用cmd命令行制作刷博器
2014/01/13 Python
python机器学习理论与实战（四）逻辑回归
2018/01/19 Python
Python wxpython模块响应鼠标拖动事件操作示例
2018/08/23 Python
解决pycharm安装后代码区不能编辑的问题
2018/10/28 Python
在Python 中同一个类两个函数间变量的调用方法
2019/01/31 Python
浅谈PySpark SQL 相关知识介绍
2019/06/14 Python
使用python实现ftp的文件读写方法
2019/07/02 Python
详解Django模版中加载静态文件配置方法
2019/07/21 Python
python 上下文管理器及自定义原理解析
2019/11/19 Python
Keras使用tensorboard显示训练过程的实例
2020/02/15 Python
python获取系统内存占用信息的实例方法
2020/07/17 Python
Python 忽略文件名编码的方法
2020/08/01 Python
区分python中的进程与线程
2020/08/13 Python
python中altair可视化库实例用法
2021/01/26 Python
购买限量版收藏品、珠宝和礼品：Bradford Exchange
2016/09/23 全球购物
实习护士自荐信
2014/06/21 职场文书
物业工程部主管岗位职责
2015/04/16 职场文书
2015年食堂工作总结报告
2015/04/23 职场文书
2016新教师岗前培训心得体会
2016/01/08 职场文书
php 原生分页
2021/04/01 PHP
Java面试题冲刺第十六天--消息队列
2021/08/07 面试题