首页
所有分类
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 相关文章推荐
pycharm 使用心得（六）进行简单的数据库管理
Jun 06 Python
python实现删除文件与目录的方法
Nov 10 Python
python处理图片之PIL模块简单使用方法
May 11 Python
Python使用matplotlib绘制动画的方法
May 20 Python
在Python web中实现验证码图片代码分享
Nov 09 Python
Java与Python两大幸存者谁更胜一筹呢
Apr 12 Python
python 实现判断ip连通性的方法总结
Apr 22 Python
tensorflow 打印内存中的变量方法
Jul 30 Python
Python对接支付宝支付自实现功能
Oct 10 Python
pytorch实现onehot编码转为普通label标签
Jan 02 Python
python 使用OpenCV进行简单的人像分割与合成
Feb 02 Python
写一个Python脚本下载哔哩哔哩舞蹈区的所有视频
May 31 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
防火墙(2) DHCP(2) Ubuntu Server(6) FTP(9) systemctl(1) 3389(1) 域控制器(1) Spring Data JPA(4) 线程池(1) Repository接口(3)
You might like
PHP静态新闻列表自动生成代码
2007/06/14 PHP
php str_pad 函数用法简介
2009/07/11 PHP
PHP URL路由类实例
2013/11/12 PHP
php base64 编码与解码实例代码
2017/03/21 PHP
CI框架(CodeIgniter)操作redis的方法详解
2018/01/25 PHP
PHP之认识(二)关于Traits的用法详解
2019/04/11 PHP
Thinkphp5框架实现图片、音频和视频文件的上传功能详解
2019/08/27 PHP
tp5.1 框架数据库高级查询技巧实例总结
2020/05/25 PHP
一个判断email合法性的函数[非正则]
2008/12/09 Javascript
基于jQuery的图片大小自动适应实现代码
2010/11/17 Javascript
情人节专属 纯js脚本1k大小的3D玫瑰效果
2012/02/11 Javascript
jQuery $.extend()用法总结
2014/06/15 Javascript
JQuery替换DOM节点的方法
2015/06/11 Javascript
JavaScript中几种排序算法的简单实现
2015/07/29 Javascript
js实现点击向下展开的下拉菜单效果代码
2015/09/01 Javascript
jQuery中队列queue()函数的实例教程
2016/05/03 Javascript
Node.js Addons翻译(C/C++扩展)
2016/06/12 Javascript
vue2.0构建单页应用最佳实战
2017/04/01 Javascript
vue-loader教程介绍
2017/06/14 Javascript
原生JS实现的雪花飘落动画效果
2018/05/03 Javascript
vue-router 源码之实现一个简单的 vue-router
2018/07/02 Javascript
nodejs 十六进制字符串型数据与btye型数据相互转换
2018/07/30 NodeJs
Python格式化压缩后的JS文件的方法
2015/03/05 Python
windows下Virtualenvwrapper安装教程
2017/12/13 Python
Python绘图实现台风路径可视化代码实例
2020/10/23 Python
python3中for循环踩过的坑记录
2020/12/14 Python
Footshop法国：购买运动鞋
2020/01/19 全球购物
Prototype如何为一个Ajax添加一个参数
2015/12/06 面试题
大学毕业生自我鉴定
2013/11/05 职场文书
银行实习鉴定
2013/12/13 职场文书
创建学习型党组织实施方案
2014/03/29 职场文书
感恩教师节演讲稿
2014/09/03 职场文书
2014年大学生社会实践自我鉴定
2014/09/26 职场文书
出差报告怎么写
2014/11/06 职场文书
幽默口才训练经典句子（48句）
2019/08/19 职场文书
Java设计模式之享元模式示例详解
2022/03/03 Java/Android