用 django 構建翻譯網站——軟件工程課程設計

一、背景

1.1課程題目

構架一個名爲Bonnie的翻譯網站，要求網站具備翻譯網站的基本功能，即前臺用戶註冊登錄功能，智能翻譯功能和後臺的用戶管理，系統管理。同時本網站具備用戶與翻譯者直接溝通無中介干涉的特點。

1.2編寫背景

在現在高速發展的社會中，自主學習變爲一種學習方式，就其中一個方面來講，英語學習中會遇到很多困難，如專業性文章不會翻譯等問題。Bonnie翻譯網站擁有英漢實時翻譯的查詢功能，還可以爲廣大用戶提供一個公益平臺，一方作爲基本用戶，可以提交文章請求他人的幫助，一方作爲翻譯者可以選擇自己感興趣的文章進行翻譯，幫助基本用戶，他們在這個公共平臺實現各自需求。清晰簡明的界面，簡易的操作可以給用戶帶來更多舒服的體驗。

1.3開發環境

開發工具爲 python3.6 並基於 django 這一 MVT 框架、以及 bootstrap 這一前端框架進行網站後臺、前端的編寫、設計。基本數據的存儲則利用MySQL數據庫進行存儲。本機調試階段利用 django 內置服務器，發佈階段則利用 apache 服務器。

二、需求分析

2.1 編寫目的

對軟件需求的完全理解對軟件開發工作是至關重要的，需求說明有益於提高軟件開發過程中的能見度。因爲有些英語專業人士或學習愛好者希望提升能力，而有些英語程度不好的人沒有能力翻譯長篇或專業性文章，本網站針對這些人的需求應運而生。

2.2 軟件項目概述

網上翻譯是一種高質量、快捷、方便的翻譯方式，採用計算機技術對語言進行合理化、信息化管理的同時，實現人們只需要在一個網站就可以實現所有翻譯的需求，再也沒有常備一本大辭典的不便了。實現了知識的信息化和電子化。

• 描述(1)：編寫軟件完成智能翻譯部分：通過首頁可以看到智能翻譯入口，在位置1內輸入想要翻譯的英文或漢語，點擊翻譯按鈕，在位置2可以看到對應的翻譯內容。
• 描述(2)：用戶不僅可以作爲遊客體驗簡單的翻譯，也可以註冊成爲基本用戶以及翻譯者：系統通過用戶請求進行對應的響應，開始對用戶提交的個人信息進行驗證與備份，並完成對應的動作來回應用戶。若存在賬號密碼或者驗證問題，系統反饋自己無法進入該應用，需重新覈實過才能正確登錄使用。
• 描述(3)：基本用戶可以在網站上提交自己想要得到翻譯的內容（英譯漢，漢譯英），接收其他翻譯者發送來的翻譯結果，並根據其內容進行滿意程度打分：註冊用戶可以通過系統完成除了智能翻譯之外的人工互動翻譯，註冊用戶可以通過服務器提交待翻譯文章信息，翻譯者可以根據服務器反饋的信息進行選擇和翻譯。註冊用戶可以根據反饋的翻譯結果對其進行分值界定，從而給出合適的分數。
• 描述(4)：管理員可以通過系統對已註冊的用戶信息進行管理，對用戶信息進行管理。

三、系統建模

3.1 系統Use Case 圖

圖1：Use Case圖

3.1.1 用戶註冊Use Case說明

• 步驟1：打開註冊頁面，填好相關信息。
• 步驟2：相關信息填寫完畢後向系統提交申請
• 步驟3：系統確認申請信息完畢，用戶註冊完成，本Use Case結束。

3.1.2 翻譯查詢Use Case說明

• 步驟1：遊客身份的用戶打開系統網站主頁，即可通過搜索對話框輸入需要翻譯的內容進行簡單的智能查詢。
• 步驟2：註冊過的用戶打開系統網站主頁，點擊登錄即進入個人賬戶信息內部，通過提交文章對話框輸入輸入需要翻譯的內容進行智能翻譯，或者選擇進行人工翻譯，提交完畢後，翻譯者接收文章並對其進行翻譯，用戶可以對其翻譯結果進行打分評定，翻譯者接收用戶打分之後本Use Case結束。

3.1.3系統管理Use Case說明

系統管理是系統管理員的管理範圍，即對所有用戶進行管理，包括翻譯者信息管理與基本用戶信息管理，對個人信息進行必要的增刪查改，管理後臺應用。

3.2 系統類圖

圖2：系統的類圖

3.3 時序圖

圖4：時序圖

3.4 模型類的編寫

根據以上對項目需求、用例的分析，我們有了初步的頭緒——建立三個 app 分別處理對應的業務邏輯

• tr_passage()——處理和文章相關的操作與請求、與user的關聯等
• tr_user()——處理用戶的相關操作，例如登陸註冊等
• tr_user_center()——處理用戶中心，該應用是爲了方便代碼的編寫，故不需要模型類

此處對於本項目業務邏輯的劃分並不一定是最優的，之所以這樣劃分是爲了編程方便並且不容易出錯。
整體項目結構如下：

首先是tr_passage的models：

from django.db import models
from tr_user.models import Ordinary_User,Translater
# Create your models here.
class PassageManage(models.Manager):

    def create(self, ordinary_user, translation, title):
        p = Passage()
        p.ordinary_user = ordinary_user
        p.text = translation
        p.passage_title = title
        p.result = '暫無'
        p.save()
        ordinary_user.save()
        return p

class ResultManage(models.Manager):

    def create(self, passage, translater, text):
        r = Result()
        r.passage = passage
        r.translater = translater
        r.result = text
        r.translation = passage.text
        r.save()
        return r

    def choose(self, result):
        result.if_was_chosen = True
        result.save()

class Passage(models.Model):
    # 文章類
    ordinary_user = models.ForeignKey(Ordinary_User)
    translater = models.IntegerField(default=0)
    text = models.TextField(null=False, max_length=4000)
    passage_title = models.CharField(default='none', max_length=50)
    be_translated = models.BooleanField(default=False)
    passages = PassageManage()

    def __str__(self):
        return self.passage_title

    class Meta:
        db_table = 'passages'

class Result(models.Model):
    # 翻譯結果類
    passage = models.ForeignKey('Passage')
    translater = models.ForeignKey(Translater)
    translation = models.TextField(max_length=4000, default=' ')
    result = models.TextField(null=False, max_length=4000)
    # 是否被選用爲最合適的翻譯結果
    if_was_chosen = models.BooleanField(default=False)
    results = ResultManage()

    def __str__(self):
        return str(self.id)

    class Meta:
        db_table = 'passageResults'

接下來是tr_user的models：

from django.db import models

class Ordinary_UserManager(models.Manager):
    # 重寫管理器的方法
    def get_queryset(self):
        # 修改返回的原始查詢集
        return super(Ordinary_UserManager, self).get_queryset().filter(choose_translater = True)

    def create(self, accountnum, password, mail='[email protected]'):
        # 寫創建對象的方法 創建對象時可以調用該類方法
        ord = Ordinary_User()
        ord.account_number = accountnum
        ord.account_passWord = password
        ord.account_mail = mail
        ord.save()
        return ord

    def if_has(self, uname):
        try:
            self.get(account_number=uname)
        except:
            return False
        return True

class TranslaterManage(models.Manager):

    def get_queryset(self):
        return super(TranslaterManage, self).get_queryset()

    def create(self, account, password, mail='[email protected]'):
        # 自定義管理器中創建類的方法
        tra = Translater()
        tra.account_number = account
        tra.account_passWord = password
        tra.account_mail = mail
        tra.credit_level = 4
        tra.save()
        return tra

    def if_has(self, uname):
        try:
            self.get(account_number=uname)
        except:
            return False

        return True

class Ordinary_User(models.Model):
    # 普通用戶類
    account_number = models.CharField(max_length=20) # 賬號
    account_passWord = models.CharField(max_length=40)# 密碼
    account_mail = models.CharField(max_length=30, default='[email protected]')#郵箱
    choose_translater = models.BooleanField(default=True) # 是否選用人工翻譯
    score = models.IntegerField(default=10)  # 對結果的評分，默認滿分
    users = Ordinary_UserManager()

    def __str__(self):
        return self.account_number

    class Meta:
        # 元選項 修改表的名稱
        db_table = 'ordinaryUser'
        ordering = ['id'] # 指定查詢的排序規則

class Translater(models.Model):
    # 翻譯者類
    account_number = models.CharField(max_length=20) # 賬號
    account_passWord = models.CharField(max_length=40) # 密碼
    account_mail = models.CharField(max_length=30)  # 郵箱
    credit_level = models.IntegerField(null=True, default=1) # 信用等級
    score_sum = models.IntegerField(null=True, default=0) # 翻譯者所得到的累計評價
    translaters = TranslaterManage() # 創建管理器對象

    def __str__(self):
        return self.account_number

    class Meta:
        db_table = 'translater'
        ordering = ['id']

四、系統實現

4.1系統界面

4.1.1註冊：打開網站可以看到註冊界面，如下圖所示：

圖8：註冊頁面
說明：在頁面對應位置填寫個人信息：用戶名、密碼、確認密碼、驗證碼以及用戶身份選擇。其中，用戶名長度至少6位，密碼長度至少6位，確認密碼需要和輸入的密碼保持一致，驗證碼需要按照所給提示進行輸入，否則，將無法註冊成功。驗證成功系統將自動跳轉至登錄界面。

4.1.2登錄

註冊成功後，即可進行登錄，界面如下圖所示：

圖9：登錄界面
說明：在對應位置填寫已經註冊過的用戶信息，包括身份類別，點擊“登錄”按鈕即可進入，如果用戶名、密碼、以及身份類別選擇出現錯誤，將無法成功登錄。

4.1.2登錄

註冊成功後，即可進行登錄，界面如下圖所示：

圖9：登錄界面
說明：在對應位置填寫已經註冊過的用戶信息，包括身份類別，點擊“登錄”按鈕即可進入，如果用戶名、密碼、以及身份類別選擇出現錯誤，將無法成功登錄。

4.1.3智能翻譯

登錄網站之後進入主界面，即可進行智能翻譯，智能翻譯的主界面如下圖：

圖10：智能翻譯界面
說明：通過在左邊空白區域輸入想要翻譯的內容，點擊“翻譯”按鈕，即可進行對應的翻譯，隨後在右邊空白區域顯示翻譯結果。

4.1.4用戶中心界面（基本用戶）

圖11普通用戶界面
說明：作爲普通用戶登錄之後，有“你的基本資料”、“文章歷史結果”、“提交文章”、“about us”等功能塊，點擊按鈕即可進入對應功能，進行使用。

4.1.4普通用戶提交文章

圖12提交文章界面
說明：普通用戶點擊“提交文章按鈕”，即可進入文本輸入格式，在如圖所示空格內依次輸入文章標題和文章內容，最後點擊“提交文章”按鈕，就可進行文章翻譯。

4.1.5普通用戶接受翻譯結果

圖13普通用戶接受翻譯結果
說明：打開提交過的文章，點擊即可看到從翻譯者發來的翻譯結果

4.1.6翻譯者主界面

圖14翻譯者界面
說明：當翻譯者登錄成功之後，即可進行“你的基本資料”、“文章歷史結果”、“瀏覽文章，幫助他人”、“about us”等操作。

4.10翻譯者登錄瀏覽需要翻譯的文章。

4.1.7翻譯者選擇文章界面

圖15翻譯者選擇文章
說明：點擊“瀏覽文章，幫助他人”，即可瀏覽需要被翻譯的文章，可點擊對應文章標題，根據個人能力進行翻譯。

4.1.8翻譯者提交文章結果

圖16翻譯者提交結果
說明：通過瀏覽所有需要被翻譯的文章，選擇一個點擊打開，可以看到兩個文本編輯框，左邊文本框可以查看需要被翻譯的文本，在右邊文本框可以輸入自己的翻譯結果，輸入完成後點擊“提交文章”，即可完成翻譯動作。

4.2源代碼（後臺及前端）

說明：基於django框架設計三個app：tr_user、tr_passage、tr_user_center來處理對應的業務邏輯。後臺代碼包含模型類的設計、視圖的編寫、基本設置的展示以及作爲模板的前端頁面（僅包含供繼承的基模板以及繼承基模板的登陸、用戶中心、提交文章等頁面）。

PS：前面已給出了模型類的設計。

視圖代碼如下：

from django.db import models
from django.shortcuts import render,redirect
from tr_user.models import Ordinary_User,Translater
from django.http import HttpResponse
from .models import Result,Passage
def sumbit_passage(request):
    user_kind = request.session.get('user_kind', default=' ')
    if user_kind == 'ordinary_user':
        o_user = Ordinary_User.users.get(id=request.session.get('uid'))
    else:
        return HttpResponse("error")
    context = {
        'object':o_user, 
    }
    return render(request, 'passage.html', context)
def passage_handel(request):
    title = request.POST['passage_title']
    text = request.POST['translation']
    o_user = Ordinary_User.users.get(id=request.session.get('uid'))
    passage = Passage.passages.create(o_user, text, title)
    return redirect('/user_center/show')
def choose_passage(request):
    passages = Passage.passages.all()
    passages_list = []
    passages_id = []
    i = {}
    for passage in passages:
        passages_list.append(passage)
        passages_id.append(passage.id)
    context = {
        'passages_list':passages_list,
        'id_list':passages_id,
    }
    return render(request, 'choose_passage.html', context)
def show_passage(request):
    passage_id = request.GET['id']
    passage = Passage.passages.get(id=passage_id)
    translation = passage.text
    context = {
        'passage_id':passage_id,
        'translation':translation,
    }
    request.session['passage_id'] = passage_id
    return render(request, 'show_passage.html', context)
def translater_submit_passage(request):
    passage_id = request.session.get('passage_id')
    translation = request.POST['result']
    passage = Passage.passages.get(id=passage_id)
    del request.session['passage_id']
    user_id = request.session.get('uid')
    translater = Translater.translaters.get(id=user_id)
    result = Result.results.create(passage, translater, translation)
    return redirect('/user_center/show')
def show_history(request):
    user_kind = request.session.get('user_kind')
    if user_kind == 'ordinary_user':
        passage_id = request.GET['id']
        passage = Passage.passages.get(id=passage_id)
        result_list = passage.result_set.all()
        context = {
            'passage':passage,
            'result':result_list,
        }
        return render(request, 'show_history_o.html', context)
    elif user_kind == 'translater':
        result_id = request.GET['id']
        result = Result.results.get(id=result_id)
        passage_title = result.passage.passage_title
        translation = result.translation
        text = result.result
        context = {
            'passage_title':passage_title,
            'translation':translation,
            'text':text,
        }
        return render(request, 'show_history_t.html', context)
def handel_goal(request):
    result_id = request.POST['id']
    goal = request.POST['goal']
    result = Result.results.get(id=result_id)
    translater = result.translater
    translater.score_sum += int(goal)
    translater.save()
    return redirect('/passage/show_history/')
def handel_result(request):
    result_id = request.POST['id']
    result = Result.results.get(id=result_id)
    result.if_was_chosen = True
    result.save()
    translater = result.translater
    passage = result.passage
    translater.score_sum += 100
    passage.translater = translater.id
    passage.be_translated = True
    translater.save()
    passage.save()
    return redirect('/user_center/show/')

from django.shortcuts import render, redirect
from django.template import loader, RequestContext
from django.db.models import Max
from django.http import *
from .models import *
def register(request):
    buf = verifycode(request)
    image = buf.getvalue()
    context = {
        'image':image,
    }
    return render(request, 'register.html')
def login(request):
    buf = verifycode(request)
    image = buf.getvalue()
    context = {
        'image':image,
    }
    return render(request, 'login.html', context)
def login_handel(request):
    from hashlib import sha1
    post = request.POST
    uname = post.get('uname')
    upwd = post.get('upwd')
    user_kind= post.get('user_kind')
    code = post.get('verifycode')
    verifycode = request.session['verifycode']
    s1 = sha1()
    s1.update(upwd.encode('utf-8'))
    pwd = s1.hexdigest()
    if user_kind == 'ordinary_user':
        user = Ordinary_User.users.filter(account_number=uname)
        if len(user) == 1:
            try:
                temp = Ordinary_User.users.get(account_number=uname, account_passWord=pwd)
                print(temp.account_number)
                id = temp.id
            except:
                return HttpResponse('密碼錯誤')
        else:
            return redirect('/user/login/')
    elif user_kind == 'translater':
        user = Translater.translaters.filter(account_number=uname)
        if len(user) == 1:
            try:
                temp = Translater.translaters.get(account_number=uname, account_passWord=pwd)
                print(temp.account_number)
                id = temp.id
            except:
                return HttpResponse('密碼錯誤')
        else:
            return redirect('/user/login/')
    else:
        return HttpResponse('請輸入用戶種類')
    request.session['uid'] = id
    request.session['user_kind'] = user_kind
    return redirect('/user/index_for_user/')
def register_handel(request):
    from hashlib import sha1
    post = request.POST
    uname = post.get('uname')
    upwd = post.get('upwd')
    cpwd = post.get('cpwd')
    mail = post.get('email', default='[email protected]')
    user_kind = post.get('user_kind')
    if upwd != cpwd:
        return redirect('/user/register/')
    s1 = sha1()
    s1.update(upwd.encode('utf-8'))
    pwd = s1.hexdigest()
    if user_kind == 'ordinary_user':
        if Ordinary_User.users.if_has(uname):
            return HttpResponse('repeated')
        o_user = Ordinary_User.users.create(uname, pwd, mail)
    elif user_kind == 'translater':
        if Translater.translaters.if_has(uname):
            return HttpResponse('repeated')
        t_user = Translater.translaters.create(uname, pwd, mail)
    return redirect('/user/login/')
def del_session(request):
    request.session.flush()
    return redirect('/user/index/')
def index(request):
    if request.session.get('uid', default='') == '':
        context = {'fanyi_content':'請輸入翻譯的文本'}
        if request.method == 'POST':
            post = request.POST
            fanyi_content = post.get('fanyi_content')
            print('fanyi_content:{x}'.format(x=fanyi_content))
            result = baiduFanyi(fanyi_content)
            context['fanyi_content'] = fanyi_content
            context['result'] = result
        return render(request, 'index.html', context)
    else:
        return redirect('/user/index_for_user/')
def index_for_user(request):
    uid = request.session.get('uid', default=None)
    user = Ordinary_User.users.get(id=uid)
    context = {
        'uname':user.account_number,
        'fanyi_content': '請輸入翻譯的文本',
    }
    if request.method == 'POST':
        post = request.POST
        fanyi_content = post.get('fanyi_content')
        result = baiduFanyi(fanyi_content)
        context = {
            'uname': user.account_number,
            'fanyi_content': fanyi_content,
            'result': result,
        }
    return render(request, 'index_for_user.html',context)
def baiduFanyi(request):
    import http
    import hashlib
    import urllib.request
    import random
    import json
    q = request
    print('q:{x}'.format(x=q))
    if len(q.split()) == 0 or q == '請輸入翻譯的文本':
        return '不能爲空'
    appid = '寫你自己申請的翻譯api的id'
    secretKey = '寫你自己申請的翻譯api的密碼'
    myurl = '/api/trans/vip/translate'
    fromLang = 'en'
    toLang = 'zh'
    salt = random.randint(32768, 65536)
    sign = appid + q + str(salt) + secretKey
    sign = sign.encode('UTF-8')
    m1 = hashlib.md5()
    m1.update(sign)
    sign = m1.hexdigest()
    myurl = myurl + '?appid=' + appid + '&q=' + urllib.parse.quote(q) + '&from=' + fromLang + '&to=' + toLang + '&salt=' + str(salt) + '&sign=' + sign
    httpClient = http.client.HTTPConnection('api.fanyi.baidu.com')
    httpClient.request('GET', myurl)
    response = httpClient.getresponse()
    html = response.read().decode('UTF-8')
    target2 = json.loads(html)
    print('target2:{x}'.format(x=target2))
    src = target2['trans_result'][0]['dst']
    outStr = src
    return outStr
def verifycode(request):
    from PIL import Image, ImageDraw, ImageFont
    import random
    bgcolor = (random.randrange(20, 100), random.randrange(20, 100), 255)
    width = 100
    height = 25
    im = Image.new('RGB', (width, height), bgcolor)
    draw = ImageDraw.Draw(im)
    for i in range(0, 100):
        xy = (random.randrange(0, width), random.randrange(0, height))
        fill = (random.randrange(0, 255), 255, random.randrange(0, 255))
        draw.point(xy, fill=fill)
    str1 = 'ABCD123EFGHIJK456LMNOPQRS789TUVWXYZ0'
    rand_str = ''
    for i in range(0, 4):
        rand_str += str1[random.randrange(0, len(str1))]
    font = ImageFont.truetype("Dengb.ttf", 16)
    fontcolor = (255, random.randrange(0, 255), random.randrange(0, 255))
    draw.text((5, 2), rand_str[0], font=font, fill=fontcolor)
    draw.text((25, 2), rand_str[1], font=font, fill=fontcolor)
    draw.text((50, 2), rand_str[2], font=font, fill=fontcolor)
    draw.text((75, 2), rand_str[3], font=font, fill=fontcolor)
    del draw
    request.session['verifycode'] = rand_str
    from io import StringIO,BytesIO
    buf = BytesIO()
    im.save(buf, 'png')
    return HttpResponse(buf.getvalue(), 'image/png')

from django.shortcuts import render
from tr_user.models import Translater,Ordinary_User
from tr_passage.models import Passage,Result
def user_center(request):
    uid = request.session.get('uid', default=None)
    user_kind = request.session.get('user_kind', default=0)
    history_list = []
    if user_kind == 'ordinary_user':
        user = Ordinary_User.users.get(id=uid)
        translate_history = Passage.passages.filter(ordinary_user__id=uid)
        for objects in translate_history:
            history_list.append(objects.passage_title)
        context = {
            'uname': user.account_number,
            'user_kind': user_kind,
            'result': user,
            'mail':user.account_mail,
            'history': translate_history,
        }
        return render(request, '02.html', context)
    elif user_kind == 'translater':
        user = Translater.translaters.get(id=uid)
        result_list = Result.results.filter(translater__id=uid)
        translate_history = []
        for result in result_list:
            translate_history.append(result)
        context = {
            'uname':user.account_number,
            'user_kind':user_kind,
            'result':user,
            'history':translate_history,
            'credit_level':user.credit_level,
            'goal':user.score_sum,
        }
        return render(request, '01.html', context)
def user_info(request):
    return render(request, 'main.html')
def change_pwd(request):
    return render(request, 'changePwd.html')
def user_main(request):
    return render(request, 'main.html')

下面是對訪問地址的設定。

from django.conf.urls import url,include
from django.contrib import admin
from tr_user.views import index
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^$', index),
    url(r'^user/', include('tr_user.urls',namespace='user')),
    url(r'^passage/', include('tr_passage.urls',namespace='passage')),
    url(r'^user_center/', include('tr_user_center.urls', namespace='user_center')),
]

from . import views
from django.conf.urls import url,include
app_name = 'tr_passage'
urlpatterns = [
    url(r'^submit_passage/$', views.sumbit_passage, name='submit_passage'),
    url(r'^passage_handel/$', views.passage_handel, name='passage_handel'),
    url(r'^choose_passage/$',views.choose_passage, name='choose_passage'),
    url(r'^translater_submit_passage/$',views.translater_submit_passage, name='translater_submit_passage'),
    url(r'^show_passage/$', views.show_passage, name='show_passage'),
    url(r'^show_history/$', views.show_history, name='show_history'),
    url(r'^handel_goal/$', views.handel_goal, name='handel_goal'),
    url(r'^handel_result/$', views.handel_result, name='handel_result'),
]


from . import views
from django.conf.urls import url,include
app_name = 'tr_user'
urlpatterns = [
    url(r'^$', views.index, name='index'),
    url(r'^index/$',views.index,name='index'),
    url(r'^index_for_user/$', views.index_for_user, name='index_for_user'),
    url(r'^login/$', views.login, name='login'),
    url(r'^register/$', views.register, name='register'),
    url(r'^longin_handel/$', views.login_handel, name='longin_handel'),
    url(r'^register_handel/$', views.register_handel, name='register_handel'),
    url(r'^del_session/$', views.del_session, name='del_session'),
    url(r'^verifycode$', views.verifycode, name='verifycode'),
    url(r'^baidufanyi$', views.baiduFanyi, name='baidufanyi'),
]


from . import views
from django.conf.urls import url,include
app_name = 'tr_user_center'
urlpatterns = [
    url(r'^show/$', views.user_center, name='show'),
    url(r'^user_info/$',views.user_info, name='user_info' ),
    url(r'^change_pwd/$', views.change_pwd, name='change_pwd'),
    url(r'^user_main/$', views.user_center, name='user_main'),
]

至於前端代碼這裏就只給一個基類的模板。

{% load staticfiles %}
<html lang="en">
<head>
    <meta charset="UTF-8">
<meta name="viewport" content="width=device-width user-scalable=no,initial-scal=1.0,
maximum-scale=1.0,minimum-scale=1.0">
    <title>Bonnie{{ title }}</title>
    <script type="text/javascript" src="{% static 'bootstrap/js/jquery.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
    <link rel="stylesheet" type="text/css" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'bootstrap/css/style.css' %}">
    <meta name="viewport" content="width=device-width user-scalable=no, initial-scal=1.0,maximum-scale=1.0,minimum-scale=1.0">
    {% block head %}
    {% endblock head %}
</head>
{% block body %}
<body background="/static/images/02.jpg">
<nav class="navbar navbar-inverse navbar-static-top">
        <div class="container">
           <div class="navbar-header">
               <button type="button" class="navbar-toggle collapsed"
               data-toggle="collapse" data-target="#mynavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                </button>
                <a href ="#" class="navbar-brand">Bonnie翻譯</a>
           </div>
           <div class="collapse navbar-collapse" id="mynavbar">
            {% block bar %}
                <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">首頁</a></li>
                        <li><a href="{% url 'user:login' %}">登錄</a></li>
                        <li><a href="{% url 'user:register' %}">註冊</a></li>
           <li><a href="http://fanyi.youdao.com/" target="_blank">翻譯</a></li>
         <li><a href="#"> 關於我們 </a></li>
                </ul>
            {% endblock bar %}
           </div>
        </div>
</nav>
{% block content %}
 <div class="jumbotron">
         <div class="container">
                 <div class="row">
                   <form action="{% url 'user:index' %}" method="post">
                         {% csrf_token %}
                        <div class="col-lg-3 col-lg-offset-1">
                                <textarea name="fanyi_content">
                                        {{ fanyi_content }}
                                </textarea>
                        </div>
                        <div class="col-lg-2 col-lg-offset-1">
                            <button type="submit">翻譯</button>
                        </div>
                        <div class="col-lg-1 col-lg-offset-1">
                                <textarea name="fanyi_content">
                                        {{ result }}
                                </textarea>
                        </div>
                     </form>
                </div>
         </div>
</div>
{% endblock content%}
<div class="footer no-mp" align="center">
        <div class="foot_link">
            <a href="#">關於我們</a>
            <span>|</span>
            <a href="#">聯繫我們</a>
            <span>|</span>
            <a href="#">招聘人才</a>
            <span>|</span>
            <a href="#">友情鏈接</a>
        </div>
        <p>CopyRight © 2016 Bonnie All Rights Reserved</p>
        <p>電話：010-****888    京ICP備*******8號</p>
    </div>
</body>
{% endblock body %}
</html>

完整的代碼如果需要的話，可以去我的 github 下載。下載完記得標星！！！！！！