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

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

Python 相关文章推荐
Python yield 小结和实例
Apr 25 Python
Python中使用 Selenium 实现网页截图实例
Jul 18 Python
Python使用matplotlib实现在坐标系中画一个矩形的方法
May 20 Python
python中列表和元组的区别
Dec 18 Python
python爬虫解决验证码的思路及示例
Aug 01 Python
PyCharm更改字体和界面样式的方法步骤
Sep 27 Python
python 动态调用函数实例解析
Oct 21 Python
pycharm下pyqt4安装及环境配置的教程
Apr 24 Python
Matplotlib中%matplotlib inline如何使用
Jul 28 Python
详解PyQt5中textBrowser显示print语句输出的简单方法
Aug 07 Python
Python Opencv轮廓常用操作代码实例解析
Sep 01 Python
总结Python变量的相关知识
Jun 28 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
You might like
一棵php的类树(支持无限分类)
2006/10/09 PHP
PHP 基于文件头的文件类型验证类函数
2012/05/01 PHP
php一个找二层目录的小东东
2012/08/02 PHP
基于MySQL体系结构的分析
2013/05/02 PHP
PHP自动生成后台导航网址的最佳方法
2013/08/27 PHP
PHP 将数组打乱 shuffle函数的用法及简单实例
2016/06/17 PHP
对比PHP对MySQL的缓冲查询和无缓冲查询
2016/07/01 PHP
PHP利用Socket获取网站的SSL证书与公钥
2017/06/18 PHP
让浏览器非阻塞加载javascript的几种方法小结
2011/04/25 Javascript
javascript数组去掉重复
2011/05/12 Javascript
使用javascipt---实现二分查找法
2013/04/10 Javascript
使用jQuery插件创建常规模态窗口登陆效果
2013/08/23 Javascript
推荐10个2014年最佳的jQuery视频插件
2014/11/12 Javascript
30分钟快速掌握Bootstrap框架
2016/05/24 Javascript
Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
2016/07/01 Javascript
微信小程序promsie.all和promise顺序执行
2017/10/27 Javascript
代码详解Vuejs响应式原理
2017/12/20 Javascript
js实现购物车功能
2018/06/12 Javascript
JavaScript RegExp 对象用法详解
2019/09/24 Javascript
解决小程序无法触发SESSION问题
2020/02/03 Javascript
jQuery HTML css()方法与css类实例详解
2020/05/20 jQuery
Python单链表的简单实现方法
2014/09/23 Python
讲解Python中for循环下的索引变量的作用域
2015/04/15 Python
python使用Tkinter显示网络图片的方法
2015/04/24 Python
Python中的集合类型知识讲解
2015/08/19 Python
对python自动生成接口测试的示例讲解
2018/11/30 Python
Python实现的列表排序、反转操作示例
2019/03/13 Python
使用CSS3制作响应式导航菜单的方法
2015/07/12 HTML / CSS
CSS3中媒体查询结合rem布局适配手机屏幕
2019/06/10 HTML / CSS
HTML5 Canvas的常用线条属性值总结
2016/03/17 HTML / CSS
adidas官方旗舰店:德国运动用品制造商
2017/11/25 全球购物
Opodo意大利:欧洲市场上领先的在线旅行社
2019/10/24 全球购物
阿里巴巴的Oracle DBA笔试题答案-SQL tuning类
2016/04/03 面试题
满月酒主持词
2014/03/27 职场文书
销售团队获奖感言
2014/08/14 职场文书
2015小学教师年度考核工作总结
2015/05/12 职场文书