https://www.cnblogs.com/kylinlin/p/5184592.html

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

  1. 用pycharm开发django项目示例

    pycharm开发django工程(一)  在pycharm(企业版)中新建Django工程,注意使用虚拟环境 创建成功后,在pycharm显示的工程目录结构如下: 打开pycharm的Termina ...

  2. Pycharm 开发 Django 项目

    1. 安装Pycharm, 自行百度安装教程 2. 安装python3 自行百度安装教程 3. 安装Django框架 使用命令: Window的终端控制台输入:安装Django框架. pip inst ...

  3. pycharm开发django项目 static报404解决方法

    settings文件中确保有以下配置 # Static files (CSS, JavaScript, Images)# https://docs.djangoproject.com/en/1.10/ ...

  4. PyCharm 开发Django ,错误汇总

    近期略微接触了一下Django.在学习的过程中可谓是坎坎坷坷,遇到了很多的问题. 下面就来谈一谈我对Django的一点点的见解. Django项目的创建 使用PyCharm来开发Django项目是非常 ...

  5. 第三百零三节,Django框架介绍——用pycharm创建Django项目

    Django框架介绍 Django是一个开放源代码的Web应用框架,由Python写成.采用了MVC的软件设计模式,即模型M,视图V和控制器C.它最初是被开发来用于管理劳伦斯出版集团旗下的一些以新闻内 ...

  6. 一 Django框架介绍——用pycharm创建Django项目

    Django框架介绍 Django是一个开放源代码的Web应用框架,由Python写成.采用了MVC的软件设计模式,即模型M,视图V和控制器C.它最初是被开发来用于管理劳伦斯出版集团旗下的一些以新闻内 ...

  7. PyCharm中Django项目主urls导入应用中views的红线问题

    PyCharm中Django项目主urls导入应用中views的红线问题 使用PyCharm学习Django框架,从项目的主urls中导入app中的views的时候,导入的包中下面有红线报错,但是却能 ...

  8. Pycharm创建Django项目并访问Django

    Pycharm创建Django项目并访问Django 一.Django插件 如果没有Django插件,需要先安装Django插件. 1,首先点击Default Settings,打开设置页面: 2,打 ...

  9. python web框架 django 用pycharm 添加django项目

    用pycharm 创建django项目 用pycharm 启动django  用项目名启动 点击蓝色连接的url 直接跳转到页面 修改 运行django 程序 设置  可以改端口 可以在创建djang ...

  10. django学之路01--环境安装和pycharm运行django项目

    1. 环境安装 1).virtualenv安装 C:\Users\Administrator>pip install virtualenv Collecting virtualenv Using ...

随机推荐

  1. CodeForces 1453D 概率 期望

    CodeForces 1453D Checkpoints 概率 期望 原题链接 题意 现在我们可以设计n个擂台,有的是激活点,有的不是.从第一个开始挑战,每次都有1/2的概率成功,如果该点成功,则跳到 ...

  2. Flutter定时器

    代码 const timeout = Duration(seconds: 3); var t=Timer.periodic(timeout, (timer) { print('afterTimer=' ...

  3. Spark Core快速入门

    Spark-core快速入门 一.简介 Apache spark是专门为大规模数据处理而设计的快速通用的计算模型,是一种类似于Mapreduce通用并行计算框架,与mapreduce不同的是,spar ...

  4. 【华为云技术分享】STM32L476移植华为LiteOS系列教程------背景知识 1

    一.这篇文章想向大家说明一个问题,我们开发单片机的本质是什么? 在最早的开发中,我们没有Keil.IAR等等一系列好用的单片机集成开发环境,注意这里的"集成",是指将多个软件其中有 ...

  5. 云图说|新一代Serverless应用托管引擎——CAE

    本文分享自华为云社区<云图说|新一代Serverless应用托管引擎--CAE>,作者:阅识风云. 开发运营一个应用软件,面临种种挑战:软件栈厚重.开发上线慢.资源易浪费.运维投入高.突发 ...

  6. Golang代码测试:一点到面用测试驱动开发

    摘要:TDD(Test Driven Development),测试驱动开发.期望局部最优到全局最优,这个是一种非常不错的好习惯. 了解Golang的测试之前,我们先了解一下go语言自带的测试工具. ...

  7. 带你梳理Roach全量恢复的整体流程

    摘要:本文将梳理Roach全量恢复的整体流程,描述Roach集群全量备份场景的运转机制. 数据备份恢复是保护数据安全的重要手段之一.Roach工具支持多种备份恢复类型,例如集群级的物理备份,表级备份的 ...

  8. OCR性能优化:从神经网络到橡皮泥

    摘要:在这个算力还可以的时代,我们的研究人员一方面致力于不断地去研究各中不同的场景中的的通用网络,一方面致力于优化神经网络的学习方式,这些都是在试图化减少AI需要的算力资源. 本文分享自华为云社区&l ...

  9. OUT了吧,Kafka能实现消息延时了

    摘要:本文讲述如何在保存Kafka特有能力的情况下给Kafka扩充一个具有能处理延时消息场景的能力. 本文分享自华为云社区<Kafka也能实现消息延时了?>,作者:HuaweiCloudD ...

  10. 如何向已有的项目中添加C/C++代码?

    第一步: 我们需要在src/main下面建立一个cpp目录,然后在其中写一个CMakeLists.txt文件和一个cpp文件,直接给出代码: #CMakeLists.txt文件# For more i ...