本系列校训
用免费公开视频，卷飞培训班哈人！打死不报班，赚钱靠狠干！
只要自己有电脑，前后项目都能搞！N年苦学无人问，一朝成名天下知！
大前端的技术很多很多
html5 流行以来，其实，前端的地位就一涨再涨。事实上很多公司的前端工程师数量都远远超过了后端的工程师数量，而前端的技术也越来越难，VUE就是很典型的例子。
而黑马的视频就更是把VUE,html,js,css直接合并在了JAVAWEB的视频里。请参见《黑马B站视频JAVAWEB部分的知识范围、学习步骤-【思维导图知识范围】》
同样如下图，右侧为比较基础的内容
JavaScrip语言
Javascript是基于对象的脚本语言，主要是基于客户端运行的，用户点击带有Javascript的网页，网页里的Javascript就传到浏览器，由浏览器对此作处理。它的代码可以直接嵌入到HTML命令中，最大特点是可以方便操纵网站上的元素，并与Web浏览器交互，同时JavaScrip可以捕捉用户操作并作出反映。
JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言，常常用来给HTML网页添加动态功能，比如响应用户的各种操作。JavaScript的一个重要功能就是面向对象的功能，通过基于对象的程序设计，可以用更直观、模块化和可重复使用的方式进行程序开发。在HTML基础上，使用Javascript可以开发交互式Web网页。Javascript的出现使得网页和用户之间实现了一种实时的、动态的关系，使网页中包含更多 的活跃元素和更加精彩的内容。在本系统中很多地方使用了javascript技术，比如说，检验用户输入数据的有效性，是否重复，是否为空等等。
环境及工具：
本系列环境(其实JS本身没有啥工具的要求，复杂的webstorm可以，简单的editplus 也是可以)，就列出JAVA的吧。
| 环境 | win11 |
|---|---|
| 工具 | idea 2018 |
| jdk | 1.8 |
| 数据库 | — |
| maven | — |
| 项目导入方式 | 目录 导入 |
| 数据库前端工具 | — |
数据库前端工具：mysql-front (navicat 也可以)
主要是这些跟PHPStudy 2018 整合了，所以有的时候懒的打开navicat
关于环境的重要性，直接看上面的《SpringBoot 的项目编译即报错处理–JSB系列之001》
本例并不没有使用node编译，所以不需要node版本，与node-sass版本等其它包
上效果图
在webstorm 里。
页面代码(全)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet" type="text/css" />
<title>InsCode</title>
</head>
<body>
<div class="container">
<img src="src/assets/logo.svg" alt="InsCode">
<div>欢迎来到 InsCode</div>
</div>
<table id="shopping-cart">
<thead>
<tr>
<th>商品名称</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
</tr>
</thead>
<tbody>
<tr>
<td>商品1</td>
<td>10.00</td>
<td><input type="number" value="1" min="1"></td>
<td>10.00</td>
</tr>
<tr>
<td>商品2</td>
<td>20.00</td>
<td><input type="number" value="1" min="1"></td>
<td>20.00</td>
</tr>
<tr>
<td>商品3</td>
<td>30.00</td>
<td><input type="number" value="1" min="1"></td>
<td>30.00</td>
</tr>
<tr>
<td>商品4</td>
<td>40.00</td>
<td><input type="number" value="1" min="1"></td>
<td>40.00</td>
</tr>
<tr>
<td>商品5</td>
<td>50.00</td>
<td><input type="number" value="1" min="1"></td>
<td>50.00</td>
</tr>
<tr>
<td colspan="3">总计：</td>
<td id="total-price">150.00</td>
</tr>
</tbody>
</table>
<div id="product-list1">
<image src="a1.jpg"/>
<image src="a2.jpg"/>
<image src="a3.jpg"/>
<image src="a4.jpg"/>
<image src="a5.jpg"/>
</div>
<div id="product-list2">
<button class="product" style="width: 80px" data-name="商品1" data-price="10.00">添加商品1</button>
<button class="product" style="width: 80px" data-name="商品2" data-price="20.00">添加商品2</button>
<button class="product" style="width: 80px" data-name="商品3" data-price="30.00">添加商品3</button>
<button class="product" style="width: 80px" data-name="商品4" data-price="40.00">添加商品4</button>
<button class="product" style="width: 80px" data-name="商品5" data-price="50.00">添加商品5</button>
<script>
// 获取表格元素和总价元素
const cartTable = document.getElementById("shopping-cart");
const totalPriceCell = document.getElementById("total-price");
// 绑定商品按钮的点击事件
const productButtons = document.querySelectorAll(".product");
productButtons.forEach((button) => {
button.addEventListener("click", () => {
const name = button.dataset.name;
const price = parseFloat(button.dataset.price);
const quantity = 1;
addProductToCart(name, price, quantity);
});
});
// 绑定表格输入框的修改事件
cartTable.addEventListener("change", (event) => {
const target = event.target;
if (target.type === "number") {
const row = target.parentElement.parentElement;
const name = row.cells[0].textContent;
const price = parseFloat(row.cells[1].textContent);
const quantity = parseInt(target.value);
updateProductInCart(name, price, quantity);
}
});
// 初始化购物车
const cart = new Map();
// 添加商品到购物车
function addProductToCart(name, price, quantity) {
if (cart.has(name)) {
quantity += cart.get(name);
}
cart.set(name, quantity);
renderCart();
}
// 更新购物车中的商品数量和小计
function updateProductInCart(name, price, quantity) {
if (quantity <= 0) {
cart.delete(name);
} else {
cart.set(name, quantity);
}
renderCart();
}
// 渲染购物车
function renderCart() {
// 清空表格
while (cartTable.tBodies[0].rows.length > 0) {
cartTable.tBodies[0].deleteRow(0);
}
// 插入购物车中的商品
let subtotal = 0;
cart.forEach((quantity, name) => {
const price = parseFloat(
document.querySelector(`[data-name="${name}"]`).dataset.price
); // 从商品按钮中获取单价
const total = price * quantity;
subtotal += total;
const row = cartTable.tBodies[0].insertRow();
row.insertCell().textContent = name;
row.insertCell().textContent = price.toFixed(2);
const quantityCell = row.insertCell();
quantityCell.innerHTML = `<input type="number" value="${quantity}" min="1">`;
row.insertCell().textContent = total.toFixed(2);
});
// 更新总价
totalPriceCell.textContent = subtotal.toFixed(2);
}
</script>
</body>
</html>
项目目录如图：
不熟悉web的人，注意目录层次。
注意的是，图片的宽度也是80PX
其它CSS
学客户端的新知识的时候，没有加新的CSS文件 ，怕你抓狂。😃
配套资源
js的大作业，购物车实现【WEB前端实战】
作业：
可以尝试改成，商品的图片加到商品的购物车列表上。
附：webstorm介绍
● WebStorm 是一款由 JetBrains 开发的集成开发环境（IDE），它是专门为开发 Web 应用程序而设计的。它提供了许多功能，例如代码自动完成、错误突出显示、重构、调试、版本控制等，可以帮助开发人员提高效率和代码质量。WebStorm 支持多种前端技术，例如 HTML、CSS、JavaScript、TypeScript、React、Angular、Vue.js 等等，还支持 Node.js 和其它后端技术。WebStorm 是一款商业软件，但是 JetBrains 也提供了学生和开源项目免费使用的许可证。
● 说了这么多, 其实他就是一个编辑器而已, 不用过多纠结
● 既然说道这了, 那么我们就来介绍一些常见的前端开发编辑器
notepad++
● 优点：
- 免费且开源：Notepad++ 是一款免费且开源的软件，用户可以免费获得该软件，并且可以自由修改源代码。
- 轻量级：Notepad++ 是一款轻量级的文本编辑器，启动速度非常快，使用内存也比较少，对于一些简单的文本编辑任务非常适用。
- 语法高亮：Notepad++ 支持许多编程语言的语法高亮显示，让编程更加舒适。但是也只能是高亮一些语言的基础内容, 尤其是对于前端来说, 对于 vue 和 react 包括 jQuery 的高亮效果并不是很好
- 插件丰富：Notepad++ 支持许多插件，可以帮助用户更加方便地进行开发和编辑。
● 缺点： - 功能相对简单：Notepad++ 是一款文本编辑器，针对于单纯的文本编辑非常友好, 对于简单的代码编辑也比较友好, 但是功能相对于专业的集成开发环境（IDE）而言较为简单，缺乏一些高级的功能, 比如一些插件, 一些特殊代码段, 一些纠错, 代码校验等
- 不支持调试：Notepad++ 不支持代码调试功能，这对于一些需要进行代码调试的用户来说可能不太方便。如果是做前端开发, 可能我们更多的是在浏览器调试, 所以缺点并不明显, 但是对于其他需要本地或者即时调试的语言来说, 可能缺点就比较显著了.
- 不适合大型项目：由于 Notepad++ 功能相对简单，因此不太适合大型项目的开发，这时候用户需要使用更加专业的开发工具。
- 只能在 Windows 平台上运行：Notepad++ 只能在 Windows 平台上运行，不能在其他操作系统上使用。不利于进行跨平台开发的项目.
webstorm
● 优点：
- 集成度高：WebStorm 将许多 Web 开发所需要的工具和功能，包括代码编辑器、调试器、版本控制、测试工具等等都直接集成在了软件内，安装完毕可以直接获得这些工具所提供的能力和便捷, 可以方便地完成整个 Web 开发流程。
- 支持多种技术：WebStorm 支持多种前端和后端技术，如 HTML、CSS、JavaScript、React、Angular、Vue.js、Node.js 等等，甚至包括 sass, less, ts 等文件的编译也直接内置在了软件内, 一次安装便可以满足开发者的各种需求。
- 智能代码提示和自动补全：WebStorm 的智能代码提示和自动补全功能可以帮助开发者减少敲击键盘的次数，提高开发效率。
- 调试功能强大：WebStorm 的调试功能非常强大，可以方便地调试前端和后端代码，查找代码中的错误和问题。
- 丰富的插件库：WebStorm 除了自己本身内置有大量的工具和功能, 也有有大量的插件在自己的生态系统内可供选择，可以方便地扩展其功能。
● 缺点： - 价格较高：WebStorm 是一款商业软件，不是开软编辑器, 需要付费使用(支持正版), 价格相对较高，对于个人开发者来说可能有些昂贵.
- 学习曲线较陡峭：WebStorm 功能非常丰富，因此学习曲线较陡峭，需要花费一定的时间和精力去学习使用, 尤其是内置的一些高级功能, 需要我们花费大量的时间和精力去研究.
- 占用资源较多：WebStorm 占用的资源较多，需要你的电脑配置相对比较好一些, 不然没办法流畅的运行.
- 只适用于 Web 开发：WebStorm 是专门为 Web 开发设计的 IDE 工具，因此对于其他类型的开发可能不太适用. 这就是 JetBrains 公司的特点, 做什么都专精一个, 比如他们会有对应 PHPStorm, JavaStorm 来支持其他语言的开发.
258
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
