【入门】Vue + Flask + MySQL 打造你的全栈博客系统

最新推荐文章于 2024-08-14 16:23:13 发布

悲之觞

最新推荐文章于 2024-08-14 16:23:13 发布

阅读量549

点赞数 4

文章标签： vue.js flask mysql

本文链接：https://blog.csdn.net/Austin0101/article/details/140088005

版权

创建一个完整的全栈应用，涉及前端、后端、以及数据库的整合，是一项既挑战又充满乐趣的任务。今天，我们将一起走过使用Vue.js作为前端框架，Flask作为后端框架，MySQL作为数据库的全栈应用开发过程。这篇博客将以一个简单的博客系统为例，手把手教你从零开始构建一个全栈应用。

第1部分：项目概述

我们的目标是构建一个简单的博客应用，功能包括显示文章列表、创建新文章、查看文章详情等。技术栈如下：

前端：Vue.js
后端：Flask
数据库：MySQL

第2部分：环境准备

首先，确保你已经安装了Node.js、Python和MySQL。接下来，我们需要安装Vue CLI、Flask和MySQL的Python驱动程序。

npm install -g @vue/cli
pip install flask mysql-connector-python

第3部分：创建Vue前端

使用Vue CLI创建一个新项目。

vue create vue-blog

cd vue-blog
npm run serve

创建一个简单的文章列表组件components/Posts.vue。

<template>
  <div>
    <div v-for="post in posts" :key="post.id">
      <h2>{{ post.title }}</h2>
      <p>{{ post.content }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      posts: [],
    };
  },
  mounted() {
    fetch("http://localhost:5000/posts")
      .then(response => response.json())
      .then(data => {
        this.posts = data;
      });
  },
};
</script>

第4部分：搭建Flask后端

创建一个新的Flask应用。

from flask import Flask, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route('/posts', methods=['GET'])
def get_posts():
    # 假设我们已经从数据库获取了文章列表
    posts = [
        {"id": 1, "title": "Hello, World!", "content": "Welcome to our blog."},
        {"id": 2, "title": "Another Post", "content": "Here's some more content."}
    ]
    return jsonify(posts)

if __name__ == '__main__':
    app.run(debug=True)

第5部分：集成MySQL数据库

在MySQL中创建一个数据库和文章表。

CREATE DATABASE blog;
USE blog;
CREATE TABLE posts (
    id INT AUTO_INCREMENT PRIMARY KEY,
    title VARCHAR(255) NOT NULL,
    content TEXT NOT NULL
);

修改Flask应用以从MySQL数据库获取文章。

import mysql.connector

@app.route('/posts', methods=['GET'])
def get_posts():
    db = mysql.connector.connect(
        host="localhost",
        user="yourusername",
        password="yourpassword",
        database="blog"
    )
    cursor = db.cursor(dictionary=True)
    cursor.execute("SELECT * FROM posts")
    posts = cursor.fetchall()
    return jsonify(posts)