当前位置：首页 > 行业动态 > 正文

个人网站制作实验报告

admin
行业动态
2025-05-05
2

完成个人网站搭建，掌握HTML/CSS/JS技术，实现功能与优化

个人网站制作实验报告

实验目的

本次实验旨在通过个人网站的制作，掌握网页设计与开发的全流程，涵盖需求分析、页面布局、交互功能实现以及后端数据处理等核心技能，同时培养解决实际问题的能力与创新思维,为后续深入学习互联网开发技术奠定基础。

个人网站制作实验报告第1张

实验环境

类别	工具/技术	说明
开发工具	Visual Studio Code	代码编辑与调试，支持多种编程语言扩展
Photoshop CC	图片处理与设计，用于制作网站所需的视觉素材
前端技术	HTML5、CSS3、JavaScript	页面结构搭建、样式渲染、交互逻辑实现
Bootstrap 框架	快速构建响应式布局，适配不同设备屏幕大小
后端技术	Node.js + Express	服务器端逻辑处理与API开发
MongoDB	数据存储，用于用户信息、文章内容等非关系型数据管理
部署平台	GitHub Pages + Vercel	静态资源托管（前端）与服务器less函数部署（后端）

与步骤

需求分析与规划

目标定位：打造一个个人技术博客，包含文章发布、分类管理、用户评论等功能。
功能模块：
- 首页：展示最新文章与热门标签
- 文章详情页：支持Markdown渲染、代码高亮、评论互动
- 管理员后台：文章增删改、用户管理
技术选型：基于前后端分离架构，前端用React+Tailwind CSS，后端用Express+MongoDB。

前端开发

（1）页面设计与布局

使用Figma设计原型图，定义色彩风格（主色#2C3E50，辅色#ECF0F1）与字体规范（Inter, Roboto）。
通过React Router实现路由跳转，创建Home、Article、Admin等组件。

利用Tailwind CSS编写响应式网格布局，

.article-list {
  @apply grid gap-4 md:grid-cols-2 lg:grid-cols-3;
}

（2）交互功能实现

评论系统：通过Axios向后端API发送评论数据,前端用WebSocket实时更新回复状态。
动态搜索：JavaScript监听输入框事件,调用后端Elasticsearch接口实现模糊匹配。

后端开发

（1）API设计与开发

定义RESTful API路由：/api/articles（GET/POST/PUT/DELETE）、/api/comments。

数据验证：使用Joi库校验用户输入，

const schema = Joi.object({ Joi.string().min(5).required(),
  content: Joi.string().min(20).required()
});

（2）数据库操作

设计文档结构：文章集合包含title、markdown、tags、createdAt字段。

使用Mongoose ORM操作数据库，

const Article = mongoose.model('Article', { String,
  content: String,
  tags: [String],
  createdAt: { type: Date, default: Date.now }
});

测试与优化

跨域问题：后端设置CORS中间件允许前端域名访问。
性能优化：前端启用代码分割（React.lazy + Suspense）,后端添加Redis缓存热门文章数据。
安全加固：使用Helmet中间件防御XSS攻击,对用户密码进行bcrypt加密存储。

实验成果

网站功能截图

页面	功能描述
首页	轮播图展示精选文章，侧边栏显示文章分类
文章详情页	Markdown内容渲染，高亮代码块，评论区支持@提及
管理员后台	可视化文章编辑器，用户权限管理

关键代码片段

前端：评论提交处理

function postComment(articleId, commentText) {
  axios.post('/api/comments', {
    articleId,
    content: commentText,
    timestamp: new Date()
  })
  .then(res => {
    // 更新评论列表状态
    setComments(res.data.comments);
  });
}

后端：文章发布接口

app.post('/api/articles', async (req, res) => {
  try {
    const { title, content, tags } = req.body;
    const article = new Article({ title, content, tags });
    await article.save();
    res.status(201).json({ id: article._id });
  } catch (err) {
    res.status(400).json({ error: err.message });
  }
});

问题与解决方案

问题描述	解决方案
浏览器兼容性问题（CSS动画）	使用Autoprefixer自动补全厂商前缀，并针对IE11做降级处理
响应式布局适配困难	采用移动端优先设计，利用媒体查询（@media）调整断点布局
数据存储性能瓶颈	引入Redis缓存高频访问数据，优化MongoDB索引结构