淘淘商城（前台系统，展示商城首页，商品分类展示）
2024-05-13 13:00:47
- 1、前台系统和后台系统的关系
- 2、前台系统的搭建
- 3、服务端工程的搭建
- 3.1 创建工程
- 3.2 使用到的技术
- 3.3 配置工程
- 3.3.1 pom.xml
- 3.3.2 web.xml
- 3.3.3 框架整合
- 3.3.4 安装taotao-manager到本地仓库
- 4、门户系统搭建
- 4.1 使用到的技术
- 4.2 创建工程
- 4.3 配置工程
- 4.3.1 Pom文件
- 4.3.2 Web.xml
- 4.3.3 框架整合
- 4.3.4 Tomcat插件配置
- 4.3.5 添加jsp文件
- 4.3.6 首页
- 5 商品分类展示
- 5.1 Json数据的格式
- 5.2 使用ajax访问本工程的json数据
- 5.3 Ajax跨域请求
- 5.3.1 跨域问题
- 5.3.2 什么是jsonp？
- 5.3.3 jsonp的原理
- 5.3.4 本项目的jsonp
- 5.4 从数据库中取商品分类列表
- 5.4.1 Dao层
- 5.4.2 Service层
- 5.5 Controller
1、前台系统和后台系统的关系
前台系统就是淘淘商城。
前台系统和后台系统是分开的，只在数据库层面有关系。都是同一个数据库。
2、前台系统的搭建
优点：
1、前台系统和服务层可以分开，降低系统的耦合度。
2、开发团队可以分开，提高开发效率
3、系统分开可以灵活的进行分布式部署。
缺点：
服务之间通信使用接口通信，开发工作量提高。
前台系统分为两部分，一部分是服务层web工程，功能就是发布服务
另外一部分：表现层，展示页面，没有业务逻辑。所有业务逻辑就是调用服务层的服务。
3、服务端工程的搭建
使用maven创建一个war工程
3.1 创建工程
所有的工程都需要继承taotao-parent
3.2 使用到的技术
1、Mybatis
2、Spring
3、Springmvc：发布rest风格的服务
3.3 配置工程
3.3.1 pom.xml
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><parent><groupId>com.taotao</groupId><artifactId>taotao-parent</artifactId><version>0.0.1-SNAPSHOT</version></parent><groupId>com.taotao</groupId><artifactId>taotao-rest</artifactId><version>0.0.1-SNAPSHOT</version><packaging>war</packaging><dependencies><!-- 依赖taotao-mapper--><dependency><groupId>com.taotao</groupId><artifactId>taotao-manager-mapper</artifactId><version>0.0.1-SNAPSHOT</version></dependency><!-- Spring --><dependency><groupId>org.springframework</groupId><artifactId>spring-context</artifactId></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-beans</artifactId></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-webmvc</artifactId></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-jdbc</artifactId></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-aspects</artifactId></dependency><!-- HtppRequest和HttpResponse都在里面--><dependency><groupId>javax.servlet</groupId><artifactId>servlet-api</artifactId><scope>provided</scope></dependency><dependency><groupId>javax.servlet</groupId><artifactId>jsp-api</artifactId><scope>provided</scope></dependency><dependency><groupId>redis.clients</groupId><artifactId>jedis</artifactId></dependency></dependencies><build><!-- 配置插件 --><plugins><plugin><groupId>org.apache.tomcat.maven</groupId><artifactId>tomcat7-maven-plugin</artifactId><configuration><port>8081</port><path>/</path></configuration></plugin></plugins></build></project>
3.3.2 web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"id="taotao" version="2.5"><display-name>taotao-rest</display-name><welcome-file-list><welcome-file>index.html</welcome-file><welcome-file>index.htm</welcome-file><welcome-file>index.jsp</welcome-file><welcome-file>default.html</welcome-file><welcome-file>default.htm</welcome-file><welcome-file>default.jsp</welcome-file></welcome-file-list><!-- 加载spring容器 --><context-param><param-name>contextConfigLocation</param-name><param-value>classpath:spring/applicationContext-*.xml</param-value></context-param><listener><listener-class>org.springframework.web.context.ContextLoaderListener</listener-class></listener><!-- 解决post乱码 --><filter><filter-name>CharacterEncodingFilter</filter-name><filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class><init-param><param-name>encoding</param-name><param-value>utf-8</param-value></init-param></filter><filter-mapping><filter-name>CharacterEncodingFilter</filter-name><url-pattern>/*</url-pattern></filter-mapping><!-- springmvc的前端控制器 --><servlet><servlet-name>taotao-manager</servlet-name><servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class><!-- contextConfigLocation不是必须的， 如果不配置contextConfigLocation， springmvc的配置文件默认在：WEB-INF/servlet的name+"-servlet.xml" --><init-param><param-name>contextConfigLocation</param-name><param-value>classpath:spring/springmvc.xml</param-value></init-param><load-on-startup>1</load-on-startup></servlet><servlet-mapping><servlet-name>taotao-manager</servlet-name><!-- 这里注意哦，是发布的是rest的服务--><url-pattern>/rest/*</url-pattern></servlet-mapping>
</web-app>
3.3.3 框架整合
参考taotao-manager
其中在SpringMVC.xml里面不需要配置静态资源映射，因为访问路径是/rest/,而不是 / ,所以不需要配置，具体的原因请看
https://blog.csdn.net/u012730299/article/details/51872704
3.3.4 安装taotao-manager到本地仓库
Maven命令：install -DskipTests
跳过测试
需要把taotao-manager、taotao-manager-pojo、taotao-manager-mapper都安装到本地仓库
4、门户系统搭建
4.1 使用到的技术
1、Spring
2、Springmvc
3、Jstl、jQuery
4、httpClient（使用java代码模拟浏览器），门户系统调用服务
4.2 创建工程
4.3 配置工程
4.3.1 Pom文件
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><parent><groupId>com.taotao</groupId><artifactId>taotao-parent</artifactId><version>0.0.1-SNAPSHOT</version></parent><groupId>com.taotao</groupId><artifactId>taotao-portal</artifactId><version>0.0.1-SNAPSHOT</version><packaging>war</packaging><dependencies><!-- 这里有httpclient--> <dependency><groupId>com.taotao</groupId><artifactId>taotao-common</artifactId><version>0.0.1-SNAPSHOT</version></dependency><dependency><groupId>com.taotao</groupId><artifactId>taotao-manager-pojo</artifactId><version>0.0.1-SNAPSHOT</version></dependency><!-- Spring --><dependency><groupId>org.springframework</groupId><artifactId>spring-context</artifactId></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-beans</artifactId></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-webmvc</artifactId></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-jdbc</artifactId></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-aspects</artifactId></dependency><!-- JSP相关 --><dependency><groupId>jstl</groupId><artifactId>jstl</artifactId></dependency><dependency><groupId>javax.servlet</groupId><artifactId>servlet-api</artifactId><scope>provided</scope></dependency><dependency><groupId>javax.servlet</groupId><artifactId>jsp-api</artifactId><scope>provided</scope></dependency></dependencies><build><!-- 配置插件 --><plugins><plugin><groupId>org.apache.tomcat.maven</groupId><artifactId>tomcat7-maven-plugin</artifactId><configuration><port>8082</port><path>/</path></configuration></plugin></plugins></build>
</project>
4.3.2 Web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"id="taotao" version="2.5"><display-name>taotao-portal</display-name><welcome-file-list><welcome-file>index.html</welcome-file><welcome-file>index.htm</welcome-file><welcome-file>index.jsp</welcome-file><welcome-file>default.html</welcome-file><welcome-file>default.htm</welcome-file><welcome-file>default.jsp</welcome-file></welcome-file-list><!-- 加载spring容器 --><context-param><param-name>contextConfigLocation</param-name><param-value>classpath:spring/applicationContext-*.xml</param-value></context-param><listener><listener-class>org.springframework.web.context.ContextLoaderListener</listener-class></listener><!-- 解决post乱码 --><filter><filter-name>CharacterEncodingFilter</filter-name><filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class><init-param><param-name>encoding</param-name><param-value>utf-8</param-value></init-param></filter><filter-mapping><filter-name>CharacterEncodingFilter</filter-name><url-pattern>/*</url-pattern></filter-mapping><!-- springmvc的前端控制器 --><servlet><servlet-name>taotao-manager</servlet-name><servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class><!-- contextConfigLocation不是必须的， 如果不配置contextConfigLocation， springmvc的配置文件默认在：WEB-INF/servlet的name+"-servlet.xml" --><init-param><param-name>contextConfigLocation</param-name><param-value>classpath:spring/springmvc.xml</param-value></init-param><load-on-startup>1</load-on-startup></servlet><servlet-mapping><servlet-name>taotao-manager</servlet-name><url-pattern>*.html</url-pattern></servlet-mapping>
</web-app>
4.3.3 框架整合
这个时候的静态资源需要放在webapp下面，这样就可以直接的访问了
4.3.4 Tomcat插件配置
端口是8082
<build><!-- 配置插件 --><plugins><plugin><groupId>org.apache.tomcat.maven</groupId><artifactId>tomcat7-maven-plugin</artifactId><configuration><port>8082</port><path>/</path></configuration></plugin></plugins></build>4.3.5 添加jsp文件
4.3.6 首页
package com.taotao.portal.controller;import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.MediaType;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;import com.taotao.common.pojo.TaotaoResult;
import com.taotao.portal.service.ContentService;/**
* @author 作者 E-mail: River 735597346@qq.com
* @version 创建时间：2018年5月7日 上午10:00:31
* 类说明:展示首页
*/
@Controller
public class indexController {@Autowiredprivate ContentService contentService;@RequestMapping("/index")public String showIndex(Model model){String adJson=contentService.getContentList();model.addAttribute("ad1", adJson);return "index";}
}当在访问http://localhost:8082的时候会在web.xml中找欢迎页面，找到之后被上面的controller拦截热案后跳转到WEB-INF下面的index.jsp页面
5 商品分类展示
首页左侧有一个商品分类。当鼠标分类上，需要展示出此分类下的子分类。
当鼠标滑动到连接上触发mousemove事件。页面做一个ajax请求，请求json数据包含分类信息，得到json数据后初始化分类菜单，展示。
5.1 Json数据的格式
第一层：u、n（包含a标签）、i
第二层：u、n、i
第三层：字符串
5.2 使用ajax访问本工程的json数据
而且需要把lib_v1.js的1174行的代码改为URL_Serv: "http://localhost:8082/category.json",,响应的是本地数据
数据需要从taotao-rest中获取
使用第二种方案。简洁，直接。省去一步http调用。
5.3 Ajax跨域请求
5.3.1 跨域问题
Js是不能跨域请求。出于安全考虑，js设计时不可以跨域。
什么是跨域：
1、域名不同时。
2、域名相同，端口不同。
只有域名相同、端口相同时，才可以访问。
可以使用jsonp解决跨域问题。
5.3.2 什么是jsonp？
Jsonp其实就是一个跨域解决方案。Js跨域请求数据是不可以的，但是js跨域请求js脚本是可以的。可以把数据封装成一个js语句，做一个方法的调用。跨域请求js脚本可以得到此脚本。得到js脚本之后会立即执行。可以把数据做为参数传递到方法中。就可以获得数据。从而解决跨域问题。
5.3.3 jsonp的原理
浏览器在js请求中，是允许通过script标签的src跨域请求，可以在请求的结果中添加回调方法名，在请求页面中定义方法，既可获取到跨域请求的数据。
5.3.4 本项目的jsonp
5.4 从数据库中取商品分类列表
5.4.1 Dao层
查询的表
5.4.2 Service层
查询所有商品分类生成前台页面要求的json数据格式。返回一个pojo。
需要创建两个pojo
1、分类列表的节点。包含u、n、i属性
public class CatNode {//转化为json之后默认会用标注的来代替@JsonProperty("n")private String name;@JsonProperty("u")private String url;@JsonProperty("i")private List<?> item;
}
2、返回值pojo。包含data属性是一个list类型。
放到taotao-rest工程中。其他的项目不用到。
public class CatResult {private List<?> data;public List<?> getData() {return data;}public void setData(List<?> data) {this.data = data;}}
参数：无
返回值：CatResult
package com.taotao.rest.service.impl;import java.util.ArrayList;
import java.util.List;import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;import com.taotao.mapper.TbItemCatMapper;
import com.taotao.pojo.TbItemCat;
import com.taotao.pojo.TbItemCatExample;
import com.taotao.pojo.TbItemCatExample.Criteria;
import com.taotao.rest.pojo.CatNode;
import com.taotao.rest.pojo.CatResult;
import com.taotao.rest.service.ItemCatService;/**
* @author 作者 E-mail: River 735597346@qq.com
* @version 创建时间：2018年5月7日 上午11:33:00
* 类说明:
*/
@Service
public class ItemCatServiceImpl implements ItemCatService {@Autowiredprivate TbItemCatMapper itemCatMapper;@Overridepublic CatResult getItemCatList() {CatResult catResult = new CatResult();//查询分类列表catResult.setData(getCatList(0));return catResult;}/*** 查询分类列表* <p>Title: getCatList</p>* <p>Description: </p>* @param parentId* @return*/private List<?> getCatList(long parentId) {//创建查询条件TbItemCatExample example = new TbItemCatExample();Criteria criteria = example.createCriteria();criteria.andParentIdEqualTo(parentId);//执行查询List<TbItemCat> list = itemCatMapper.selectByExample(example);//返回值listList resultList = new ArrayList<>();//向list中添加节点for (TbItemCat tbItemCat : list) {//判断是否为父节点if (tbItemCat.getIsParent()) {CatNode catNode = new CatNode();//只有第一次节点才添加a标签if (parentId == 0) {catNode.setName("<a href='/products/"+tbItemCat.getId()+".html'>"+tbItemCat.getName()+"</a>");} else {catNode.setName(tbItemCat.getName());}catNode.setUrl("/products/"+tbItemCat.getId()+".html");catNode.setItem(getCatList(tbItemCat.getId()));resultList.add(catNode);//如果是叶子节点} else {resultList.add("/products/"+tbItemCat.getId()+".html|" + tbItemCat.getName());}}return resultList;}}
5.5 Controller
接收页面传递过来的参数。参数就是方法的名称。返回一个json数据，需要把json数据包装成一句js代码。返回一个字符串。
参数：回调方法名称
返回值：字符串
@Controller
public class ItemCatController {@Autowiredprivate ItemCatService itemCatService;@RequestMapping(value="/itemcat/list", produces=MediaType.APPLICATION_JSON_VALUE + ";charset=utf-8")@ResponseBodypublic String getItemCatList(String callback) {CatResult catResult = itemCatService.getItemCatList();//把pojo转换成字符串String json = JsonUtils.objectToJson(catResult);//拼装返回值String result = callback + "(" + json + ");";return result;}
}
方法二：
@RequestMapping("/itemcat/list")@ResponseBodypublic Object getItemCatList(String callback) {CatResult catResult = itemCatService.getItemCatList();MappingJacksonValue mappingJacksonValue = new MappingJacksonValue(catResult);mappingJacksonValue.setJsonpFunction(callback);return mappingJacksonValue;}
收获的知识点：
1：response返回的json乱码解决方案produces=MediaType.APPLICATION_JSON_VALUE + ";charset=utf-8"
2: spring4中jsonp的调用
淘淘商城（前台系统，展示商城首页，商品分类展示）相关推荐
- JavaWeb - 小米商城 ：首页商品分类展示
JavaWeb - 小米商城 :首页商品分类展示 1.功能描述 2.功能分析 分类展示功能在逻辑上并不复杂:每当需要加载 <header> 标签中的内容时,都会向后端提交一个 GET 请求 ...
- 首页商品分类展示——淘淘商城（十四）
需求 分析 总结 Service层 Controller层 需求 分析 前端通过jsonp跨域调用服务层的服务,获得包含商品分类信息,并使用回到函数显示分类信息.注意,该出直接使用 $.getJSON ...
- ssm（Spring、Springmvc、Mybatis）实战之淘淘商城-第七天(非原创)
文章大纲 一.课程介绍 二.Redis基础实战 三.Redis之高可用.集群.云平台搭建实战 四.淘淘商城Jedis整合spring 五.项目源码与资料下载 六.参考文章 一.课程介绍 一共14天课程 ...
- ssm（Spring、Springmvc、Mybatis）实战之淘淘商城-第四天(非原创）
文章大纲 一.课程介绍 二.今日内容介绍 三.参考资料下载 四.参考文章 一.课程介绍 一共14天课程 (1)第一天:电商行业的背景.淘淘商城的介绍.搭建项目工程.Svn的使用. (2)第二天:框架的 ...
- ssm（Spring、Springmvc、Mybatis）实战之淘淘商城-第五天(非原创）
文章大纲 一.课程介绍 二.前台系统(门户系统)搭建介绍 三.前台系统(门户系统)搭建实战 四.js请求跨域解决 五.项目源码与资料下载 六.参考文章 一.课程介绍 一共14天课程 (1)第一天:电商 ...
- SSM项目之---淘淘商城（第一天）
大家关注公众号"计算机视觉这件小事"或者"AI-ming3526" 回复关键字"淘淘商城"免费获取源码资源 有需求也可以加博主vx:xiao ...
- 淘淘商城的第一天（传智播客2015年9月份项目）
主讲老师:入云龙 课程计划 一共14天课程 第一天:电商行业的背景.淘淘商城的介绍.搭建项目工程.Svn的使用. 第二天:框架的整合.后台管理商品列表的实现.分页插件. 第三天:后台管理.商品添加.商 ...
- 淘淘商城简介——淘淘商城
电商简介 淘淘商城简介 功能模块 技术架构的对比 传统架构 分布式架构 技术选型 工程总览 数据库 服务层 交互 开发过程目录 部署 项目源码 电商简介 技术特点: 技术新 技术范围广 分布式 高并发 ...
- 【计算机毕业设计】512网上商城购物系统
一.系统截图(需要演示视频可以私聊) 摘 要 随着科学技术的飞速发展,社会的方方面面.各行各业都在努力与现代的先进技术接轨,通过科技手段来提高自身的优势,网上商城购物系统当然也不能排除在外.网上商城 ...
- java基于springboot的网上商城购物系统
项目介绍 随着社会的快速发展,计算机的影响是全面且深入的.人们生活水平的不断提高,日常生活中人们对网上商城购物系统方面的要求也在不断提高,购物的人数更是不断增加,使得网上商城购物系统的开发成为必需而且 ...
最新文章
- UTF-8与UTF-8 BOM
- 录音转成文字 android,安卓手机自带的录音转文字功能这么强大，堪称会议神器！你会用吗...
- RedHat Enterprise Linux6.4 使用CentOS yum源
- do{...}while(0) 的意义和用法
- hihoCoder1678 版本号排序
- 也许你需要点实用的-Web前端笔试题
- 【HDU - 5475】An easy problem（线段树，思维）
- 复习JavaFile类_递归_综合案例
- Win 10 更新，Linux 内核的 WSL 2 开始上线
- 杭电2068RPG的错排
- 架构思维成长系列教程（十）- 电商搜索引擎架构设计
- 2021年7月整理--简单方法 暴力破解WIFI密码
- 欧几里得(Euclid)算法
- 如何设置线程池参数？美团给出了一个让面试官虎躯一震的回答。
- 2244小游戏HTML5小游戏,2244小游戏：王者荣耀干扰正常游戏扣多少分 举报不成功是什么意思...
- vscode找不到执行文件导致更新失败
- mysql中IGNORE使用
- 一行代码生成数据分析报告—Pandas-profiling
- 想做项目经理？这些工具必须了解
- java微信app支付-支付结果通用通知