# 前端开发技术基础 **Repository Path**: thelongestday/front_base ## Basic Information - **Project Name**: 前端开发技术基础 - **Description**: No description available - **Primary Language**: HTML - **License**: Apache-2.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 2 - **Created**: 2025-06-16 - **Last Updated**: 2026-08-24 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # front_base 前端基础学习项目，包含 HTML/CSS/JavaScript 演示示例、一个完整的用户登录/注册站点，以及配套的 Express 后端服务。 ## 目录结构 ``` front_base/ ├── demo/ # CSS 与 HTML 基础演示 │ ├── box.html # 盒模型演示 │ ├── cssSelector.html # CSS 选择器演示 │ ├── flex.html # Flexbox 布局演示 │ ├── float.html # 浮动布局演示 │ ├── main_flex.html # Flex 主布局 │ ├── main_flex_original.html │ ├── main_grid.html # Grid 主布局 │ ├── pengpaiNewLogo.html # 澎湃新闻 Logo 练习 │ ├── position.html # 定位演示 │ ├── preventdefault_demo.html │ ├── table.html # 表格演示 │ └── text.html # 文本样式演示 │ ├── demo_es/ # ES6+ 与 DOM 操作演示 │ ├── arrays.html # 数组方法 │ ├── compute_module.html # 模块化计算 │ ├── css_operation.html # CSS 操作 │ ├── dom_demo.html # DOM 增删改查 │ ├── editableTable.html # 可编辑表格 │ ├── element_demo.html # 元素操作 │ ├── false_arrays.html # 伪数组 │ ├── hashchange_demo.html # hashchange 事件 │ ├── person.html │ ├── propagation_demo.html # 事件冒泡/捕获 │ ├── pushState_demo.html # History API │ ├── regExp.html # 正则表达式 │ ├── run_time.html # 运行机制 │ ├── setInterval_demo.html # 定时器 │ ├── setTimeout_demo.html # 延时器 │ ├── upload_files.html # 文件上传 │ ├── value-module.js # 值模块 │ ├── var_demo.html # var/let/const │ └── window_demo.html # window 对象 │ ├── server/ # Express 后端服务（静态数据版） │ ├── data/ │ │ ├── regions.js # 省/市静态数据（31 省份 + 对应城市） │ │ └── users.js # 用户静态数据（4 个测试账号） │ ├── app.js # 服务入口：路由 + 静态资源挂载 │ ├── package.json # 依赖：express ^4.19.2 │ └── package-lock.json │ ├── site/ # 主站点（登录/注册页面） │ ├── images/ # 图片资源（logo、图标等） │ │ └── icons/ # 28 个 UI 图标 │ ├── js/ │ │ ├── ajax.js # 基于 XMLHttpRequest 的 Ajax 封装（支持 Promise） │ │ ├── const.js # 常量配置（BASE_PATH） │ │ └── register.js # 注册页逻辑：省市区级联 + 表单验证 │ ├── views/ # 其他页面视图 │ │ ├── article_list.html │ │ ├── blog_main.html │ │ ├── ent_main.html │ │ ├── news.html │ │ └── welcome.html │ ├── index.html # 首页（自动重定向到 login.html） │ ├── login.html # 登录页（响应式布局，支持一周免登录） │ ├── register.html # 注册页（原生 CSS，省市区级联） │ ├── registration.html # 注册页（Tailwind CSS 版本） │ ├── package.json # 依赖：axios ^0.19.2 │ ├── package-lock.json │ └── readme.txt # 简易启动说明 │ ├── images/ # 根目录图片（与 site/images 一致） ├── upload/ # 上传文件目录 │ └── news_20200116/ ├── favicon.ico ├── .gitignore └── LICENSE # Apache License 2.0 ``` ## 技术栈 | 层级 | 技术 | |------|------| | 前端 | 原生 HTML5 / CSS3 / JavaScript (ES6+)、Axios、Tailwind CSS（部分页面） | | 后端 | Node.js、Express 4.x | | 数据 | 内存静态数据（无数据库） | | 模块化 | ES6 Modules（`import` / `export`） | ## 快速开始 ### 1. 安装依赖 ```bash # 后端 cd server && npm install # 前端（可选，axios 通过 CDN 也可使用） cd ../site && npm install ``` ### 2. 启动服务 ```bash cd server npm start # Server running at http://127.0.0.1:3000 ``` ### 3. 访问站点 | 页面 | URL | |------|-----| | 首页（跳转登录） | http://127.0.0.1:3000/ | | 登录页 | http://127.0.0.1:3000/site/login.html | | 注册页（原生版） | http://127.0.0.1:3000/site/register.html | | 注册页（Tailwind 版） | http://127.0.0.1:3000/site/registration.html | ## 后端 API 由 [server/app.js](server/app.js) 提供： | 方法 | 路径 | 说明 | 请求参数 | |------|------|------|----------| | GET | `/` | 根路径，重定向到 `/site/index.html` | - | | GET | `/users/login` | 用户登录 | `userName`, `password`, `cookie`('on'=免登录), `hiddenName` | | GET | `/getProvince` | 获取省份列表 | - | | GET | `/getCity` | 根据省份获取城市 | `currentProvinceCode` | | GET | `/usercheck` | 用户名查重 | `param` (用户名) | 返回格式： - 省/市/查重接口：`{ result: 'ok', ... }` - 登录成功：直接渲染 HTML 欢迎页 - 登录失败：HTTP 401 + HTML 错误页 ## 测试账号 来自 [server/data/users.js](server/data/users.js)： | 用户名 | 密码 | 昵称 | 邮箱 | |--------|------|------|------| | admin | admin123 | 管理员 | admin@example.com | | zhangsan | zhang123 | 张三 | zhangsan@example.com | | lisi | li123456 | 李四 | lisi@example.com | | wangwu | wang1234 | 王五 | wangwu@example.com | ## 前端模块说明 ### [site/js/ajax.js](site/js/ajax.js) — Ajax 封装 ```javascript import { Ajax } from './ajax.js'; const ajax = new Ajax('http://127.0.0.1:3000'); ajax.get('/url', (xhr, param) => { ... }); // 回调方式 const xhr = await ajax.getPromise('/url'); // Promise 方式 ``` ### [site/js/const.js](site/js/const.js) — 全局常量 ```javascript Const.BASE_PATH = 'http://127.0.0.1:3000'; ``` ### [site/js/register.js](site/js/register.js) — 注册页逻辑 - **省份初始化**：`fetch` + async/await 加载省份下拉框 - **城市级联**：`axios.get` 监听省份 change 事件 - **表单验证**： - 用户名：英数字正则 + 服务端查重（`/usercheck`） - 密码：长度 6-12 位 - 邮箱：正则校验 - **UI 反馈**：success / error 图标 + 文本提示 ## 学习资源索引 ### demo/ — CSS/HTML 基础 | 文件 | 知识点 | |------|--------| | box.html | CSS 盒模型 | | flex.html | Flexbox（flex-direction、align-self） | | float.html | 浮动布局 | | main_grid.html | CSS Grid 布局 | | position.html | position 定位 | | table.html | 表格 | | cssSelector.html | CSS 选择器 | | pengpaiNewLogo.html | Logo 还原练习 | ### demo_es/ — ES6+ & DOM | 文件 | 知识点 | |------|--------| | dom_demo.html | DOM 查询、创建节点、appendChild | | propagation_demo.html | 事件冒泡与捕获 | | hashchange_demo.html | onhashchange 路由 | | pushState_demo.html | History pushState | | regExp.html | 正则表达式 | | setInterval_demo.html | 定时器 | | upload_files.html | FileReader 文件上传预览 | | arrays.html | 数组方法 | | var_demo.html | var / let / const 差异 | ## 响应式设计 - 登录页 [site/login.html](site/login.html) 使用 `@media (max-width: 480px)` 实现移动端适配： - 宽度占满 100vw - 表头区域纵向排列 - 输入框 100% 宽度 - 隐藏部分 label ## 已知说明 1. 登录接口使用 **GET 方法**提交账号密码（仅作为学习演示，生产环境请使用 POST + HTTPS） 2. 所有数据为内存静态数据，重启服务后不持久化 3. `register.html` 使用原生 CSS；`registration.html` 使用 Tailwind CSS CDN，可对照学习两种写法 4. 一周免登录通过 Cookie (`userName`, httpOnly, maxAge=7d) 实现 ## License [Apache License 2.0](LICENSE)