用 Django2.0 做 簡單的BBS（前端用 Bootstrap）
阿新 • • 發佈：2017-12-22
pla car field 簽名 增加 bootstrap dropdown mar ins
實現目標：
開發首頁顯示BBS的標題和摘要，點擊BBS的標題可跳轉到BBS詳細頁面進行展示。
開發環境及開發工具：
Python 3.6.3
Django 2.0
Pycharm 2017.3
實現過程：
1創建project
用語句創建：
django-admin startproject BBS_Pro
2、創建app
python manage.py startapp app01
3、啟動服務
python manage.py runserver
4、編輯BBS_Pro/settings
把新創建的app名稱加入，進行admin漢化：
INSTALLED_APPS = [‘django.contrib.admin‘, ‘django.contrib.auth‘, ‘django.contrib.contenttypes‘, ‘django.contrib.sessions‘, ‘django.contrib.messages‘, ‘django.contrib.staticfiles‘, ‘app01‘, ]
LANGUAGE_CODE = ‘zh-hans‘ #修改
5、定義數據模型
編輯mblog/models.py
from django.db import models from django.contrib.auth.models importUser #導入django自帶的用戶 class BBS(models.Model): #BBS title = models.CharField(max_length=50) #標題 summary = models.CharField(max_length=200,blank=True,null=True) #摘要。可以為空，blank是admin中可為空，null是表裏可為空 content = models.TextField() #內容 author = models.ForeignKey( ‘BBS_user‘,on_delete=models.CASCADE,) #作者，外鍵到BBS_user中，用到還未定義的表要用引號 view_count = models.IntegerField() #瀏覽次數 ranking = models.IntegerField() #排名 created_at = models.DateTimeField() #創建時間 update_at = models.DateTimeField() #更新時間 def __str__(self): return self.title class Category(models.Model): #板塊 name = models.CharField(max_length=30,unique=True) #板塊名稱，unique是不能重復 administrator = models.ForeignKey(‘BBS_user‘,on_delete=models.CASCADE,) #版主 def __str__(self): return self.name class BBS_user(models.Model): #用戶表。繼承django自帶的用戶認證系統 user = models.OneToOneField(User,on_delete=models.CASCADE,) #用戶 signature = models.CharField(max_length=100,default=‘這家夥沒有簽名‘) #簽名 photo = models.ImageField(upload_to="upload_imgs/", default="upload_imgs/user_1.jpg") #頭像默認一個圖片，upload_to會自動在根目錄創建一個文件夾，支持上傳 def __str__(self): return self.user.username
6、生成數據表
python manage.py makemigrations app01
python manage.py migrate
7、生成admin的超級管理員
python manage.py createsuperuser
8、修改mblog/admin.py內容
from django.contrib import admin from app01 import models class BBS_admin(admin.ModelAdmin): list_display = (‘title‘,‘summary‘,‘author‘,‘view_count‘,‘ranking‘,‘created_at‘,‘update_at‘) #上面一行作用是在admin中顯示需要顯示的字段 list_filter = (‘created_at‘,) #是一個元組，末尾要加逗號 search_fields = (‘title‘,‘summary‘,‘author__user__username‘) #在admin中創建搜索，如果是外鍵的字段則用‘auther__user__username‘形式，此處要主要。 admin.site.register(models.BBS,BBS_admin) admin.site.register(models.Category) admin.site.register(models.BBS_user)
登錄admin 127.0.0.1:8000/admin
9、創建模板和靜態文件的文件夾
創建文件夾BBS_Pro/app01/templates/app01 這裏放app01的所有模板；創建文件夾BBS_Pro/statics 這裏放所有用到的靜態文件。
Settings中增加內容：
STATICFILES_DIRS = [ os.path.join(BASE_DIR, "statics"), ]
Settings中修改TEMPLATES 的DIRS內容
‘DIRS‘: [os.path.join(BASE_DIR, ‘templates‘)],
10、創建文件app01/urls.py
from django.urls import path,include from app01 import views urlpatterns = [ path(‘‘,views.index,name=‘index‘), ]
11、修改BBS_Pro/urls.py
from django.contrib import admin from django.urls import path,include urlpatterns = [ path(‘admin/‘, admin.site.urls), path(‘bbs/‘,include(‘app01.urls‘)), ]
12、修改app01/views.py內容
from django.shortcuts import render from .models import BBS def index(request): bbs_lists =BBS.objects.all() return render(request,‘app01/index.html‘,{‘bbs_lists‘:bbs_lists})
13、創建共享模版BBS_Pro/templates/base.html
Base.html可用bootstrap裏面的模板修改，在需要的區域進行如下標記，便於其他模板補充
{% block page_content %}
{% endblock %}
具體頁面代碼如下：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其後！ --> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="/static/image/favicon.ico"> <title>頁面頭名稱</title> <!-- Bootstrap core CSS --> <link href="/static/css/bootstrap.min.css" rel="stylesheet"> <!-- Custom styles for this template --> <link href="navbar.css" rel="stylesheet"> </head> <body> <div class="container"> <!-- Static navbar --> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">項目測試名稱</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">全部</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">列表 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li class="dropdown-header">Nav header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> </div><!--/.nav-collapse --> </div><!--/.container-fluid --> </nav> <!-- Main component for a primary marketing message or call to action --> <div class="jumbotron"> {% block page_content %} {% endblock %} </div> </div> <!-- /container --> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="/static/js/jquery.min.js"></script> <script>window.jQuery || document.write(‘<script src="../../assets/js/vendor/jquery.min.js"><\/script>‘)</script> <script src="/static/js/bootstrap.min.js"></script> </body> </html>
14、新增模板index.html
app01/templates/app01/index.html
{% extends ‘base.html‘ %} {% block page_content %} {% for bbs_list in bbs_lists %} <h4><a href="#">{{ bbs_list.title }}</a></h4> <h5>{{ bbs_list.summary}}</h5> <hr> {% endfor %} {% endblock %}
15、修改views.py
定義index
from django.shortcuts import render from .models import BBS def index(request): bbs_lists =BBS.objects.all() return render(request,‘app01/index.html‘,{‘bbs_lists‘:bbs_lists})
16、查看效果 127.0.0.1/bbs
通過127.0.0.1/admin手工添加一些後臺數據。
17、做bbs的詳細頁面
修改app01/urls.py內容，增加url:
path(‘<int:bbs_id>/‘,views.bbs_detail,name=‘bbs_detail‘),
18、修改views.py
定義bbs_detail
def bbs_detail(request,bbs_id): #傳的參數給url用 bbss =BBS.objects.get(id=bbs_id) return render(request,‘app01/detail.html‘,{‘bbs_obj‘:bbss}) #字典給模板用
19、新建模板detail.html
app01/templates/app01/detail.html
{% extends ‘base.html‘ %} {% block page_content %} <h4>{{ bbs_obj.title }}</h4> <h5>{{ bbs_obj.summary}}</h5> <h5>{{ bbs_obj.content}}</h5> <h5>{{ bbs_obj.author}}</h5> <h5>{{ bbs_obj.view_count}}</h5> <h5>{{ bbs_obj.ranking}}</h5> <h5>{{ bbs_obj.created_at}}</h5> <h5>{{ bbs_obj.update_at}}</h5> <hr> {% endblock %}
20、修改index.html中的鏈接
{% extends ‘base.html‘ %} {% block page_content %} {% for bbs_list in bbs_lists %} <h4><a href="/bbs/{{bbs_list.id}}">{{ bbs_list.title }}</a></h4> <h5>{{ bbs_list.summary}}</h5> <hr> {% endfor %} {% endblock %}
首頁中點擊bbs標題可鏈接進入bbs的詳細內容頁面。
用 Django2.0 做 簡單的BBS（前端用 Bootstrap）