如何利用Python的Flask框架与Vue.js创建RESTful API服务

简介: 【4月更文挑战第10天】本文介绍了如何使用Flask和Vue.js创建一个前后端分离的RESTful API服务。Flask作为后端框架,负责提供CRUD操作,与SQLite数据库交互;Vue.js作为前端框架,构建用户界面并利用axios库与后端API通信。通过示例代码,展示了Flask设置路由处理用户数据以及Vue组件如何调用API获取和操作数据。此基础结构为构建更复杂的Web应用提供了起点。

在现代Web开发中,前后端分离的架构已经成为一种流行的设计模式。在这种模式中,后端专注于提供高效的RESTful API服务,而前端则负责构建用户界面和交互逻辑。Python的Flask框架以其轻量级和灵活性著称,是构建API服务的绝佳选择。与此同时,Vue.js作为一个渐进式的JavaScript框架,在前端正变得越来越流行。本文将指导你如何使用Flask框架和Vue.js来创建一个功能完善的RESTful API服务。

首先,我们需要安装Flask。在命令行中执行以下命令:

pip install Flask

接下来,我们创建一个简单的Flask应用,它将提供基本的CRUD(创建、读取、更新、删除)操作。在一个名为app.py的文件中,我们可以定义如下路由:

from flask import Flask, request, jsonify
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:////tmp/test.db'  # 使用SQLite数据库
db = SQLAlchemy(app)

class User(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(50), unique=True, nullable=False)

@app.route('/users', methods=['GET'])
def get_users():
    users = User.query.all()
    return jsonify([user.name for user in users])

@app.route('/users', methods=['POST'])
def create_user():
    data = request.get_json()
    new_user = User(name=data['name'])
    db.session.add(new_user)
    db.session.commit()
    return jsonify({
   'message': 'User created!'}), 201

@app.route('/users/<int:user_id>', methods=['PUT'])
def update_user(user_id):
    data = request.get_json()
    user = User.query.get(user_id)
    if user:
        user.name = data['name']
        db.session.commit()
        return jsonify({
   'message': 'User updated!'})
    else:
        return jsonify({
   'error': 'User not found'}), 404

@app.route('/users/<int:user_id>', methods=['DELETE'])
def delete_user(user_id):
    user = User.query.get(user_id)
    if user:
        db.session.delete(user)
        db.session.commit()
        return jsonify({
   'message': 'User deleted!'})
    else:
        return jsonify({
   'error': 'User not found'}), 404

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

在这个例子中,我们使用了Flask-SQLAlchemy扩展来处理数据库操作。我们定义了一个User模型,并创建了对应的CRUD路由。这些路由分别处理获取所有用户、创建新用户、更新用户信息和删除用户的请求。

现在,让我们转向前端部分。使用Vue.js,我们可以构建一个用户界面来与后端API进行交互。首先,我们需要安装Vue CLI:

npm install -g @vue/cli

然后,我们创建一个新的Vue项目:

vue create frontend
cd frontend

在项目中,我们可以使用axios库来发送HTTP请求。首先安装axios:

npm install axios

接下来,我们在src目录下创建一个名为ApiService.js的文件,用于封装与后端通信的逻辑:

import axios from 'axios';

export default {
   
  getUsers() {
   
    return axios.get('http://localhost:5000/users');
  },
  createUser(data) {
   
    return axios.post('http://localhost:5000/users', data);
  },
  updateUser(id, data) {
   
    return axios.put(`http://localhost:5000/users/${
     id}`, data);
  },
  deleteUser(id) {
   
    return axios.delete(`http://localhost:5000/users/${
     id}`);
  },
};

最后,在Vue组件中,我们可以使用这个ApiService来获取数据和发送请求。例如,在一个名为UserList.vue的组件中,我们可以这样获取用户列表:

<template>
  <div>
    <ul>
      <li v-for="user in users" :key="user.id">{
  { user.name }}</li>
    </ul>
  </div>
</template>

<script>
import ApiService from './ApiService';
export default {
    
  data() {
    
    return {
    
      users: [],
    };
  },
  created() {
    
    ApiService.getUsers().then(response => {
    
      this.users = response.data;
    });
  },
};
</script>

通过以上步骤,我们已经成功创建了一个使用Flask和Vue.js的RESTful API服务。这个服务包括了前后端的基本交互,可以作为更复杂应用的起点。在实际开发中,你可能还需要添加用户认证、错误处理、数据验证等功能。但希望这篇文章为你提供了一个良好的基础,让你能够继续探索和完善你的API服务。

相关文章
|
20天前
|
JavaScript 前端开发 安全
【逆向】Python 调用 JS 代码实战:使用 pyexecjs 与 Node.js 无缝衔接
本文介绍了如何使用 Python 的轻量级库 `pyexecjs` 调用 JavaScript 代码,并结合 Node.js 实现完整的执行流程。内容涵盖环境搭建、基本使用、常见问题解决方案及爬虫逆向分析中的实战技巧,帮助开发者在 Python 中高效处理 JS 逻辑。
|
5月前
|
Web App开发 数据采集 JavaScript
动态网页爬取:Python如何获取JS加载的数据?
动态网页爬取:Python如何获取JS加载的数据?
907 58
|
6月前
|
JavaScript 前端开发 API
|
9月前
|
安全 前端开发 数据库
Python 语言结合 Flask 框架来实现一个基础的代购商品管理、用户下单等功能的简易系统
这是一个使用 Python 和 Flask 框架实现的简易代购系统示例,涵盖商品管理、用户注册登录、订单创建及查看等功能。通过 SQLAlchemy 进行数据库操作,支持添加商品、展示详情、库存管理等。用户可注册登录并下单,系统会检查库存并记录订单。此代码仅为参考,实际应用需进一步完善,如增强安全性、集成支付接口、优化界面等。
|
6月前
|
前端开发 JavaScript NoSQL
使用 Node.js、Express 和 React 构建强大的 API
本文详细介绍如何使用 Node.js、Express 和 React 构建强大且动态的 API。从开发环境搭建到集成 React 前端,再到利用 APIPost 高效测试 API,适合各水平开发者。内容涵盖 Node.js 运行时、Express 框架与 React 库的基础知识及协同工作方式,还涉及数据库连接和前后端数据交互。通过实际代码示例,助你快速上手并优化应用性能。
|
8月前
|
数据采集 JavaScript Android开发
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
248 7
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
7月前
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
9月前
|
JavaScript 前端开发 安全
盘点原生JS中目前最没用的几个功能API
在JavaScript的发展历程中,许多功能与API曾风光无限,但随着技术进步和语言演化,部分功能逐渐被淘汰或被更高效的替代方案取代。例如,`with`语句使代码作用域复杂、可读性差;`void`操作符功能冗余且影响可读性;`eval`函数存在严重安全风险和性能问题;`unescape`和`escape`函数已被`decodeURIComponent`和`encodeURIComponent`取代;`arguments`对象则被ES6的剩余参数语法替代。这些变化体现了JavaScript不断优化的趋势,开发者应紧跟技术步伐,学习新技能,适应新技术环境。
139 10
|
10月前
|
数据采集 人工智能 自然语言处理
Midscene.js:AI 驱动的 UI 自动化测试框架,支持自然语言交互,生成可视化报告
Midscene.js 是一款基于 AI 技术的 UI 自动化测试框架,通过自然语言交互简化测试流程,支持动作执行、数据查询和页面断言,提供可视化报告,适用于多种应用场景。
2490 1
Midscene.js:AI 驱动的 UI 自动化测试框架,支持自然语言交互,生成可视化报告
|
10月前
|
JSON JavaScript 前端开发
深入浅出Node.js:从零开始构建RESTful API
在数字化时代的浪潮中,后端开发作为连接用户与数据的桥梁,扮演着至关重要的角色。本文将引导您步入Node.js的奇妙世界,通过实践操作,掌握如何使用这一强大的JavaScript运行时环境构建高效、可扩展的RESTful API。我们将一同探索Express框架的使用,学习如何设计API端点,处理数据请求,并实现身份验证机制,最终部署我们的成果到云服务器上。无论您是初学者还是有一定基础的开发者,这篇文章都将为您打开一扇通往后端开发深层知识的大门。
203 12

推荐镜像

更多