Flask + Vue 开发 Web 网页系统详细安装使用范例

3. 运行后端服务

cd backend
python app.py

访问 http://localhost:5000/api/users 可看到 JSON 数据。

三、前端：Vue 搭建用户界面

1. 创建 Vue 项目（需要 Node.js 和 npm）

确保已安装 Node.js（建议 v16+），然后：

cd ../frontend
npm create vue@latest  # 选择默认选项即可（或手动启用 Router、Pinia）
cd frontend
npm install

2. 安装 Axios（用于 HTTP 请求）

npm install axios

3. 创建 API 服务文件

创建 src/services/api.js：

// src/services/api.js
import axios from 'axios'

const apiClient = axios.create({
  baseURL: 'http://localhost:5000', // Flask 后端地址
  headers: {
    'Content-Type': 'application/json'
  }
})

export default {
  getUsers() {
    return apiClient.get('/api/users')
  },
  addUser(user) {
    return apiClient.post('/api/users', user)
  }
}

4. 创建用户列表组件（src/views/UserList.vue）

<!-- src/views/UserList.vue -->
<template>
  <div>
    <h2>用户列表</h2>
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.name }} ({{ user.email }})
      </li>
    </ul>
    <h3>添加用户</h3>
    <form @submit.prevent="handleSubmit">
      <input v-model="name" placeholder="姓名" required />
      <input v-model="email" placeholder="邮箱" type="email" required />
      <button type="submit">添加</button>
    </form>
  </div>
</template>

<script>
import api from '@/services/api'

export default {
  name: 'UserList',
  data() {
    return {
      users: [],
      name: '',
      email: ''
    }
  },
  async created() {
    try {
      const response = await api.getUsers()
      this.users = response.data
    } catch (error) {
      console.error('获取用户失败:', error)
    }
  },
  methods: {
    async handleSubmit() {
      try {
        const response = await api.addUser({
          name: this.name,
          email: this.email
        })
        this.users.push(response.data)
        this.name = ''
        this.email = ''
      } catch (error) {
        console.error('添加用户失败:', error)
      }
    }
  }
}
</script>

<style scoped>
.user-list {
  max-width: 600px;
  margin: 2rem auto;
  padding: 1rem;
}
input {
  display: block;
  width: 100%;
  margin: 0.5rem 0;
  padding: 0.5rem;
}
button {
  margin-top: 1rem;
  padding: 0.5rem 1rem;
}
</style>

5. 配置路由（使用 Vue Router）

编辑 src/router/index.js：

import { createRouter, createWebHistory } from 'vue-router'
import UserList from '../views/UserList.vue'

const routes = [
  { path: '/', component: UserList }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

在 src/main.js 中挂载：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

6. 修改 App.vue

<!-- src/App.vue -->
<template>
  <div>
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

7. （可选）配置代理避免跨域（生产中应由 Nginx 处理）

创建 vue.config.js 在项目根目录（frontend/vue.config.js）：

// frontend/vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:5000',
        changeOrigin: true,
        secure: false
      }
    }
  }
}

修改 api.js 的 baseURL 为相对路径：

baseURL: '/api' // 而不是 http://localhost:5000

这样开发时请求 /api/users 会被代理到 http://localhost:5000/api/users

四、运行项目

启动后端（终端 1）：

cd backend
source venv/bin/activate  # 激活虚拟环境
python app.py

启动前端（终端 2）：

cd frontend
npm run dev

打开浏览器访问：http://localhost:5173

五、部署建议（生产环境）

1. Flask 提供静态文件（可选方案）：将 Vue 打包后的文件放入 Flask 的 static/ 和 templates/index.html，或者用 Nginx 托管前端，Flask 单独做 API 服务。
2. 使用 Gunicorn + Nginx 部署 Flask
3. 使用 Nginx 同时托管前端和反向代理 API

前端打包：

cd frontend
npm run build

生成 dist/ 目录。

总结说明

• Flask 负责提供 JSON 接口，处理业务逻辑和数据库。
• Vue 负责构建交互式前端界面，通过 Axios 调用接口。
• CORS 或 devServer.proxy 解决开发期跨域问题。
• 前后端分离 提高开发效率和维护性。