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

  • 原创
  • Madman
  • /
  • /
  • 0
  • 2036 次阅读

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

2. 组件 Ping.vue

删除 front-end/src/components/HelloWorld.vue,并创建新组件 front-end/src/components/Ping.vue

<template>
  <div>
    <p>{{ msg }}</p>
  </div>
</template>

<script>
export default {
  name: 'Ping',
  data() {
    return {
      msg: 'Hello, This is Ping.vue component'
    }
  }
}
</script>

更新路由 front-end/src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Ping from '@/components/Ping'

Vue.use(Router)

export default new Router({
  routes:
                                
                            
  • xmyang
  • loveinshare
  • ws96apt
  • 浮川大大
  • xiyao
  • 向大佬学习
  • jojo
  • AL拒绝拖延
  • napsterchou
  • harlen
  • sdki
  • Zjianglin
未经允许不得转载: LIFE & SHARE - 王颜公子 » Flask Vue.js全栈开发|第2章:Vue.js通过axios访问Flask RESTful API

分享

作者

作者头像

Madman

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

0 条评论

暂时还没有评论.