Web收银台系统[项目] -- (5) 商品浏览页面

1. 商品浏览页面的逻辑图

浏览页面的流程:

       当进入浏览商品页面, 会直接通过ajax(阿贾克斯)向后端发送请求, 此时因为使用 jQuery库写的, 库里面是有ajax这个函数的, 向后端发送这个请求之后, 对应的servlet进行接收, 接收到请求之后, 去数据库进行查询, 然后把在数据库查询到的所有信息返回给servlet. 然后后台服务器对应的servlet会把接收到的数据以 json 的形式发送回客户端.

也就是说客户端通过 ajax 请求, 接收回来的是一个 json字符串, 然后对 json字符串进行解析

2. goodsbrowse.html中这里不能写死, 因为写死了就是在前端代码里固定的添加数据, 而不能实现在网页上进行动态的添加数据

    要对网页进行编程, 使其可以实现动态的往进插入数据后, 更新出来被浏览

要对网页进行编程, 使其可以实现动态的往进插入数据

就需要在goodsbrowse.html里添加script标签, 在里面写js代码

这里用 jQuery库写, 如果用 jQuery库写, 这里就需要引入 js

3. 接下来需要用到一个非常重要的知识点

$ 符号就代表是 jQuery的简写

4.这里再新建一个浏览商品的servlet, 进行操作数据库, 返回信息

即 GoodsBrowseServlet

5.因为查询的内容是整张表的内容, 都放在了结果集. 那么就应该将这张表的所有内容解析出来 , 即解析结果集里的内容

       将所有的goods解析出来, 放在list里面 因为现在结果集里面放的不是一个对象, 要将结果集里的所有货物解析成对象 把这些对象都放在list里面, 把list再转成字符串 要发送给前端页面一个 json 字符串, 这个 json字符串一定是把它解析过一遍的, 不可能把结果集发送过去. 因为前端无法解析结果集 因此要在后端把商品准备好

把list转换为Json, 然后发给前端进行解析 将list转换为Json, 需要用到一个中间对象, 也就是pom.xml里的Json依赖, 如图

pom.xml里的Json依赖是为了给ObjectMapper使用.
ObjectMapper 作用是"可以方便的将模型对象(即数据)转化为Json"

6. 若GoodsBrowseServlet里执行成功, 如下图

这段代码所做的事情就是 : 将list转化为 Json, 再将Json传给前端

前端和后端要通过 流 进行传输. 这里的 流 使用的是printWriter

 

则会来到goodsBrowse.html里执行如下图这条语句

以上, 后端的代码就写完了,

打印一下 consle.log(data); consle.log(data.length); 看一下data里面是什么字符串

debug调试后, 在弹出的页面登录后,  来到这个页面,按F12打开开发者工具, 选择console.

在这个页面可以看到data以及data.length. 后端所有的数据, 前端都已经接收到了.

有7个商品, 所以data.length 长度为7

7. 需要自己在前端页面写代码, 使得在网页上进行改变数据就直接可以操作 (即动态的往进插入数据).   而不是写死, 固定生成的数据信息

因此, 要用"字符串的形式"将表格中行的每个信息拼接起来

s += "" + data[i].id + ""; 也可以写成: s += "" + data[i]["id"] + "";

8.

如果只修改了前端的代码, 没有修改后端的代码, 就只需在IDEA里点个刷新.