# mess-share

**Repository Path**: king4498/mess-share

## Basic Information

- **Project Name**: mess-share
- **Description**: html+css+js练习小项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-15
- **Last Updated**: 2025-08-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: HTML, CSS, JavaScript

## README


# mess-share 资源分享
# 前端路由练习项目文档
## 项目截图
![img.png](doc/img.png)
![img.png](doc/img1.png)
## 项目简介
本项目是一个基于原生JavaScript实现的前端路由演示项目，主要展示如何通过前端路由实现多页面切换效果。项目采用HTML5 History API，结合简单的模板渲染机制，实现了类似SPA（单页应用）的交互体验。

## 功能特性
1. **前端路由系统**
    - 支持6个基础路由：首页/发现/关注/历史/收藏/创作
    - 通过`pushState`实现无刷新页面切换
    - 监听`popstate`事件支持浏览器前进/后退
2. **页面模板机制**
    - 硬编码模板存储（实际项目可扩展为动态加载）
    - 渐变动画过渡效果
    - 统一的错误处理页面
3. **响应式设计**
    - 基础移动端适配（需完善媒体查询）
    - 弹性布局容器
    - 图片自适应处理

## 技术架构
HTML5 + CSS3 + 原生JavaScript

## 路由实现原理
### 路由配置
```javascript
// routes.js
export const routes = {
    '/': 'home',
    '/explore': 'explore',
    '/create': 'create',
    // 其他路由...
};
路由初始化
javascript
// 监听菜单点击事件
document.querySelectorAll('.menu').forEach(link => {
    link.addEventListener('click', (e) => {
        e.preventDefault();
        const path = new URL(e.currentTarget.href).pathname;
        history.pushState({}, '', path);
        loadContent(true);
    });
});
内容加载器
javascript
export async function loadContent() {
    const path = window.location.pathname;
    const pageKey = routes[path] || 'home';
    const template = pageTemplates[pageKey];
    
    container.style.opacity = 0;
    setTimeout(() => {
        container.innerHTML = template;
        container.style.opacity = 1;
    }, 100);
}
响应式设计说明
css
/* 示例响应式布局 */
.content-box {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
 
@media (max-width: 768px) {
    .item-mess-box {
        flex-direction: column;
    }
}
截图预览




安装使用
克隆仓库
bash
git clone https://gitee.com/yourname/project.git
直接打开index.html
bash
# 需要本地服务器运行（推荐使用Live Server）
扩展建议
添加路由守卫
实现模板动态加载
增加路由过渡动画
完善移动端适配
添加路由参数支持
项目结构
├── index.html
├── style.css
└── js/
    ├── router.js
    └── templates.js
文档特点：
1. 结合代码片段与架构图示
2. 包含关键实现原理说明
3. 提供可复用的代码模板
4. 标注响应式设计要点
5. 附带实际运行截图
6. 给出明确扩展方向
 
可根据实际项目需要调整内容深度和截图展示方式。建议将CSS样式文件补充完整后附上完整代码仓库链接。
```