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

  • 原创
  • Madman
  • /
  • /
  • 7
  • 9093 次阅读

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

未经允许不得转载: LIFE & SHARE - 王颜公子 » Flask Vue.js全栈开发|第2章:Vue.js通过axios访问Flask RESTful API

分享

作者

作者头像

Madman

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

7 条评论

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

搞定了,谢谢

专题系列