本文简略介绍网站开发流程，详情咨询相关博客以及源码地址

确定功能点

• 面向买卖双方的交易平台
• 提供注册登录、发布产品、发起交易等核心功能
• 提供交流平台以及反馈等功能

确定技术栈

• 前端： VUE3 + ELEMENTUI组件库
• 后端：FLASK

项目初始化

前端：

• 使用VITE打包工具进行初始化安装

开始 | Vite 官方中文文档 (vitejs.cn)

• 加入axios (接口)/ router (路由)/ elementui (组件)/ 等工具

vite.config.ts 配置如下：

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),],
  server: {
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:5000',
        changeOrigin: true,
      },
    }
  },
  resolve: {
    alias: {
      '@': '/src',
    },
  },
})

• 使用npm install 安装依赖包
• 使用npm run dev 运行dev环境项目

后端：

• 安装配置好Python
• 下载FLASK ,Flask-Cors （后续可能有Flask-JWT-Extended /PyJWT (登录凭证)/ PyMySQL (数据库连接)）等

• 初始化只需要安装FLASK模块即可

pip install FLASK -i https://pypi.tuna.tsinghua.edu.cn/simple

全部依赖，参考项目中的requirement.txt

preOwnedMarketplace-backend/requirements.txt · WJIAX/preOwnedMarketplace – 码云 – 开源中国 (gitee.com)

切换到虚拟环境后：

pip install -r requirements.txt -i https://pypi.tuna.tsinghua.edu.cn/simple

• 示例代码

from flask import Flask 
from flask_cors import CORS 

app = Flask(__name__) 
# 跨域 
CORS(app, origins='http://localhost:5173') 

@app.route('/') 
def index_hello(): 
    return "你好，我是首页" 

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

上述代码可以同过后端地址直接访问后端，或通过前端项目进行访问（跨域配置需引入flask_cors）

pip install flask-cors -i https://pypi.tuna.tsinghua.edu.cn/simple

如上所示已经将前后端代码完成了初始化。

源码：

preOwnedMarketplace: 基于Python的Flask框架和VUE3(ELEMENTUI)前端脚手架开发的二手产品市场项目，提供用户管理，产品管理，订单管理，消息与通知，评价与反馈等功能。 (gitee.com)