天猫商城在线购物系统

天猫商城在线购物系统

本博文对Gitee开源项目 SpringBoot迷你天猫商城（Mini-Tmall）中的商品管理和商品分类管理进行讲解。
在此也感谢开源项目作者@贤趣项目小组
在此附上原项目链接以示感谢：
SpringBoot迷你天猫商城（Mini-Tmall）

前置背景知识

前置背景知识对可能用到的背景知识进行讲解。

@Controller //标记该类为控制器类，处理由DispatchServlet分发的请求，把用户请求的数据经过业务处理层处理之后封装成一个Model ，然后再把该Model 返回给对应的View 进行展示。

@Resource //有按照类型和名称注入两种类型，默认按名称注入。进行依赖注入，注入了才能用里面的方法，（以调用其中的抽象方法）

@RequestMapping(value = "/", method = RequestMethod.GET, produces = "application/json;charset=utf-8")
//指定后台的映射路径和提交方式
produces = "application/json;charset=utf-8" 
//定义json数据返回格式

Integer insertOne(@Param("category") Category category);  
//字段名映射 将Category类的category对象封装到参数中

@PathVariable //参数绑定，可将URL中占位符参数{xxx}绑定到控制器类的方法形参
@Deprecated //表示此方法已废弃、暂时可用，但以后此类或方法都不会再更新、后期可能会删除，建议后来人不要调用此方法。此注解可用于类上、方法上、属性上。

UUID是指在一台机器上生成的数字，它保证对在同一时空中的所有机器都是唯一的。

@ResponseBody //将java对象转为json格式的数据。
注意：在使用此注解之后不会再走视图处理器，而是直接将数据写入到输入流中，他的效果等同于通过response对象输出指定格式的数据。
@ResponseBody是作用在方法上的，@ResponseBody 表示该方法的返回结果直接写入 HTTP response body 中，一般在异步获取数据时使用【也就是AJAX】。

@RequestParam //传递参数，用于将请求参数区数据映射到功能处理方法的参数上。
required = false //表示该参数可以不传，默认是true
lastIndexOf  //返回此向量中最后一次出现的指定元素的索引；如果此向量不包含该元素，则返回 -1。

request.getSession().getServletContext()是获取的servlet容器对象，
相当于tomcat容器了。getRealPath("/") 获取实际路径，项目发布时，
在容器中的实际路径。实际路径就是在服务器中的路径。

RequestMapping  中  produces属性可以设置返回数据的类型以及编码，可以是json或者xml
但是必须要和@ResponseBody注解一起使用才可以，不加@ResponseBody注解相当于按照和返回String同名jsp页面解析自然就会报错。

Integer与int的区别：
Integer是int的包装类；int是基本数据类型。
Integer变量必须实例化后才能使用；int变量不需要。
Integer实际是对象的引用，当new一个Integer时，实际上是生成一个指针指向此对象；而int则是直接存储数据值。
Integer的默认值是null；int的默认值是0

$("#userName") 是id选择器,获得id为userName的标签,通过.val(),获得这个标签的value的值,赋值给你声明的变量var userName
trim() 方法用于删除字符串的头尾空白符
$("#userName")获取指定网页元素的函数

什么是Ajax异步请求？
异步请求就当发出请求的同时，浏览器可以继续做任何事，Ajax发送请求并不会影响页面的加载与用户的操作，相当于是在两条线上，各走各的，互不影响。一般默认值为true。异步请求可以完全不影响用户的体验效果，无论请求的时间长或者短，用户都在专心的操作页面的其他内容，并不会有等待的感觉。
AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。
通过 jQuery AJAX 方法，能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

//Ajax异步请求举例
$.ajax({  
     type:"POST",
     url:"Venue.aspx?act=init", 
     dataType:"html", 
     success:function(result){  //function1()
       f1(); 
       f2();  
    } 
     failure:function (result) {  
      alert('Failed');  
     }, 
 } 
 function2();
 //上述代码中，当ajax块发出请求后，他将停留function1()，等待server端的返回，但同时（在这个等待过程中），前台会去执行function2()。

异步模式下：

当我们使用AJAX发送完请求后，可能还有代码需要执行。这个时候可能由于种种原因导致服务器还没有响应我们的请求，但是因为我们采用了异步执行方式，所有包含AJAX请求代码的函数中的剩余代码将继续执行。如果我们是将请求结果交由另外一个JS函数去处理的，那么，这个时候就好比两条线程同时执行一样。

//Ajax异步请求举例
$.ajax({  
     type:"POST", 
     url:"Venue.aspx?act=init", 
     dataType:"html", 
     async: false,    success:function(result){  //function1()
       f1(); 
       f2(); 
     } 
    failure:function (result) {  
      alert('Failed');  
     }, 
 } 
 function2();
 //上述代码中，当把asyn设为false时，这时ajax的请求时同步的，也就是说，这个时候ajax块发出请求后，他会等待在function1（）这个地方，不会去执行function2()，直到function1()部分执行完毕。

业务逻辑

业务流程——后台

商品信息管理

前端页面

webapp/WEB-INF.page/admin/productManagePage.jsp

查询商品功能如何实现？

填写必要的信息后，点击查询按钮时

触发js函数

请求后端路径（注意：js执行到最后一步时，会调用getData函数）

对应的控制器

controller/admin/ProductController.java

把查询到的数据封装到object,并转换成JSON数据格式

如何在前端显示已查到的信息？

前端js代码会调用getData函数

前端是通过getData函数获取数据，而非后端返回。

通过append追加到jsp标签

添加商品功能如何实现？

点击’'添加一件产品"按钮

会触发getChildPage(obj) js函数

getChildPage(obj)函数如下：

如果传入参数为空，继续定位到添加产品页面；

如果不空，拼接出添加成功的url，向后端发送请求；

通过页面和数据交互工具ajaxUtil中的getPage函数向后端发送Ajax请求。

Ajax请求后端路径和请求参数样式如下：

//对应的控制器
controller/admin/ProductController.java

查看具体商品的详情页？

点击 详情

触发getChildPage() js函数

获取产品详细信息。

和添加一件产品时触发的js函数有何不同?

添加商品时， obj为空，跳转到添加产品的请求路径，交由相应的控制器处理；

查看商品详情时，请求会携带product_id ,此时obj不为空，会映射到相应到请求路径。

查看商品详情的控制器

controller/admin/ProductController.java

删除商品即将商品状态设为停售中，即将商品下架。

是在查看商品详情时可对商品信息进行修改。

流程与查看商品详情类似。

刷新产品列表？

点击 刷新产品列表 按钮

触发相关js函数，将输入框中的内容清除，并通过getData()函数请求后端（实际上是对数据库中的所有商品进行查询），其他一些前端操作，将相应样式还原。

相应的控制器

controller/admin/ProductController.java

无条件查询商品，相当于查询所有产品，并以（0,10）方式分页。

getData()函数会根据控制器返回的JSON字符串获取数据，将返回的数据在前端页面显示。

业务流程——前台

首页显示

首页显示根据数据库动态加载而非写死的。

${pageContext.request.contextPath}
//**是JSP取得绝对路径的方法**，等价于`<%=request.getContextPath()%>` 。
也就是取出部署的应用程序名或者是当前的项目名称。
比如项目名称是SSM在浏览器中输入为 http://localhost:8080/SSM/index.jsp
${pageContext.request.contextPath}或<%=request.getContextPath()%>取出来的就是/SSM,
而"/"代表的含义就是 http://localhost:8080

通过 标签遍历request域中的内容，获取分类信息，分类信息通过$表名.字段名动态区分加载，${表名.字段名}通过map集合对象获取，显示在

• 中。

fore/homePage.jsp

举个例子：map对象直接返回到相应的jsp页面，所以jsp页面能通过 标签遍历map集合对象。

查看具体商品详情页信息

jsp页面

fore/productDetailsPage.jsp

对应的控制器

controller/fore/ForeProductDetailsController.java