flask + vue个人博客（第一天）

说明：第一次写个人博客，之前没有任何经验，前端经验基本为0，大神看到勿喷，仅此献给想自己搭建博客的童鞋一点启示，博客搭建进度，我将及时更新到头条，希望大家多提建议。

注：今天目标，搭建好vue和flask项目，并实现vue调用flask接口：

• vue部分

安装部分大家可以自行百度，这里只说配置。

1. 初始化项目

初始化生成vue项目，名称为myvue

npm init webpack myvue

cd myvue

cnpm install

注：npm同pip命令一样方便vue包的*载下**安装，这里为什么是cnpm呢？

原因是我把npm的源改成了淘宝的源，cnpm就可以使用了

配置方法：

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

1. 运行项目

npm run dev

这样服务就起来了，可以简单查看下效果。但是如何向后端发送请求呢?

前端小白的我很懵逼，于是我查阅资料对App.vue 做了如下修改

<button @click="aaaaa">sasa

添加到template 下的dev中，同时增加了函数aaaaa，通过axios发送请求

改动如下图所示

改动示例图

这样 vue部分暂时告一段落.

• flask 部分

由于要讲的东西实在太多，我是按照大型项目去构建的项目目录

这里为了让大家对前后端通信有个感官的认识，所以先用了简单的单文件hello,world来讲解

1. 创建虚拟环境并安装flask 和flask_cors

pip install flask

pip install flask_cors

1. 新建app.py并将下面代码粘贴进去

代码排版一发布就这样了，没办法贴图吧

from flask import Flask, make_response, jsonify
from flask_cors import CORS
app = Flask(__name__)
CORS(app)
@app.route(’/’)
def hello_world():
 result_text = {"statusCode": 200, "message": "hello, world"}
 return result_text
if __name__ == ’__main__’:
 app.run()

导入flask_cors是为了解决前后端分离，vue访问flask服务导致的跨域问题

类似这种第三方包，在flask 中一般有两种初始化方法, 以本例举例

• CORS(app)
• cors = CORS()
• cors.init_app(app)

这样呢就把一个简单的服务写好了。

现在让我们看下效果吧：

请求效果图

通过上图我们看到网页请求了我们的后台服务

http://127.0.0.1:5000/api/main

返回值为：

请求返回值

好了，今天的内容就到这里，下章将着重讲解，flask大型项目的目录结构，蓝图等

后端github地址：https://github.com/a1299646329/myblog.git

前端github地址：https://github.com/a1299646329/myvue.git

觉得写得不错的老铁转发评论加关注，反正源代码都贴出来了，随心就好！