用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中使用smtplib和email模块发送邮件实例
Apr 22 Python
Python和perl实现批量对目录下电子书文件重命名的代码分享
Nov 21 Python
Python中使用copy模块实现列表(list)拷贝
Apr 14 Python
Python实现的购物车功能示例
Feb 11 Python
对python使用http、https代理的实例讲解
May 07 Python
python随机在一张图像上截取任意大小图片的方法
Jan 24 Python
详解Python sys.argv使用方法
May 10 Python
深入浅析python的第三方库pandas
Feb 13 Python
Python通过文本和图片生成词云图
May 21 Python
Python list和str互转的实现示例
Nov 16 Python
利用python制作拼图小游戏的全过程
Dec 04 Python
pandas进行数据输入和输出的方法详解
Mar 23 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处理多图上传压缩代码功能
2018/06/13 PHP
JavaScript关闭当前页面(窗口)不带任何提示
2014/03/26 Javascript
js实现文章文字大小字号功能完整实例
2014/11/01 Javascript
不使用ajax实现无刷新提交表单
2014/12/21 Javascript
JS实现窗口加载时模拟鼠标移动的方法
2015/06/03 Javascript
使用jQuery处理AJAX请求的基础学习教程
2016/05/10 Javascript
js选项卡的制作方法
2017/01/23 Javascript
elementUI 动态生成几行几列的方法示例
2019/07/11 Javascript
初学vue出现空格警告的原因及其解决方案
2019/10/31 Javascript
React倒计时功能实现代码——解耦通用
2020/09/18 Javascript
vue+elementUI中表格高亮或字体颜色改变操作
2020/11/02 Javascript
[04:51]TI10典藏宝瓶Ⅱ外观视频展示
2020/08/15 DOTA
Python调用系统底层API播放wav文件的方法
2017/08/11 Python
删除python pandas.DataFrame 的多重index实例
2018/06/08 Python
Python实现的栈、队列、文件目录遍历操作示例
2019/05/06 Python
python打印9宫格、25宫格等奇数格 满足横竖斜相加和相等
2019/07/19 Python
python3中的logging记录日志实现过程及封装成类的操作
2020/05/12 Python
python 删除excel表格重复行,数据预处理操作
2020/07/06 Python
python 简单的调用有道翻译
2020/11/25 Python
python实现经纬度采样的示例代码
2020/12/10 Python
python中的列表和元组区别分析
2020/12/30 Python
使用JS+CSS3技术:让你的名字动起来
2013/04/27 HTML / CSS
纯CSS实现颜色渐变效果(包含环形渐变、线性渐变、彩虹效果等)
2014/05/07 HTML / CSS
HTML5 直播疯狂点赞动画实现代码 附源码
2020/04/14 HTML / CSS
美国著名的团购网站:Woot
2016/08/02 全球购物
日本面向世界,国际级的免税在线购物商城:DOKODEMO
2017/02/01 全球购物
雷曼兄弟的五金店:Lehman’s Hardware Store
2019/04/10 全球购物
鲜花方阵解说词
2014/02/13 职场文书
《狼》教学反思
2014/03/02 职场文书
校庆活动方案
2014/03/31 职场文书
《爱如茉莉》教后反思
2014/04/12 职场文书
上课迟到检讨书300字
2014/10/15 职场文书
春晚观后感
2015/06/11 职场文书
走进科学观后感
2015/06/18 职场文书
Vue + iView实现Excel上传功能的完整代码
2021/06/22 Vue.js
天谕手游15杯全调酒配方和调酒券的获得方式
2022/04/06 其他游戏