用 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">
    
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="/static/image/favicon.ico">
    <title>页面头名称title>
    
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    
    <link href="navbar.css" rel="stylesheet">
  head>
  <body>
    <div class="container">
      
      <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 navigationspan>
              <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="#">Actiona>li>
                  <li><a href="#">Another actiona>li>
                  <li><a href="#">Something else herea>li>
                  <li role="separator" class="divider">li>
                  <li class="dropdown-header">Nav headerli>
                  <li><a href="#">Separated linka>li>
                  <li><a href="#">One more separated linka>li>
                ul>
              li>
            ul>
          div>
        div>
      nav>
      
      <div class="jumbotron">
        {% block page_content %}
      {% endblock %}
      div>
    div> 
    
    
    <script src="/static/js/jquery.min.js">script>
    <script>window.jQuery || document.write('
                    
                    

你可能感兴趣的:(python,前端,开发工具)