青翼

CSDN 地址 GitHub 地址
文章 分类

大二小学期————搭建一个网购平台

2024-11-08

用IDEA配置web项目坑点

用IDEA配置web项目坑点环境问题Day 2Mybatis框架Java框架基础知识在entity层开发Mybatis框架使用mapper层开发mybatisDay 3使用注解的mybatis实现:web基础知识实现取出数据到页面中Day 4分页查询摇乐购工程创建Day 5摇乐购项目摇乐购项目广告轮播实现摇乐购项目登录功能实现登陆后显示用户名实现WeeK 2Day 1完成用户手机验证注册功能1、导入相应依赖jar包2、补全User类成员3、编写dao层接口4、编写工具类CheckCodeUtil5、编写Service层UserService6、编写control层UserServlet7、修改jsp,以及相应jsBUG纠错:1、将ShangYi.jsp重命名为shoplist.jsp2、声明shoplist类3、dao层实现ShopInfoMapper4、在untils包下实现PageBean类,和之前完全一样5、实现业务层ShopInfoService6、新建ShopListServlet并修改端口名为shoplist7、在Index.jsp中新增超链接8、shoplist.jsp需要修改9、效果:Day 2实现筛选展示1、实现ShopInfoVO类,商品信息视图2、实现dao层接口3、测试4、修改ShopService层5、servlet实现6、web端修改物品详情页1、改名为shopdetail.jsp2、新增shopmingxi类3、shopdetail.jsp4、shopinfo新增成员5、dao层实现shopinfo和shopmingxi的查询6、service层新增通过id查商品信息以及明细7、首先实现shoplist.jsp中点击事件的跳转8、实现ShopDetailServlet9、修改shopdetail.jsp点击颜色按钮图片部分消失问题:添加购物车实现1、实现Shopcart类2、实现dao层3、测试方法Day 3续添加购物车4、dao层补充一条通过用户id以及商品id商品颜色商品尺寸查找是否有该记录5、编写Service层6、ShopDetailServlet7、用户登录问题(非标准答案)本地与web端不同步购物车页面实现验证Day 4订单页1、在utils包中实现生成UUID工具类2、实现如下这些类3、实现OrderInfoService4、ShopcartServlet的补充5、web端实现交易页1、拷入jar包2、安装AlipayKeyTool以及注册支付宝沙箱3、在untils下新建AlipayConfig类4、OrderInfoMapper新增5、OrderInfoService6、新建两个Servlet7、新建两个jsp页面Day 5退出功能验证码功能1、导入servlet2、index.jsp界面3、修改IndexServlet的post方法4、index.jsp界面5、RandomServlet.java

 

环境问题

利用IDEA创建一个Web项目

所有JDK要和系统路径的一致,保证没有多个JDK

Tomcat启动失败问题

 

执行语句的问题

IDEA不能输出中文的问题

 

Day 2

Mybatis框架

Java框架基础知识

  • entity层,实体层,用于存放实体类,与数据库中属性基本保持一致,实现get和set方法
  • mapper层,别名dao层,对数据库数据持久化操作,其方法语句直接针对数据库操作,主要实现一些增删改查操作
  • service层,业务层,给controller层的类提供接口调用,一般声明自己写的方法,具体实现在servicelmpl中
  • control层,别名web层,控制层,负责具体模块的业务流程控制,需要调用service逻辑涉及的接口来控制业务流程。controller层通过接收前端H5或者APP传来的参数进行业务操作,再将处理结果返回到前端。

在entity层开发Mybatis框架

项目结构:

image-20230627181931888

需要将mybatis-3.4.6.jar文件移入./web/WEB-INF/lib下(即导入依赖包)(不是lib目录下,根据之前指定的依赖包路径决定依赖包放置位置)

ShopInfo文件的编写:

1、确定ShopInfo类的成员(即读取的数据条目的表头属性),并且为该类的成员编写get & set方法,自动生成代码的方法:光标放置在某一成员上,右键点击generate,选择getter and sentter。本例子中有三个属性,因此生成三个get,三个set IDEA代码生成Generate_idea generate CSDN博客

最后再生成to string方法,用于将读取的数据以string类型输出,并且实现字符串拼接。

@Override是伪代码,表示重写(当然不写也可以),不过写上有如下好处: 1、可以当注释用,方便阅读; 2、编译器可以给你验证@Override下面的方法名是否是你父类中所有的,如果没有则报错。例如,你如果没写@Override,而你下面的方法名又写错了,这时你的编译器是可以编译通过的,因为编译器以为这个方法是你的子类中自己增加的方法。

最终代码如下

 

ShopInfoMapper.xml文件的编写:

该文件用于编写封装的session方法中如何调用数据库的接口,即select中间的内容,一对select中是一条语句,可以增加,每对select中定义一条mysql语句,以及其调用id,以及返回值类型,本例中返回类型是ShopInfo代表上文中的ShopInfo类

这里的类型需要增加命名空间来指向本项目下的具体类

 

mybatis-config.xml文件的编写:

是mybatis的配置文件,用于确定所关联的数据库基本信息,需要修改driver驱动器,url接口,username登录用户名,password密码,来连接对应数据库

如果构建的不是空项目而是web项目,则需要将Mybatis-config.xml文件放置在resource默认源目录下

注意附上的注释

 

测试文件MybatisTest的编写:

该文件用于测试mybatis框架是否搭建成功,

SqlSession是MyBatis的关键对象,它是应用程序与持久层之间交互操作的一个单线程对象,类似于JDBC中的Connection。SqlSession对象完全包含以数据库为背景的所有执行SQL操作的方法,它的底层封装了JDBC连接,可以用SqlSession实例来直接执行被映射的SQL语句。

mybatis框架过程

  • 定义一个Configuration对象,其中包含数据源、事务、mapper文件资源以及影响数据库行为属性设置settings
  • 通过配置对象,则可以创建一个SqlSessionFactoryBuilder对象
  • 通过 SqlSessionFactoryBuilder 获得SqlSessionFactory 的实例。
  • SqlSessionFactory 的实例可以获得操作数据的SqlSession实例,通过这个实例对数据库进行操作

本例子的SqlSessionFactoryBuilder是通过XML配置文件构建出的,而不是通过Java代码生成的

idea报错,Cannot resolve symbol ‘junit

 

使用mapper层开发mybatis

mapper层(dao层)实现mybatis开发,它可以不用写实现类,它能以代理方式自动生成实现代码。

但是,使用mapper开发,必须遵循以下原则:

  • mapper.xml文件里的namespace属性值和接口必须一致
  • 接口中的方法名必须和mapper.xml中的id保持一致
  • 接口中的方法名必须和mapper.xml配置中的resultType保持一致
  • 参数的类型保持一致(在有parameterType参数的情况下)

 

项目结构,新增dao层文件夹:

image-20230627203958183

 

针对dao包下的ShopInfoMapper:

定义了两个方法,具体实现再xml中,需要保证定义的方法满足之前的mapper开发准则

这里需要定义的是一个接口interfa,而不是类class需要注意

 

针对ShopInfoMapper.xml:

类似entity层的开发,mapper层需要遵循的规则体现在接口的实现上

 

针对mybatis-config.xml的修改:

这里是关于mybatis的配置文件,因此当有新增的mapper实现的时候,需要在这里新增对应的源文件

注意代码中附上的注释

 

测试文件MybatisTest的修改:

比起entity层的调用更方便

 

Day 3

使用注解的mybatis实现:

mybatis的注解和xml方式不能同时对于同一个方法使用,因此该部分需要删除对应方法的xml文件再编写注释。

 

ShopInfoMapper的修改:

只需要再注释内新增sql语句

 

mybatis-config全局配置文件的修改:

需要新增带有注解方法的路径

 

 

对于测试文件的便捷实现:

新增before和after方法,在每个方法前自动实现sessionFactory的创建与session的实例化,以及在方法结束后对于session的回收关闭

before&after是java默认方法,自动执行

 

数据项插入、更新、删除的实现:

1、在ShopInfoMapper中新增对应的注解

2、在测试中实现相应测试方法

 

事务需要提交以及回滚,类比github库的推送与回滚,在mybatis中提交 session.commit();

web基础知识

HTTP协议是对请求/响应内容的规范

请求/响应都是静态文本,string类型,响应回的内容只能是HTML,表示静态资源

响应码

  • 200:正常
  • 404:未找到资源
  • 500:服务器内部错误

 

Servlet: 接受并处理请求request;响应结果,服务端的控制器

JSP: 返回一个网页

Tomcat(容器):一个开源小型好用的web应用服务器(用来运行JSP和Servlet)

tomcat添加

Tomcat启动失败问题

 

创建一个Servlet

1、将tomcat包下servlet依赖导入项目指定lib目录下

右键new还是没有servlet则在File-->project struct中找到Modules栏勾选最下方Source Roots,先点apply应用设置,再点close关闭

2、新建一个servlet项目

 

response.getWriter()返回的是PrintWriter,这是一个打印输出流

  • response.getWriter().writer(),只能打印输出文本格式的(包括html标签),不可以打印对象
  • response.getWriter().print(),不仅可以打印输出文本格式的(包括html标签),还可以将一个对象以默认的编码方式转换为二进制字节输出

image-20230628150048273

 

fush:输出缓冲

  • flush是把流里的缓冲数据输出,flush以后还能继续使用这个OutputStream
  • close是把这个流关闭了,也就是说以后这个OutputStream就不能用了,不过关闭之前会把缓冲的数据都输出

 

 

实现取出数据到页面中

报错:Cannot resolve method 'getResourceAsStream' in 'Resources'导入apach下的包而不是javax

Servlet的访问 eg: http://localhost:9527/ustb01/test.jsp

其根目录是Web目录

 

1、编写service层的读取数据库数据的类ShopInfoService

 

2、编写控制端Servlet服务

这里调用Service层的方法读取数据,并将数据放入request域中。request域是在Service层以及web端都可以被访问的域,因此将数据放入该域可以发送request以及response请求到index界面,但request仅在当前请求有效。

这里的Servlet服务的值是/hello,因此在后续查看的时候应该查看hello端口,而不是index初始端口

 

3、页面端的接收数据:

 

 

Day 4

新构建Mybatis工具类,包含Session工厂的建立与session的返回

static代码块,在加载类的时候自动初始化(执行该代码块内内容),只能在该类被加载的时候执行一次

 

Service层的重构,使用Mybatis工具类更简单的调用Mybatis,以及溯源异常并抛出,最后保证session的释放

 

分页查询

1、在dao层新增对于数据库的分页查找mysql语句,并利用@param进行参数绑定

2、声明一个pageBean类,用于存储有关于页面信息的数据,例如每页条目数,查询第几页,etc

这里使用了泛式编程,方便之后利用该范式存储不同类型的数据进行分页查询

3、在业务层(service)进行计算,连接控制层以及dao层,从控制层读取需要查询的页面数以及每页条目数,通过计算并调用dao层的查询结果,保存结果在pageBean的resultLIst中

4、控制层,完成从web端接受、解析请求,并执行,最后将结果返回web端的功能。

接收到分页查询需求,并得到参数p的值。调用业务层的分页查询方法,并得到返回的resultList,放入request域中,展示在web端

 

利用url传参,例如

 

设计底部页面导航栏

方式一

手动添加页

仅需要在底部增加跳转超链接即可

 

方式二

自动生成页码,可根据数据条目数变化

1、需要知道一共有多少条数据,相应sql语句如下

1的用意是在查询结果每一行后都新增一个1,count只用计数1的个数,猜测这里使用了规约算法快速统计

因此在dao层添加相应的条目数查询语句

需要在MybatisTest中进行测试dao层能否正确的取回条目数

 

2、业务层需要完善PageBean实例的其余参数设置,通过调用dao层的查询条目数,完善totalCount参数的设置,之后通过必要的计算得到相应的页面数,返回pageBean实例回控制层

 

3、相应的在控制层需要修改,此时传递给web端的不再是resultList了,而是pageBean,包含了所有的page信息

image-20230629144211356

 

4、web端由于接受到的变成pageBean,所以需要读取的是其中的resultList成员,并且循环产生超链接

image-20230629144354061

底部导航栏代码的变动

 

 

摇乐购工程创建

1、创建module

File->new->module,设置相应的名字,路径,这里命名为yaolegou,后续操作均在yaolegou模块下进行

 

2、添加框架

右键yaolegou,Add Framework Support,勾选Web Application和web.xml,并点击OK

 

3、添加依赖

在web/WEB-INF中创建lib目录(Directory),在File->Project Structure中,侧栏选择Modules,选择yaolegou项目,添加依赖(Dependencies) 选择创建的lib目录路径,依赖类型是Jar Directory。最后将前三天工程lib下的依赖包复制移入该路径下,完成依赖的设置

 

4、导入页面文件

将yaolegou-页面文件内所有全部复制到web目录下

 

5、设置Tomcat

image-20230629164138505

左上角加号后选择Tomcat Server里的Local

修改名字以和之前项目的tomcat区分,也可以删除之前项目的tomcat,笔者选择设置名字为tomcat

点击右下角的fix添加artifacts

image-20230629164350504

点击+,artifacts,选择添加本项目的,名字为yaolegou的那一项

image-20230629164459388

同时此时可以修改后续访问的url名,不喜欢_war_exploded后缀可以删除。选择Apply应用,ok确定

 

6、重定向初始界面

由于Tomcat默认index.jsp为首页,这里我们删除原本的index.jsp,使用名为ShouYe的页面为首页,有多种方法重定向,笔者选择修改WEB-INF下的web.xml文件,添加初始页面

 

7、设置一些包

在edu.ustb.manager路径下依次new出controller、dao、entity、service、test、utils

image-20230629165622190

 

 

8、设置mybatis-config.xml

在edu.ustb.manager路径下直接new,内容从上一个工程复制,注意修改mapper路径

 

Mybatis分页插件PageHelper

 

 

Day 5

摇乐购项目

摇乐购项目广告轮播实现

1、新建entity下的Banner类

需要和mysql table中的名字一致方便调试

右键生成get set方法,为了方便调试也可以生成toString方法

 

2、新建dao下BannerMapper接口(Interface)

从之前项目复制即可,注意读取的是banner表而不是shopinfo表

3、业务层Service,service下的BannerService类实现业务层的功能

同样从之前项目复制,这里变为Banner类即可

这里出现了MybatisUtil,因此我们直接从之前项目复制写好的工具类丢入utils package下

MybatisUtil工具类注意复制时修改resources路径为本项目路径,eg:edu/ustb/manager/mybatis-config.xml

 

4、实现Servlet,控制层命名为IndexServlet

右键new->servlet,如果右键没有请在project structure中勾选本项目的source root

这里将ShouYe.jsp重命名为Index.jsp相应的Day04中修改的默认主页也要相应改成Index.jsp

根据之前项目仿写

需要记住的是这里我们将轮播广告的信息list命名为BannnerList,因此接下来需要查找Index.jsp中的BannerList,而不是list

 

5、Index.jsp的修改

目前已经实现了将BannerList发送至web端,因此这里需要修改相关信息与list中的成员名一致,即一步骤实现的成员名

ctrl+F查找到轮播广告区块

 

6、纠错

如果网页不能正确显示相应图片,需要进行纠错

在test package下新建MybatisTest类并编写以下程序,前提是在第一步骤中自动生成了toString()方法

右键TestSelectAll()方法进行测试,如果能正确输出相关信息

image-20230630101348329

那么说明dao层及以前层都正确,问题出在Service层Servlet层或者jsp层

  • Service层需要检查MybatisUtil工具类编写的源路径是否正确
  • Servlet层检查是否发送到正确的页面,eg /Index.jsp or /index.jsp,检查页面的拼写正确
  • jsp层需要检查成员拼写是否与第一步骤中一致,BannerList拼写是否与Servlet层中发送到request域的一致,需要注意三点是可以点开的,可以复制步骤一中拼写直接覆盖。
  • 查看结果的时候因为Servlet实现的端口位于/IndexServlet,因此查看的url地址为:localhost:8080/yaolegou/IndexServlet
  • 目前应该只能实现两种图片轮播,不过观察到文件中存在Banner3.jpg,因此修改数据库banner中第三行的img路径最后图片名为Banner3.jpg就可以实现三张图片轮播,之后不断增加数据库与文件夹image/index_image/中的图片就可以实现轮播广告的扩增

 

摇乐购项目登录功能实现

ajax异步请求,完成请求功能,优点略

jquery框架,封装好JS的框架

1、声明user类用于存放用户信息

并生成相应的set&get方法以及toString方法用于测试

 

2、写出对应的dao层

根据用户名查询单条用户信息,这里用了表连接的方法同时查询两张表

 

3、在业务层进行判断,并且返回判断信息

这里的返回信息需要和Index.jsp里面的判断条件相一致才能完成跳转以及弹窗

 

4、控制层功能实现

这里为了方便与IndexServlet写在一起,原理:Banner广告展示只用了get方法,而不是用post方法,而登录信息只是用了post方法,这样写只是为了方便,但是实际妨碍后期调试

 

5、web端

这里需要修改请求的端口与实现的一致,具体端口名是实现相应功能Servlet的val值

因此需要修改如下,这里笔者将成功登录后的页面设置为跳转回首页,具体可以根据喜好更改

 

6、调试

在MybatisTest中同样编写TestUserSelectAll()方法来测试能否通过用户名从数据库提取出相应用户信息

如果能正确输出,表示数据库到dao层没有问题。

此时打开网页,按f12打开控制台,查看控制台的输出来确定错误位置

 

 

登陆后显示用户名实现

request域仅能在当前请求存在,如果跳转则请求不存在。因此引入 ?会话域? (未引入)

1、在业务层新增返回user类的方法

 

2、Servlet层

新增如果校验结果为true,则加载user信息,并将user类放入request域中命名为user

image-20230630173934673

 

3、web端

在jsp页面中找到相应位置,修改命名与控制层一致

登录效果

image-20230630174048488

 

卷王任务:

1、登录功能基础上列表页,加上分页

2、手机短信校验流程

 

 

WeeK 2

 

Day 1

完成用户手机验证注册功能

1、导入相应依赖jar包

2、补全User类成员

User类应该包含两张表的内容

 

3、编写dao层接口

复制粘贴之前的实现

 

4、编写工具类CheckCodeUtil

用来随机生成验证码的复制工具类位于utils包下

 

5、编写Service层UserService

UserService类中需要额外添加如下方法

下面代码中需要填写自己的KeyID,Key,签名名称,模板CODE,需要在阿里云官网查看,此处不赘述如何查看

 

6、编写control层UserServlet

这里首先需要修改相应端口为reg,因此后续web端中所有请求应该向reg请求而不是ZhuCe.do

 

7、修改jsp,以及相应js

ctrl+f搜索ZhuCe.do全部改为reg,例外关于按钮响应的action请求端口也都要改为reg

ZhuCe.js部分代码

ZhuCe.js部分代码

ZhuCe2.js部分代码

可能修改地方有所遗漏,理解servlet是什么的情况下多用ctrl+f查找自己就能看懂代码,知道需不需要修改

 

BUG纠错:

打开页面按f12查看控制台报错

问题1:404 notfound ZhuCe.do但是已经修改了jsp中所有ZhuCe成reg了?

按下f12查看源码,发现网页端的源码并未修改,依旧请求ZhuCe.do

解决方案:

1、IDEA web项目代码改动了却不更新解决

2、如果仍然解决不了,例如笔者,可以考虑将浏览器设置为其他浏览器,eg: chrome浏览器,或者清除浏览器缓存,重启电脑等手段。大概率是在tomcat设置中修改浏览器即可解决,不推荐网站中的方法,容易造成其他问题。

3、删除之前发布的内容,清空缓存,再次发布

 

问题2:单步调试无法调用阿里云发送短信套件,即使换为官方文档也不可以

解决方案:

将JDK换成1.8,笔者试过20.0,1.7都不可以,1.8版本刚刚好,官方给的实例不可以使用,建议使用第五步代码。

jdk1.8下载与安装教程

由于之前已经下载过jdk,因此配置环境时,只需要修改JAVAHOME的路径即可,可以在cmd中用java -version查看是否是1.8版本

之后在project struct中修改project的jdk版本即语言等级如下图

image-20230703160328129

同时修改Modules->yaolegou->Dependencies的SDK为1.8版本

如果没有1.8版本可以restart IDEA或者直接将路径设置为jdk1.8安装路径

 

问题3:Code -> isv.BUSINESS_LIMIT_CONTROL

发送短信数到达上限,即每分钟最多1条,每日最多10条

image-20230703155706481

解决方案:

等第二天,不推荐修改每日上限(富哥除外),即使修改每日最多40条短信

 

商品页面分页查询实现

1、将ShangYi.jsp重命名为shoplist.jsp

 

2、声明shoplist类

这里的大小写需要与shoplist.jsp中一致,需要注意检查,用ctrl f快速查找

 

3、dao层实现ShopInfoMapper

完全复制之前实现的代码

 

4、在untils包下实现PageBean类,和之前完全一样

 

5、实现业务层ShopInfoService

 

6、新建ShopListServlet并修改端口名为shoplist

目前只实现部分功能,不具备点击页面跳转功能,页面只是装饰,看着有就行

 

7、在Index.jsp中新增超链接

ctrl+f 上衣 修改为如下图

image-20230703203037586

并没有使用请求转发,而是直接访问shoplist端口,请求转发是指访问的端口转向另一个端口。

 

8、shoplist.jsp需要修改

需要与自己写的shopinfo类以及pagebean类成员名一致,不要直接复制

 

 

9、效果:

image-20230703203512355

 

 

Day 2

补全翻页功能,由于在jsp界面表单提交到post请求中,因此此处使用请求转发,在doPost中转发到doGet方法,即可实现读取与翻页,代码如下

 

实现筛选展示

1、实现ShopInfoVO类,商品信息视图

该类中封装了商品的筛选信息

 

2、实现dao层接口

能通过筛选信息查询数据库,这里通过脚本语言判断来添加limit信息,为了分页查询需要实现两个方法:通过筛选信息查询ShopInfo、通过筛选信息查询条目数

 

3、测试

在Test中测试上述两个方法,以确定dao层以前是否能达到预期

 

4、修改ShopService层

之前实现的是所有信息查询,现在需要添加上带有筛选信息的查询,底层实现已经完成,因此只需要将对应位置修改为底层实现接口即可

 

5、servlet实现

需要读取表单信息并放入封装好的ShopInfoVO类中,进行查询.

目前暂未实现按照销量、热度排序

 

6、web端修改

由于jsp的请求端口在week 2 day 1 已经修改,且ShopInfo的成员命名也已经全部统一,因此已经不需要修改

 

 

物品详情页

1、改名为shopdetail.jsp

 

2、新增shopmingxi类

包含如下成员

 

3、shopdetail.jsp

新增自动缓存以及缓冲大小100kb

 

4、shopinfo新增成员

 

5、dao层实现shopinfo和shopmingxi的查询

 

6、service层新增通过id查商品信息以及明细

 

7、首先实现shoplist.jsp中点击事件的跳转

 

8、实现ShopDetailServlet

控制层通过接收由shoplist点击事件传来的shopid,再调用服务层的查询方法,最后放置对应的信息到request域中

 

9、修改shopdetail.jsp

通过ctrl+f搜索si,将所有si.xxx格式的xxx修改的和ShopInfo类中成员名一致,以及请求端口修改的和ShopDetailServlet的val参数一致

 

如果出现了找不到context成员的问题,且换浏览器,重启,删除再发布包都无法解决,可以用该命令调用成员方法,避开直接调用

 

点击颜色按钮图片部分消失问题:

没听,不点击颜色按钮即可解决

 

添加购物车实现

1、实现Shopcart类

 

2、实现dao层

ShopcartMapper

 

3、测试方法

插入测试

去数据库gouwuche表单下刷新查看

搜索测试

删除测试

根据用户名测试的代码不小心覆盖了,和根据id搜索极为类似,可以自行尝试实现

 

Day 3

续添加购物车

4、dao层补充一条通过用户id以及商品id商品颜色商品尺寸查找是否有该记录

 

5、编写Service层

用于逻辑判断,首先查询之前是否添加过该记录到购物车中,添加过则只修改数量,没有添加过则调用additem方法添加

 

6、ShopDetailServlet

在原有的基础上新增State=add状态

从前端读取商品信息,并封装在shopcart类中,之后调用业务层添加到购物车(购物车中是否存在该商品的逻辑判断在业务层已经实现)

 

7、用户登录问题(非标准答案)

这里由于已经在跳转的同时保存了request域进行转发,因此只需要修改各jsp页面能正确读取到用户信息即可

 

shoplist.jsp需要修改

搜索user将所有user.xxx后面的xxx修改的名字与User类中成员一致

shopdetail.jsp需要修改

ctrl+f搜索ui将所有ui.xxx后的xxx修改的名字域User类中成员一致

即可保证在首页登陆后,每个页面都可以读取到用户信息,并且依次传递给下一个页面

 

本地与web端不同步

Edit configurations->deployment清除

右键清除

image-20230705101119421

 

购物车页面实现

 

没有听课笔者自己的实现方法,并不标准,但是至少能跑

1、考虑到页面中存在zhuRenUser,因此扩充Shopcart类添加zhuRenUser成员

 

2、dao层实现

由于涉及到数据库的查询,考虑到购物车是按照用户视图来查看的,每个人只能看到自己的购物车,且只能增删改查自己的购物车,而新增商品在商品详情页已经实现,这里只需要实现修改商品个数、查询自己购物车数据以及删除该条目商品

其中查询购物车数据又分为,通过购物车id来查询单挑数据,以及通过用户名查看该用户名下所有商品,因此有两条关于查询的实现

不过由于zhuRenUser在另一个表,因此我们查询时需要用到多表连接查询

查询

修改数量

删除

 

3、业务层实现 这里在ShopcartService的基础上封装了在dao层新实现的数据库交互逻辑

!!涉及到数据库数据修改的操作一定要加commit提交!!

 

4、Servlet层实现

为了区分开,这里新构建一个Servlet命名为ShopcartServlet,并将端口值命名为Shopcart

该控制层主要针对购物车页面。

  • 在其余页面的顶部可以通过跳转来到购物车界面,此时State状态为null。通过查看GouWuChe.jsp我们发现前端会传递用户相关信息,因此可以利用用户的信息进行查询相关数据调用在业务层实现的通过用户名查询购物车数据即可。
  • 在GoWuChe的加减物品数量的时候会访问该端口,并且State状态为"AddCount"||"JianCount",需要进行Update操作,加减通过状态参数判断,之后将修改后结果传递给业务层即可。
  • GoWuChe界面进行商品条目删除也会访问该端口,此时只用直接调用业务层的delete方法即可

 

5、web端

为了方便调试,在index.jsp中添加购物车的超链接,并且传递用户信息

 

给的GouWuChe.js存在问题需要修改两个地方

不修改会造成更新个数与删除不成功的问题

1)222~224行交换shopid和id后面eq()括号中的参数,交换后如下

 

2)190~192行同样是shopid和id后eq()后两个参数,交换后如下

 

为了方便知道是否成功修改数据库,加上一个弹窗告知是否修改成功

194行附近

226行附近

276行附近

 

在GoWuChe.jsp页面中需要修改所有的user.xxx后的xxx需要和User中一致

如果碰到user.userinfo.xxx的情况我们并没有在user中嵌套类,因此直接删除userinfo,改成user.xxx且xxx名字和user中一致

所有可能请求Shopcart端口的地方经过排查都在GouWuChe.js中,

只需将GouWuChe.js中的所有端口改成Shopcart

由于修改名字地方大小写地方过多,不在此罗列,可以直接运行页面,如果报错404not found的时候会报出没有找到的行数,附近代码,可以快速定位没有修改的地方。

 

验证

注意gouwuche数据库可能是空的,需要先添加物品在购物车中,可以在数据库中手动添加,也可以在页面中点击添加到购物车的按钮添加。

在GouWuChe页面按加减号修改数量后在数据库中验证数量是否同步修改,如果没有同步修改,可以在mybatistest中测试验证正确性,排查错误地点。

 

Day 4

订单页

1、在utils包中实现生成UUID工具类

UUID相应jar包如下

uuid下载地址

 

2、实现如下这些类

image-20230706131328555

  • City.java
  • Distric.java
  • OrderInfo.java
  • OrderItem.java
  • OrderState.java
  • PayType.java
  • Province.java
  • SHAddress.java

 

3、实现OrderInfoService

 

4、ShopcartServlet的补充

Why:为什么修改补充在ShopcartServlet?

原理:清空购物车的时候,点击提交按钮就会自动产生商品信息,可以查看GouWuChe页面的提交按钮触发点击事件的时候,会访问Shopcart端口,并且参数State设置为submit。

Why:Shopcart端口又如何跳转到交易页面?

原理:通过请求转发,当携带submit访问Shopcart端口的时候,该端口进行逻辑处理,并封装好信息到request域中,之后通过如下命令,将请求转发到order.jsp,如此便实现了页面跳转的同时并且在后端实现了信息处理,并且是隐式传参,安全性较高。

 

 

以下只展示State==submit的代码,其余部分之前已经实现

 

5、web端实现

在钉钉下载order.jsp替换原本的order.jsp

修改GouWuChe.jsp第122行请求地址

 

在order.jsp中确保所有yyy.xxx的成员与实现的yyy类中成员命名一致,yyy可能与类名不一致此时可以通过查看其yyy的items值并且在ShopcartServlet中找到items对应的真实类名对应

image-20230706133809919

找不全也可以通过直接运行程序,通过报错快速定位not found的行数,再进行修改

 

交易页

 

1、拷入jar包

alipay-sdk-java-4.34.86.ALL.jar

commons-logging-1.2.jar

2、安装AlipayKeyTool以及注册支付宝沙箱

下载AlipayKeyTool-2.0.2.exe到默认C盘地址(之后称之为软件端)

支付宝沙箱模式官网(之后称之为网页端):https://open.alipay.com/platform/appDaily.htm?tab=info

网站支付官方文档(遇到问题再看):电脑网站支付快速接入 - 支付宝文档中心 (alipay.com)

3、在untils下新建AlipayConfig类

直接拷贝钉钉群中AlipayConfig.java代码,删除app_id、merchant_private_key、alipay_public_key的参数后续需要填写自己的参数

在软件端中生成公钥和私钥

image-20230706160546037

私钥设置为AlipayConfig.java中merchant_private_key

将公钥复制输入到沙箱支付网页端,在加签内容配置粘贴公钥,点击生成,得到支付宝公钥,复制到AlipayConfig.java中alipay_public_key处

image-20230706144310610

 

在网页端的沙箱工具处扫码下载沙箱支付宝APP,在网页端的沙箱账号处得到买家的账号和登录密码,在沙箱支付宝APP中可以登录买家账号,账户余额可以自己充值然后发个pyq

在下载的支付宝沙盒版,登录虚拟的买家账号,不是真实的账号

image-20230706145219984

 

4、OrderInfoMapper新增

 

5、OrderInfoService

新增一个方法

 

6、新建两个Servlet

OrderPayServlet

 

PayResultServlet

 

7、新建两个jsp页面

order/success.jsp和order/alipay.jsp

alipay.jsp

success.jsp

 

测试的时候用虚拟买家的账号扫码即可,钱不够可以去页面端充值

 

Day 5

退出功能

 

 

验证码功能

1、导入servlet

下载钉钉群的RandomServlet.java代码到controller包下

 

2、index.jsp界面

125行左右,注释掉原本的,并新增一行,如下

 

3、修改IndexServlet的post方法

 

4、index.jsp界面

35行左右修改

 

5、RandomServlet.java

50行改-为_