如何利用Python+Vue实现简单的前后端分离

如何利用Python+Vue实现简单的前后端分离？

这里简单介绍一下Python与Vue的前后端分离架构，步骤分为后端部分（Python）和前端部分（Vue）。

后端部分（Python）

准备工作

在搭建Python的Web框架时，我们需要安装Python的web框架这里我们以Flask为例。如果没有安装，我们可以在控制台输入以下命令进行安装：

pip install Flask

数据库连接

连接数据库，我们可以使用ORM框架 —— SQLAlchemy，这是一种基于 Python 实现的 ORM 框架，与现有 Web 类框架可以更好的集成。安装方式：

pip install SQLAlchemy

在代码中，可以直接按以下方式进行配置：

from sqlalchemy import create_engine
from sqlalchemy.orm import sessionmaker

engine = create_engine("mysql+pymysql://root:password@localhost:3306/db_test?charset=utf8", echo=True)

Session = sessionmaker(bind=engine)

其中root表示你的数据库用户名，password表示你的数据库密码，localhost表示你的数据库地址，3306表示数据库端口号，db_test表示你的某个数据库名称，这里可自行命名。

定义路由与API

在Python中，Flask框架非常适合快速搭建Web应用程序。在下面的示例中，我们定义了一个基本的路由函数以及API函数：

from flask import Flask, jsonify

app = Flask(__name__)


@app.route('/hello')
def hello():
   return "Hello, World!"


@app.route('/api/courses')
def api_courses():
  courses = [{'name': 'Python101', 'teacher': 'Tom'}, {'name': 'Mathematics', 'teacher': 'Mike'}]
   return jsonify({'courseList': courses})

if __name__ == '__main__':
   app.run()

前端部分（Vue）

准备工作

在前端部分，我们使用Vue的cli进行搭建。首选需要安装NodeJS，可以在以下官方网站下载：https://nodejs.org/en/ 。

安装完成后，在命令行执行以下命令：

npm install -g vue-cli

安装vue-cli后可以利用以下命令来构建一个空白Vue项目：

vue init webpack-simple vue_demo

其中，vue_demo是项目名称。（可以按照提示依次输入项目名称、项目描述等）

配置路由

在Vue的开发中，我们使用vue-router来构建路由。在src/目录下，新建router.js文件，用于配置路由。

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import Home from './components/Home.vue'
import Course from './components/Course.vue'

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      component: Home,
      meta: { title: '首页' },
    },
    {
      path: '/course',
      component: Course,
      meta: { title: '课程列表' },
    },
  ]
});

export default router;

这里我们定义了两个路由，/表示首页，/course表示课程列表。

搭建Vue组件

在src/components/目录下，我们新建两个组件，分别为Home.vue和Course.vue。

在Home.vue中我们可以添加以下代码：

<template>
  <h1>Vue 入门示例</h1>
  <p>{{msg}}</p>
  <router-link to="/course">课程学习</router-link>
</template>

<script>
  export default {
    name: 'Home',
    data() {
      return {
        msg: 'Hello, Vue!'
      };
    }
  };
</script>

在Course.vue中我们可以添加以下代码：

<template>
  <div>
    <h1>课程列表</h1>
    <ul>
      <li v-for="(course, index) in courseList" :key="index">
        <p>{{ course.name }}</p>
        <p>{{ course.teacher }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'Course',
    data() {
      return {
        courseList: []
      };
    },
    created() {
      this.getCourseList();
    },
    methods: {
      getCourseList() {
        this.$http.get('/api/courses').then(response => {
          this.courseList = response.data.courseList;
        });
      }
    }
  };
</script>

这里注意，在Course.vue中我们使用$http库向后台发送请求，获取课程列表。在Vue CLI 3 中，可以安装 axios 库来代替 Vue2.x 中集成的 vue-resource。

同时，在Course.vue中，我们还定义了getCourseList方法，用于获取后台定义的API接口（/api/courses）返回的数据，并将其渲染到页面中。

运行

在vue_demo目录下，执行以下命令：

npm install
npm run dev

运行完毕后，在浏览器打开地址 http://localhost:8080/ 即可查看项目实例。

以上是一个简单的Python+Vue实现前后端分离的案例。在实际开发中，我们需要根据不同的业务需求，对框架进行扩展和优化以达到最优的效果。