网站开发前台后台速查手册：拒绝拖期，3天搞定改需求
改个需求建站公司拖一周？这种憋屈感谁懂。你只想要个后台改个价格，对方却让你等排期，理由千奇百怪。别等了，今天给你一份网站开发前台后台实战速查手册。
这不是理论课，是救急指南。不管你是被外包坑过的甲方，还是刚入行的前端小白，这份手册能让你看懂代码逻辑，自己上手微调。咱们不聊虚的，直接拆解一个真实项目：某电商SaaS平台的后台重构。你会看到从技术选型到代码实现的全过程，甚至包括那些藏得很深的坑。
项目背景与需求：为什么老系统改不动
故事得从一家做B2B批发生意的客户说起。他们的老网站是五年前用PHP+JSP写的，典型的单体架构。前端页面全是服务端渲染，后台管理页面也是同一个代码库里的。
痛点极其明显：
- 性能瓶颈：首页加载超过5秒，用户流失率极高。
- 迭代缓慢：前台改个Banner，后台就得跟着重启服务。
- 维护噩梦：没人敢动老代码，因为牵一发而动全身。
客户的需求很明确：前后端分离。前台要快，后台要稳，两者解耦。他们不想再忍受“改个按钮文字都要提工单等三天”的日子。
作为开发者，我面临的挑战不是“能不能做”，而是“怎么做得快、做得稳”。这时候，速查手册里的技术选型原则就派上用场了。核心原则只有一条：选择团队最熟悉、社区最活跃的技术栈。别为了炫技去选冷门的框架，那是自寻死路。
技术选型：为什么选 Vue3 + Spring Boot
在对比了 React 和 Vue，Java 和 Node.js 后，我们最终确定了方案。这里有一个真实的决策过程，值得新手参考。
前端选择 Vue 3 + Vite：
- 理由1：生态成熟。 虽然 React 在大型复杂应用中有优势，但对于中后台管理系统，Vue 的组件化思维和上手速度更友好。
- 理由2：构建速度。 Vite 的冷启动速度极快，对于需要频繁调试的前端开发来说，体验提升巨大。
- 理由3：团队储备。 团队里有3个Vue经验超过5年的老手，0个React资深。用人成本最低的方案，往往是最优解。
后端选择 Spring Boot 2.7 + MyBatis-Plus：
- 理由1：稳定性。 Spring Boot 依然是Java生态的霸主，文档齐全，出了问题去Stack Overflow或GitHub搜一下，总能找到答案。
- 理由2：开发效率。 MyBatis-Plus 比原生MyBatis省去了大量CRUD代码，对于后台管理这种重增删改查的场景，效率提升明显。
关键配置：Nginx 反向代理 前后端分离后，跨域问题必须解决。我们没用CORS，而是用了Nginx做反向代理。这是生产环境的标配，安全且高效。
专家提示： 很多新手喜欢在前端配置
Access-Control-Allow-Origin，但这在生产环境中非常危险且难以维护。务必在后端网关或Nginx层面处理跨域。
核心实现：代码里的坑与解法
这一节是干货，直接看代码。我们会拆解两个核心模块：后台登录鉴权 和 前台数据请求封装。
1. 后台管理：JWT 鉴权与权限控制
后台系统最核心的就是安全。我们采用 JWT (JSON Web Token) 进行无状态鉴权。
后端生成 Token (Java):
// 使用 jjwt 库生成 Token
String token = Jwts.builder().setSubject(userId.toString()) // 用户ID.claim("role", role) // 用户角色：ADMIN, OPERATOR.setIssuedAt(new Date()).setExpiration(new Date(System.currentTimeMillis() + 3600 * 1000)) // 1小时过期.signWith(SignatureAlgorithm.HS256, secretKey).compact();return token;
前端请求拦截器 (Vue 3 + Axios):
这里有一个新手常犯的错误：直接硬编码 Token。正确的做法是放在 Vuex/Pinia 或 localStorage 中，并在请求拦截器中自动注入。
import axios from 'axios';
import { useUserStore } from '@/stores/user';
import router from '@/router';// 创建 axios 实例
const service = axios.create({baseURL: '/api', // Nginx 代理前缀timeout: 10000
});// 请求拦截器
service.interceptors.request.use(config => {const userStore = useUserStore();if (userStore.token) {config.headers['Authorization'] = `Bearer ${userStore.token}`;}return config;},error => {return Promise.reject(error);}
);// 响应拦截器：处理 401 未授权
service.interceptors.response.use(response => response.data,error => {if (error.response && error.response.status === 401) {// Token 过期，强制跳转登录router.push({ path: '/login', query: { redirect: router.currentRoute.fullPath } });return Promise.reject(new Error('登录已过期，请重新登录'));}return Promise.reject(error);}
);export default service;
避坑指南： 注意 query.redirect 参数。这是为了用户体验，用户登录后能跳回原来想访问的页面，而不是傻乎乎地停在首页。很多外包公司做的后台，登录后永远回首页，这就是细节没做到位。
2. 前台展示：无限滚动加载
前台商品列表页，数据量很大，不能一次性加载所有数据。我们实现了无限滚动加载。
关键逻辑 (Vue 3 Composition API):
import { ref, onMounted, onUnmounted } from 'vue';const products = ref([]);
const page = ref(1);
const hasMore = ref(true);
const isLoading = ref(false);const loadProducts = async () => {if (isLoading.value || !hasMore.value) return;isLoading.value = true;try {const res = await api.getProductList({ page: page.value, size: 20 });products.value = [...products.value, ...res.data];page.value++;hasMore.value = res.data.length === 20; // 如果返回满20条，认为还有下一页} catch (e) {console.error('加载失败', e);} finally {isLoading.value = false;}
};// 监听滚动事件
const handleScroll = () => {const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;const clientHeight = document.documentElement.clientHeight || document.body.clientHeight;const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;// 距离底部还有 100px 时触发加载if (scrollTop + clientHeight + 100 >= scrollHeight) {loadProducts();}
};onMounted(() => {window.addEventListener('scroll', handleScroll);loadProducts(); // 首次加载
});onUnmounted(() => {window.removeEventListener('scroll', handleScroll);
});
为什么不用 Vue 的 v-infinite-scroll 插件？
因为插件有时会有兼容性问题，且自定义逻辑更灵活。对于初学者，理解底层逻辑比依赖插件更重要。你可以去 GitHub 开源仓库 搜索 vue-infinite-scroll，看看它的源码是如何实现节流和防抖的，那比看十篇博客都有用。
上线与优化：从代码到生产环境
代码写完只是第一步，上线才是考验。很多网站开发前台后台项目，死在上线阶段。
1. 静态资源 CDN 加速
前端构建后，Vite 会生成 dist 文件夹。我们把 JS、CSS、图片都上传到阿里云 OSS，并开启 CDN 加速。
- 效果：用户访问速度从 1.2s 降低到 0.4s。
- 配置技巧：给 JS/CSS 文件名加上哈希值（如
app.a1b2c3.js），这样浏览器可以永久缓存，代码更新时文件名变化，强制刷新缓存。
2. 后端接口缓存 对于商品详情、分类列表等读多写少的数据，我们在 Redis 中做了缓存。
- 策略：Cache-Aside 模式。先查缓存，没命中再查数据库，然后写入缓存。
- 陷阱：注意缓存穿透。如果查询一个不存在的ID，要缓存一个空对象，防止每次都打到数据库。
3. 日志与监控 不要等到用户投诉才知道网站挂了。我们接入了 Sentry（前端错误监控）和 SkyWalking（后端链路追踪）。
- 真实案例：上线第二天，Sentry 报警说某个接口 500 错误率飙升。通过 SkyWalking 追踪，发现是数据库连接池耗尽。原来是一个慢查询占用了大量连接。调整 SQL 并增加索引后，问题彻底解决。
经验总结：给前端初学者的3条建议
做完这个项目，我有几点心得，专门写给刚开始接触网站开发前台后台的你。
1. 不要迷信“最佳实践”，要追求“最适合” 网上有很多“架构设计之道”，但那些往往是大厂百万DAU项目的产物。你的项目可能只有几千用户，用太重的技术栈是灾难。简单、稳定、易维护，才是王道。
2. 读源码，哪怕只读10%
遇到问题，不要只搜“怎么解决”，要搜“源码实现”。比如你遇到 Vue 的 watch 不触发问题，去读 Vue 的响应式源码，你会对依赖收集有深刻理解。GitHub 上那些 Star 数高的仓库，都是最好的老师。
3. 文档即代码 很多开发者懒得写文档，导致后期接手的人一脸懵。我在项目中坚持使用 Swagger 生成 API 文档，前端直接导入。这省去了无数次“接口字段叫什么”的沟通成本。
最后，留给你一个思考题：
在前后端分离的架构下，SEO 优化 是一个老大难问题。前台页面如果是纯客户端渲染（CSR），搜索引擎爬虫可能抓不到内容。你是会选择 Next.js/Nuxt.js 做 SSR（服务端渲染），还是坚持用 SPA 配合预渲染工具？
你的网站用的什么技术栈？遇到过最离谱的 Bug 是什么？评论区聊聊，咱们互相避坑。
