用pycharm开发django项目示例

pycharm开发django工程（一)

在pycharm（企业版）中新建Django工程，注意使用虚拟环境

创建成功后，在pycharm显示的工程目录结构如下：

打开pycharm的Terminal，进入该工程的目录新建一个django工程

python3 manage.py startapp django_web

执行成功后，工程目录结构如下：

修改settings.py文件，注册该工程

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="data: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="data: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="data: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="data: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="data: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>&copy; 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/ 可以看到如下的格式，接下来要做的就是添加资源

将css文件（css文件的内容在最后）和图片（随意找几张图片，更名为如下所示即可）都复制到env5工程下的一个名为static的文件，工程结构如下：

注意：一定要保证与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>&copy; Mugglecoding</p>

</div>

</body>

</html>

在settings.py文件的最后增加如下配置

STATICFILES_DIRS = (os.path.join(BASE_DIR, "static"),)

再次打开浏览器就可以看到正常的显示

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项目示例的更多相关文章

Pycharm 开发 Django 项目
1. 安装Pycharm, 自行百度安装教程 2. 安装python3 自行百度安装教程 3. 安装Django框架使用命令: Window的终端控制台输入:安装Django框架. pip inst ...
pycharm开发django项目 static报404解决方法
settings文件中确保有以下配置 # Static files (CSS, JavaScript, Images)# https://docs.djangoproject.com/en/1.10/ ...
PyCharm 开发Django ，错误汇总
近期略微接触了一下Django.在学习的过程中可谓是坎坎坷坷,遇到了很多的问题. 下面就来谈一谈我对Django的一点点的见解. Django项目的创建使用PyCharm来开发Django项目是非常 ...
第三百零三节，Django框架介绍——用pycharm创建Django项目
Django框架介绍 Django是一个开放源代码的Web应用框架,由Python写成.采用了MVC的软件设计模式,即模型M,视图V和控制器C.它最初是被开发来用于管理劳伦斯出版集团旗下的一些以新闻内 ...
一 Django框架介绍——用pycharm创建Django项目
Django框架介绍 Django是一个开放源代码的Web应用框架,由Python写成.采用了MVC的软件设计模式,即模型M,视图V和控制器C.它最初是被开发来用于管理劳伦斯出版集团旗下的一些以新闻内 ...
PyCharm中Django项目主urls导入应用中views的红线问题
PyCharm中Django项目主urls导入应用中views的红线问题使用PyCharm学习Django框架,从项目的主urls中导入app中的views的时候,导入的包中下面有红线报错,但是却能 ...
Pycharm创建Django项目并访问Django
Pycharm创建Django项目并访问Django 一.Django插件如果没有Django插件,需要先安装Django插件. 1,首先点击Default Settings,打开设置页面: 2,打 ...
python web框架 django 用pycharm 添加django项目
用pycharm 创建django项目用pycharm 启动django 用项目名启动点击蓝色连接的url 直接跳转到页面修改运行django 程序设置可以改端口可以在创建djang ...
django学之路01--环境安装和pycharm运行django项目
1. 环境安装 1).virtualenv安装 C:\Users\Administrator>pip install virtualenv Collecting virtualenv Using ...

随机推荐

Android 定时器实现的几种方式和removeCallbacks失效问题详解
实现定时器有很多种方式,在这里我简单的介绍几种方式 (1)使用Handler + Runnable的方式 Handler handler = new Handler(); Runnable runna ...
QTP 中对象操作
1.创建对象(将浏览器设置为一个对象) set oIE=createobject("internetexplorer.application") 2.将浏览器设置为可见的 oIE. ...
[转] 详解http和https的作用与区别
PS: https就是http和TCP之间有一层SSL层,这一层的实际作用是防止钓鱼和加密.防止钓鱼通过网站的证书,网站必须有CA证书,证书类似于一个解密的签名.另外是加密,加密需要一个密钥交换算法, ...
css笔记06：层叠样式选择器
1. (1)HTML文件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...
在openshift上创建django应用
python 3.3 + django 1.7 一.创建新应用 $ rhc app create -a mynewapp -t python-3.3 二.在新建的目录里添加git库 $ cd myne ...
uva 10152 ShellSort 龟壳排序（希尔排序？）
今天状态总是很糟,这种题目卡了一天... 是不是休息时间太少了,头脑迟钝了... 名字叫希尔排序,我还以为跟它有关,还搜索了下资料. 只要找到trick就会发现是很水的题目.只要对比下就能找到哪些是移 ...
jsp无法支持el标签及jstl标签
在jsp页面头部添加如下 <%@ page isELIgnored="false"%> <%@ taglib uri="http://java.sun. ...
[改善Java代码]静态变量一定要先声明后赋值
建议32: 静态变量一定要先声明后赋值这标题看着让人很纳闷,什么叫做变量一定要先声明后赋值?Java中的变量不都是先声明后使用的吗?难道还能先使用后声明?能不能暂且不说,我们先来看一个例子,代码如下 ...
Oracle查找被长时间锁定的对象并kill
1.用如下语句查找被锁住的表名.OSclient.Session信息 SELECT B.SID ,B.SERIAL# ,D.SPID OS系统进行号 ...
CSS3—三角形
话不多说看效果:演示效果,runjs 1.加了宽高和border,边用不同颜色显示,每条边都是一个梯形 2.去掉宽高,每条边都是三角形 3.只显示其中一条边就是不同的三角形了,是不是很简单,改变bor ...

用pycharm开发django项目示例

用pycharm开发django项目示例的更多相关文章

随机推荐

热门专题