第四篇:实现前台系统搭建,Cms系统实现
前言:前面我们已经实现了文件上传和喝富文本编辑器的使用,下面主要是以下几个方面的知识:
1.前台系统的搭建和商城首页的展示
2.Cms系统的实现
a). 内容分类管理
b). 内容管理
1 前台系统搭建
先来看看效果
目前已经完成了后台管理系统和商品服务。淘淘商城首页展示需要用到商城门户工程和内容服务工程
image.png image.png
下面是在idea中创建taotao-portal-web工程
首先创建一个maven工程
image.png
image.png
然后添加依赖
pom.xml
<?xml version="1.0" encoding="UTF-8"?>
<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">
<parent>
<artifactId>common-parent</artifactId>
<groupId>com.lan</groupId>
<version>1.0-SNAPSHOT</version>
<relativePath>../common-parent/pom.xml</relativePath>
</parent>
<modelVersion>4.0.0</modelVersion>
<artifactId>taotao-portal-web</artifactId>
<packaging>war</packaging>
<name>taotao-portal-web Maven Webapp</name>
<!-- FIXME change it to the project's website -->
<url>http://www.example.com</url>
<dependencies>
<dependency>
<groupId>com.lan</groupId>
<artifactId>common-utils</artifactId>
<version>1.0-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>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-jms</artifactId>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-context-support</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>
<!-- dubbo相关的jar包 -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>dubbo</artifactId>
<exclusions>
<exclusion>
<artifactId>spring</artifactId>
<groupId>org.springframework</groupId>
</exclusion>
<exclusion>
<artifactId>netty</artifactId>
<groupId>org.jboss.netty</groupId>
</exclusion>
</exclusions>
</dependency>
<dependency>
<groupId>org.apache.zookeeper</groupId>
<artifactId>zookeeper</artifactId>
</dependency>
<dependency>
<groupId>com.github.sgroschupf</groupId>
<artifactId>zkclient</artifactId>
</dependency>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.apache.tomcat.maven</groupId>
<artifactId>tomcat7-maven-plugin</artifactId>
<configuration>
<path>/</path>
<port>8082</port>
</configuration>
</plugin>
</plugins>
</build>
</project>
所需要的资源文件如下:
resource.properties为空
springmvc.xml配置
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:dubbo="http://code.alibabatech.com/schema/dubbo"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.2.xsd
http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.2.xsd
http://code.alibabatech.com/schema/dubbo http://code.alibabatech.com/schema/dubbo/dubbo.xsd
http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.2.xsd">
<!-- 加载属性文件 -->
<context:property-placeholder location="classpath:resource/resource.properties"/>
<!-- 配置注解驱动 -->
<mvc:annotation-driven />
<!-- 视图解析器 -->
<bean
class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/WEB-INF/jsp/" />
<property name="suffix" value=".jsp" />
</bean>
<!-- 配置包扫描器,扫描@Controller注解的类 -->
<context:component-scan base-package="com.taotao.portal.controller"/>
<!-- 引用dubbo服务 -->
<dubbo:application name="taotao-portal-web"/>
<dubbo:registry protocol="zookeeper" address="192.168.208.40:2181"/>
<!-- <dubbo:reference interface="com.taotao.service.ItemService" id="itemService" /> -->
</beans>
从springmvc.xml的配置中可以看到配置的controller的扫描包是com.taotao.portal.controller,我们在src/main/java目录下新建一个com.taotao.portal.controller包
image.png
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"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
id="WebApp_ID" version="2.5">
<display-name>taotao-portal-web</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
<!-- 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>
<!-- 前端控制器 -->
<servlet>
<servlet-name>taotao-portal-web</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-portal-web</servlet-name>
<!-- 伪静态化 -->
<url-pattern>*.html</url-pattern>
</servlet-mapping>
</web-app>
科普:
我们可以看到我们拦截的请求都是以.html结尾的。这是一种伪静态;即我们请求的时候是以.html结尾。但是我们响应的是动态数据。但是由于请求是以.html结尾的,浏览器便认为要访问静态资源。SEO喜欢收录以.html结尾的请求,这样有利于搜索排名
导入静态资源
访问首页:
先修改web.xml
image.png
把index.jsp换成index.html。因为我们请求的时候输入的是index.html。由于这个界面是不存在的;DispatcherServlet就会处理请求,将请求传递到Controller中,执行对应的方法;返回的时候返回Index。由于我们配置了视图解析器。这样会自动跳到index.jsp的页面中
@Controller
public class PageController {
@RequestMapping("/index")
public String showIndex() {
return "index";
}
}
2. Cms内容管理系统
2.1 我们先来分析一下前台显示的内容的表设计。
我们来看看淘宝
image.png
可以看到淘宝首页展示的内容是分组的;轮播图是一组。下面的一个框也是一组;右边的公告,规则等是一组。我们点击每一个轮播图或者一些图片都会跳到新的链接。从上面我们可以看出。我们应该对内容进行分类,每一个分类对应多条内容:如轮播图类,下面可以包括多个要展示的信息。这样我们就能获得两张表,一个是专门保存分类的。一个是专门保存分类里面的具体内容的;表的设计如下:
image.png image.png
2.2 Cms系统的搭建
Cms系统的搭建和商品管理系统的步骤差不多:
大家可以看第一篇的介绍。这里要注意的是dao层和pojo层我们不用创建。直接调用以前的。新建后的工程如下:
image.png
下面是关于每个工程的配置:
taotao-content:
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.lan</groupId>
<artifactId>common-parent</artifactId>
<version>1.0-SNAPSHOT</version>
<relativePath>../common-parent/pom.xml</relativePath>
</parent>
<artifactId>taotao-content</artifactId>
<version>1.0-SNAPSHOT</version>
<packaging>pom</packaging>
<modules>
<module>../taotao-content-interface</module>
<module>../taotao-content-service</module>
</modules>
<dependencies>
<dependency>
<groupId>com.lan</groupId>
<artifactId>common-utils</artifactId>
<version>1.0-SNAPSHOT</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.apache.tomcat.maven</groupId>
<artifactId>tomcat7-maven-plugin</artifactId>
<configuration>
<path>/</path>
<port>8083</port>
</configuration>
</plugin>
</plugins>
</build>
</project>
配置taotao-content-interface的pom.xml文件,添加对taotao-manager-pojo的依赖
<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.lan</groupId>
<artifactId>taotao-content</artifactId>
<version>1.0-SNAPSHOT</version>
<relativePath>../taotao-content/pom.xml</relativePath>
</parent>
<artifactId>taotao-content-interface</artifactId>
<dependencies>
<dependency>
<groupId>com.lan</groupId>
<artifactId>taotao-manager-pojo</artifactId>
<version>1.0-SNAPSHOT</version>
</dependency>
</dependencies>
</project>
配置taotao-content-service的pom.xml文件,添加taotao-manager-dao、taotao-content-interface、spring、dubbo的依赖
<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.lan</groupId>
<artifactId>taotao-content</artifactId>
<version>1.0-SNAPSHOT</version>
<relativePath>../taotao-content/pom.xml</relativePath>
</parent>
<artifactId>taotao-content-service</artifactId>
<packaging>war</packaging>
<dependencies>
<dependency>
<groupId>com.lan</groupId>
<artifactId>taotao-manager-dao</artifactId>
<version>1.0-SNAPSHOT</version>
</dependency>
<dependency>
<groupId>com.lan</groupId>
<artifactId>taotao-content-interface</artifactId>
<version>1.0-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>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-jms</artifactId>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-context-support</artifactId>
</dependency>
<!-- dubbo相关的jar包 -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>dubbo</artifactId>
<exclusions>
<exclusion>
<artifactId>spring</artifactId>
<groupId>org.springframework</groupId>
</exclusion>
<exclusion>
<artifactId>netty</artifactId>
<groupId>org.jboss.netty</groupId>
</exclusion>
</exclusions>
</dependency>
<dependency>
<groupId>org.apache.zookeeper</groupId>
<artifactId>zookeeper</artifactId>
</dependency>
<dependency>
<groupId>com.github.sgroschupf</groupId>
<artifactId>zkclient</artifactId>
</dependency>
</dependencies>
</project>
在taotao-content-service层配置框架所需要的配置文件:
image.png
我们把taotao-manager-service中的mybatis、properties、spring三个目录粘贴过来。SqlMapConfig.xml文件不用动,db.propertes也不用动;
需要修改的文件如下:
applicationContext-service.xml
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:context="http://www.springframework.org/schema/context" xmlns:p="http://www.springframework.org/schema/p"
xmlns:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx"
xmlns:dubbo="http://code.alibabatech.com/schema/dubbo"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.2.xsd
http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.2.xsd
http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.2.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-4.2.xsd
http://code.alibabatech.com/schema/dubbo http://code.alibabatech.com/schema/dubbo/dubbo.xsd
http://www.springframework.org/schema/util http://www.springframework.org/schema/util/spring-util-4.2.xsd">
<!-- 配置包扫描器,扫描所有带@Service注解的类 -->
<context:component-scan base-package="com.taotao.content.service"/>
<!-- 发布dubbo服务 -->
<!-- 提供方应用信息,用于计算依赖关系 -->
<dubbo:application name="taotao-content" />
<!-- 注册中心的地址 -->
<dubbo:registry protocol="zookeeper" address="192.168.208.40:2181" />
<!-- 用dubbo协议在20881端口暴露服务 -->
<dubbo:protocol name="dubbo" port="20881" />
<!-- 声明需要暴露的服务接口 -->
<dubbo:service interface="com.taotao.content.service.ContentCategoryService" ref="contentCategoryServiceImpl" timeout="300000"/>
<dubbo:service interface="com.taotao.content.service.ContentService" ref="contentServiceImpl" timeout="300000"/>
</beans>
dubbo服务名称修改为"taotao-content",dubbo服务向外暴露的端口为"20881"(每发布一个服务就要更改一个端口)
applicationContext-trans.xml
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:context="http://www.springframework.org/schema/context" xmlns:p="http://www.springframework.org/schema/p"
xmlns:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.2.xsd
http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.2.xsd
http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.2.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-4.2.xsd
http://www.springframework.org/schema/util http://www.springframework.org/schema/util/spring-util-4.2.xsd">
<!-- 事务管理器 -->
<bean id="transactionManager"
class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
<!-- 数据源 -->
<property name="dataSource" ref="dataSource" />
</bean>
<!-- 通知 -->
<tx:advice id="txAdvice" transaction-manager="transactionManager">
<tx:attributes>
<!-- 传播行为 -->
<tx:method name="save*" propagation="REQUIRED" />
<tx:method name="insert*" propagation="REQUIRED" />
<tx:method name="add*" propagation="REQUIRED" />
<tx:method name="create*" propagation="REQUIRED" />
<tx:method name="delete*" propagation="REQUIRED" />
<tx:method name="update*" propagation="REQUIRED" />
<tx:method name="find*" propagation="SUPPORTS" read-only="true" />
<tx:method name="select*" propagation="SUPPORTS" read-only="true" />
<tx:method name="get*" propagation="SUPPORTS" read-only="true" />
</tx:attributes>
</tx:advice>
<!-- 切面 -->
<aop:config>
<aop:advisor advice-ref="txAdvice"
pointcut="execution(* com.taotao.content.service.*.*(..))" />
</aop:config>
</beans>
将applicationContext-trans.xml文件,修改切面的包为com.taotao.content.service
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
"http://java.sun.com/dtd/web-app_2_3.dtd">
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
id="WebApp_ID" version="2.5">
<display-name>taotao-content</display-name>
<welcome-file-list>
<welcome-file>index.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>
</web-app>
2.3 内容分类管理
功能分析
我们再来看下content-category.jsp页面,这个页面就是内容分类页面
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<div>
<ul id="contentCategory" class="easyui-tree">
</ul>
</div>
<div id="contentCategoryMenu" class="easyui-menu" style="width:120px;" data-options="onClick:menuHandler">
<div data-options="iconCls:'icon-add',name:'add'">添加</div>
<div data-options="iconCls:'icon-remove',name:'rename'">重命名</div>
<div class="menu-sep"></div>
<div data-options="iconCls:'icon-remove',name:'delete'">删除</div>
</div>
<script type="text/javascript">
$(function(){
$("#contentCategory").tree({
url : '/content/category/list',
animate: true,
method : "GET",
//弹出选择框
onContextMenu: function(e,node){
e.preventDefault();
$(this).tree('select',node.target);
$('#contentCategoryMenu').menu('show',{
left: e.pageX,
top: e.pageY
});
},
//当鼠标离开的时候调用这个事件
onAfterEdit : function(node){
var _tree = $(this);
if(node.id == 0){
// 新增节点
$.post("/content/category/create",{parentId:node.parentId,name:node.text},function(data){
if(data.status == 200){
_tree.tree("update",{
target : node.target,
id : data.data.id
});
}else{
$.messager.alert('提示','创建'+node.text+' 分类失败!');
}
});
}else{
$.post("/content/category/update",{id:node.id,name:node.text});
}
}
});
});
function menuHandler(item){
var tree = $("#contentCategory");
var node = tree.tree("getSelected");
//新增节点
if(item.name === "add"){
tree.tree('append', {
parent: (node?node.target:null),
data: [{
text: '新建分类',
id : 0,//初始化id为0
parentId : node.id
}]
});
var _node = tree.tree('find',0);
tree.tree("select",_node.target).tree('beginEdit',_node.target);
}else if(item.name === "rename"){
tree.tree('beginEdit',node.target);
}else if(item.name === "delete"){
$.messager.confirm('确认','确定删除名为 '+node.text+' 的分类吗?',function(r){
if(r){
$.post("/content/category/delete/",{id:node.id},function(){
tree.tree("remove",node.target);
});
}
});
}
}
</script>
分析:
contentCategory是树形结构展示内容分类。
请求的url:/content/category/list
请求的参数:id,当前节点的id。第一次请求是没有参数,需要给默认值“0”
响应数据:List<EasyUITreeNode>(@ResponseBody)
Json数据。
[{id:1,text:节点名称,state:open(closed)},
{id:2,text:节点名称2,state:open(closed)},
{id:3,text:节点名称3,state:open(closed)}]
业务逻辑:
1、取查询参数id,parentId
2、根据parentId查询tb_content_category,查询子节点列表。
3、得到List<TbContentCategory>
4、把列表转换成List<EasyUITreeNode>
这里我们可以确定请求的地址和返回的数据格式了。
Dao层:
使用逆向工程
Service:
参数:long parentId
返回值:List<EasyUITreeNode>
发布服务:
image.png
Controller层:
image.png
注意:
这个刚开始的时候是没有参数的。因此需要设置默认值为0
接收服务:
image.png
在taotao-mamnger-web中增加依赖:
image.png
好了。基本的设置和编码就是这样~在启动之前记得要将taotao-manager和taotao-content导入到本地仓库
image.png
然后启动taotao-manager和taotao-manager-web,taotao-content就可以访问了。
分类列表展示有了。还有的就是新增,重命名,删除等操作。
新增
当我们点击添加的时候会跳到content-add.jsp的页面;分析add.jsp的页面
image.png
提交表单请求的url:/content/save
参数:表单的数据。使用pojo接收TbContent
返回值:TaotaoResult(json数据)
业务逻辑:
1、把TbContent对象属性补全。
2、向tb_content表中插入数据。
3、返回TaotaoResult
Dao层:
逆向工程
Service层:
@Override
public TaotaoResult addContent(TbContent tbContent) {
tbContent.setCreated(new Date());
tbContent.setUpdated(new Date());
tbContentMapper.insert(tbContent);
return TaotaoResult.ok();
}
在上面我们已经发布服务了。直接在Controller中添加对应的代码
@RequestMapping("/content/save")
@ResponseBody
public TaotaoResult addContent(TbContent content) {
return contentService.addContent(content);
}