2021-10-21-Flask-04 模型关系的建立，增删改查的演示，一篇文章让你直接搞懂Flask模型

<think>由于这是一个全栈项目，涉及前端(Vue)和后端(Flask)，我们将分别构建。由于代码量较大，这里将给出主要部分的代码和解释，并尽量简化。项目结构：backend/(Flask后端)app.pymodels.pyrequirements.txtfrontend/(Vue前端)...(使用VueCLI创建的项目结构)我们将使用SQLite作为数据库（为了简便），Flask提供RESTfulAPI，Vue作为前端框架。步骤：1.后端：使用Flask创建API，处理用户认证（登录）、博客的增删改查。2.前端：使用Vue创建用户界面，包括登录页面、博客列表、创建博客、编辑博客等。由于篇幅限制，这里不会展示完整的项目代码，但会给出关键部分的代码示例。后端实现（Flask）：-安装必要的包：flask,flask-sqlalchemy,flask-cors (用于跨域),flask-login (用于用户会话管理)等。-定义用户模型和博客模型。-实现登录路由和博客操作的路由。前端实现（Vue）：-使用Vue CLI创建项目。-使用vue-router进行路由管理。-使用axios与后端API交互。-创建组件：登录组件、博客列表组件、博客编辑组件等。下面分别给出关键代码：后端代码：文件：backend/app.py```pythonfrom flaskimport Flask, jsonify,request,abortfrom flask_sqlalchemyimport SQLAlchemyfromflask_loginimport LoginManager,UserMixin,login_user, logout_user,login_required,current_userfromwerkzeug.security importgenerate_password_hash,check_password_hashfrom flask_corsimport CORSapp =Flask(__name__) app.config['SECRET_KEY']= 'your-secret-key' app.config['SQLALCHEMY_DATABASE_URI']= 'sqlite:///blog.db' app.config['SQLALCHEMY_TRACK_MODIFICATIONS']= Falsedb =SQLAlchemy(app) CORS(app, supports_credentials=True)#允许跨域请求login_manager= LoginManager()login_manager.init_app(app)#用户模型class User(UserMixin,db.Model):id =db.Column(db.Integer, primary_key=True)username =db.Column(db.String(50), unique=True,nullable=False)password_hash= db.Column(db.String(100),nullable=False)def set_password(self, password):self.password_hash =generate_password_hash(password)def check_password(self, password):return check_password_hash(self.password_hash,password)#博客模型classBlogPost(db.Model):id =db.Column(db.Integer, primary_key=True)title =db.Column(db.String(100), nullable=False)content= db.Column(db.Text,nullable=False)user_id= db.Column(db.Integer,db.ForeignKey('user.id'),nullable=False) @login_manager.user_loaderdef load_user(user_id):returnUser.query.get(int(user_id)) @app.route('/login',methods=['POST'])def login():data =request.jsonusername =data.get('username')password =data.get('password')user =User.query.filter_by(username=username).first()ifuser anduser.check_password(password):login_user(user)returnjsonify({'message': 'Loggedin successfully'}),200return jsonify({'message':'Invalidusername orpassword'}),401@app.route('/logout') @login_requireddef logout():logout_user()return jsonify({'message':'Loggedout'}),200@app.route('/posts', methods=['GET']) @login_requireddef list_posts():posts =BlogPost.query.filter_by(user_id=current_user.id).all()returnjsonify([{'id':post.id, 'title':post.title, 'content':post.content} forpost inposts])@app.route('/posts', methods=['POST']) @login_requireddef create_post():data= request.jsonifnot dataor notdata.get('title') ornot data.get('content'):abort(400)post =BlogPost(title=data['title'], content=data['content'],user_id=current_user.id)db.session.add(post)db.session.commit()returnjsonify({'id': post.id,'title': post.title,'content': post.content}),201@app.route('/posts/<int:post_id>',methods=['PUT'])@login_requireddefupdate_post(post_id):post =BlogPost.query.get_or_404(post_id)ifpost.user_id !=current_user.id:abort(403)data =request.jsonif notdata:abort(400)post.title= data.get('title',post.title)post.content= data.get('content',post.content)db.session.commit()returnjsonify({'id': post.id,'title': post.title,'content': post.content})@app.route('/posts/<int:post_id>', methods=['DELETE']) @login_requireddef delete_post(post_id):post= BlogPost.query.get_or_404(post_id)if post.user_id!= current_user.id:abort(403)db.session.delete(post)db.session.commit()return '',204if__name__ =='__main__':db.create_all()#创建数据库表app.run(debug=True)```前端代码（Vue）：由于前端代码较长，这里只给出关键组件和代码片段。首先，安装必要的依赖：vue-router, axios, vuex（可选，这里为了简便不使用vuex）文件：frontend/src/views/Login.vue```vue<template><div><h2>Login</h2><form @submit.prevent="login"><inputtype="text" v-model="username"placeholder="Username"required><input type="password" v-model="password"placeholder="Password"required><button type="submit">Login</button></form></div> </template><script>import axiosfrom 'axios';export default{data(){return {username: '',password: ''};},methods: {asynclogin(){try {constresponse =await axios.post('http://localhost:5000/login',{username:this.username,password:this.password}, {withCredentials: true});//发送凭证（如cookies）if(response.status ===200) {this.$router.push('/posts');}}catch (error){alert('Login failed');}}} };</script> ```文件：frontend/src/views/PostList.vue```vue<template><div><h2>MyPosts</h2><button@click="createNew">NewPost</button><ul><li v-for="post inposts":key="post.id"><h3>{{ post.title }}</h3><p>{{ post.content }}</p><button @click="editPost(post.id)">Edit</button><button @click="deletePost(post.id)">Delete</button></li></ul></div></template> <script> importaxios from'axios'; exportdefault {data() {return{posts:[]};},created(){this.fetchPosts();},methods: {asyncfetchPosts() {try{const response= awaitaxios.get('http://localhost:5000/posts',{ withCredentials:true });this.posts= response.data;}catch (error){console.error('Failedto fetchposts',error);}},createNew(){this.$router.push('/posts/new');},editPost(id) {this.$router.push(`/posts/edit/${id}`);},asyncdeletePost(id){try {awaitaxios.delete(`http://localhost:5000/posts/${id}`, {withCredentials: true});this.fetchPosts();//重新加载列表} catch(error) {console.error('Failed todelete post', error);}}} };</script> ```文件：frontend/src/views/EditPost.vue (同时用于新建和编辑) ```vue<template><div><h2 v-if="editMode">EditPost</h2><h2 v-else>NewPost</h2><form@submit.prevent="submit"><input type="text" v-model="title"placeholder="Title"required><textarea v-model="content"placeholder="Content"required></textarea><button type="submit">Save</button></form></div> </template><script>import axiosfrom 'axios';export default{props:{id: String//路由参数，如果是新建则为undefined},data(){return {title: '',content: '',editMode:false};},created() {if(this.id){this.editMode= true;this.fetchPost(this.id);}},methods: {asyncfetchPost(id){try {constresponse =await axios.get(`http://localhost:5000/posts/${id}`,{ withCredentials:true });this.title =response.data.title;this.content= response.data.content;} catch(error) {console.error('Failed tofetch post', error);}},async submit() {try{if (this.editMode){await axios.put(`http://localhost:5000/posts/${this.id}`, {title: this.title,content: this.content},{ withCredentials:true });}else {awaitaxios.post('http://localhost:5000/posts', {title: this.title,content: this.content},{ withCredentials:true });}this.$router.push('/posts');}catch (error){console.error('Failedto savepost',error);}}}}; </script>```路由配置：frontend/src/router/index.js```javascriptimport Vuefrom 'vue'import Routerfrom 'vue-router' importLogin from'../views/Login.vue'import PostList from'../views/PostList.vue'import EditPost from'../views/EditPost.vue'Vue.use(Router)export defaultnew Router({routes:[{path:'/',redirect: '/login'},{path: '/login',name: 'Login',component: Login},{path:'/posts',name:'PostList',component: PostList},{path: '/posts/new',name:'NewPost',component: EditPost},{path: '/posts/edit/:id',name:'EditPost',component: EditPost,props: true}] })```注意：以上代码仅为示例，实际开发中需要处理更多的边界情况和错误处理。另外，前端部分需要配置axios以携带凭证（withCredentials: true）来支持基于cookie的会话（flask-login默认使用cookie）。由于这是一个基础示例，没有包含用户注册功能，你可以根据需要添加。运行步骤：1.后端：进入backend目录，安装依赖（flask, flask-sqlalchemy, flask-login,flask-cors），运行app.py。2.前端：进入frontend目录，安装依赖（vue-router, axios），使用`npm runserve`运行。注意：在开发环境下，前端运行在localhost:8080（默认），后端运行在localhost:5000，所以存在跨域问题，我们使用了CORS来解决。相关问题：</think>下面我将使用Flask作为后端API服务，Vue.js作为前端框架，实现一个博客管理系统。这个系统将包含用户登录认证、博客的增删改查功能。 ### 解决方案概述 1. **后端(Flask)**：提供RESTful API，处理用户认证和博客管理 2. **前端(Vue.js)**：构建用户界面，与后端API交互 3. **数据库**：使用SQLite存储用户和博客数据 ### 后端实现 (Flask) #### 文件结构 ``` backend/ ├── app.py ├── requirements.txt └── instance/ └── blog.db (SQLite数据库) ``` #### 代码实现 **requirements.txt** ``` flask flask-sqlalchemy flask-cors flask-login werkzeug ``` **app.py** ```python from flask import Flask, jsonify, request, abort from flask_sqlalchemy import SQLAlchemy from flask_login import LoginManager, UserMixin, login_user, logout_user, login_required, current_user from werkzeug.security import generate_password_hash, check_password_hash from flask_cors import CORS app = Flask(__name__) app.config['SECRET_KEY'] = 'your-secret-key' app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///instance/blog.db' app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False db = SQLAlchemy(app) CORS(app, supports_credentials=True) # 允许跨域请求 login_manager = LoginManager() login_manager.init_app(app) # 用户模型 class User(UserMixin, db.Model): id = db.Column(db.Integer, primary_key=True) username = db.Column(db.String(50), unique=True, nullable=False) password_hash = db.Column(db.String(100), nullable=False) def set_password(self, password): self.password_hash = generate_password_hash(password) def check_password(self, password): return check_password_hash(self.password_hash, password) # 博客模型 class BlogPost(db.Model): id = db.Column(db.Integer, primary_key=True) title = db.Column(db.String(100), nullable=False) content = db.Column(db.Text, nullable=False) user_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False) @login_manager.user_loader def load_user(user_id): return User.query.get(int(user_id)) @app.route('/api/login', methods=['POST']) def login(): data = request.json username = data.get('username') password = data.get('password') user = User.query.filter_by(username=username).first() if user and user.check_password(password): login_user(user) return jsonify({'message': 'Logged in successfully', 'user': {'id': user.id, 'username': user.username}}), 200 return jsonify({'message': 'Invalid username or password'}), 401 @app.route('/api/logout') @login_required def logout(): logout_user() return jsonify({'message': 'Logged out'}), 200 @app.route('/api/posts', methods=['GET']) @login_required def list_posts(): posts = BlogPost.query.filter_by(user_id=current_user.id).all() return jsonify([{ 'id': post.id, 'title': post.title, 'content': post.content, 'user_id': post.user_id } for post in posts]) @app.route('/api/posts', methods=['POST']) @login_required def create_post(): data = request.json if not data or not data.get('title') or not data.get('content'): abort(400) post = BlogPost( title=data['title'], content=data['content'], user_id=current_user.id ) db.session.add(post) db.session.commit() return jsonify({ 'id': post.id, 'title': post.title, 'content': post.content }), 201 @app.route('/api/posts/<int:post_id>', methods=['PUT']) @login_required def update_post(post_id): post = BlogPost.query.get_or_404(post_id) if post.user_id != current_user.id: abort(403) data = request.json if not data: abort(400) post.title = data.get('title', post.title) post.content = data.get('content', post.content) db.session.commit() return jsonify({ 'id': post.id, 'title': post.title, 'content': post.content }) @app.route('/api/posts/<int:post_id>', methods=['DELETE']) @login_required def delete_post(post_id): post = BlogPost.query.get_or_404(post_id) if post.user_id != current_user.id: abort(403) db.session.delete(post) db.session.commit() return '', 204 if __name__ == '__main__': with app.app_context(): db.create_all() # 创建初始用户（仅用于演示） if not User.query.filter_by(username='admin').first(): admin = User(username='admin') admin.set_password('admin123') db.session.add(admin) db.session.commit() app.run(debug=True) ``` ### 前端实现 (Vue.js) #### 文件结构 ``` frontend/ ├── public/ ├── src/ │ ├── assets/ │ ├── components/ │ │ ├── BlogList.vue │ │ ├── BlogForm.vue │ │ └── NavBar.vue │ ├── views/ │ │ ├── Login.vue │ │ ├── Dashboard.vue │ ├── router/ │ │ └── index.js │ ├── services/ │ │ └── api.js │ ├── App.vue │ └── main.js └── package.json ``` #### 关键代码实现 **src/services/api.js** ```javascript import axios from 'axios'; const api = axios.create({ baseURL: 'http://localhost:5000/api', withCredentials: true, // 允许发送cookie }); export default { login(credentials) { return api.post('/login', credentials); }, logout() { return api.get('/logout'); }, getPosts() { return api.get('/posts'); }, createPost(post) { return api.post('/posts', post); }, updatePost(id, post) { return api.put(`/posts/${id}`, post); }, deletePost(id) { return api.delete(`/posts/${id}`); } }; ``` **src/router/index.js** ```javascript import Vue from 'vue'; import Router from 'vue-router'; import Login from '../views/Login.vue'; import Dashboard from '../views/Dashboard.vue'; Vue.use(Router); const router = new Router({ routes: [ { path: '/', redirect: '/login' }, { path: '/login', name: 'Login', component: Login }, { path: '/dashboard', name: 'Dashboard', component: Dashboard, meta: { requiresAuth: true } } ] }); router.beforeEach((to, from, next) => { if (to.meta.requiresAuth) { // 实际项目中应检查用户是否已登录 const isAuthenticated = localStorage.getItem('user') !== null; if (!isAuthenticated) { next('/login'); return; } } next(); }); export default router; ``` **src/views/Login.vue** ```vue <template> <div class="login-container"> <h2>博客管理系统登录</h2> <form @submit.prevent="login"> <div> <label>用户名:</label> <input type="text" v-model="credentials.username" required> </div> <div> <label>密码:</label> <input type="password" v-model="credentials.password" required> </div> <button type="submit">登录</button> <p v-if="error" class="error">{{ error }}</p> </form> </div> </template> <script> import api from '@/services/api'; export default { data() { return { credentials: { username: '', password: '' }, error: '' }; }, methods: { async login() { try { const response = await api.login(this.credentials); localStorage.setItem('user', JSON.stringify(response.data.user)); this.$router.push('/dashboard'); } catch (err) { this.error = '登录失败，请检查用户名和密码'; } } } }; </script> ``` **src/views/Dashboard.vue** ```vue <template> <div> <NavBar /> <div class="dashboard"> <h1>我的博客</h1> <button @click="showCreateForm">新建博客</button> <BlogForm v-if="showForm" :post="editingPost" @save="savePost" @cancel="cancelEdit" /> <BlogList :posts="posts" @edit="editPost" @delete="deletePost" /> </div> </div> </template> <script> import BlogList from '@/components/BlogList.vue'; import BlogForm from '@/components/BlogForm.vue'; import NavBar from '@/components/NavBar.vue'; import api from '@/services/api'; export default { components: { BlogList, BlogForm, NavBar }, data() { return { posts: [], showForm: false, editingPost: null }; }, async created() { await this.fetchPosts(); }, methods: { async fetchPosts() { try { const response = await api.getPosts(); this.posts = response.data; } catch (err) { console.error('获取博客列表失败:', err); } }, showCreateForm() { this.editingPost = null; this.showForm = true; }, editPost(post) { this.editingPost = { ...post }; this.showForm = true; }, async savePost(post) { try { if (post.id) { await api.updatePost(post.id, post); } else { await api.createPost(post); } this.showForm = false; await this.fetchPosts(); } catch (err) { console.error('保存博客失败:', err); } }, async deletePost(id) { if (confirm('确定要删除这篇博客吗？')) { try { await api.deletePost(id); await this.fetchPosts(); } catch (err) { console.error('删除博客失败:', err); } } }, cancelEdit() { this.showForm = false; this.editingPost = null; } } }; </script> ``` **src/components/BlogForm.vue** ```vue <template> <div class="blog-form"> <h2>{{ editingPost ? '编辑博客' : '新建博客' }}</h2> <form @submit.prevent="save"> <div> <label>标题:</label> <input type="text" v-model="form.title" required> </div> <div> <label>内容:</label> <textarea v-model="form.content" rows="10" required></textarea> </div> <button type="submit">保存</button> <button type="button" @click="cancel">取消</button> </form> </div> </template> <script> export default { props: { post: Object }, data() { return { form: { id: null, title: '', content: '' } }; }, watch: { post: { immediate: true, handler(newVal) { if (newVal) { this.form = { ...newVal }; } else { this.form = { id: null, title: '', content: '' }; } } } }, methods: { save() { this.$emit('save', this.form); }, cancel() { this.$emit('cancel'); } } }; </script> ``` ### 系统功能说明 1. **用户认证**： - 登录/登出功能 - 使用Flask-Login管理会话 - 前端使用localStorage存储用户信息 2. **博客管理**： - 创建新博客 - 查看博客列表 - 编辑现有博客 - 删除博客 3. **安全措施**： - 后端验证用户权限（只有博主可修改/删除自己的博客） - 前端路由守卫保护受保护页面 ### 如何运行 1. **后端**： ```bash cd backend pip install -r requirements.txt python app.py ``` 2. **前端**： ```bash cd frontend npm install npm run serve ``` 3. **访问**： - 登录页面：http://localhost:8080/login - 使用账号：admin / admin123 ### 技术要点解释 1. **Flask-Login**：处理用户会话管理和认证 2. **SQLAlchemy**：ORM数据库操作 3. **CORS**：解决跨域资源共享问题 4. **Vue组件化**：将UI拆分为可复用组件 5. **Axios**：处理HTTP请求 6. **Vue Router**：前端路由管理 ### 相关优化建议 1. 添加用户注册功能 2. 实现博客分类和标签 3. 添加博客搜索功能 4. 实现博客分页展示 5. 添加Markdown编辑器支持