java实战——落饼Shop（WEB版）

我终于想起还有CSDN这个东西，来丰富一波为数不多的公主号代码库~

今天带来的是WEB版的小商城（PS：GZH里头有前端的完整代码提供，下面讲的东西包含后端（继续PS：清空购物车么写））

一、界面效果

二、关键代码简介

·前端

1.header.jsp头部

 

 

c:if标签 进行判断比较，根据不同的登录状态显示不同的内容

普通用户

 

管理员用户（只有admin，账号密码均为admin）

 

这部分代码从服务器读取分类号大于1的分类列表（后端设置分类号大于1的才在前端显示，分类号小于1的用于搜索如爆款、热卖商品等）

“xxxxxx...method=classifyList”为post的url地址，经servlet转换后返回前端数据

function是回调函数，在后端返回相应值后进行相关操作

“json”是读取格式，这里设置为json那么后端返回的格式一定得是json格式，否则不做处理

2.footer.jsp尾部

 

这里可以跳转info.jsp页面，有一些展示信息，后面跟的#section-x表示跳转对应节，具体内容看下一点

3.info.jsp介绍页

 

设置ul对应的class将其变成导航栏，需要注意整个程序代码使用的是bootstrap框架，后面不再解释，这些都是bootstrap自带的，可以参考对应的菜鸟教程https://www.runoob.com/bootstrap/bootstrap-tutorial.html

4.optClassifies.jsp bootstrap的table

 

这里进行table的初始化工作，相应的注释在代码里头，就不重复了

 

重新加载表数据，因为这里写的返回类型是”text”，所以导入数据时需要用JSON.parse转换一下，table用的数据格式一定是{“total”: 10, “rows”:{{},...,{}}}

删除某行，field是上上那张图的columns的对应field，一般使用的时候需要保证这个值是唯一的

插入某行到末尾，index是插入位置，row是插入的数据

更新table也是一样

5.optClassifies.jsp bootstrap表单form

 

头两个框是创建bootstrap的form的固定格式class，第三个框加的form-control能够让form里头的东西对齐，更美观。

6.optGoods.jsp 输入框、按钮

 

 

下拉框控件，可以自己直接写死<option>，也可以动态写入<option>

像text、number、date、submit都是常用的输入框类型

按钮，bootstrap有内置的按钮样式，见第二个框。Onclick是点击事件

7.bootstrap布局

Bootstrap把每一行分成12块，行高跟每一行里头块最高的相同，使用时自div中加相应的class=”col-md(或者xs或者其他的一些)-x(大小，在1到12之间)”，间隔可以用col-offset-md-x

8.jq选中对象

Jq语法$(‘#xxx’)，#表示根据id选择，$(“.xxx”)，.表示根据class选择，也可以用类似于input[class=’xx’]来选择input当中class有xx的dom结点，其他的选择器可以参考jquery的菜鸟教程https://www.runoob.com/jquery/jquery-tutorial.html

·后端

1.c3p0-config.xml c3p0配置

 

配置c3p0连接池

2.web.xml servlet、filter（这里没用到）配置

3.utils->DataSourceUtil.java 使用连接池

直接复制使用就行

4.servlet->BaseServlet.java 自定义Servlet基类

 

用来解析前面前端的method=xxx，调用相应的函数完成功能，也是直接用就行

5.servlet->CartServlet.java 购物车Servlet

 

获取前端传递的参数，比如前端的url是xxxx?uusername=123456&xxx=xxx，在这里就能取到123456

 

获取session，setAttribute设置属性、removeAttribute删除属性，可以在前端的html中用${cartList }的方式来使用

设置返回前端的数据编码格式，write返回前端数据，可以在回调函数当中取得

6.dao->CartDao.java Controller层操作数据库

获取链接对象，写相应的sql语句，insert、delete、update用runner.update，select用runner.query。

 

这里画框的处理器，像这里的取一个值的话一般用的就是ScalarHandler，像单个的Bean（就是domain里头写的操作对象），可以用BeanHandler来处理（自动封装），列表的话就用BeanListHandler处理。

（大大的PS：其他功能还有的吧，自己找一找！！！）

三、获取方式

对，跟往常一样请前往公主号：落饼枫林，发送->落饼Shop，获取前端完整代码（PS：只前端挺好的我觉得）