flask-前臺佈局頁面搭建3

 

 

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  整個前端佈局的效果目錄。