Flask Vue.js全栈开发|第2章:Vue.js通过axios访问Flask RESTful API

  • 原创
  • Madman
  • /
  • /
  • 13
  • 31499 次阅读

flask vuejs 全栈开发-min.png

Synopsis: 使用 Vue.js 官方工具 Vue-cli 初始化前端项目,打包器是 webpack。安装 axios,使用它去调用后端Flask提供的API,但会失败,因为端口不同是跨域访问,后端要安装 Flask-Cors 包。最后,将 Bootstrap 4 引入到前端项目中,方便后续快速开发

代码已上传到 https://github.com/wangy8961/flask-vuejs-madblog/tree/v0.2 ,欢迎star

创建 dev 开发分支:

$ git checkout -b dev

1. 配置 Vue.js

请确保有 Vue.js 基础,阅读官方文档:

1.1 安装 Node.js

请前往 官方网站 下载并安装 LTS 版本

安装好后,由于 npm 命令使用的国外镜像,在国内下载依赖包时很慢,这里换成 淘宝 NPM 镜像

打开 cmd

Microsoft Windows [版本 10.0.14393]
(c) 2016 Microsoft Corporation。保留所有权利。

C:\Users\wangy>npm install -g cnpm --registry=https://registry.npm.taobao.org

之后,用 cnpm 来代替 npm 命令

1.2 Vue-cli

C:\Users\wangy>cnpm install -g vue-cli
C:\Users\wangy>vue -V
2.9.6

1.3 初始化前端项目

C:\Users\wangy>D:

D:\>cd python-code\flask-vuejs-madblog

D:\python-code\flask-vuejs-madblog>vue init webpack front-end

? Project name front-end
? Project description A Vue.js project
? Author WY-Acer <wangy8961@163.com>
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) no

   vue-cli · Generated "front-end".

# Project initialization finished!
# ========================

To get started:

  cd front-end
  npm install (or if using yarn: yarn)
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

使用 cnpm 命令安装依赖:

D:\python-code\flask-vuejs-madblog\front-end>cnpm install

启动:

D:\python-code\flask-vuejs-madblog\front-end>npm run dev

打开浏览器 http://localhost:8080

  • terr1blec
  • codeblind
  • nihao
  • 李姝雨
  • mosyman
  • serendipity_800
  • Dawn Inator
  • zhuyulin
  • ygren
  • wulvtutu
  • Annie20030301
  • Lunaticsky-tql
  • sunny
  • Hello.殷
  • nickzxhfjsm
  • 雀AI2023
  • anthony
  • vafvfdA
  • Team12
  • tttker
  • kasbar
  • ReinXD
  • sdwfqhy
  • JT Z
未经允许不得转载: LIFE & SHARE - 王颜公子 » Flask Vue.js全栈开发|第2章:Vue.js通过axios访问Flask RESTful API

分享

作者

作者头像

Madman

如需 Linux / Python 相关问题付费解答,请按如下方式联系我

13 条评论

wanghu
wanghu

看完这个系列一共花多少钱

Madman
Madman wanghu Author

你可以购买完整系列: https://madmalls.com/pay/buy-series-request/vuejs/ 或者,按单篇文章购买(只选择你感兴趣的几篇也行)

期待0_黎明
期待0_黎明

你好,我想买,但是看到Elasticsearch全文搜索 后面的课程好像没有出来, 这个是大概什么时候出呢?

Madman
Madman 期待0_黎明 Author
海海东方人
海海东方人

博主,想问一下, pycharm上如何 push代码到github上的时候,同时带上tag

Madman
Madman 海海东方人 Author

https://stackoverflow.com/a/28905730 的回答可以:

You can create a tag in VCS -> Git -> Tag... menu.

Then open the push dialog with VCS -> Git -> Push and activate the checkbox "Push Tags".
海海东方人
海海东方人 Madman

搞定了,谢谢

kadycui
kadycui

博主按照教程我打代码出现了这个问题

File "E:\PythonCode\flask-vue\back-end\app\api\users.py", line 29, in create_user
    if User.query.filter_by(username=data.get('username', None)).first():
  File "C:\Users\company\anaconda3\envs\flask_env\Lib\site-packages\sqlalchemy\orm\query.py", line 2895, in first
    ret = list(self[0:1])
  File "C:\Users\company\anaconda3\envs\flask_env\Lib\site-packages\sqlalchemy\orm\query.py", line 2687, in __getitem__
    return list(res)

# 这个样的
File "C:\Users\company\anaconda3\envs\flask_env\Lib\site-packages\sqlalchemy\events.py", line 624, in wrap_before_cursor_execute
    orig_fn(conn, cursor, statement,
  File "C:\Users\company\anaconda3\envs\flask_env\Lib\site-packages\flask_sqlalchemy\__init__.py", line 252, in before_cursor_execute
    context._query_start_time = _timer()
TypeError: 'float' object is not callable

这是什么原因

Madman
Madman kadycui Author
TypeError: 'float' object is not callable

浮点数不能被像函数那样调用,看下

if User.query.filter_by(username=data.get('username', None)).first():
张旭
张旭

vue3的教程有么

用户7206094097
用户7206094097

import app from './app' 出现错误呀

Madman
Madman 用户7206094097 Author

前端依赖包版本要跟package.json一致 vue2.x

src/App.vue 中:

export default {
  name: 'App',
  components: {
    navbar: Navbar
  }
}
用户7206094097
用户7206094097 Madman

对,要进行加载组件

专题系列