10大最愛電影小專案 (Flask bootstrap sql) V1
main.py
from flask import Flask,redirect,render_template,request,url_for
from flask_wtf import FlaskForm
from wtforms import StringField,SubmitField,SelectField,SearchField,TextAreaField,DateTimeField,FloatField,IntegerField,URLField
from wtforms.validators import DataRequired,URL,NumberRange
from flask_bootstrap import Bootstrap5
from flask_sqlalchemy import SQLAlchemy
from datetime import datetime
#建立資料庫與綁定flask
app = Flask(__name__)
#建立bootstrap5
Bootstrap5(app)
#建立密鑰,防止CSRF
app.secret_key="jdklasjdosaudioasudoaskk;k;jdsauiudwq"
#建立一個SQLAlchemy實例
db =SQLAlchemy()
#配置給Flask,如果不存在就會建立這個db
app.config['SQLALCHEMY_DATABASE_URI']="sqlite:///movie.db"
#將db綁定給Flask使用
db.init_app(app)
#init_app方法主要作用是將擴展配置綁定到Flask應用程式
#建立模式
class Movie(db.Model):
id = db.Column(db.Integer,primary_key=True,autoincrement=True)
name = db.Column(db.String(256),unique=True,nullable=False)
msg = db.Column(db.String(256),nullable=False)
ranking = db.Column(db.Integer,unique=True,nullable=False)
rating = db.Column(db.String(256),nullable=False)
img_url = db.Column(db.String(256),nullable=False)
# created_at = db.Column(db.DateTime, default=datetime.utcnow,nullable=False)
created_at = db.Column(db.DateTime,nullable=False)
#這邊得default 接受可呼叫的對象, 而不是實際的函數調用
#建立上面定義的模型建立資料表
with app.app_context():
db.create_all()
class MyForm(FlaskForm):
name = StringField("電影名稱",validators=[DataRequired()])
msg = TextAreaField("劇情大綱:",validators=[DataRequired()])
ranking = IntegerField("排名",validators=[DataRequired(),NumberRange(min=1,max=10,message="1-10排名且只有唯一")])
rating = SelectField("評分",choices=['⭐','⭐⭐','⭐⭐⭐','⭐⭐⭐⭐','⭐⭐⭐⭐⭐'],validators=[DataRequired()])
date = DateTimeField("上映日期 (YYYY-MM-DD)",format='%Y-%m-%d',validators=[DataRequired()])
img_url = URLField('電影圖片網址',validators=[DataRequired(),URL()])
sumbit = SubmitField("新增電影")
@app.route('/')
def home():
#讀取db
with app.app_context():
db_rows = Movie.query.order_by(Movie.name).all()
return render_template('index.html',rows=db_rows)
@app.route('/add',methods=['POST','GET'])
def add():
form=MyForm()
if form.validate_on_submit():
new_movie = Movie(
name=form.name.data,
msg=form.msg.data,
ranking=form.ranking.data,
rating=form.rating.data,
created_at=form.date.data,
img_url=form.img_url.data)
db.session.add(new_movie)
db.session.commit()
return redirect(url_for('home'))
return render_template('add_movie.html',form=form)
if __name__ =='__main__':
app.run(debug=True,port=5050)
base.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
{% block title %}
昆之電影庭園
{% endblock %}
</title>
{% block styles %}
{{bootstrap.load_css()}}
{% endblock %}
</head>
<body>
{% block content %}
{% endblock %}
{% block scripts %}
{{bootstrap.load_js()}}
{% endblock %}
</body>
</html>
index.html
{% extends "base.html" %}
{% block content %}
<h1>My favorite Top 10 Movie</h1>
<div class="container" style="background-color: black;">
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
{% for row in rows %}
<div class="carousel-item active" data-bs-interval="5000">
<img src="{{row.img_url}}" class="d-block w-100 img-fluid" alt="{{row.name}}圖片網址" style="object-fit: contain; max-height: 700px;">
</div>
{% endfor %}
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<a href="{{url_for('add')}}">新 增 </a>
{% endblock %}
add.html
{% extends "base.html" %}
{% from 'bootstrap5/form.html' import render_form %}
{% block title%}
新增電影
{% endblock %}
{% block content %}
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-8">
{{render_form(form, novalidate=True)}}
</div>
</div>
</div>
{% endblock %}
張貼者：踏上開始的旅途 @ 1月 08, 2024
0 個意見
0 個意見:
張貼留言
訂閱 張貼留言 [Atom]
<< 首頁