关于前后端
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（非关系型）等。
示例
- 当你在淘宝输入账号密码点击 “登录” 时，后端会验证账号密码是否正确，并返回 “登录成功” 或 “密码错误” 的结果。
- 你下单后，后端会更新商品库存、生成订单记录并存储到数据库中。
前后端分离？：
基本运用于带有业务操作功能的网站类型，非纯展示类功能网站（或统计点击数等等）。
由于服务的网站带有业务逻辑的功能，所以服务端采用动态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 |
|
CSS语法
CSS通常由选择器、属性和属性值组成。多个规则可以组合在一起，以便同时应用多个样式
1 | 选择器{ |
1.选择器的声明中可以写无数条属性
2.声明的每一行属性，都需要以英文分号结尾
3.声明中的所有属性和值都是以键值对这种形式出现的
示例:
1 | /*这是一个 p 标签选择器 */ |
借CSS的三种不同导入方式来熟悉CSS的使用（基于HTML框架）
1 |
|
其中h3引用的外部文件具体为（在头部link的引用）:
格外提一嘴：三种导入方式的优先级：内联样式 > 内部样式表 > 外部样式表
1 | h3{ |
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的使用
- npm(Node Package Manager Node包管理工具)
- 火速上手，其实挺简单 ——>可看视频学习
https://www.bilibili.com/video/BV1Nx4118788?spm_id_from=333.788.videopod.episodes&vd_source=2fe9bfebbd823f8ccdcbf8dcb5336b34&p=4
3.2 计划2
- 2025-7-31 晚上九点半之前用html+js（jquery）+css写一个简陋的ToDo页面，要有基本的功能（增删查改）
- 了解DOM是什么，怎么控制DOM节点
- 怎么实现增删查改的操作
- 写Markdown笔记，记下新知识
https://www.bilibili.com/video/BV1Y84y1L7Nn/?spm_id_from=333.1387.search.video_card.click&vd_source=2fe9bfebbd823f8ccdcbf8dcb5336b34 (JavaScript)
https://www.bilibili.com/video/BV1kM4y127Li/?spm_id_from=333.337search-card.all.click&vd_source=2fe9bfebbd823f8ccdcbf8dcb5336b34 (HTML)
3.25 计划2.5
- 2025-8-9 晚上9点完成了Todo页面的汇报（HTML 181/200）(javascript 183/200)
Todo:
- 把Todolist的查找功能完善,bug修复
- 了解JSON是什么，JSON.stringify(),JSON.parse()的作用的是什么
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15const obj = {
uname: ' pink',
age: 18,
hobby:['乒乓球','足球'],
family: {
baby: '小pink'
}
}
// 把对象转化为JSON字符串
// {"uname":" pink","age":18,"hobby":["乒乓球","足球"],"family":{"baby":"小pink"}}
//consolo.log(JSON.stringify(obj))
const o = JSON.parse(JSON.stringify(obj))
console.log(o)
o.family.baby = '123'
console.log(obj) - 把完成好的Todolist工程部署到GitHub上的新仓库（用Git命令）
- 完善本周计划表
2025-8-12晚9点半对接留下的Todo和新的内容
3.3 计划3
游戏时间周期：2025.8.18-2025.8.24晚九点半验收
- 探究如何用git命令更新新的项目内容到github仓库
1
2
3
4
5
6
7
8
9先确认文件夹是否绑定了github远端的仓库：
-git remote -v
若显示的是仓库的地址，则无误
接着
-git add . 将本地所有的更新内容添加到该文件夹的git仓库中
-git status 可以先用git status查看本地仓库目录中文件的状态，如是否被修改，新增或删除
-git commit -u origin "Second commit" 我这里是第二次提交，所以""里是这么填
-git push -u origin master(这里填的是你要提交到的分支)
然后远端仓库就会显示同步了，会显示更新的内容 - 了解下Vue和React(调研时间：2025-8-12 到 2025-8-14中午)，最后决定出使用哪一个来编写游戏
| 框架 | 设计理念 | 模版语法 | 学习 | 适用场景 |
|---|---|---|---|---|
| Vue | 渐进式框架，核心专注视图层，可按需引入工具（路由、状态管理等），强调灵活性和易用性 | 基于 HTML 模板，使用v-指令（如v-if、v-for）实现逻辑，模板与逻辑分离 | 较低，模板语法贴近传统前端，中文文档完善，适合初学者 | 中小型项目、快速开发、国内企业应用（电商、后台系统等） |
| React | 组件化与函数式编程，强调 “一切皆组件”，通过 JSX 将逻辑与视图结合，理念更激进 | 使用 JSX（JavaScript XML），允许在 JS 中直接写 HTML 结构，逻辑与视图通过 JS 结合 | 较高，JSX 和函数式编程思想对 JS 基础要求高，文档以英文为主 | 大型复杂应用、国际项目、跨平台开发（React Native）、大厂核心业务 |
再根据所看的视频，简单的小游戏开发还是适合用Vue进行构建，React反而会相对麻烦
结论: 决定用Vue进行编写 2025-8-17晚上九点半校对排期
使用前端代码完成一个ToDo页面，支持添加修改删除查找；支持展示已完成事项(✓)
使用前端代码实现两个简单的本地游戏（贪吃蛇或五子棋或Google恐龙快跑）包含路由跳转多页面
将之前做的本地游戏上线
3.4 计划4
3.3 计划3实际完成进度：只实现了打地鼠一个游戏，游戏在本地还未上线
2025-8-26 校对复盘
贪吃蛇项目复盘：需要一步一步地去实现代码，有问题及时沟通，频繁试错，出现问题解决问题，主要还是敢问多问
推箱子项目复盘： 给项目留下收尾复盘的时间，不要盲目追求速度，要在对项目底层逻辑理解且知道其可执行度的情况下去推进，但也要多问
加强提炼问题和表述问题的能力，提高提问的效率，让别人更直观地能get到问题点然后更好地去帮忙解决问题
2025-8-26（延期两天）后续代办
完善第二个游戏，实现router(路由跳转)
把打地鼠的项目用git命令上传到Github的远程仓库