Flask+vue 小白搭建

工具Pycharm、vsCode

1、Flask搭建

pycharm环境安装完成之后，创建app.py

'''
flask+vue
前后端分离项目，后端服务
'''

from flask import Flask, render_template, jsonify
from random import *
from flask_cors import CORS

# 定义APP
app = Flask(__name__)

#解决跨域问题
CORS(app)

# 定义路由
@app.route('/', methods=['GET', 'POST'])
def cathc_all():
    return 'Hello flask+vue'


# 启动
if __name__ == '__main__':
    app.run(debug=True)

运行app.py文件，

 

然后浏览器访问http://127.0.0.1:5000/，运行成功结果显示：

2、VUE环境搭建

a、首先全局安装vue Cli：npm install -g(全局安装)，npm下载的国外的依赖，可以使用淘宝的cnpm。
下载淘宝的cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

b、使用npm或cnom下载vue cli

npm insatll -g vue-cli

c、如图所示安装成功

d、创建VUE项目

进入到想要创建项目的目录位置； 执行

vue init webpack client

按照如果所示选择创建：

? Project name client
? Project description A Vue.js project
? Author hubo <1290259791@qq.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Airbnb
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recom
mended) npm

e、VUE项目创建成功之后，执行：

npm run dev

如图所示执行成功

f、执行成功之后，浏览器访问 http://localhost:80881，如图所示，VUE项目创建成功；

 

g、新建Ping.vue项目，目录结构如图：

<template>
  <div class="container">
    <button type="button" class="btn btn-primary">{{ msg }}</button>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'Ping',
  data () {
    return {
      msg: 'tttt'
    }
  },
  methods: {
    getMessage () {
      const path = 'http://127.0.0.1:5000/'
      // eslint-disable-next-line no-undef
      axios.get(path)
        .then(res => {
          this.msg = res.data
        }).catch(error => {
          console.error(error)
        })
    }
  },
  created () {
    this.getMessage()
  }
}
</script>

h、修改index.js

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

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/ping',
      name: 'Ping',
      component: Ping
    }
  ],
  mode: 'history'
})

i、启动Flaks，启动VUE项目.

浏览器访问 http://localhost:8081/ping 。  如图flask+vue搭建成功