Web网站开发毕设新手指南从零搭建可部署的全栈项目摘要许多计算机专业学生在完成Web网站开发毕设时常因缺乏工程经验陷入技术选型混乱、前后端耦合严重、部署流程复杂等困境。本文面向新手提供一套轻量、可落地的全栈开发路径基于现代主流技术栈Vue Express SQLite详解项目初始化、模块解耦、接口设计及一键部署方案。读者可快速掌握毕设项目的核心架构逻辑避免常见陷阱高效交付具备完整功能与基础安全性的可运行系统。1. 背景痛点为什么毕设总被导师打回做毕设最怕“一看就会一写就废”。我帮导师评审了三年本科毕设总结出新人们最容易踩的坑过度追求“高大上”框架把简历里的“微服务、分布式”全搬进来结果本地跑不起来答辩现场直接 502。前后端揉成一团HTML 里嵌 JavaScriptJavaScript 里拼 SQL改一行代码要重启三次导师一看目录结构就皱眉。本地与线上割裂实验室里localhost:3000跑得好好的放到云服务器就 404静态资源全走绝对路径跨域报错一屏装不下。忽略安全与性能注册接口不做校验一插; DROP TABLE users;--直接全剧终上线后 2 核 4 G 被爬虫打爆内存飙红。如果你也中过招别急下面这套“轻量全栈路线”专为毕设场景打磨学习成本低、代码量可控、部署一次成功。2. 技术选型为什么用 Vue Express SQLite毕设不是“炫技大会”而是“能跑就行 导师好懂”。下面给出 3 组对比帮你 5 分钟拍板。维度VueReact结论学习曲线模板语法接近原生 HTMLJSX 需额外理解新手友好选 Vue生态脚手架Vite 一键脚手架需额外配 WebpackVue 更快导师认知度官网中文文档齐全英文资料多答辩更省心维度ExpressKoa结论中间件生态丰富、文档多精简、需自拼毕设求稳选 Express教程数量中文博客成堆相对少踩坑 Google 能搜到维度SQLiteMySQL结论安装成本0文件即库需装服务个人服务器省事备份迁移单文件拷走需导 SQL答辩前 U 盘即走并发场景毕设 50 QPS 足够重量大轻量够用一句话总结Vue3 Vite Express4 SQLite3是“能跑、好写、易部署”的毕设黄金三角。3. 项目骨架前后端分离长啥样先上图目录结构一目了然3.1 前端client 目录使用npm create vitelatest client --template vue生成代理配置vite.config.js解决开发期跨域export default defineConfig({ server: { proxy: { /api: http://localhost:3000 } } })3.2 后端server 目录express-generator一键生成骨架路由分层routes/user.js、routes/todo.js数据库文件放db.sqlite.gitignore里加一行忽略防止密钥泄露3.3 统一脚本根目录package.json写两条命令scripts: { dev: /concurrently \npm run dev -C client\ \npm run dev -C server\, build: npm run build -C client npm run start -C server }毕设答辩时一句npm run dev全栈跑通导师印象分 10。4. 核心实现登录 待办列表下面用“待办列表”贯穿用户认证与 CRUD代码直接复制可跑。4.1 数据库初始化server/db.jsconst sqlite3 require(sqlite3).verbose() const db new sqlite3.Database(db.sqlite) db.serialize(() { db.run(CREATE TABLE IF NOT EXISTS users( id INTEGER PRIMARY KEY AUTOINCREMENT, username TEXT UNIQUE, password TEXT )) db.run(CREATE TABLE IF NOT EXISTS todos( id INTEGER PRIMARY KEY AUTOINCREMENT, uid INTEGER, title TEXT, done INTEGER DEFAULT 0, FOREIGN KEY(uid) REFERENCES users(id) )) }) module.exports db4.2 后端接口server/routes/user.js节选注册、登录const express require(express) const bcrypt require(bcryptjs) const jwt require(jsonwebtoken) const db require(../db) const router express.Router() // 注册 router.post(/register, async (req, res) { const { username, password } req.body if (!username || !password) return res.status(400).json({ msg: 参数缺失 }) const hash await bcrypt.hash(password, 10) db.run(INSERT INTO users (username, password) VALUES (?, ?), [username, hash], function (err) { if (err err.code SQLITE_CONSTRAINT) return res.status(409).json({ msg: 用户名已存在 }) res.json({ id: this.lastID }) }) }) // 登录 router.post(/login, (req, res) { const { username, password } req.body db.get(SELECT * FROM users WHERE username ?, [username], async (err, row) { if (!row || !(await bcrypt.compare(password, row.password))) { return res.status(401).json({ msg: 用户名或密码错误 }) } const token jwt.sign({ uid: row.id }, process.env.JWT_SECRET, { expiresIn: 7d }) res.json({ token }) }) }) module.exports router4.3 前端调用src/api/request.jsaxios 实例import axios from axios const request axios.create({ baseURL: /api, timeout: 5000 }) // 请求拦截自动带 token request.interceptors.request.use(config { const token localStorage.getItem(token) if (token) config.headers.Authorization Bearer ${token} return config }) export default requestsrc/views/Login.vueimport request from /api/request async function login() { const res await request.post(/user/login, form) localStorage.setItem(token, res.data.token) router.push(/todo) }4.4 待办增删改查server/routes/todo.jsRESTful 风格router.post(/, auth, (req, res) { /* 新增 */ }) router.get(/, auth, (req, res) { /* 查列表 */ }) router.put(/:id, auth, (req, res) { /* 改状态 */ }) router.delete(/:id, auth, (req, res) { /* 删除 */ })前端对应组件用v-for渲染按钮绑定clickdel(todo.id)代码简洁导师一眼看懂。5. 性能与安全别让“小项目”变成“小事故”CORS生产环境若前后端分离部署后端装cors中间件并白名单前端域名禁止*通配。输入校验用express-validator一行body(username).isAlphanumeric()把危险字符拦在门外。SQL 注入所有 SQL 都用?占位符拒绝拼接SQLite 虽无存储过程也要防UNION SELECT。密码安全明文 0 分MD5 不及格bcrypt salt 成本 10 是底线。环境变量把JWT_SECRET、PORT、DB_PATH写进.env用dotenv加载GitHub 公开库再也不怕泄露。6. 生产环境部署从能跑到稳跑一键脚本在package.json加start: node server/bin/www服务器拉完代码直接npm start。进程守护云主机用pm2 start npm -- start若用 Vercel把server文件夹设成 API 目录自动无宕机。HTTPS域名 Lets Encrypt 免费证书Nginx 反向代理 3000 端口配置 301 强跳答辩地址栏一把小锁导师点头。GitHub Actions 持续集成加分项推送 main 分支自动跑单元测试再 rsync 到云主机README 放个 pass 小徽章印象分再 10。7. 结项冲刺把待办列表升级成“团队看板”做到这里你已经拥有注册/登录/鉴权用户维度隔离的待办 CURD可部署、带 HTTPS 的线上地址下一步思考增加“项目-任务”两级分组模拟真实协作场景用 Socket.io 做实时通知演示多人同时改动把 SQLite 迁到 MySQL写迁移脚本展示“平滑升级”前端加拖拽排序引用vuedraggable让演示更炫酷把这些写进论文“后续展望”导师一看这孩子有产品思维优秀8. 写在最后动手才是终点看十遍不如敲一遍。现在打开终端npm create vitelatest clientnpx express-generator server把上面的登录、待办代码粘进去本地npm run dev跑通push 到 GitHubVercel 一键部署当你把可访问的链接贴到答辩 PPT 里就会明白毕设其实可以很简单——选对技术栈、拆好模块、提前部署剩下的就是讲故事。祝你一次通过提前毕业