企业建站别再等一周！图解步骤教你怎么用前后端分离开发网站

你是不是也遇到过这种情况？一个小小的页面改需求，建站公司直接拖你一周？别急，这篇文章直接告诉你，怎么用前后端分离的方式，自己动手开发网站，不用等、不用拖、不被坑。今天咱们就从河南本地的一个创业团队案例说起，手把手教你一步步实现一个企业官网，全过程用图解步骤拆解清楚，代码还能直接运行。

需求分析：别让“想当然”耽误项目进度

很多创业团队在建站前，最容易犯的错误就是没想清楚需求就找公司做，结果做出来的网站要么功能不全，要么体验差，最后还得返工。咱们从河南一个做医疗器械的小团队说起，他们一开始找了本地一家建站公司，说要做个官网展示产品，结果公司报了个价，说需要3周时间，理由是“得先做设计、再做开发、还要测试”，中间随便改个标题都要等几天。

后来，他们决定自己上手做，用前后端分离的方式，开发了一个基础版官网，总共用了不到7天。关键是，代码还能自己改，不需要再等别人。

什么是前后端分离？

前后端分离，其实就是把前端页面和后端逻辑拆开，各自独立开发，通过API接口通信。这样做的好处是：

前端可以先做页面展示，无需等后端接口完成；
后端可以先搭建数据接口，前端也能提前测试；
需求变更时，改哪边就改哪边，不影响另一边；
代码结构清晰，维护和扩展更方便。

环境准备：别等公司装环境，自己装起来

你可能觉得前后端分离开发很难，其实不然，只要你有基本的电脑操作能力，就能搞定。

1. 开发工具准备

你只需要以下工具：

前端开发：VS Code + Node.js + npm（用于管理依赖）；
后端开发：VS Code + Python（Python3.8+）+ pip（用于安装依赖）；
数据库：SQLite（本地开发可用）或者 MySQL（上线可用）；
部署环境：本地开发用 VS Code + Git，上线可用 Nginx 或者宝塔面板。

小提示：如果你是河南的创业团队，本地很多云服务器和主机商都提供免费的建站环境，比如阿里云、腾讯云、华为云等，可以先在这些平台申请个免费服务器试试水。

2. 框架选择

前端：Vue3 + Vite（轻量快速，适合新手）
后端：FastAPI（Python框架，接口开发简单）
数据库：SQLite（本地开发） + MySQL（上线）

选择框架很重要，选错框架会让你开发过程中频繁踩坑。建议选轻量、文档全、社区活跃的框架，比如上面这组组合，用过的人反馈开发体验很好。

核心步骤：图解步骤教你一步步开发

我们以“医疗器械公司官网”为例，分5步完成开发。

第一步：搭建前端项目

打开终端，输入以下命令，创建一个Vue3项目：

npm create vue@latest

然后按照提示选择：

Babel：选是；
TypeScript：选否（初学的话，建议用JS）；
Progressive Web App (PWA)：选否；
Vuex：选否（用Pinia更好）；
Vue Router：选是；
Testing Library：选否；
Linter / Formatter：选是（选ESLint + Prettier）。

完成后进入项目目录，运行以下命令启动开发服务器：

npm run dev

打开浏览器，访问 http://localhost:5173，你会看到一个Vue3的欢迎页面。

第二步：搭建后端项目

前端准备好后，我们来创建后端。我们用FastAPI来创建一个Python项目。

安装FastAPI和Uvicorn：

pip install fastapi uvicorn

创建一个名为 main.py 的文件，写入以下代码：

from fastapi import FastAPIapp = FastAPI()@app.get("/api/data")
def get_data():return {"message": "Hello from the backend!"}

运行后端服务：

uvicorn main:app --reload

访问 http://localhost:8000/api/data，你会看到返回的JSON数据：{"message": "Hello from the backend!"}。

重点：前端与后端是完全分离的，前端页面和后端接口是两个独立的项目，通过API进行通信。

第三步：前端调用后端API

现在我们来修改前端代码，让Vue3页面调用刚刚创建的后端API。

在 src/components/HelloWorld.vue 中，替换内容为：

<template><div><h1>医疗器械公司官网</h1><p>{{ message }}</p></div>
</template><script setup>
import { ref, onMounted } from 'vue'const message = ref('加载中...')onMounted(() => {fetch('http://localhost:8000/api/data').then(response => response.json()).then(data => {message.value = data.message}).catch(error => {message.value = '请求失败'})
})
</script>

保存后，刷新前端页面，你应该会看到 Hello from the backend!。

说明：前后端分离的核心就是前端通过fetch或axios等工具调用后端接口，后端返回数据，前端渲染页面。

第四步：数据库连接与数据展示

假设我们的官网需要展示产品列表，我们先建一个数据库表 products，然后从后端获取数据返回给前端。

1. 创建数据库和表（使用SQLite）

安装SQLite3：

pip install sqlite3

创建一个 database.py 文件：

import sqlite3def init_db():conn = sqlite3.connect('products.db')cursor = conn.cursor()cursor.execute('''CREATE TABLE IF NOT EXISTS products (id INTEGER PRIMARY KEY AUTOINCREMENT,name TEXT NOT NULL,price REAL NOT NULL)''')conn.commit()conn.close()init_db()

插入一些测试数据：

def insert_test_data():conn = sqlite3.connect('products.db')cursor = conn.cursor()cursor.execute("INSERT INTO products (name, price) VALUES (?, ?)", ("心电图机", 8990.00))cursor.execute("INSERT INTO products (name, price) VALUES (?, ?)", ("血压计", 399.00))conn.commit()conn.close()insert_test_data()

运行这段代码，会在当前目录下生成一个 products.db 文件。

2. 修改后端代码，获取数据库数据

修改 main.py：

from fastapi import FastAPI
import sqlite3app = FastAPI()def get_db_connection():conn = sqlite3.connect('products.db')conn.row_factory = sqlite3.Rowreturn conn@app.get("/api/products")
def get_products():conn = get_db_connection()cursor = conn.cursor()cursor.execute("SELECT * FROM products")products = cursor.fetchall()conn.close()return [dict(product) for product in products]

3. 修改前端，展示产品列表

在前端页面中，我们修改 HelloWorld.vue：

<template><div><h1>医疗器械公司官网</h1><ul><li v-for="product in products" :key="product.id">{{ product.name }} - ￥{{ product.price }}</li></ul></div>
</template><script setup>
import { ref, onMounted } from 'vue'const products = ref([])onMounted(() => {fetch('http://localhost:8000/api/products').then(response => response.json()).then(data => {products.value = data}).catch(error => {console.error("请求失败", error)})
})
</script>

现在刷新页面，你应该能看到产品列表了。

常见报错：开发中踩过的坑，提前避开

前后端分离开发虽然高效，但也会遇到一些常见问题，以下是你可能会遇到的几个错误和解决办法。

1. 跨域问题（CORS）

当你用浏览器访问前端页面时，可能会出现：

CORS request failed

解决方法：在后端FastAPI中添加CORS支持。

安装依赖：

pip install fastapi uvicorn corsheaders

修改 main.py：

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddlewareapp = FastAPI()app.add_middleware(CORSMiddleware,allow_origins=["*"],  # 允许所有来源allow_credentials=True,allow_methods=["*"],allow_headers=["*"],
)@app.get("/api/products")
def get_products():# ...原有代码

这样，前端访问后端接口就不会再报跨域错误。

2. 本地数据库连接失败

如果你在后端代码中使用SQLite3，但运行后提示找不到数据库文件，可能是因为数据库路径不对。建议在代码中用 os.path 获取当前路径：

import os
import sqlite3def get_db_connection():db_path = os.path.join(os.path.dirname(__file__), 'products.db')conn = sqlite3.connect(db_path)conn.row_factory = sqlite3.Rowreturn conn