全栈毕业设计实战：前后端分离架构与核心实现指南

第二步：前端 - 登录页面调用接口

<!-- src/views/Login.vue -->
<template>
  <form @submit.prevent="handleLogin">
    <input v-model="form.username" placeholder="用户名" />
    <input v-model="form.password" type="password" placeholder="密码" />
    <button type="submit">登录</button>
  </form>
</template>
<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import request from '@/utils/request';

const router = useRouter();
const form = ref({ username: '', password: '' });

const handleLogin = async () => {
  try {
    const data = await request.post('/auth/login', form.value);
    localStorage.setItem('token', data.token);
    localStorage.setItem('userInfo', JSON.stringify(data.user));
    router.push('/');
  } catch (error) {
    alert('登录失败：' + error.message);
  }
};
</script>

第三步：后端 - 实现登录接口与 JWT 鉴权

首先，安装必要依赖：npm install express jsonwebtoken bcryptjs dotenv cors

// src/app.ts
import express from 'express';
import cors from 'cors';
import dotenv from 'dotenv';
import authRoutes from './routes/auth';

dotenv.config();

const app = express();
const PORT = process.env.PORT || 3000;

app.use(cors());
app.use(express.json());
app.use('/api/auth', authRoutes);

app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

// src/routes/auth.ts
import express from 'express';
import jwt from 'jsonwebtoken';
import bcrypt from 'bcryptjs';
import { PrismaClient } from '@prisma/client';

const router = express.Router();
const prisma = new PrismaClient();
const JWT_SECRET = process.env.JWT_SECRET || 'your-secret-key';

router.post('/login', async (req, res) => {
  const { username, password } = req.body;
  try {
    const user = await prisma.user.findUnique({ where: { username } });
    if (!user) {
      return res.status(401).json({ code: 401, message: '用户名或密码错误' });
    }
    const isPasswordValid = await bcrypt.compare(password, user.passwordHash);
    if (!isPasswordValid) {
      return res.status(401).json({ code: 401, message: '用户名或密码错误' });
    }
    const token = jwt.sign(
      { userId: user.id, username: user.username },
      JWT_SECRET,
      { expiresIn: '24h' }
    );
    res.json({
      code: 200,
      message: '登录成功',
      data: { token, user: { id: user.id, username: user.username, email: user.email } },
    });
  } catch (error) {
    console.error('登录错误:', error);
    res.status(500).json({ code: 500, message: '服务器内部错误' });
  }
});

export default router;

// src/middleware/auth.ts
import { Request, Response, NextFunction } from 'express';
import jwt from 'jsonwebtoken';

const JWT_SECRET = process.env.JWT_SECRET || 'your-secret-key';

export interface AuthRequest extends Request {
  user?: any;
}

export const authenticateToken = (
  req: AuthRequest,
  res: Response,
  next: NextFunction
) => {
  const authHeader = req.headers['authorization'];
  const token = authHeader && authHeader.split(' ')[1];
  if (!token) {
    return res.status(401).json({ code: 401, message: '访问令牌缺失' });
  }
  jwt.verify(token, JWT_SECRET, (err: any, user: any) => {
    if (err) {
      return res.status(403).json({ code: 403, message: '无效或过期的令牌' });
    }
    req.user = user;
    next();
  });
};

第四步：后端 - 受保护的商品发布接口

// src/routes/products.ts
import express from 'express';
import { authenticateToken } from '../middleware/auth';
import { PrismaClient } from '@prisma/client';

const router = express.Router();
const prisma = new PrismaClient();

router.post('/', authenticateToken, async (req: any, res) => {
  const userId = req.user.userId;
  const { title, description, price, category } = req.body;

  if (!title || !price) {
    return res.status(400).json({ code: 400, message: '标题和价格是必填项' });
  }

  try {
    const newProduct = await prisma.product.create({
      data: { title, description, price: parseFloat(price), category, sellerId: userId },
    });
    res.json({ code: 200, message: '发布成功', data: newProduct });
  } catch (error) {
    console.error('发布商品错误:', error);
    res.status(500).json({ code: 500, message: '发布失败' });
  }
});

export default router;

性能与安全：必须关注的底线

1. SQL 注入防范：永远不要直接拼接 SQL 语句！使用参数化查询或 ORM（如 Prisma）。
2. 密码存储：绝对不要明文存储密码。使用 bcryptjs 库进行哈希加盐处理。
3. CORS 配置：生产环境应明确指定允许的前端域名。
4. JWT 安全：密钥必须足够复杂且通过环境变量设置，设置合理过期时间。
5. 输入验证与清理：对用户输入的数据进行严格验证。

生产环境避坑指南

进程管理

在服务器上，使用 pm2 或 systemd 来管理进程。

npm install -g pm2
pm2 start dist/app.js --name "my-graduation-project"
pm2 save
pm2 startup

Git 忽略敏感文件

确保 .gitignore 文件包含以下内容：

node_modules/
.env
.env.local
*.log
dist/
build/
*.db
*.sqlite

本地开发代理

在前端 vite.config.js 中配置代理。

// vite.config.js
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
      },
    },
  },
});

环境变量管理

使用 .env 文件区分环境，并在 .gitignore 中忽略。

# .env 示例
PORT=3000
DATABASE_URL="mysql://user:password@localhost:3306/mydb"
JWT_SECRET="your-super-secret-jwt-key-at-least-32-characters"

总结

按照上述步骤，可以搭建起结构清晰、具备基础安全防护、易于部署的全栈毕业设计项目骨架。记住，毕业设计的核心是展示系统性的工程实践能力和解决问题的能力。当单体应用顺利运行后，可思考微服务拆分问题，如将用户、商品、订单服务拆分开，涉及服务间通信、独立数据库等知识。