用pycharm開發(fā)django項(xiàng)目示例代碼
在pycharm(企業(yè)版)中新建Django工程,注意使用虛擬環(huán)境
創(chuàng)建成功后,在pycharm顯示的工程目錄結(jié)構(gòu)如下:
打開pycharm的Terminal,進(jìn)入該工程的目錄新建一個(gè)django工程
python3 manage.py startapp django_web
執(zhí)行成功后,工程目錄結(jié)構(gòu)如下:
修改settings.py文件,注冊(cè)該工程
Django的開發(fā)遵循MTV模式(models, templates, views),views.py負(fù)責(zé)執(zhí)行操作,models.py負(fù)責(zé)數(shù)據(jù)處理(如數(shù)據(jù)庫(kù)連接),templates目錄下存放網(wǎng)頁(yè)的模板
首先在templates下新建一個(gè)index.html文件,并把以下內(nèi)容替換到該文件中
<!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文件,定義訪問這個(gè)index.html文件的操作
def index(request): return render(request, 'index.html')
編寫urls.py文件,定義訪問這個(gè)index.html的url路徑(使用正則表達(dá)式)
from django.conf.urls import url from django.contrib import admin from django_web.views import index #導(dǎo)入views.py文件中的index函數(shù) urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^index/', index), #在url中凡是以u(píng)rl開頭的訪問都使用index函數(shù)來處理該請(qǐng)求 ]
在pycharm的Terminal中輸入命令運(yùn)行服務(wù)器:
python3 manager.py runserver
在瀏覽器中輸入url:http://127.0.0.1:8000/index/ 可以看到如下的格式,接下來要做的就是添加資源
將css文件(css文件的內(nèi)容在最后)和圖片(隨意找?guī)讖垐D片,更名為如下所示即可)都復(fù)制到env5工程下的一個(gè)名為static的文件,工程結(jié)構(gòu)如下:
注意:一定要保證與templates目錄同級(jí)
修改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"),)
再次打開瀏覽器就可以看到正常的顯示
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; }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Keras構(gòu)建神經(jīng)網(wǎng)絡(luò)踩坑(解決model.predict預(yù)測(cè)值全為0.0的問題)
這篇文章主要介紹了Keras構(gòu)建神經(jīng)網(wǎng)絡(luò)踩坑(解決model.predict預(yù)測(cè)值全為0.0的問題),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07pandas實(shí)現(xiàn)按照多列排序-ascending
這篇文章主要介紹了pandas實(shí)現(xiàn)按照多列排序-ascending,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-05-05python 去除txt文本中的空格、數(shù)字、特定字母等方法
今天小編就為大家分享一篇python 去除txt文本中的空格、數(shù)字、特定字母等方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-07-07Alpine安裝Python3依賴出現(xiàn)的問題及解決方法
這篇文章主要介紹了Alpine安裝Python3依賴出現(xiàn)的問題及解決方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-12-12如何使用pyinstaller打包時(shí)引入自己編寫的庫(kù)
這篇文章主要介紹了如何使用pyinstaller打包時(shí)引入自己編寫的庫(kù),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-02-02