Flask + Vue 搭建简易系统步骤总结 |
您所在的位置：网站首页 › vue+flask › Flask + Vue 搭建简易系统步骤总结 |
Flask + Vue 搭建简易系统步骤总结
|
之前一段时间一直在学习 python，后来在项目中用 weex 时接触到了 vue.js，本来 python 是自己想学的一门脚本技术，weex 是项目需要，必须了解些 vue.js 方面的语法，所以为了加深对这两门技术的了解，一直在想怎么在实际项目中使用这些技术。刚好，团队中有一个分析App性能分析的需求，被分配统计Android 页面启动时间，针对本地调试，可以通过跑 python 脚本实现，收集到的数据需要在页面上展示，于是便想着通过 python + vue 的方式搭建一个完整的后台和前端系统。总觉着 python + vue 实现后台和前端，有些不好理解，像是被硬搭配在一起的。大概是自己见识比较少，并不清楚现在的前端和后台开发技术趋势，在我的认知中，后台一直都是 Java 开发，前端基本是 html+一种JS框架。 哈哈，废话不多说，这两天搭建环境和跑完整的项目，遇到的问题还是比较多，以下便是总结。
主要好处：方法查看和定位很方便。 Tips：官网下载的是30天的使用版，过期后每次只能使用半小时，后来通过网上的方式破解了一把。 - MAC 版本可以直接在这个网站下载破解版，点击【这里】 - 如何破解？点击【这里】 Vue 环境搭建步骤具体步骤可参考 如何运行一个Vue项目，这里只简单说明一下： 1）搭建需要的环境和工具 - 安装 node.js环境（npm包管理器） - cnpm npm的淘宝镜像，命令：npm install -g cnpm –registry=http://registry.npm.taobao.org/ - vue-cli 脚手架构建工具，命令：cnpm install -g vue-cli 2）创建 & 运行项目 - cd 到项目目录并按步骤提示创建，命令：vue init webpack projectDir - 安装项目依赖得到 node-modules 目录，命令：cnpm install - 运行项目，会提示当前应用在哪个地址可访问，端口为8080，该命令会热加载项目，也就是修改后保存页面可自动刷新，命令：npm run dev - 访问页面，在浏览器输入 http://localhost:8080 可以看到初始页面。 3）项目目录说明 - 这里只说一下需要修改进行开发的 src 目录，完整目录说明参考：Vue 项目结构说明 |—— src/ | |—— main.js # app entry file | |—— App.vue # main app component | |—— components/ # ui components | | |—— … | |—— assets/ # module assets (processed by webpack) 遇到的问题1）运行后的项目，其他终端能通过 http://localhost:8080 访问查看页面吗？ A：npm run dev 命令只用做本地调试，共开发者预览页面，同部署到服务器供其他终端访问是不同的，如果要提供给其他浏览器或终端使用，则需要部署到具体的服务器才行。 2）如何将 Vue 项目部署到服务器上呢？ - 执行命令 npm run build 生成 dist 文件夹，然后将该目录下的文件部署到服务器（服务器如python，tomcat，nginx）。 - cd 到 dist 目录下，这里使用最简单的 python 搭建服务器，运行命令：python -m http.server，将 dist 下的文件部署到 Python 自带的服务器中； - 访问 http://YourIpAddress:8000/ 可以直接在其他终端打开对应的页面（python搭建的服务器再8000端口监听）。 3）如何通过 Vue 请求服务器接口并获取数据呢？ - 使用 axios 库来实现，安装命令：npm install axios。 相关技术文档 Vue 官方文档：https://cn.vuejs.org/v2/guide/Vue 项目运行步骤：https://segmentfault.com/a/1190000009871504axios 前端接口请求Client：https://www.npmjs.com/package/axios 二、服务器搭建IDEA 工具：PyCharm（免费版本） Python 环境搭建就不仔细说明，直接进入到 Flask 使用和服务器搭建。 先说一下，为什么使用 Flask，有两点，一是几种框架中比较轻量级，二是不会封装得太厉害。具体 Flask 使用目前接触得也只是能将项目运行起来并未前端提供接口服务。 使用 Flask Web框架 1）安装步骤 - 安装 flask 库：pip3 install flask； - 安装之后在项目中 import flask 后才能真正找到 flask module。 2）运行项目 - 在哪个文件中使用了 flask，运行对应的 xxx.py，会提示在 http://localhost:5000 监听; - 打开浏览器，输入 http://localhost:5000，如果使用了 flask ，可以使用 Jinja 2 写前端模板文件（这里其实整个系统可以直接通过 flask 实现）。 Tips：这种情况类似在本地使用 npm run dev 查看build后的 vue 页面一样，只能本终端访问，并没有部署到服务器中。 遇到的问题1）如何为外部提供接口？（base_url = http://ip:5000） - 最主要的一个库是 flask_cors，需要继续安装，命令：pip3 install -U flask-cors； - 接口可以是：base_url, base_url + ‘flask-route-method’ , 对应方法中，return 便是返回给客户端的响应数据。 Tips：这里有一个问题就是如果运行时直接是 app.run() 就是运行在本地，若是配置了 host 则可以运行在指定收信任的公网，具体可查看下面【flask 服务器实现代码】章节。 相关技术文档 Python 教程：廖雪峰官方网站Flask web 框架使用文档：http://flask.pocoo.orgFlask 快速入门&配置：http://docs.jinkan.org/docs/flask/quickstart.html#a-minimal-applicationFlask-CORS 跨域访问使用文档：http://flask_corsJavascript Json 库使用：http://www.runoob.com/js/js-json.htmlvirtualenv库： 实现应用虚拟独立运行环境 三、前端和后台交互实现 Vue 前端实现代码： {{ serverResponse }} GET DATA import axios from 'axios'; export default { name: "my-first-vue", data: function() { return { serverResponse: 'resp' } }, methods: { getData() { var that = this; // 对应 Python 提供的接口，这里的地址填写下面服务器运行的地址，本地则为127.0.0.1，外网则为 your_ip_address const path = 'http://127.0.0.1:5000/getMsg'; axios.get(path).then(function (response) { // 这里服务器返回的 response 为一个 json object，可通过如下方法需要转成 json 字符串 // 可以直接通过 response.data 取key-value // 坑一：这里不能直接使用 this 指针，不然找不到对象 var msg = response.data.msg; // 坑二：这里直接按类型解析，若再通过 JSON.stringify(msg) 转，会得到带双引号的字串 that.serverResponse = msg; alert('Success ' + response.status + ', ' + response.data + ', ' + msg); }).catch(function (error) { alert('Error ' + error); }) } } } } flask 服务器实现代码（文件名：get_msg.py）： from flask import Flask from flask import jsonify from flask_cors import CORS app = Flask(__name__) cors = CORS(app, resources={r"/getMsg": {"origins": "*"}}) @app.route('/') def hello_world(): return 'Hello World!' @app.route('/getMsg', methods=['GET', 'POST']) def home(): response = { 'msg': 'Hello, Python !' } return jsonify(response) # 启动运行 if __name__ == '__main__': app.run() # 这样子会直接运行在本地服务器，也即是 localhost:5000 # app.run(host='your_ip_address') # 这里可通过 host 指定在公网IP上运行其他项目实践： - 使用 Vue.js 和 Flask 实现全栈单页面应用 - GitHub项目：这个项目直接将 vue build 后生成的 index.html 作为 flask 渲染的模板页面，目前不知道怎么实现的 - 使用vue+flask做全栈开发的全过程（实现前后端分离） 四、总结使用 Flask + Vue 实现一个应用，简单来说主要是以下几个步骤： - Vue.js 实现前端页面 & 通过 axios 库请求后台接口获取数据后重新渲染页面； - Flask & Flask-CORS 提供接口 & 实现跨域服务。 - 打包 Vue.js 文件 & 部署到服务器，通过 index 页面进行访问。 如果需要最终可以在公网访问最终打包好的 Vue 前端界面，则执行以下操作： - 在服务器实现文件 get_msg.py 文件中配置 app.run(host=’your_ip_address’)； - 配置 Vue axios请求接口的 base_url 为 your_ip_address； - 通过 npm run build 打包得到最终 dist 文件并部署到服务器中（部署可通过 python -m http.server 进行简单部署，然后通过 http://your_ip_address:8000 端口访问最终的页面）。 :) 每次写东西都花好长时间，终于写完了，给出文章开头漫画图的答案，每次看到都会觉得好开心，哈哈哈…… |
【本文地址】
今日新闻 |
推荐新闻 |