第63篇【终极整合巨作】从零手写原生中后台管理系统｜整合62篇全部前端知识点｜从头到尾完整架构+全功能逻辑
前言：为什么写这一篇？
前面62篇，我们从零学完了：布局、CSS、原生JS、ES6、异步、事件循环、网络协议、浏览器原理、工程化、Vue3、TS、WebSocket、权限系统、Git、微前端、性能优化、手写源码、BUG排查、面试话术。
但是知识点是分散的。
这一篇，我把全部前端能力，从头到尾串联成一个完整可上线的企业级项目。
不用Vue、不用框架、不用脚手架。
纯 HTML + CSS + 原生JS 手写全套中后台系统
包含：架构设计、工具封装、网络层、权限层、路由层、状态层、业务层、组件层、全局拦截、异常处理、性能优化、团队规范。
学完这一篇，你就真正拥有「完整前端工程思维」
一、项目整体架构设计（工程化思维落地）
1.1 项目技术栈
原生 HTML5 + CSS3 + JavaScript（ES6+）
少量 jQuery 简化DOM操作（不影响原生思想）
全程手写架构、手写路由、手写权限、手写状态管理、手写工具库
1.2 项目包含所有核心业务能力
用户登录、Token 鉴权、过期拦截、本地持久化
全局请求拦截器、响应拦截器、统一报错处理
前端权限体系：角色权限、动态菜单、按钮权限
原生 Hash 路由系统（手写无框架路由）
全局状态管理（手写简易Pinia/Vuex思想）
工具库：防抖、节流、深拷贝、时间格式化、数据处理
通用组件：弹窗、提示、分页、表单校验、图片上传预览
业务页面：首页看板、用户管理、新增编辑删除、分页查询
全局BUG处理、空数据处理、重排重绘优化、内存优化
完整团队Git规范、项目目录规范、代码规范
1.3 标准工程化目录结构（企业级）
admin-project/ ├─ login.html # 登录页 ├─ index.html # 主布局框架 ├─ css/ │ └─ global.css # 全局样式、重置、布局、组件样式 ├─ js/ │ ├─ router.js # 手写路由系统 │ ├─ permission.js # 权限系统 │ ├─ store.js # 全局状态管理 │ ├─ request.js # 网络请求拦截层 │ ├─ utils.js # 工具函数库 │ ├─ components.js # 通用组件 │ └─ pages/ # 所有业务页面逻辑 └─ lib/ # 第三方库
二、全局工具库封装（整合ES6+、性能优化、手写源码）
所有项目高频工具，统一封装，全局复用。
包含：高阶防抖、高阶节流、深拷贝、时间格式化、空值处理、数据格式化
// js/utils.js const Utils = { // 高阶防抖：支持立即执行、手动取消 debounce(fn, delay = 300, immediate = false) { let timer = null const handler = function(...args) { if (timer) clearTimeout(timer) if (immediate && !timer) { fn.apply(this, args) } timer = setTimeout(() => { if (!immediate) fn.apply(this, args) timer = null }, delay) } // 手动取消防止内存泄漏 handler.cancel = () => { clearTimeout(timer) timer = null } return handler }, // 高阶节流：固定频率执行 throttle(fn, delay = 300) { let lastTime = 0 let timer = null const handler = function(...args) { const now = Date.now() if (now - lastTime >= delay) { lastTime = now fn.apply(this, args) } else if (!timer) { timer = setTimeout(() => { lastTime = Date.now() fn.apply(this, args) timer = null }, delay) } } handler.cancel = () => { clearTimeout(timer) timer = null lastTime = 0 } return handler }, // 深拷贝（解决引用类型赋值问题） deepClone(obj) { if (obj === null || typeof obj !== "object") return obj const res = Array.isArray(obj) ? [] : {} for (let key in obj) { if (obj.hasOwnProperty(key)) { res[key] = this.deepClone(obj[key]) } } return res }, // 时间格式化 formatTime(time) { const d = new Date(time) const y = d.getFullYear() const m = String(d.getMonth() + 1).padStart(2, "0") const day = String(d.getDate()).padStart(2, "0") return `${y}-${m}-${day}` } } window.Utils = Utils
三、本地存储封装（持久化解决方案）
解决页面刷新数据丢失、Pinia/Vuex持久化原理，手写实现。
// js/storage.js const Storage = { // 普通存储 set(key, value) { localStorage.setItem(key, JSON.stringify(value)) }, get(key) { const val = localStorage.getItem(key) return val ? JSON.parse(val) : null }, // 敏感数据加密存储（简单base64） setToken(key, value) { const encodeStr = btoa(JSON.stringify(value)) localStorage.setItem(key, encodeStr) }, getToken(key) { const val = localStorage.getItem(key) if (!val) return null return JSON.parse(atob(val)) }, remove(key) { localStorage.removeItem(key) }, clear() { localStorage.clear() } } window.Storage = Storage
四、全局状态管理（手写简易Pinia）
整合全局用户信息、Token、角色、权限、全局数据。
原理和Pinia完全一致：集中式状态、初始化、持久化、统一修改
// js/store.js const Store = { // 全局状态 state: { token: "", role: "", permission: [], userInfo: {} }, // 页面刷新初始化数据 init() { const cache = Storage.getToken("userState") if (cache) { this.state.token = cache.token this.state.role = cache.role this.state.permission = cache.permission this.state.userInfo = cache.userInfo } }, // 登录后设置用户信息 setUserState(data) { this.state.token = data.token this.state.role = data.role this.state.permission = data.permission this.state.userInfo = data.userInfo Storage.setToken("userState", this.state) }, // 退出登录清空状态 logout() { this.state = { token: "", role: "", permission: [], userInfo: {} } Storage.clear() window.location.href = "login.html" }, // 判断是否登录 isLogin() { return !!this.state.token } } // 初始化 Store.init() window.Store = Store
五、网络请求封装（整合HTTP/HTTPS原理、拦截器、全局异常）
整合前面HTTP协议、状态码、跨域、401过期、全局请求统一处理。
// js/request.js const Request = { baseUrl: "", // 统一请求入口 async fetch(options) { const { url, method = "GET", data = {} } = options const header = { "Content-Type": "application/json" } // 携带Token if (Store.state.token) { header.Authorization = `Bearer ${Store.state.token}` } try { const res = await fetch(this.baseUrl + url, { method, headers: header, body: method === "GET" ? null : JSON.stringify(data) }) const result = await res.json() // 401 Token过期拦截 if (result.code === 401) { alert("登录已过期，请重新登录") Store.logout() return } return result } catch (err) { alert("网络请求异常") console.error("请求错误：", err) } }, get(url, data) { return this.fetch({ url, method: "GET", data }) }, post(url, data) { return this.fetch({ url, method: "POST", data }) } } window.Request = Request
六、权限系统完整实现（页面权限 + 按钮权限）
整合前面企业级权限体系、动态路由、角色判断原理。
// js/permission.js const Permission = { // 判断页面权限 hasPagePermission(role) { const myRole = Store.state.role return myRole === "admin" || myRole === role }, // 判断按钮权限 hasBtnPermission(key) { const list = Store.state.permission return list.includes(key) }, // 动态渲染按钮权限 initBtnPermission() { // 所有带权限标识的按钮 const btns = document.querySelectorAll("[data-perm]") btns.forEach(btn => { const perm = btn.getAttribute("data-perm") if (!this.hasBtnPermission(perm)) { btn.style.display = "none" } }) } } window.Permission = Permission
七、手写原生路由系统（Hash路由）
不用Vue Router，原生手写路由，理解前端路由底层原理。
// js/router.js const Router = { routes: { "/home": "pages/home.html", "/user": "pages/user.html" }, // 初始化路由监听 init() { window.addEventListener("hashchange", () => this.render()) this.render() }, // 渲染页面 render() { let hash = window.location.hash.slice(1) || "/home" if (!this.routes[hash]) { hash = "/home" } // 权限拦截 if (!Store.isLogin()) { window.location.hash = "/login" return } // 加载页面 this.loadPage(this.routes[hash]) }, // 加载html页面 async loadPage(path) { const res = await fetch(path) const html = await res.text() document.getElementById("mainContent").innerHTML = html // 每次页面渲染后重新初始化按钮权限 Permission.initBtnPermission() } } Router.init() window.Router = Router