从零到一：用Flask、Vue和Webpack打造全栈应用

从零到一：用Flask、Vue和Webpack打造全栈应用

引用

CSDN

等

14

来源

1.

https://blog.csdn.net/hold_on_qlc/article/details/128184960

2.

https://www.cnblogs.com/yoyoketang/p/16615745.html

3.

https://tutorial.helloflask.com/login/

4.

https://flask-jwt-extended.readthedocs.io/

5.

http://itboolean.com/article/10254.html

6.

https://www.cnblogs.com/zhuyutang/p/15358301.html

7.

https://juejin.cn/post/7130576096591872008

8.

https://tutorial.helloflask.com/login/#_3

9.

https://flask-jwt-extended.readthedocs.io/en/stable/installation.html

10.

https://flask-jwt-extended.readthedocs.io/en/stable/basic_usage.html

11.

https://juejin.cn/post/6844904186539147272

12.

https://www.cnblogs.com/flower-dance/p/14858071.html

13.

https://juejin.cn/post/7134483874314190855

14.

https://webpack.docschina.org/guides/getting-started/

在当今的Web开发领域，全栈开发能力变得越来越重要。一个优秀的全栈开发者需要同时掌握前端和后端技术，能够独立完成整个项目的开发。本文将带你从零开始，使用Python的Flask框架、前端Vue.js以及Webpack构建工具，打造一个完整的全栈应用。

环境准备

首先，我们需要搭建Flask开发环境。确保你已经安装了Python和pip，然后在命令行中运行以下命令：

pip install flask flask-sqlalchemy pymysql flask-jwt-extended

数据库连接

Flask-SQLAlchemy是Flask的ORM插件，可以简化数据库操作。首先需要在项目中配置数据库连接：

from flask import Flask
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql+pymysql://username:password@localhost/dbname'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False

db = SQLAlchemy(app)

用户认证

为了实现用户认证，我们需要存储用户信息并进行密码验证。这里使用Flask-JWT-Extended来处理JWT认证。

1. 用户模型：定义User模型，包含用户名、密码散列值等字段。

from werkzeug.security import generate_password_hash, check_password_hash

class User(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(20), unique=True, nullable=False)
    password_hash = db.Column(db.String(128))

    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)

2. JWT认证：使用Flask-JWT-Extended实现JWT认证。

from flask_jwt_extended import JWTManager, jwt_required, create_access_token

app.config['JWT_SECRET_KEY'] = 'your-secret-key'
jwt = JWTManager(app)

3. 登录接口：实现用户登录功能，生成JWT token。

from flask import request, jsonify

@app.route('/login', methods=['POST'])
def login():
    data = request.get_json()
    username = data.get('username')
    password = data.get('password')

    user = User.query.filter_by(username=username).first()
    if user and user.check_password(password):
        access_token = create_access_token(identity=user.id)
        return jsonify(access_token=access_token)
    else:
        return jsonify({"msg": "Bad username or password"}), 401

项目搭建

使用Vue CLI创建项目：

npm install -g @vue/cli
vue create my-project
cd my-project

Webpack配置

Vue CLI已经集成了Webpack，但我们可以根据需要进行自定义配置。在项目根目录下创建vue.config.js文件：

module.exports = {
  configureWebpack: {
    // 自定义Webpack配置
  }
}

组件开发

创建一个简单的登录组件src/components/Login.vue：

<template>
  <div>
    <h1>Login</h1>
    <form @submit.prevent="login">
      <input type="text" v-model="username" placeholder="Username" />
      <input type="password" v-model="password" placeholder="Password" />
      <button type="submit">Login</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    async login() {
      const response = await axios.post('http://localhost:5000/login', {
        username: this.username,
        password: this.password
      })
      localStorage.setItem('token', response.data.access_token)
      this.$router.push('/dashboard')
    }
  }
}
</script>

路由配置

使用Vue Router进行页面导航：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from './components/Login.vue'
import Dashboard from './components/Dashboard.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/login', component: Login },
  { path: '/dashboard', component: Dashboard, meta: { requiresAuth: true } }
]

const router = new VueRouter({
  routes
})

router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('token')
  if (to.matched.some(record => record.meta.requiresAuth) && !token) {
    next('/login')
  } else {
    next()
  }
})

export default router

API对接

前端通过Axios发送HTTP请求与后端API交互。确保在请求中携带JWT token：

axios.defaults.headers.common['Authorization'] = `Bearer ${localStorage.getItem('token')}`

跨域问题

由于前后端分离，需要解决跨域问题。在Flask后端添加CORS支持：

from flask_cors import CORS

app = Flask(__name__)
CORS(app)

通过以上步骤，我们就完成了一个简单的全栈应用开发。这个应用包含了用户注册、登录、权限管理等功能，前后端通过JWT进行身份验证，使用Webpack进行前端代码打包优化。希望这个教程能帮助你掌握全栈开发的基本流程和技术要点。