目前整套CMS-Demo剩下两个前端模块了，第一个是普通用户的个人中心以及管理员的管理页面，本篇我们来开发普通用户的个人中心
在首页，我们留了一个登录后的代码
<c:if test="${sessionScope.user!=null }">
<div class="btn-group dropleft">
<button type="button" class="btn btn-dark btn-sm dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">${sessionScope.user.username }</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
<ul>
<li><a href="/my/index.do">个人中心</a></li>
<li><a href="/passport/logout.do">注销</a></li>
</ul>
</div>
</div>
</c:if>
这会让我们在登录后点击展示出一个盒子，里面有个人中心选项，跳转的方式也是后台跳，所以我们需要开发一个个人中心的Controller
package com.wy.controller;
import java.io.File;
import java.io.IOException;
import java.util.Date;
import java.util.List;
import java.util.UUID;
import javax.annotation.Resource;
import javax.servlet.http.HttpSession;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import com.github.pagehelper.PageInfo;
import com.wy.bean.Article;
import com.wy.bean.User;
import com.wy.service.ArticleService;
@Controller
@RequestMapping("/my")
public class MyController {
@Resource
private ArticleService articleService;
/**
* 跳转到个人页面
* @return
*/
@RequestMapping("/index.do")
public String index(){
return "my/index";
}
/**
* 跳转我的文章
* @return
*/
@RequestMapping("/articles.do")
public String articles(Article article,@RequestParam(defaultValue="1")Integer pageNum,
Model model,HttpSession session){
User user=(User) session.getAttribute("user");
article.setUserId(user.getId());
//文章查询限制
article.setDeleted(0);
List<Article> selectArticle = articleService.selectArticle(article, pageNum, 3);
PageInfo info=new PageInfo<>(selectArticle);
model.addAttribute("info", info);
return "my/articles";
}
/**
* 跳转发布文章
* @return
*/
@RequestMapping("/push.do")
public String push(){
return "my/fwb";
}
//上传地址
//@Value(value="${pushPath}") 正常情况下应该有个properties的配置 但估计是SSM的问题获取不到这个值了，这里就先写死了
private String pushPath = "D:/pic";
/**
*
* @Title: publish
* @Description: 执行发布
* @param article
* @return
* @return: boolean
*/
@ResponseBody
@PostMapping("/publish.do")
public boolean publish(MultipartFile file, Article article ,HttpSession session) {
//判断是否上传了文件
if(file!=null &&!file.isEmpty()) {
//文件上传
String path =pushPath;//文件上传的路径
//获取原始名称 a.jpg
String oldFileName = file.getOriginalFilename();
// 为了防止文件重名.使用uuid产生随机数
String fileName =UUID.randomUUID() +oldFileName.substring(oldFileName.lastIndexOf("."));
File f = new File(path,fileName);
try {
file.transferTo(f);//把文件写入硬盘
article.setPicture(fileName);//数据库存储文件的名称
} catch (IllegalStateException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
}
User user=(User) session.getAttribute("user");
article.setUserId(user.getId()); //文章作者
//以下信息也可以放在配置文件中为了方便先写死
article.setStatus(0);//待审
article.setCreated(new Date());//发布时间
article.setHits(0);//点击量
article.setHot(0);//非热门
article.setDeleted(0);//未删除
article.setContentType("0");//普通html文本
return articleService.insertArticle(article) >0;
}
//文章详情
@ResponseBody
@GetMapping("/article.do")
public Article article(Integer id) {
return articleService.select(id);
}
}
随后准备一个前端的页面my/index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- bookstap视窗 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<link href="/resource/css/bootstrap.min.css" rel="stylesheet">
<link href="/resource/css/index.css" rel="stylesheet">
<script type="text/javascript" src="/resource/js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="/resource/js/popper.min.js"></script>
<script type="text/javascript" src="/resource/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 首頁容器 -->
<div class="container_fluid">
<!-- 第一行展示标题 -->
<div class="row">
<div class="col-md-12 bg-warning" style="height: 50px;line-height: 50px">
<img alt="" src="/resource/imgs/logo.jpg" class="rounded" style="width: 30px;height: 30px">
<span>个人中心</span>
<div class="btn-group dropleft" style="float: right;">
<button type="button" class="btn btn-dark btn-sm dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">${sessionScope.user.username }</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
<ul>
<li><a href="/passport/logout.do">注销</a></li>
<li><a href="/index.do">返回首页</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- 第一行结束 -->
<!-- 第二行展示内容 -->
<div class="row mt-1">
<!-- 导航 -->
<div class="col-md-2 list-group bg-light" style="height: 500px">
<div class=" text-center pt-4 pl-5 pr-3">
<a href="#" data="/my/articles.do" class="list-group-item list-group-item-action active">我的文章</a>
<a href="#" data="/my/push.do" class="list-group-item list-group-item-action">发布文章</a>
<a href="#" class="list-group-item list-group-item-action">我的收藏</a>
<a href="#" class="list-group-item list-group-item-action">我的评论</a>
<a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">个人设置</a>
</div>
</div>
<!-- 显示内容 -->
<div class="col-md-10" id="articles" style="height: 500px">
<!-- 先引入富文本 -->
<div style="display: none">
<jsp:include page="/resource/kindeditor/jsp/demo.jsp"></jsp:include>
</div>
</div>
</div>
<!-- 第二行结束 -->
</div>
<!-- 首頁容器结束 -->
<script type="text/javascript">
//默认加载我的文章
$("#articles").load("/my/articles.do");
//跳转函数
$("a").click(function() {
//删除原本样式
$("a").removeClass("active");
$(this).addClass("active");
var url=$(this).attr("data");
$("#articles").load(url);
});
</script>
</body>
</html>
到此先运行一下看效果，是否可以进入个人中心
可以进入个人中心后，大家不难发现本次Demo目前只做了我的文章、发布文章两个功能，其他功能留给扩展，首先我们要完成默认的我的文章展示页面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文章列表</title>
</head>
<body>
<!-- 容器 -->
<div class="container">
<!-- 无序列表 -->
<ul class="list-unstyled">
<c:forEach items="${info.list}" var="article">
<li class="media">
<img style="width: 60px;height: 60px" src="/pic/${article.picture}" class="mr-3 rounded" alt="...">
<div class="media-body">
<h5 class="mt-0 mb-1">${article.title }</h5>
<p class="pt-1"><fmt:formatDate value="${article.created }" pattern="yyyy-MM-dd HH:mm:ss"/>
<!-- 模态框 -->
<button type="button" class="btn btn-link" data-toggle="modal"
data-target="#exampleModalLong" onclick="detail(${article.id })">详情</button>
</p>
</div>
</li>
<hr>
</c:forEach>
</ul>
</div>
<jsp:include page="/WEB-INF/view/common/bookstappages.jsp"></jsp:include>
<!-- Modal 模态框 -->
<div class="modal fade" id="exampleModalLong" tabindex="-1"
role="dialog" aria-labelledby="exampleModalLongTitle"
aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle"><span id="title"></span></h5>
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="content"></div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
//在模态框中显示文章的详情
function detail(id){
//先清空院有的值
$("#title").empty();
$("#content").empty();
//查询文档详情
$.get("/my/article.do",{id:id},function(article){
$("#title").append(article.title);
$("#content").append(article.content);
})
}
function goPage(pageNum) {
$("#articles").load("/my/articles.do?pageNum="+pageNum);
}
</script>
</html>
此时就可完成上图中间展示文章的效果，并且顺带着使用模态框开发了查看功能
现在我们开发第二个小功能发布文章，我们需要完成富文本页面的开发
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
String htmlData = request.getParameter("content1") != null ? request.getParameter("content1") : "";
%>
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>KindEditor JSP</title>
<link rel="stylesheet" href="/resource/kindeditor/themes/default/default.css" />
<link rel="stylesheet" href="/resource/kindeditor/plugins/code/prettify.css" />
<script charset="utf-8" src="/resource/kindeditor/kindeditor.js"></script>
<script charset="utf-8" src="/resource/kindeditor/lang/zh-CN.js"></script>
<script charset="utf-8" src="/resource/kindeditor/plugins/code/prettify.js"></script>
<script>
KindEditor.ready(function(K) {
window.editor1 = K.create('textarea[name="content1"]', {
cssPath : '/resource/kindeditor/plugins/code/prettify.css',
uploadJson : '/resource/kindeditor/jsp/upload_json.jsp',
fileManagerJson : '/resource/kindeditor/jsp/file_manager_json.jsp',
allowFileManager : true,
afterCreate : function() {
var self = this;
K.ctrl(document, 13, function() {
self.sync();
document.forms['example'].submit();
});
K.ctrl(self.edit.doc, 13, function() {
self.sync();
document.forms['example'].submit();
});
}
});
prettyPrint();
});
</script>
</head>
<body>
<%=htmlData%>
<form id="form1">
<div class="form-group">
<label for="title"> 文章标题：</label>
<input id="title" type="text" class="form-control" name="title">
</div>
<div class="form-group form-inline">
所属栏目:<select class="form-control" id="channel" name="channelId">
<option>请选择</option>
</select>
所属分类:<select class="form-control" id="category" name="categoryId">
<option>请选择</option>
</select>
</div>
<div class="form-group">
<input type="file" name="file" class="form-control-file">
</div>
<textarea name="content1" cols="100" rows="8" style="width:700px;height:200px;visibility:hidden;"><%=htmlspecialchars(htmlData)%></textarea>
<br />
<input class="btn btn-info" type="button" name="button" value="提交内容" onclick="publish()"/>
</form>
</body>
<script type="text/javascript">
//发布文章
function publish(){
//form表单中包含文件的。需要使用formData 对象
var formData = new FormData($("#form1")[0]);
//封装文章内容-带html标签的
formData.set("content",editor1.html());
$.ajax({
type:"post",
data:formData,
url:"/my/publish.do",
processData:false,
contentType:false,
success:function(flag){
if(flag){
alert("发布成功！");
//发布成功跳转到我的文章页面
location.href="/my/index.do"
}else{
alert("发布失败！");
}
}
});
}
$(function(){
//当页面加载时，去查询所有的栏目
$.get("/channel/channels.do",function(list){
//遍历栏目
for(var i in list){
$("#channel").append("<option value='"+list[i].id+"'>"+list[i].name+"</option>")
}
});
//为栏目添加改变事件
$("#channel").change(function(){
//获取当前的栏目ID
var channelId =$(this).val();
$("#category").val("<option>请选择</option>");//先清空原有的分类的内容
//根据栏目ID查询分类
$.get("/channel/categorys.do",{channelId:channelId},function(list){
//遍历分类
for(var i in list){
$("#category").append("<option value='"+list[i].id+"'>"+list[i].name+"</option>")
}
});
})
})
</script>
</html>
<%!
private String htmlspecialchars(String str) {
str = str.replaceAll("&", "&");
str = str.replaceAll("<", "<");
str = str.replaceAll(">", ">");
str = str.replaceAll("\"", """);
return str;
}
%>
上面这个页面大家直接复制就行，大家可以在网上自己查一查kindeditor富文本的教程，总体上就是准备好静态资源--》需要跳转它的页面手动加载一下--》具体使用页面该富文本编辑器有个自带的页面，改一改就行
大家会发现，在富文本中写了去后台拿栏目数据的代码，所以我们需要开发获取栏目数据的后台接口
package com.wy.controller;
import java.util.List;
import javax.annotation.Resource;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.wy.bean.Category;
import com.wy.bean.Channel;
import com.wy.service.ChannelService;
/**
*
* @ClassName: ChannelController
* @Description: 栏目及分类
* @author: charles
* @date: 2020年4月2日 上午10:54:06
*/
@RequestMapping("/channel")
@Controller
public class ChannelController {
@Resource
private ChannelService channelService;
/**
*
* @Title: channels
* @Description: 返回所有栏目的json
* @return
* @return: List<Channel>
*/
@ResponseBody
@RequestMapping("/channels.do")
public List<Channel> channels(){
return channelService.selects();
}
/**
*
* @Title: categorys
* @Description: 根据栏目查询分类
* @param channelId
* @return
* @return: List<Category>
*/
@ResponseBody
@RequestMapping("/categorys.do")
public List<Category> categorys(Integer channelId){
return channelService.selectsByChannelId(channelId);
}
}
到此运行项目查看发布文章功能
这个时候你要注意，整个业务流有一点没有完成，就是你发布了文章，但此时只有你可以看见，你在首先是看不到这个文章的，这是应为新发布的文章还没有管理员审核，这一点我们下一章开发
本项目目前以上传github ：https://github.com/wangyang159/cmsdemo
4715
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
