potato网络连接不可用_用Flask和Vue制作一个单页应用（一）

Flask[官方主页]是一个使用Python编写的轻量级web后端框架，其使用 Jinja模板引擎和Werkzeug 作为 WSGI 工具箱。使用Flask可以很方便地实现RESTful的后端API。而Vue.js[官方主页]则是近年来非常火的前端框架。在国内，前端程序员用Vue比较多，因为比较好上手，再加上对中文友好，遇到问题能比较容易搜索出中文结果。可能和Vue.js的作者尤雨溪(Evan You)是华人有一定关系，Vue的中文社区比较活跃。这里以一个简单的例子，展示如何把前端页面的增删改查请求，传递到后端进行数据的操作。 本示例所涉及的工具/模块版本如下：

软件/工具	版本
Vue	v2.6.12
Vue CLI	v4.5.9
Node	v15.3.0
npm	v7.0.14
Flask	v1.1.2
Python	v3.8.5

Flask 配置

由于Flask是基于Python的，自然需要先安装Python。推荐通过Anaconda来管理Python环境。当然，也可以通过Python的venv命令来管理包环境。具体可以参考网上教程。这里就以Anaconda的环境为例。 首先创建一个项目文件夹，并为后端创建server文件夹：

mkdir flask-vue-crud
cd flask-vue-crud
mkdir server
cd server

然后创建Flask的运行环境：

conda create -n flask python=3.8
conda activate flask
conda install flask flask-cors

在server文件夹下创建app.py文件，内容如下：

#!/usr/bin/env python
# -*- coding: utf-8 -*-
from flask import Flask, jsonify
from flask_cors import CORS


# configuration
DEBUG = True

# instantiate the app
app = Flask(__name__)
app.config.from_object(__name__)

# enable CORS
CORS(app, resources={r'/*': {'origins': '*'}})


# sanity check route
@app.route('/open', methods=['GET'])
def open_door():
    return jsonify(u'芝麻开门！')


if __name__ == '__main__':
    app.config['JSON_AS_ASCII'] = False
    app.run()

在flask环境运行命令python app.py，会看到如下提示：

* Serving Flask app "app" (lazy loading)
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: on
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 118-107-448
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

在浏览器里打开如下链接：http://localhost:5000/open，会看到页面显示"芝麻开门！"。说明Flask已经配置成功。（按Ctrl+C可以结束app运行。由于是纯文本，没有样式，某些浏览器比如Safari缺省字体设置可能显示乱码，推荐使用Chrome/Microsoft Edge测试。）

Vue.js安装配置

安装Vue之前，需要先安装Node.js，然后通过Node.js官方提供的包管理工具npm来安装Vue和Vue CLI。可以从Node.js的官方网站https://nodejs.org/en/下载安装包。安装之后，从命令行查看是否正确安装，正确安装的话，会显示各自的版本号。

node -v
npm -v

然后通过npm安装vue CLI（如果出现文件夹不可访问的错误，Windows需要管理员权限，Mac/Linux需要sudo）：

npm install -g @vue/cli

国内用户在运行npm或者vue命令时，可能会碰到网络连接超时的错误，可以将npm改为国内源再运行：

npm config set registry https://registry.npm.taobao.org

// 配置后可通过下面方式来验证是否成功
npm config get registry 

确认回到项目文件夹flask-vue-crud，然后使用vue命令创建前端页面。（此处会生成一个client文件夹，这个文件夹应该和server文件夹平级，都在项目文件夹flask-vue-crud下面。所以在执行vue命令之前，确保已经cd到项目文件夹下面。）

vue create client

此处会出现选择，缺省选vue2（敲回车即可）。 添加router插件（中间出现两个问题选yes），并启动vue的demo页面：

cd client
vue add router
npm run serve

启动之后，根据提示，可以在浏览器中打开如下链接：http://localhost:8080/，可以看到Welcome to Your Vue.js App的demo页面，说明Vue.js安装设置成功。 此时，项目文件夹结构如下：