企业WEB项目CMS内容管理系统搭建和广告位展示功能的实现


阅读数: 次   

概述

本博文将分析CMS内容管理系统的功能实现，同时借助广告位的展示来介绍解决ajax跨域请求问题的方案二：httpClient。

一、CMS内容管理系统

在后台管理内容及内容分类的系统就叫做cms系统。

1.表设计管理

思路：

1、 分析每个模块的共性：

​ a)链接 b) 图片 c) 标题 d) 子标题 e) 有链接的提示

2、 使用两张表来管理

a) 内容分类表，管理内容的大分类

b) 内容表，存储每个分类下的明细信息内容。

内容分类表：

image-20200524195716194

内容表：

image-20200524195739795

需要把内容进行分类，分类应该是一个树形结构。

2.内容分类管理

2.1初始化列表

2.1.1需求分析

img

初始化树形视图的url：/content/category/list

参数是id，当前节点id属性，应该根据此id查询子节点列表。

返回值：包含id、text、state三个属性的json数据列表

img

2.1.2Service层

功能：接收parentid。根据parentid查询节点列表，返回返回一个EasyUI异步Tree要求的节点列表。每个节点包含三个属性id、text、state三个属性。可以使用EUTreeNode。

参数：id 返回值:List< EUTreeNode >

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
@Service
public class ContentCategoryServiceImpl implements ContentCategoryService {
	@Autowired
	private TbContentCategoryMapper contentCategoryMapper;

	@Override
	public List<EUITreeNode> getCategoryList(long parentId) {
		TbContentCategoryExample example = new TbContentCategoryExample();
		Criteria criteria = example.createCriteria();
		criteria.andParentIdEqualTo(parentId);
		List<TbContentCategory> list = contentCategoryMapper.selectByExample(example);
		List<EUITreeNode> resultList = new ArrayList<>();
		for (TbContentCategory tbContentCategory : list) {
			EUITreeNode node = new EUITreeNode();
			node.setId(tbContentCategory.getId());
			node.setText(tbContentCategory.getName());
			node.setState(tbContentCategory.getIsParent()?"closed":"open");
			resultList.add(node);
		}
		return resultList;
	}
}

2.1.3Controller层

1
2
3
4
5
6
7
8
9
10
11
12
13
@Controller
@RequestMapping("/content/category")
public class ContentCategoryController {
	@Autowired
	private ContentCategoryService contentCategoryService;
	
	@RequestMapping("/list")
	@ResponseBody
	public List<EUITreeNode> getContentCatList(@RequestParam(value="id",defaultValue="0")Long parentId){
		List<EUITreeNode> list = contentCategoryService.getCategoryList(parentId);
		return list;
	}
}

2.2新增节点

2.2.1Dao层

需要返回主键信息：需要修改mapper文件，返回主键信息。

img

2.2.2Service层

接收两个参数parentId父节点id、name：当前节点的名称。向tb_content_category表中添加一条记录。返回TaoTaoResult包含记录的pojo对象。还需要判断添加的结点的父节点之前是否是父节点，如果不是，则需要改is_parent.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@Override
public TaotaoResult insertContentCategory(long parentId, String name) {
    //创建一个pojo
    TbContentCategory contentCategory = new TbContentCategory();
    contentCategory.setName(name);
    contentCategory.setParentId(parentId);
    //'状态。可选值:1(正常),2(删除)',
    contentCategory.setStatus(1);
    contentCategory.setIsParent(false);
    contentCategory.setSortOrder(1);
    contentCategory.setCreated(new Date());
    contentCategory.setUpdated(new Date());
    //添加记录
    contentCategoryMapper.insert(contentCategory);
    //查看父节点的isParent列是否为true，如果不是true改成true
    TbContentCategory parentCat = contentCategoryMapper.selectByPrimaryKey(parentId);
    if(!parentCat.getIsParent()) {
        parentCat.setIsParent(true);
        //更新父节点
        contentCategoryMapper.updateByPrimaryKey(parentCat);
    }
    return TaotaoResult.ok(contentCategory);
}

2.2.3Controller层

1
2
3
4
5
6
@RequestMapping("/create")
@ResponseBody
public TaotaoResult createContentCategory(Long parentId, String name) {
    TaotaoResult result = contentCategoryService.insertContentCategory(parentId, name);
    return result;
}

2.3删除节点

接收parentid、id两个参数。删除id对应的记录。需要判断parentid对应的记录下是否有子节点。如果没有子节点。需要把parentid对应的记录的isparent改成false。

注意：删除直接是物理删除。

service层：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@Override
public TaotaoResult deleteContentCategory(long parentId, long id) {
    contentCategoryMapper.deleteByPrimaryKey(id);
    TbContentCategoryExample example = new TbContentCategoryExample();
    Criteria criteria = example.createCriteria();
    criteria.andParentIdEqualTo(parentId);
    List<TbContentCategory> list = contentCategoryMapper.selectByExample(example);
    if(list==null||list.size()==0) {
        TbContentCategory parentCat = contentCategoryMapper.selectByPrimaryKey(parentId);
        parentCat.setIsParent(false);
        contentCategoryMapper.updateByPrimaryKey(parentCat);
    }
    return TaotaoResult.ok();
}

2.4重命名结点

根据id更新记录的name列即可。不做过多介绍。

3.内容管理

3.1显示内容

用到之前分页pageHelper的知识

Service层：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@Service
public class ContentServiceImpl implements ContentService {
	
	@Autowired 
	private TbContentMapper contentMapper;
	
	@Override
	public EUIDataGridResult getContentList(long categoryId, int page, int rows) {
		TbContentExample example = new TbContentExample();
		Criteria criteria = example.createCriteria();
		criteria.andCategoryIdEqualTo(categoryId);
		PageHelper.startPage(page, rows);
		List<TbContent> list = contentMapper.selectByExample(example);
		//创建一个返回值对象
		EUIDataGridResult result = new EUIDataGridResult();
		result.setRows(list);
		//取记录总条数
		PageInfo<TbContent> pageInfo = new PageInfo<>(list);
		long total = pageInfo.getTotal();
		result.setTotal(total);
		return result;
	}
}

Controller层：

1
2
3
4
5
6
7
8
9
10
11
12
13
@Controller
@RequestMapping("/content")
public class ContentController {
	@Autowired
	private ContentService contentService;
	
	@RequestMapping("/query/list")
	@ResponseBody
	public EUIDataGridResult getContentList(long categoryId, int page, int rows) {
		EUIDataGridResult contentList = contentService.getContentList(categoryId, page, rows);
		return contentList;
	}
}

3.2内容添加

img

这里图片上传的代码之前实现过，这里引用的是同一个

img

Service层：

1
2
3
4
5
6
7
8
@Override
public TaotaoResult insertContent(TbContent content) {
    //补全pojo内容
    content.setCreated(new Date());
    content.setUpdated(new Date());
    contentMapper.insert(content);
    return TaotaoResult.ok();
}

Controller层：

1
2
3
4
5
6
@RequestMapping("/save")
@ResponseBody
public TaotaoResult insertContent(TbContent content) {
    TaotaoResult result = contentService.insertContent(content);
    return result;
}

二、商城首页大广告

1.首页大广告方案

前端系统获取后端系统提供的接口，如何获取？

1.1方案1——jsonp

上篇博文《企业WEB项目前台工程搭建,ajax跨域的解决》已经介绍过jsonp，这里只做分析

img

需要当首页加载完毕后，大广告位就应该显示。没有触发事件。不是太合适。

优点：不需要二次请求，页面直接加载内容数据。减少门户系统的压力。

缺点：需要延迟加载。不利于seo优化。

这里不利于seo优化的原因：jsonp跨域请求一般是要通过鼠标触发事件，而刚开始加载的时候是静态的，非动态会被搜索引擎认为是一成不变的死网页，不符合搜索引擎喜好，自然排名就降低了

1.2方案2——httpclient

img

优点：有利于seo优化。可以在taotao-portal中对数据进行加工。

缺点：系统直接需要调用服务查询内容信息。多了一次http请求。

系统直接服务的调用，需要使用httpclient来实现。Taotao-portal和taotao-rest是在同一个局域网内部。速度非常快，调用时间可以忽略不计。 展示首页内容功能，使用方案二实现。

2.展示流程

img

3.Httpclient的使用

3.1概念

HttpClient 是 Apache Jakarta Common 下的子项目，用来提供高效的、最新的、功能丰富的支持 HTTP 协议的客户端编程工具包，并且它支持 HTTP 协议最新的版本和建议。
下载地址：http://hc.apache.org/

image-20200524202203940

3.2功能介绍

以下列出的是 HttpClient 提供的主要的功能，要知道更多详细的功能可以参见 HttpClient 的主页。

（1）实现了所有 HTTP 的方法（GET,POST,PUT,HEAD 等）

（2）支持自动转向

（3）支持 HTTPS 协议

（4）支持代理服务器等

3.3添加依赖

需要把httpclient的jar包添加到工程中。只需要在工程中添加httpclient的依赖。

img

3.4使用方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
public class HttpClientTest {
	@Test
	public void doGet() throws Exception{
		//创建一个httpClient对象
		CloseableHttpClient httpClient = HttpClients.createDefault();
		//创建一个GET对象 
		HttpGet get = new HttpGet("http://www.sogou.com");
		//执行请求
		CloseableHttpResponse response = httpClient.execute(get);
		//去响应的结果
		int statusCode = response.getStatusLine().getStatusCode();
		System.out.println(statusCode);
		HttpEntity entity = response.getEntity();
		String string = EntityUtils.toString(entity, "utf-8");
		System.out.println(string);
		//关闭httpclient
		response.close();
		httpClient.close();
	}
	
	//get请求带参数
	@Test
	public void doGetWithParam() throws Exception{
		//创建一个httpClient对象
		CloseableHttpClient httpClient = HttpClients.createDefault();
		//创建一个uri对象
		URIBuilder uriBuilder = new URIBuilder("http://www.sogou.com/web");
		uriBuilder.addParameter("query", "花");
		HttpGet get = new HttpGet(uriBuilder.build());
		//执行请求
		CloseableHttpResponse response = httpClient.execute(get);
		//取响应的结果
		int statusCode = response.getStatusLine().getStatusCode();
		System.out.println(statusCode);
		HttpEntity entity = response.getEntity();
		String string = EntityUtils.toString(entity, "utf-8");
		System.out.println(string);
		//关闭httpclient
		response.close();
		httpClient.close();
	}
	
	@Test
	public void doPost() throws Exception {
		CloseableHttpClient httpClient = HttpClients.createDefault();
	
		//创建一个post对象
		HttpPost post = new HttpPost("http://localhost:8082/httpclient/post.html");
		//执行post请求
		CloseableHttpResponse response = httpClient.execute(post);
		String string = EntityUtils.toString(response.getEntity());
		System.out.println(string);
		response.close();
		httpClient.close();
		
	}


	@Test
	public void doPostWithParam() throws Exception{
		CloseableHttpClient httpClient = HttpClients.createDefault();
		
		//创建一个post对象
		HttpPost post = new HttpPost("http://localhost:8082/httpclient/post.html");
		//创建一个Entity。模拟一个表单
		List<NameValuePair> kvList = new ArrayList<>();
		kvList.add(new BasicNameValuePair("username", "zhangsan"));
		kvList.add(new BasicNameValuePair("password", "123"));
		
		//包装成一个Entity对象
		StringEntity entity = new UrlEncodedFormEntity(kvList);
		//设置请求的内容
		post.setEntity(entity);
		
		//执行post请求
		CloseableHttpResponse response = httpClient.execute(post);
		String string = EntityUtils.toString(response.getEntity(), "utf-8");
		System.out.println(string);
		response.close();
		httpClient.close();
	}

}

3.5Httpclient封装成工具类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
public class HttpClientUtil {

	public static String doGet(String url, Map<String, String> param) {

		// 创建Httpclient对象
		CloseableHttpClient httpclient = HttpClients.createDefault();

		String resultString = "";
		CloseableHttpResponse response = null;
		try {
			// 创建uri
			URIBuilder builder = new URIBuilder(url);
			if (param != null) {
				for (String key : param.keySet()) {
					builder.addParameter(key, param.get(key));
				}
			}
			URI uri = builder.build();

			// 创建http GET请求
			HttpGet httpGet = new HttpGet(uri);

			// 执行请求
			response = httpclient.execute(httpGet);
			// 判断返回状态是否为200
			if (response.getStatusLine().getStatusCode() == 200) {
				resultString = EntityUtils.toString(response.getEntity(), "UTF-8");
			}
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			try {
				if (response != null) {
					response.close();
				}
				httpclient.close();
			} catch (IOException e) {
				e.printStackTrace();
			}
		}
		return resultString;
	}

	public static String doGet(String url) {
		return doGet(url, null);
	}

	public static String doPost(String url, Map<String, String> param) {
		// 创建Httpclient对象
		CloseableHttpClient httpClient = HttpClients.createDefault();
		CloseableHttpResponse response = null;
		String resultString = "";
		try {
			// 创建Http Post请求
			HttpPost httpPost = new HttpPost(url);
			// 创建参数列表
			if (param != null) {
				List<NameValuePair> paramList = new ArrayList<>();
				for (String key : param.keySet()) {
					paramList.add(new BasicNameValuePair(key, param.get(key)));
				}
				// 模拟表单
				UrlEncodedFormEntity entity = new UrlEncodedFormEntity(paramList);
				httpPost.setEntity(entity);
			}
			// 执行http请求
			response = httpClient.execute(httpPost);
			resultString = EntityUtils.toString(response.getEntity(), "utf-8");
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			try {
				response.close();
			} catch (IOException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}

		return resultString;
	}

	public static String doPost(String url) {
		return doPost(url, null);
	}
	
	public static String doPostJson(String url, String json) {
		// 创建Httpclient对象
		CloseableHttpClient httpClient = HttpClients.createDefault();
		CloseableHttpResponse response = null;
		String resultString = "";
		try {
			// 创建Http Post请求
			HttpPost httpPost = new HttpPost(url);
			// 创建请求内容
			StringEntity entity = new StringEntity(json, ContentType.APPLICATION_JSON);
			httpPost.setEntity(entity);
			// 执行http请求
			response = httpClient.execute(httpPost);
			resultString = EntityUtils.toString(response.getEntity(), "utf-8");
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			try {
				response.close();
			} catch (IOException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}

		return resultString;
	}
}

4.服务层发布服务

根据内容的分类id查询内容列表，从tb_content表中查询。服务是一个restFul形式的服务。使用http协议传递json格式的数据。

4.1Service层

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@Service
public class ContentServiceImpl implements ContentService {

	@Autowired
	private TbContentMapper contentMapper;
	
	@Override
	public List<TbContent> getContentList(long contentCid) {
		TbContentExample example = new TbContentExample();
		Criteria criteria = example.createCriteria();
		criteria.andCategoryIdEqualTo(contentCid);
		List<TbContent> list = contentMapper.selectByExample(example);
		return list;
	}

}

4.2Controller层

发布服务。接收查询参数。Restful风格内容分类id应该从url中取：/rest/content/list/{contentCategoryId}

从url中取内容分类id，调用Service查询内容列表。返回内容列表。返回一个json格式的数据。可以使用TaotaoResult包装此列表。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@Controller
@RequestMapping("/content")
public class ContentController {

	@Autowired
	private ContentService contentService;
	
	@RequestMapping("/list/{contentCategoryId}")
	@ResponseBody
	public TaotaoResult getContentList(@PathVariable Long contentCategoryId) {
		try {
			List<TbContent> list = contentService.getContentList(contentCategoryId);
			return TaotaoResult.ok(list);
		} catch (Exception e) {
			e.printStackTrace();
			return TaotaoResult.build(500, ExceptionUtil.getStackTrace(e));
		}
	}
}

5.实现大广告位展示

5.1需求分析

img

Json字符串如何传递给jsp：使用modelAndView对象把json字符串传递给jsp。

如何获得json字符串：获得一个广告位对应的内容列表，需要调用taotao-rest的服务。把列表转换成json数据格式要求的pojo对象列表。

需要使用httpclient调用taotao-rest的服务。

5.2resource.properties

把服务层属性定义到properties方便修改

1
2
3
4
5
#服务层属性定义
#基础url
REST_BASE_URL=http://localhost:8081/rest
#首页大广告位url
REST_INDEX_AD_URL=/content/list/89

5.3Service层

根据内容分类id查询分类的内容列表，需要使用httpclient调用taotao-rest的服务。得到一个json字符串。需要把字符串转换成java对象taotaoResult对象。从taotaoResult对象中取data属性，得到内容列表。把内容列表转换成jsp页面要求的json格式。返回一个json字符串。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
/**
 * 调用服务层服务查询内容列表
 * @author JY
 *
 */
@Service
public class ContentServiceImpl implements ContentService {

	@Value("${REST_BASE_URL}")
	private String REST_BASE_URL;
	@Value("${REST_INDEX_AD_URL}")
	private String REST_INDEX_AD_URL;
	
	@Override
	public String getContentList() {
		//调用服务层的服务，这里用httpclient跨域
		String result = HttpClientUtil.doGet(REST_BASE_URL+REST_INDEX_AD_URL);
		try {
			//把字符串转化成TaotaoResult,通过TaotaoResult转化成我们想要的List数据
			TaotaoResult taotaoResult = TaotaoResult.formatToList(result, TbContent.class);
			//取内容列表
			List<TbContent> list = (List<TbContent>) taotaoResult.getData();
			List<Map> resultList = new ArrayList<>();
			for (TbContent tbContent : list) {
				Map map = new HashMap();
				map.put("src", tbContent.getPic());
				map.put("height", 240);
				map.put("width", 670);
				map.put("srcB", tbContent.getPic2());
				map.put("widthB", 550);
				map.put("heightB", 240);
				map.put("href", tbContent.getUrl());
				map.put("alt", tbContent.getSubTitle());
				resultList.add(map);
			}
			return JsonUtils.objectToJson(resultList);
		} catch (Exception e) {
			e.printStackTrace();
		}
		return null;
	}
}

5.4Controller层

1
2
3
4
5
6
@RequestMapping("/index")
public String showIndex(Model model) {
    String adJson = contentService.getContentList();
    model.addAttribute("ad1", adJson);
    return "index";
}

成品展示：

image-20200524203448753

结语

仿生人会梦见电子羊吗？
那么人会梦见真的羊吗？
电子羊出自科幻大师菲利普•迪克的《仿生人会梦见电子羊吗》，在书中可知，移情能力是人类独有的能力，我们可以通过移情测试来区分人类和仿生人。可当人在光怪陆离的世界中麻木了自己的情感，仿生人在学习演算中衍生出感情，那么人和仿生人的界限又在哪里？

​ ——摘自B站热评

电子羊是真的好听又上头呀🤸‍♂️

赏

谢谢你请我吃糖果

支付宝
微信

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

很惭愧<br><br>只做了一点微小的工作<br>谢谢大家