4.前臺布局的搭建

由於前端知識有限，我在網上下載的人家的前臺源碼，附上鏈接

https://link.jianshu.com/?t=https://github.com/mtianyan/movie_project_html

導入到我的static文件夾，如圖：

4.1前臺登錄頁面搭建

1.靜態文件的引入：{{url_for(‘static’,filename=’文件路徑)}}

2.定義路由：{{url_for(‘模塊名.視圖名‘,變量=參數’)}}

3.定義數據塊：{%block數據塊名稱%}…{%endblock%}

步驟：1.在templates->home文件夾下新建home。html，將tpl->nav文件拷貝到新建的home.html中，進行修改靜態文件。如圖：

2.然後定義數據塊，如圖：

1. 在home->views中定義路由，然後在home下新建index.html，寫入繼承附模板，

4.2會員登錄頁面搭建

1.登錄

@home.route("/login/")

def login():

return render_template("home/login.html")

2.退出

@home.route("/logout/")

def logout():

return redirect(url_for("home.login"))

步驟：1.在home->views文件中寫入登錄和退出的視圖。如圖：

2.在templates->home文件夾下新建login.html，並在tpl->login頁面中拷貝內容部分。粘貼到新建的login頁面，如圖：

1. 修改home.html文件的登錄和退出

4.3註冊頁面搭建

#註冊頁面

@home.route("/register")

def register():

return render_template("home/register.html")

步驟同登錄頁面。

4.3會員中心頁面搭建

定義以下頁面：

#賬戶

@home.route("/user/")

def user():

    return render_template("home/user.html")



#修改密碼

@home.route("/pwd/")

def 
 
pwd():

    return render_template("home/pwd.html")

#評論記錄

@home.route("/comments/")

def comments():

    return render_template("home/comments.html")

#登錄日誌

@home.route("/loginlog/")

def loginlog():

    return render_template("home/loginlog.html")

#收藏電影

@home.route("/moviecol/")

def moviecolg():

    return render_template("home/moviecol.html")

4.4電影列表搜索頁面搭建

#電影列表

@home.route("/")

def index():

return render_template("home/index.html")

#動畫

@home.route("/animation/")

def animation():

return render_template("home/animation.html")

#搜索頁面

@home.route("/search/")

def search():

return render_template("home/search.html")

#電影詳情頁面

@home.route("/play/")

def play():

return render_template("home/play.html")

1.5 404頁面搭建

在app文件夾的__init__內容裏面寫入一下代碼，記得導入render_template模塊，然後在home文件夾下創建404html.修改文件引入。

#404頁面搭建

@app.errorhandler(404)

def page_not_found(error):

return render_template("home/404.html"),404

1.6 整個前端布局的效果目錄。

flask-前臺布局頁面搭建3