Web 综合演练

项目名称：实现论坛详情页

项目目标：

• 使用原生 HTML、CSS、JavaScript 进行开发。
• 应用 Flex 布局进行页面布局设计。
• 使用 axios 库，通过 AJAX 请求与服务器交互，实现帖子内容查看和评论的增删查改功能。

接口：

API 基础 URI：https://ipanelcloud2.ipanel.cn:50443/s/iot/a2/iot_room/roomkeeper

• 获取帖子详情：GET /get_bbs_info?bbs_id=10086

// 返回json格式：
{
  "code": 0,
  "message": "success",
  "result": {
    "bbs_id": 10086,
    "author": "杨过",
    "title": "CSS 学习收录",
    "content": "发现了一个适合静下心学习css的网站，\n  此网站不仅提供了具体css问题的解决方法，\n  也提供了一些网页布局的分析思路。\n  网站用词十分友善，容易阅读。\n  孔子曰： 独学学不如众学学，特此推荐一下：\n  \n  https://developer.mozilla.org/zh-CN/docs/Web/CSS",
    "create_time": "2024-8-13 14:45:06",
    "comments": [
      {
        "id": "f44020505ad211ef88074dc0ae57e372",
        "author": "黄蓉",
        "content": "感谢，学习CSS的网站 very good",
        "create_time": "2024-8-13 14:45:07"
      },
      {
        "id": "f44020515ad211ef88074dc0ae57e372",
        "author": "黄老邪",
        "content": "谢谢分享",
        "create_time": "2024-8-13 14:45:07"
      }
    ]
  }
}

• 发表评论：POST /comment_post

// 参数json格式：
{
  "author": "xxx",
  "content": "评论内容"
}

// 返回json格式：
{
  "code": 0,
  "message": "success",
  "result": {
    "comment_id": "f44020505ad211ef88074dc0ae57e372"
  }
}

• 删除评论：POST /comment_delete

// 参数json格式：
{
  "comment_id": "f44020505ad211ef88074dc0ae57e372"
}

// 返回json格式：
{
  "code": 0,
  "message": "success"
}

• 修改评论：POST /comment_update

// 参数json格式：
{
  "comment_id": "f44020505ad211ef88074dc0ae57e372",
  "content": "评论内容"
}

// 返回json格式：
{
  "code": 0,
  "message": "success"
}

axios 免费 CDN 地址

<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.7.3/axios.min.js"></script>

实现效果图

样式要求：

• logo 大小：326x66

• 主体主体上下间距：10px

• 主体内容左右间距:25px

• 统一字体：Tahoma, Helvetica, "SimSun", sans-serif

• 面包屑导航高度：40px

• 左侧宽度：170px

• 帖子标题高度：35px

• 人名、帖子标题颜色：#333333

• 头像大小：120x120

• 头像边框大小颜色：4px，白色

• 帖子标题、正文、评论文字大小：14px

• 帖子内容距离左右间距：20px

• 左侧背景色：#e5edf2

• 外边框颜色：#c1c1c1

• 内虚线颜色：#cccccc

• “发表时间栏”高度：35px

• “评论按钮栏”高度：30px

• 评论操作按钮间隔：10px

• 盒子底边框半透明色：rgba(0, 0, 100, 0.1)

• “我的名字”输入框边框色：#c1c1c1

• 回复文本框边框色：#999

• 回复按钮背景色：#06c

• 回复按钮边框色：#235994

• 右下角回到顶部按钮大小：50x50

例子

demo 下载

作业

按照本课件样式要求，跟着做一遍