1、调研背景与目的

1.1 背景

做完Hexo博客后的第二个项目

1.2 目的

了解前后端概念，学习前端代码

2、前置学习知识点

  • 了解前端和后端是什么，前后端分离是什么

  • 了解前端的主流编码语言（阐述出各个语言的特点，做表格展示）

  • 学习基础html、css、JavaScript的用法

  • 学习npm的使用

3、计划

3.1 计划1

在2025-7-27之前回答出前置学习知识点的相关内容

可以通过对应的demo来展示

前端（Frontend）是什么？：

指的是用户直接可见、可交互的部分，相当于 Web 应用的 “脸面”，负责与用户进行直接沟通。

核心职责
  • 将数据以直观的形式展示给用户（如文字、图片、表格、图表等）。
  • 接收用户的操作（如点击按钮、输入文字、滑动屏幕等）并给出反馈（如页面跳转、弹窗提示）。
技术栈
  • 基础技术：HTML（结构）、CSS（样式）、JavaScript（交互逻辑）。
  • 框架 / 库：React、Vue、Angular（用于构建复杂交互的单页应用）、jQuery（简化 DOM 操作，逐渐被框架替代）。
  • 工具：Webpack（打包工具）、Sass/Less（CSS 预处理器）等。
示例
  • 你在淘宝上看到的商品列表、搜索框、购物车界面，都是前端开发的成果。
  • 当你点击 “加入购物车” 按钮，按钮变色、购物车数量 + 1 的动画，也是前端代码实现的。

后端（Backend）是什么？：

指的是用户看不到的 “幕后” 部分，相当于 Web 应用的 “大脑” 和 “仓库”，负责处理业务逻辑和数据存储。

核心职责
  • 接收前端发送的请求（如用户登录、查询商品）。
  • 处理请求（如验证账号密码、从数据库中查询商品数据）。
  • 存储和管理数据（如用户信息、订单记录、商品库存等）。
  • 返回处理结果给前端（如登录成功的消息、商品列表数据）。
技术栈
  • 编程语言：Java、Python、Node.js、PHP、Ruby 等。
  • 框架：Spring（Java）、Django（Python）、Express（Node.js）等。
  • 数据库：MySQL、PostgreSQL（关系型）；MongoDB（非关系型）等。
示例
  • 当你在淘宝输入账号密码点击 “登录” 时，后端会验证账号密码是否正确，并返回 “登录成功” 或 “密码错误” 的结果。
  • 你下单后，后端会更新商品库存、生成订单记录并存储到数据库中。

前后端分离？：

https://www.bilibili.com/video/BV1RM4y1K75S/?spm_id_from=333.337.search-card.all.click&vd_source=2fe9bfebbd823f8ccdcbf8dcb5336b34（相关视频）

  • 基本运用于带有业务操作功能的网站类型，非纯展示类功能网站（或统计点击数等等）。

  • 由于服务的网站带有业务逻辑的功能，所以服务端采用动态HTML服务，需要后端来动态生成HTML代码。

表格展示：

前端语言 特点 应用场景 优点 缺点
html 1、用于构建网页的结构，是网页的 “骨架”;2、由标签组成，语义化标签提升可读性；3、本身不具备逻辑处理能力，需配合 css 和 js 使用 所有网页的基础结构搭建 1、学习门槛极低，语法简单直观；2、所有浏览器都原生支持；3、语义化标签提升 SEO 和可访问性 1、仅能构建静态结构，无逻辑处理能力；2、复杂页面需大量标签，维护成本高
css 1、控制网页的视觉表现（颜色、布局、字体等）；2、支持层叠、继承、优先级规则；3、可通过选择器精准定位元素；4、CSS3 新增动画、过渡、弹性布局等功能 网页美化、响应式布局、动画效果实现 1、能精确控制网页视觉表现；2、支持响应式设计，适配多设备；3、与 HTML 分离，便于维护 1、代码冗余度高，复用性差（原生）；2、复杂布局实现繁琐（如垂直居中）；3、浏览器兼容性问题突出
JavaScript 1、网页的 “行为” 核心，负责交互逻辑和动态效果；2、弱类型语言，支持面向对象和函数式编程；3、可操作 DOM，实现页面动态更新；4、可通过 Node.js 用于后端开发 表单验证、动态数据渲染、事件处理、API 交互等 1、前端唯一原生编程语言，功能强大；2、生态丰富，社区活跃；3、可跨端开发（前后端、移动端） 1、弱类型导致代码维护难度高（大型项目）；2、异步编程逻辑复杂，易出错；3、不同浏览器存在兼容性差异

HTML、JavaScript、CSS的基本用法

可参考网站 https://www.w3school.com.cn/ 里面有三种语言的详细用法
三种语法基础的学习是通过 https://www.bilibili.com/video/BV1BT4y1W7Aw?spm_id_from=333.788.videopod.episodes&vd_source=2fe9bfebbd823f8ccdcbf8dcb5336b34&p=9 来理解

HTML 全称是”Hypertext Markup Language”(超文本标记语言)
CSS 全称是”Cascading Style Sheets”(层叠样式表)
JavaScript(简称”JS”)


HTML的基本框架

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>


CSS语法

CSS通常由选择器、属性和属性值组成。多个规则可以组合在一起，以便同时应用多个样式

1
2
3
4
选择器{
    属性1: 属性值1;
    属性2: 属性值2;
}

1.选择器的声明中可以写无数条属性
2.声明的每一行属性，都需要以英文分号结尾
3.声明中的所有属性和值都是以键值对这种形式出现的


示例:

1
2
3
4
5
/*这是一个 p 标签选择器 */
p{
    color: blue;
    font-size: 16px;
}

借CSS的三种不同导入方式来熟悉CSS的使用（基于HTML框架）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 导入方式</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<style>
    p{
        color: blue;
        font-size: 26px;
    }
    h2{
        color: green;
    }
</style>
<body>
    <p>这是一个应用了css样式的文本</p>
    <h1 style="color: red;">这是一个一级标题标签，使用内联样式</h1>    
    <h2>这是一个二级标题，应用内部样式</h2>
    <h3>这是一个三级标题，应用外部样式</h3>

</body>
</html>

其中h3引用的外部文件具体为（在头部link的引用）:

格外提一嘴：三种导入方式的优先级：内联样式 > 内部样式表 > 外部样式表

1
2
3
h3{
    color: greenyellow
}

JavaScript的用法

  • 导入方式
    1、内联式（在HTML里直接嵌入JS代码）：


    不同于CSS代码放在style标签内，JS代码需放在script标签内


    2、外部引入（通过script标签的src属性引入）
    代码块展示：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JS 导入方式</title>

        <script>
            console.log("Hello,Worldhead标签的内联样式");
        </script>

        <script src="./js/myscript.js"></script>
    </head>

    <body>
        <h1>JavaScript 的导入方式</h1>
        <script>
            console.log("Hello,body标签的内联样式");
            alert("你好，内联样式弹窗"); <!-- 浏览器网页上方的弹窗显示 -->
        </script>
    </body>

    </html>

    外部引用的的文件内容（代码块中的myscript文件）：

    1
    console.log("Hello,外联样式");

npm的使用

3.2 计划2

3.3 计划3

暂不定时间

  • 使用前端代码完成一个ToDo页面，支持添加修改删除查找；支持展示已完成事项

  • 使用前端代码实现两个简单的本地游戏（贪吃蛇或五子棋或Google恐龙快跑）包含路由跳转多页面

  • 将之前做的本地游戏上线

4、示例文档

5、

6、参考资料