用 Django2.0 做 簡單的BBS(前端用 Bootstrap)


實現目標:

開發首頁顯示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 import User  #導入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的詳細內容頁面。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM