前后端分离项目简单实践

2023-08-09 | 阅读：次

开发环境搭建

前端开发环境准备

需要安装Node.js环境
使用npm初始化项目:npm init
安装Vue框架:npm install vue
安装webpack等构建工具:npm install webpack webpack-cli -D

npm install -g vue-cli
npm install webpack -g

创建前后端分离项目

创建一个名为myapp的文件夹：

mkdir myapp
cd myapp

创建后端项目

mkdir backend
cd backend

在backend文件夹中创建一个名为app.py的文件，并将以下代码复制到该文件中。

from flask import Flask, request, jsonify

app = Flask(__name__, static_folder='../frontend/dist', static_url_path='')

# 路由：返回访客的名字
@app.route('/api/name')
def get_name():
    name = request.args.get('name', 'Guest')
    return jsonify({'name': name})

# 路由：返回Python代码示例，以实现访客的想法
@app.route('/api/idea', methods=['POST'])
def post_idea():
    idea = request.json['idea']
    # 在此处编写代码示例，以实现访客的想法
    code = f'print("Your idea was: {idea}")'
    return jsonify({'code': code})

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

在backend文件夹中创建一个名为requirements.txt的文件，并将以下代码复制到该文件中。

flask

创建前端程序

cd .. # 返回myapp文件夹
mkdir frontend
cd frontend

运行以下命令来创建一个新的Vue.js项目:

vue create .

在创建项目时，可以选择使用默认设置或手动配置设置。

在frontend文件夹中打开src/App.vue文件，并将以下代码复制到该文件中。

<template>
  <div>
    <h1>Hello, !</h1>
    <form @submit.prevent="submitIdea">
      <label for="idea">Enter your idea:</label>
      <input type="text" id="idea" v-model="idea">
      <button type="submit">Submit</button>
    </form>
    <pre v-if="code"></pre>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      name: '',
      idea: '',
      code: ''
    };
  },
  mounted() {
    this.getName();
  },
  methods: {
    getName() {
      axios.get('/api/name')
        .then(response => {
          this.name = response.data.name;
        })
        .catch(error => {
          console.log(error);
        });
    },
    submitIdea() {
      axios.post('/api/idea', { idea: this.idea })
        .then(response => {
          this.code = response.data.code;
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>

在frontend文件夹中打开vue.config.js文件，并将以下代码复制到该文件中：

module.exports = {
  outputDir: '../backend/static'
};

此代码将生成的静态文件输出到backend/static文件夹中!

安装依赖

返回myapp文件夹，并运行以下命令来安装必要的Python和JavaScript依赖项！

cd .. # 返回myapp文件夹
pip install -r backend/requirements.txt # 安装flask
cd frontend
npm install axios # 安装axios,这个是用来发送http请求的

启动项目

启动后端

cd .. # 返回myapp文件夹
python backend/app.py

启动前端

cd frontend
npm run serve

访问项目

此时,前后端项目已经启动!可以在Web浏览器中访问http://localhost:5000来查看应用程序。

目录树结构

myapp/
├── backend/
│   ├── app.py
│   └── static/
│       ├── css/
│       ├── img/
│       └── js/
└── frontend/
    ├── public/
    ├── src/
    ├── vue.config.js
    ├── package.json
    └── ...

其他：

project
├── backend
|   ├── app.py (Flask后端主文件)
|   └── requirements.txt (后端依赖)
├── frontend
|   ├── public
|   |   └── index.html
|   ├── src
|   |   ├── main.js (入口文件)
|   |   ├── App.vue (主组件)
|   |   └── components (其他组件)
|   ├── package.json (前端依赖)
|   └── webpack.config.js (webpack配置)
└── nginx
    └── default.conf (nginx配置文件)

在此目录树结构中，backend文件夹包含后端代码和静态文件，frontend文件夹包含前端代码和依赖项。请注意，frontend/public文件夹中的文件将直接复制到生成的静态文件中，而frontend/src文件夹中的文件将被编译和打包为JavaScript文件。

项目部署

部署可以按以下流程进行： 1.在服务器上准备Python、Nodejs等运行环境

配置nginx,以反向代理方式处理前后端请求
后端:
- 上传Flask应用代码
- 安装依赖 pip install -r requirements.txt
- 启动Flask应用
前端:
- 构建生成静态文件 npm run build
- 上传dist目录中的静态文件到服务器
nginx配置:
- 配置路由规则,例如:/api转发到flask端口/转发到静态文件目录
启动nginx 7.测试部署是否成功

注意事项

前端：

1）运行后的项目，其他终端能通过 http://localhost:8080 访问查看页面吗？ A：npm run dev 命令只用做本地调试，共开发者预览页面，同部署到服务器供其他终端访问是不同的，如果要提供给其他浏览器或终端使用，则需要部署到具体的服务器才行。 2）如何将 Vue 项目部署到服务器上呢？执行命令 npm run build 生成 dist 文件夹，然后将该目录下的文件部署到服务器（服务器如python，tomcat，nginx）。 cd 到 dist 目录下，这里使用最简单的 python 搭建服务器，运行命令：python -m http.server，将 dist 下的文件部署到 Python 自带的服务器中；访问 http://YourIpAddress:8000/ 可以直接在其他终端打开对应的页面（python搭建的服务器再8000端口监听）。 3）如何通过 Vue 请求服务器接口并获取数据呢？

后端：

1）如何为外部提供接口？（base_url = http://ip:5000）最主要的一个库是 flask_cors，需要继续安装，命令：pip3 install -U flask-cors；接口可以是：base_url, base_url + ‘flask-route-method’ , 对应方法中，return 便是返回给客户端的响应数据。 Tips：这里有一个问题就是如果运行时直接是 app.run() 就是运行在本地，若是配置了 host 则可以运行在指定收信任的公网，具体可查看下面【flask 服务器实现代码】章节。