基于‘纯洁的微笑’开源项目 — Favorites 源码分析

最新推荐文章于 2022-02-25 16:24:38 发布

Android小码家

最新推荐文章于 2022-02-25 16:24:38 发布

阅读量866

点赞数 2

分类专栏： Java 文章标签： java Favorites 开源项目源码分析

本文链接：https://blog.csdn.net/qq_20330595/article/details/84529804

版权

Java 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

引言：

对于某语言不算熟悉的话自创项目是很痛苦的过程，即便笔者是一位掌握java的Android码农，对于java入门也是深感无力，毕竟语言是基础，但框架设计模式却与Android有出入，且学习成本较高，mybatisc,Spring-boot,thleaf,Spring Data JPA,Tomcat,IDEA,MVC,等等。有的似曾相识，有的一脸蒙蔽，笔者正陷入这漩涡当中，本章笔者将对Favorites的源码分析中，整理出完整的项目结构思路以及架构思想，层层剥离，以至融会贯通。

源码链接如下：https://github.com/cloudfavorites/favorites-web

调试提示：

//作者使用thymeleaf拆分模块，如需单独调试请将该head单独粘贴到需要观察的页面。
  <head>
	  <meta charset="utf-8"></meta>
	  <meta http-equiv="X-UA-Compatible" content="IE=edge"></meta>
	  <meta name="renderer" content="webkit"/>
	  <meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
	  <meta name="description" content=""></meta>
	  <meta name="author" content=""></meta>
	  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"></meta>
	  <link rel="icon" href="/img/icon.ico" type="image/x-icon"/>
	  <title>云收藏 | 让收藏更简单</title>

	  <link rel="stylesheet" href="../../static/vendor/fontawesome/css/font-awesome.min.css"/>
	  <link rel="stylesheet" href="../../static/vendor/simple-line-icons/css/simple-line-icons.css"/>
	  <link rel="stylesheet" href="../../static/vendor/animate.css/animate.min.css"/>
	  <link rel="stylesheet" href="../../static/vendor/toastr/toastr.min.css"/>
	  <link rel="stylesheet" href="../../static/media/css/bootstrap.css"/>
	  <link rel="stylesheet" href="../../static/media/css/app.css"/>
	  <link rel="stylesheet" href="../../static/media/css/theme-i.css"/>
  </head>

项目架构

MVC
理解：负责项目的整体架构简单说就是Controller 调用Repository和Service 通过thymeleaf来响应界面
学习：
Maven+Spring-Boot
理解：Maven负责导包，Spring-Boot负责启动程序，找到SpringBootApplication即可，全局唯一。
学习：
thymeleaf

理解：首页的 return “index”;即表示映射到templates文件夹下的index.html

	@RequestMapping(value="/index",method=RequestMethod.GET)
	@LoggerManage(description="首页")
	public String index(Model model){
//		IndexCollectorView indexCollectorView = collectorService.getCollectors();
		model.addAttribute("collector","");
		User user = super.getUser();
		if(null != user){
			model.addAttribute("user",user);
		}
		return "index";
	}

基础：
2.1. https://www.cnblogs.com/ityouknow/p/5833560.html
2.2 https://www.jianshu.com/p/810ace1aeeae

Spring Data
理解：绑定bean对象
Spring Data JPA
理解：绑定bean对象执行相关操作的工具类
学习：

基本操作：https://www.cnblogs.com/zjfjava/p/8456771.html
操作手册：https://docs.spring.io/spring-data/jpa/docs/2.0.4.RELEASE/reference/html/
复杂查询：http://www.cnblogs.com/dixinyunpan/p/5856884.html
例子：

增：

userRepository.save(new User("aa", "aa@126.com", "aa", "aa123456"));

删：

//方式一  
@Transactional
void deleteById(Long id);	

//方式二
@Transactional
@Modifying
@Query("delete from Collect where favoritesId = ?1")
void deleteByFavoritesId(Long favoritesId);

查：

//方式一  固定写法
User findByUserName(String userName);
User findByUserNameOrEmail(String username, String email);
User findByEmail(String email);
User findById(long  id);

//方式二
public String baseSql="select c.id as id,c.title as title, c.type as type,c.url as url,c.logoUrl as logoUrl,c.userId as userId, "
			+ "c.remark as remark,c.description as description,c.lastModifyTime as lastModifyTime,c.createTime as createTime, "
			+ "u.userName as userName,u.profilePicture as profilePicture,f.id as favoritesId,f.name as favoriteName "
			+ "from Collect c,User u,Favorites f WHERE c.userId=u.id and c.favoritesId=f.id and c.isDelete='NO'";
	
//随便看看根据类别查询收藏
@Query(baseSql+ " and c.type='public' and c.category=?1 ")
Page<CollectView> findExploreViewByCategory(String category,Pageable pageable);

//方式三 联查+分页
public String baseSql="select c.id as id,c.title as title, c.type as type,c.url as url,c.logoUrl as logoUrl,c.userId as userId, "
			+ "c.remark as remark,c.description as description,c.lastModifyTime as lastModifyTime,c.createTime as createTime, "
			+ "u.userName as userName,u.profilePicture as profilePicture,f.id as favoritesId,f.name as favoriteName "
			+ "from Collect c,User u,Favorites f WHERE c.userId=u.id and c.favoritesId=f.id and c.isDelete='NO'";
	
@Query(baseSql+ " and c.userId=?1 ")
Page<CollectView> findViewByUserId(Long userId,Pageable pageable);

改：

//方式一
@Modifying(clearAutomatically=true)
@Transactional
@Query("update User set passWord=:passWord where email=:email") 
int setNewPassword(@Param("passWord") String passWord, @Param("email") String email);
//方式二
@Transactional
@Modifying
@Query("update Collect c set c.type = ?1 where c.id = ?2 and c.userId=?3 ")
int modifyByIdAndUserId(CollectType type, Long id, Long userId);

安全机制

AOP
SecurityFilter
错误URL提示页面

//在common.js中统一处理
function handleServerResponse() {
	if (xmlhttp.readyState == 4) {
		//document.getElementById("mainSection").innerHTML =xmlhttp.responseText;
		var text = xmlhttp.responseText;
		if(text.indexOf("<title>Favorites error Page</title>") >= 0){
			window.location.href="/error.html";
		}else{
			$("#content").html(xmlhttp.responseText);
		}
	}
}

统一错误提示（JSON）
密码学

统一外部接口

Session 和Cookie

Cookie返回给客户端

//保存
Cookie cookie = new Cookie(Const.LOGIN_SESSION_KEY, cookieSign(loginUser.getId().toString()));
cookie.setMaxAge(Const.COOKIE_TIMEOUT);
cookie.setPath("/");
response.addCookie(cookie)

//取值验证
Cookie[] cookies = request.getCookies();
if (cookies != null) {
    boolean flag = true;
    for (int i = 0; i < cookies.length; i++) {
        Cookie cookie = cookies[i];
        if (cookie.getName().equals(Const.LOGIN_SESSION_KEY)) {
            if (StringUtils.isNotBlank(cookie.getValue())) {
                flag = false;
            } else {
                break;
            }
        }
    }
}

Session ：相当于是SP

protected HttpServletRequest getRequest() {
    return ((ServletRequestAttributes) RequestContextHolder.getRequestAttributes()).getRequest();
}
    
protected HttpSession getSession() {
    return getRequest().getSession();
}

getSession().setAttribute(Const.LOGIN_SESSION_KEY, user);

protected User getUser() {
    return (User) getSession().getAttribute(Const.LOGIN_SESSION_KEY);
}

Session与Cookie的
cookie数据存放在客户的浏览器上，session数据放在服务器上。
cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗考虑到安全应当使用session。
session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能考虑到减轻服务器性能方面，应当使用COOKIE。
单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。
---------------------建议---------------------
将登陆信息等重要信息存放为SESSION
其他信息如果需要保留，可以放在COOKIE中

Spring-Boot注解

参考：https://www.cnblogs.com/ldy-blogs/p/8550406.html

@profile的用法
https://blog.csdn.net/wild46cat/article/details/71189858-
@Server("") 括号内作用


//接口
public interface FeedbackService {

    public void saveFeeddback(Feedback feedback,Long userId);
}

//实现一
@Service("feedbackService")
public class FeedbackServiceImpl implements FeedbackService {

    @Autowired
    private FeedbackRepository feedbackRepository;

    @Override
    public void saveFeeddback(Feedback feedback,Long userId) {
    // 一的方法
    }
}

//实现二
@Service("feedbackService2")
public class FeedbackServiceImpl2 implements FeedbackService {

    @Autowired
    private FeedbackRepository feedbackRepository;

    @Override
    public void saveFeeddback(Feedback feedback,Long userId) {
       // 二的方法
    }
}
//一般情况下这样写就可以了
初始化
@RestController
@RequestMapping("/feedback")
public class FeedbackController extends BaseController{
    @Autowired
    private FeedbackService feedbackService;
}
//出现两个实现时
初始化
@RestController
@RequestMapping("/feedback")
public class FeedbackController extends BaseController{

    @Autowired 
    @Qualifier("feedbackService")
    private FeedbackService feedbackService;
    
    @Autowired 
    @Qualifier("feedbackService2")
    private FeedbackService feedbackService2;
}

配置文件

@Configuration
理解：用于定义配置类，@Bean的对象将被加入（Context）上下文中作为全局变量。
学习：
https://blog.csdn.net/leoxyk/article/details/79800020（基础）
https://blog.csdn.net/qq_34531925/article/details/78194651（高级）

前端

html2Map:HtmlUtil

ajax 与Vue http请求
2.1 点击事件绑定

 th:onclick="'login()'"//thymeleaf
 onclick="login()"//js
 v-on:click="login"//Vue

2.1 http
注意:这里的Vue的使用方法

//Vue
Vue.http.options.emulateJSON = true;
var loginPage = new Vue({
    el: '#loginPage',
    data: {
        'username': '',
        'password': ''
    },
    methods: {
        login: function (event) {
            var ok = $('#form').parsley().isValid({force: true});
            if (!ok) {
                return;
            }
            var datas = {
                userName: this.username,
                passWord: this.password
            };
            this.$http.post('/user/login', datas).then(function (response) {
                if (response.data.rspCode == '000000') {
                    window.open(response.data.data, '_self');
                } else {
                    $("#errorMsg").html(response.data.rspMsg);
                    $("#errorMsg").show();
                }
            }, function (response) {
                console.log('error');
            })
        }
    }
})
//jquery
  function login() {
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    var form = new FormData()
    form.append("userName", username)
    form.append("passWord", password)
    $.ajax({
        type: "POST",
        dataType: "json",//预期服务器返回的数据类型
        // contentType: "application/json", 不能有这个，不然java后端无法接受到User的Json对象
        contentType: false, // 注意这里应设为false
        processData: false,
        url: "/user/login",
        data: form,
        success: function (response) {
            if (response.rspCode == '000000') {
                window.open(response.data, '_self');
            } else {
                $("#errorMsg").html(response.rspMsg);
                $("#errorMsg").show();
            }
        },
        error: function (response) {
            console.log('error');
        }
    });
}

测试

直接看源码即可，嘿嘿

打包上线

参考：https://blog.csdn.net/qq_20330595/article/details/83862486#javaweb_38

综合案例——收藏列表

//登录成功后
window.open(response.data, '_self');//打开一个新窗口，并控制其外观
 
//IndexController控制器页面
@RequestMapping(value="/",method=RequestMethod.GET)
@LoggerManage(description="登陆后首页")
public String home(Model model) {
	long size= collectRepository.countByUserIdAndIsDelete(getUserId(),IsDelete.NO);
	Config config = configRepository.findByUserId(getUserId());
	Favorites favorites = favoritesRepository.findById(Long.parseLong(config.getDefaultFavorties()));
	List<String> followList = followRepository.findByUserId(getUserId());
	model.addAttribute("config",config);
	model.addAttribute("favorites",favorites);
	model.addAttribute("size",size);
	model.addAttribute("followList",followList);
	model.addAttribute("user",getUser());
	model.addAttribute("newAtMeCount",noticeRepository.countByUserIdAndTypeAndReaded(getUserId(), "at", "unread"));
	model.addAttribute("newCommentMeCount",noticeRepository.countByUserIdAndTypeAndReaded(getUserId(), "comment", "unread"));
	model.addAttribute("newPraiseMeCount",noticeRepository.countPraiseByUserIdAndReaded(getUserId(), "unread"));
	logger.info("collect size="+size+" userID="+getUserId());
	return "home";
}

home.html

//可以看到基本都是 thymeleaf的标签 
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.w3.org/1999/xhtml"
      layout:decorate="layout">
  <head th:include="layout :: htmlhead" th:with="title='favorites'"></head>
  <body>
      <section layout:fragment="content">
      </section>
  </body>
  <script type='text/javascript'>
 </script>
</html>

// layout:decorate="layout"
表示该html为一个子模板，且被layout.html引用

// layout:fragment="content"表示其将会替换的部分
<section layout:fragment="content">
 </section>
 
 //layout 是文件地址，如果有文件夹可以这样写 fileName/layout:htmlhead
htmlhead 是指定义的代码片段 如 th:fragment="copy"
//th:with="title='favorites'表示子模板想父布局传递值favorites
//整句的意思是 home.html的content部分替换layout.html的content部分，并修改标题为favorites

 th:include="layout :: htmlhead" th:with="title='favorites'

参考：https://blog.csdn.net/u010784959/article/details/81001070

layout.html

<div th:replace="fragments/left :: left">left</div>
<div th:replace="fragments/sidebar :: sidebar">sidebar</div>
<div layout:fragment="content" id="content" ></div>

th:fragment	
布局标签，定义一个代码片段，方便其它地方引用<div th:fragment="alert">
th:include 
布局标签，替换内容到引入的文件<head th:include="layout :: htmlhead" th:with="title='xx'"></head> />
th:replace	
布局标签，替换整个标签到引入的文件<div th:replace="fragments/header :: title"></div>

请注意 locationUrl是common.js的函数，即get访问/standard/my/0 ，回显到home.html

locationUrl('/standard/my/0','home');

function locationUrl(url,activeId){
	if(mainActiveId != null && mainActiveId != "" && activeId != null && activeId != ""){
		$("#"+mainActiveId).removeAttr("class");
		$("#"+activeId).attr("class", "active");
		mainActiveId = activeId;
	}
	goUrl(url,null);
}

var xmlhttp = new getXMLObject();
function goUrl(url,params) {
	fixUrl(url,params);
	if(xmlhttp) {
		//var params = "";
		xmlhttp.open("POST",url,true);
		xmlhttp.onreadystatechange = handleServerResponse;
		xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=UTF-8');
		xmlhttp.send(params);
	}
}

//最终将获取到的html（statnder.html）内容赋给id=content(layout.html)的布局
function handleServerResponse() {
	if (xmlhttp.readyState == 4) {
		//document.getElementById("mainSection").innerHTML =xmlhttp.responseText;
		var text = xmlhttp.responseText;
		if(text.indexOf("<title>Favorites error Page</title>") >= 0){
			window.location.href="/error.html";
		}else{
			$("#content").html(xmlhttp.responseText);
		}
	}
}

这里的关键在于layout.html 其管理页面以及立即执行函数写的很巧妙。

home页面收藏，点赞，评论，删除，修改属性

通过上面的分析我们可以发现statnder.html是被填充到home.html中的，也可说是到layout.html的

 <div layout:fragment="content" id="content" ></div>

  <a th:id="'like' + ${collect.id}"  class="sharing-action-button"
    th:style="'display:' + @{(${collect.Praise} ? 'none' : 'inline-block')} + ''"
    th:onclick="'changeLike(' + ${collect.id} + ');'">
     <span class="fa fa-thumbs-o-up"></span>
     <show th:id="'likeS' + ${collect.id}"  th:text="|点赞(${collect.praiseCount})|"></show>
 </a>
 
 // 在collec.js中调用  可以看出 他在界面底部做了一个隐藏字段，方便检验登录状态,随时跳转登录
 function changeLike(id){
     var userId = document.getElementById("userId").value;
     if(userId != "0"){
	    $.ajax({
			async: false,
			type: 'POST',
			dataType: 'json',
			data:"",
			url: '/collect/like/'+id,
			error : function(XMLHttpRequest, textStatus, errorThrown) {
				console.log(XMLHttpRequest);
				console.log(textStatus);
				console.log(errorThrown);
			},
			success: function(like){
				if($("#like"+id).is(":hidden")){
					$("#like"+id).show();
					var praiseCount=parseInt($("#praiseC"+id).val())-1;
					$("#praiseC"+id).val(praiseCount);
					$("#likeS"+id).html("点赞("+praiseCount+")");
					$("#likel"+id).show();
					$("#unlike"+id).hide();
					$("#unlikel"+id).hide();
				}else{
					$("#like"+id).hide();
					$("#likel"+id).hide();
					$("#unlike"+id).show();
					$("#unlikel"+id).show();
					var praiseCount=parseInt($("#praiseC"+id).val())+1;
					$("#praiseC"+id).val(praiseCount);
					$("#unlikeS"+id).html("取消点赞("+praiseCount+")");

				}
			}
		});
	}else{
	    window.location.href="/login";
	}
}

修改

//collect是从HomeController传递过来的
<a href="javascript:void(0);"
	class="normal-color-a ng-binding"  
	th:text="${collect.favoriteName}"
	th:onclick="'locationUrl(\'/standard/' + ${collect.favoritesId} + '/'+${collect.userId}+'\',\''+ 	${collect.favoritesId} + '\');'">文件加名称</a>

这样还是访问了一次@RequestMapping(value="/standard/{type}/{userId}")

评论
步骤：查询是否显示评论，查询评论列表，填充回显填充评论列表，显示评论输入框

<a class="sharing-action-button btn-comment"
   href="javascript:void(0);"
    th:onclick="'switchComment(' + ${collect.id} + ');'">
     <span class="fa fa-comment-o"></span>
     <show th:id="'commentS' + ${collect.id}"
           th:text="|评论(${collect.commentCount})|">
         评论(0)
     </show>
 </a>
 //还是在collect.js中调用
 function switchComment(collectId){
     var userId = document.getElementById("userId").value;
     if(userId != "0"){
         if($("#collapse"+collectId).hasClass('in')){
             $("#collapse"+collectId).removeClass('in');
         }else{
              showComment(collectId);
         }
     }else{
         window.location.href="/login";
     }
}

function showComment(collectId){
	  $.ajax({
			async: false,
			type: 'POST',
			dataType: 'json',
			data:'',
			url: '/comment/list/'+collectId,
			error : function(XMLHttpRequest, textStatus, errorThrown) {
				console.log(XMLHttpRequest);
				console.log(textStatus);
				console.log(errorThrown);
			},
			success: function(comments){
				initComment(comments,collectId);
	    	    $("#collapse"+collectId).addClass('in');
			}
		});
}
function initComment(comments,collectId){
	var comment='';
	 $("#commentList"+collectId).html("");
	for(var i=0;i<comments.length;i++){
		var item ='<div class=\"media bb p\"><small class=\"pull-right text-muted\">'+comments[i].commentTime+'</small>';
		item=item+'<div class=\"pull-left\"><img class=\"media-object img-circle thumb32\" src=\"/'+comments[i].profilePicture+ '\" /></div> ';
		item=item+'<div class=\"media-body\">  <span class=\"media-heading\">  <p class=\"m0\"> '
		item=item+"<a href=\"javascript:void(0);\" onclick=\"locationUrl('/user/" + comments[i].userId + "/0')\">"+comments[i].userName+"</a>";
		item=item+'</p> <p class=\"m0 text-muted\">';
		if(!isEmpty(comments[i].replyUserName)){
			item=item+'回复@'+comments[i].replyUserName+':'+comments[i].content+'<small>';
		}else{
			item=item+comments[i].content+'<small>';
		}

		if($("#loginUser").length > 0){
			if(comments[i].userId==$("#loginUser").val()){
				item=item+"<a href=\"javascript:void(0);\" onclick=\"deleteComment('"+comments[i].id+"','"+collectId+"')\" >    删除</a>";
			}else{
				item=item+"<a href=\"javascript:void(0);\" onclick=\"replyComment('"+comments[i].userName+"','"+collectId+"')\" class=\"replyComment\" >    回复</a>";
			}
		}else{
			if(comments[i].userId==$("#userId").val()){
				item=item+"<a href=\"javascript:void(0);\" onclick=\"deleteComment('"+comments[i].id+"','"+collectId+"')\" >    删除</a>";
			}else{
				item=item+"<a href=\"javascript:void(0);\" onclick=\"replyComment('"+comments[i].userName+"','"+collectId+"')\" class=\"replyComment\" >    回复</a>";
			}
		}
		item=item+'</small></p></span></div></div>';
		comment=comment+item;
	}
	$("#commentList"+collectId).append(comment);

    if($("#loginUserInfo").val()==null||$("#loginUserInfo").val()==''){
        $(".replyComment").hide();
    }
}

修改收藏

//对于下拉菜单不必深究，因为他是bootstrap的插件
//参考：http://www.runoob.com/bootstrap/bootstrap-dropdown-plugin.html
<div class="pull-right dropdown dropdown-list">
    <a href="#" data-toggle="dropdown"
       class="sharing-more-button"
       th:if="${userId == collect.userId}">
        <span class="fa fa-angle-down"></span>
    </a>
    <ul class="dropdown-menu animated bounceIn">
        <li>
            <div class="list-group">
                <a href="javascript:void(0);"
                   class="list-group-item"
                   th:onclick="'getCollect(' + ${collect.id} + ',\'\');'">
                    <div class="media-box">
                        <div class="pull-left">
                            <em class="fa fa-pencil-square-o fa-2x fa-fw text-info"></em>
                        </div>
                        <div class="media-box-body clearfix">
                            <p class="m0">修改收藏</p>
                            <p class="m0 text-muted">
                                <small>修改收藏的各种属性</small>
                            </p>
                        </div>
                    </div>
                </a>
            </div>
        </li>
    </ul>
</div>

//调用collect.js中的getCollect方法
//主要看$('#modal-changeSharing').modal('show');函数显示修改窗口
//该方法调用CollectController的detail函数执行查找
@RequestMapping(value="/detail/{id}")
public Collect detail(@PathVariable("id") long id) {
	Collect collect=collectRepository.findById(id);
	return collect;
}
function getCollect(id,user){
    var userId = document.getElementById("userId").value;
    if(userId != "0"){
        $.ajax({
            async: false,
            type: 'POST',
            dataType: 'json',
            data:"",
            url: '/collect/detail/'+id,
            error : function(XMLHttpRequest, textStatus, errorThrown) {
                console.log(XMLHttpRequest);
                console.log(textStatus);
                console.log(errorThrown);
            },
            success: function(collect){
                $("#ctitle").val(collect.title);
                $("#clogoUrl").val(collect.logoUrl);
                $("#cremark").val(collect.remark);
					$("#cdescription").val(collect.description);
                $("#ccollectId").val(collect.id);
                $("#curl").val(collect.url);
                $('#modal-changeSharing').modal('show');
                if("private" == gconfig.defaultCollectType){
                    $("#type").prop('checked',true);
                }else{
                    $("#type").prop('checked',false);
                }
                if("simple"==gconfig.defaultModel){
                    $("#show2").hide();
                    $("#show1").show();
                    $("#model2").hide();
                    $("#model1").show();
                }else{
                    $("#show1").hide();
                    $("#show2").show();
                    $("#model1").hide();
                    $("#model2").show();
                }
                if("usercontent" == user){
                    if($("#userId").val() == $("#loginUser").val()){
                        $("#favoritesSelect").val(collect.favoritesId);
                    }else{
                        $("#favoritesSelect").val(gconfig.defaultFavorties);
                    }
                }else{
                    if($("#userId").val() == collect.userId){
                        $("#favoritesSelect").val(collect.favoritesId);
                    }else{
                        $("#favoritesSelect").val(gconfig.defaultFavorties);
                    }
                }
                $("#newFavorites").val("");
                $("#userCheck").val(user);
                loadFollows();
            }
        });
    }else{
    	window.location.href="/login";
    }
}

//回显alert.html中的modal-changeSharing部分
//fragments/collect :: collect  理解为在fragments/collect文件下的id为collect的html
//参考：http://www.cnblogs.com/lazio10000/p/5603955.html
<div id="modal-changeSharing" class="modal fade">
        <div class="modal-dialog wd-xl">
            <div th:replace="fragments/collect :: collect">collect</div>
        </div>
    </div>

删除（收藏夹）

//layout.html中注入了弹窗页面
<div th:replace="fragments/alert :: alert">alert</div>

//在standard.html中data-target="#modal-removeFav"
 <div class="pull-right" th:if="${otherPeople == null and type != 'garbage'}">
  <span class="title-small icon-folder-alt mr-sm"></span>
    <span data-toggle="modal" data-target="#modal-removeFav"
          class="title-small clickable">删除</span>
</div>

//对应alert.html中的
<div id="modal-removeFav" class="modal fade">
     <div class="modal-dialog">
        <div class="modal-content">
           <div class="modal-header">
              <button type="button" data-dismiss="modal" class="close">
                 <span>&times;</span>
              </button>
              <h4 class="modal-title">删除收藏夹名</h4>
           </div>
           <div class="modal-body">
              <p>删除收藏夹将删除该收藏下所有收藏，且无法找回，是否继续？</p>
           </div>
           <div class="modal-footer">
              <button type="button" data-dismiss="modal" class="btn">取消</button>
              <button id="delFavoritesBtn" onclick="delFavorites()" type="button" class="btn btn-danger">删除收藏夹</button>
           </div>
        </div>
     </div>
  </div>

删除收藏

//standard.html中调用
<a href="javascript:void(0);"
     class="list-group-item"
      th:onclick="'onCollect(' + ${collect.id} + ',\'\');'">
       <div class="media-box">
           <div class="pull-left">
               <em class="fa fa-trash fa-2x fa-fw text-danger"></em>
           </div>
           <div class="media-box-body clearfix">
               <p class="m0">删除</p>
               <p class="m0 text-muted">
                   <small>该分享会永久删除</small>
               </p>
           </div>
       </div>
   </a>
   
//alert.html弹出提示
  <div id="modal-remove" class="modal fade">
      <div class="modal-dialog">
         <div class="modal-content">
            <div class="modal-header">
               <button type="button" data-dismiss="modal" class="close">
                  <span>&times;</span>
               </button>
               <h4 class="modal-title">删除收藏</h4>
            </div>
            <div class="modal-body">
               <p>该收藏将被永久删除，且无法找回，是否继续？</p>
            </div>
            <div class="modal-footer">
               <button id="delCollect" type="button"  class="btn btn-primary" onclick="delCollect()" >确定</button>
               <button type="button" data-dismiss="modal" class="btn btn-danger">取消</button>
            </div>
         </div>
      </div>
   </div>

//collect.js中执行
function delCollect(){
	 $.ajax({
			async: false,
			type: 'POST',
			dataType: 'json',
			data:"",
			url: '/collect/delete/'+$("#collectId").val(),
			error : function(XMLHttpRequest, textStatus, errorThrown) {
				console.log(XMLHttpRequest);
				console.log(textStatus);
				console.log(errorThrown);
			},
			success: function(response){
				loadFavorites();
				if("usercontent" == $("#userCheck").val()){
					userLocationUrl($("#forward").val(),"userAll");
					loadUserFavorites();
				}else{
					locationUrl($("#forward").val(),"home");
				}
				$('#modal-remove').modal('hide');
			}
		});
}

综合案例——左边导航栏

//可以发现activeId即当前高亮的nav
function locationUrl(url,activeId){
	if(mainActiveId != null && mainActiveId != "" && activeId != null && activeId != ""){
		$("#"+mainActiveId).removeAttr("class");
		$("#"+activeId).attr("class", "active");
		mainActiveId = activeId;
	}
	goUrl(url,null);
}

导入界面

//重点 name="htmlFile"  filestyle="" type="file" accept="text/html" 

<div class="panel">
   <div class="panel-heading">请选择浏览器导出的html格式的书签文件</div>
   <div class="panel-body">
      <div class="form-group">
         <input id="fileInput" name="htmlFile"  filestyle="" type="file" accept="text/html" data-class-button="btn btn-default" data-class-input="form-control" data-button-text="" class="form-control" tabindex="-1" style="position: absolute; clip: rect(0px 0px 0px 0px);" />
         <div class="bootstrap-filestyle input-group">
          	<input type="text" id="fileInputName" value="" class="form-control " disabled="" />
          	<span class="group-span-filestyle input-group-btn" tabindex="0">
           	<label for="fileInput" class="btn btn-default ">
           		<span class="glyph glyphicon glyphicon-folder-open"></span>
           	</label>
          	</span>
         	</div>
      </div>
   </div>
</div>

js部分

//立即执行函数
$(function(){
	 //toast插件
	  toastr.options = {
	            'closeButton': true,
	            'positionClass': 'toast-top-center',
	            'timeOut': '5000',
	         };
	   //jquery的输入监听
	  $("#fileInput").change(function(){
		  getFileName("fileInput");
	  });
	  var count = 0;
	  //点击事件 
	  $("#submitBtn").click(function(){
		  if($("#fileInputName").val()==""){
			  return;
		  }
		  //防重复点击 
		  $("#submitBtn").attr("disabled","disabled");
		  //ajaxSubmit新的提交方式
		  $("#importHtmlForm").ajaxSubmit({
				type: 'post',
				async: true,
				url: '/collect/import',
				success: function(response){
				}
			});
		  if(count == 0){
			  toastr.success('正在导入到"导入自浏览器"收藏夹，请稍后查看', '操作成功');
			  loadFavorites();
		  }
		  count++;
	  });
  });

布局

//在app.css中的响应式布局
 <div class="content-wrapper">

导出界面

//表单
<form action="/collect/export" id="exportForm" method="post" onsubmit="return false"/>
//上传
$("#exportBtn").click(function(){
	if($("input[name='favoritesId']:checked").length ==0){
		return;
	}
	$("#exportForm").removeAttr("onsubmit");
	$("#exportForm").submit();
	$("#exportForm").attr("onsubmit","return false");
});

//导出逻辑
@RequestMapping("/export")
@LoggerManage(description="导出收藏夹操作")
public void export(String favoritesId,HttpServletResponse response){
	if(StringUtils.isNotBlank(favoritesId)){
		try {
			String[] ids = favoritesId.split(",");
			String date = new SimpleDateFormat("yyyyMMddHHmmss").format(new Date());
			String fileName= "favorites_" + date + ".html";
			StringBuilder sb = new StringBuilder();
			for(String id : ids){
				try {
					sb = sb.append(collectService.exportToHtml(Long.parseLong(id)));
				} catch (Exception e) {
					logger.error("异常：",e);
				}
			}
			sb = HtmlUtil.exportHtml("云收藏夹", sb);
			response.setCharacterEncoding("UTF-8");  
			response.setHeader("Content-disposition","attachment; filename=" + fileName);
			response.getWriter().print(sb);
		} catch (Exception e) {
			logger.error("异常：",e);
		}
	}
}

综合案例——顶部导航栏

缩小扩大左侧抽屉布局

  <ul class="nav navbar-nav">
   <li>
       <a title="缩小/扩大侧栏" class="hidden-xs" data-toggle-state="aside-collapsed"
          href="#"> <em class="fa fa-navicon"></em>
       </a>
       <a title="缩小/扩大侧栏" class="visible-xs sidebar-toggle" data-no-persist="true"
          data-toggle-state="aside-toggled" href="#"> <em class="fa fa-navicon"></em>
       </a>
   </li>
</ul>

对应Logo的变化

<div class="navbar-header">
            <a class="navbar-brand" href="/index">
                <div class="brand-logo">
                    <img class="img-responsive" alt="App Logo" th:src="@{/img/logo.png}"/></div>
                <div class="brand-logo-collapsed">
                    <img class="img-responsive" alt="App Logo" th:src="@{/img/logo.png}"/></div>
            </a>
        </div>

消息通知+弹出层

  <li class="dropdown dropdown-list">
  <a title="消息通知" data-toggle="dropdown" href="#">
      <em class="icon-bell"></em>
      <!--<div class="label label-danger" th:if="${newAtMeCount gt 0 or newCommentMeCount gt 0 or newPraiseMeCount gt 0}" th:text="${newAtMeCount}+${newCommentMeCount}+${newPraiseMeCount}"></div>-->
      <div class="label label-danger" id="noticeNum"></div>
  </a>

  <ul class="dropdown-menu animated flipInX">
      <li>
          <div class="list-group">
              <a class="list-group-item" href="javascript:void(0);"
                 onclick="showNotice('at')">
                  <div class="media-box">
                      <div class="pull-left">
                          <em class="fa fa-at fa-2x text-info"></em>
                      </div>

                      <div class="media-box-body clearfix">
                          <p class="m0">@我的</p>
                          <p class="m0 text-muted">
                              <small id="atMeNewNotice"></small>
                              <input type="hidden" id="newAtMeCount"/>
                          </p>
                      </div>
                  </div>
              </a>

              <a class="list-group-item" href="javascript:void(0);"
                 onclick="showNotice('comment')">
                  <div class="media-box">
                      <div class="pull-left">
                          <em class="fa fa-comment fa-2x text-warning"></em>
                      </div>

                      <div class="media-box-body clearfix">
                          <p class="m0">评论我的</p>
                          <p class="m0 text-muted">
                              <small id="commentMeNewNotice"></small>
                              <input type="hidden" id="newCommentMeCount"/>
                          </p>
                      </div>
                  </div>
              </a>

              <a class="list-group-item" href="javascript:void(0);"
                 onclick="showNotice('praise')">
                  <div class="media-box">
                      <div class="pull-left">
                          <em class="fa fa-thumbs-up fa-2x text-success"></em>
                      </div>
                      <div class="media-box-body clearfix">
                          <p class="m0">赞我的</p>
                          <p class="m0 text-muted">
                              <small id="praiseMeNewNotice"></small>
                              <input id="newPraiseMeCounts" type="hidden"/>
                          </p>
                      </div>
                  </div>
              </a>


              <a class="list-group-item" href="javascript:void(0);"
                 onclick="showNotice('letter')">
                  <div class="media-box">
                      <div class="pull-left">
                          <em class="fa fa-bell fa-2x text-danger"></em>
                      </div>
                      <div class="media-box-body clearfix">
                          <p class="m0">私信我的</p>
                          <p class="m0 text-muted">
                              <!--<small>0 新消息</small>-->
                              <small id="newLetterNotice"></small>
                              <input id="newLetterNoticeCount" type="hidden"/>
                          </p>
                      </div>
                  </div>
              </a>
          </div>
      </li>
  </ul>
</li>
<li>

搜索框

<form class="navbar-form" role="search">
            <div class="form-group has-feedback">
                <input id="searchKey" type="text" class="form-control" placeholder="输入并且按回车确定..."/>
                <div class="fa fa-times form-control-feedback" data-search-dismiss=""></div>
            </div>
            <button class="hidden btn btn-default" type="button">提交</button>
        </form>

搜素逻辑

 document.onkeydown = function (e) {
   if (!e) e = window.event;//火狐中是 window.event
     if ((e.keyCode || e.which) == 13) {
         window.event ? window.event.returnValue = false : e.preventDefault();
         var key = document.getElementById("searchKey").value;
         if (key != '') {
             locationUrl('/search/' + key, "");
         }
     }
 }
 
//HomeControllerk逻辑
@RequestMapping(value="/search/{key}")
@LoggerManage(description="搜索")
public String search(Model model,@RequestParam(value = "page", defaultValue = "0") Integer page,
        @RequestParam(value = "size", defaultValue = "20") Integer size, @PathVariable("key") String key) {
	Sort sort = new Sort(Direction.DESC, "id");
    Pageable pageable = PageRequest.of(page, size,sort);
    List<CollectSummary> myCollects=collectService.searchMy(getUserId(),key ,pageable);
    List<CollectSummary> otherCollects=collectService.searchOther(getUserId(), key, pageable);
	model.addAttribute("myCollects", myCollects);
	model.addAttribute("otherCollects", otherCollects);
	model.addAttribute("userId", getUserId());
	
	model.addAttribute("mysize", myCollects.size());
	model.addAttribute("othersize", otherCollects.size());
	model.addAttribute("key", key);

	logger.info("search end :"+ getUserId());
	return "collect/search";
}

评论赞私信以及上面的搜素统统是通过handleServerResponse这个监听器方法获取并替换#content的,在layout.js中

function handleServerResponse() {
	if (xmlhttp.readyState == 4) {
		//document.getElementById("mainSection").innerHTML =xmlhttp.responseText;
		var text = xmlhttp.responseText;
		if(text.indexOf("<title>Favorites error Page</title>") >= 0){
			window.location.href="/error.html";
		}else{
			$("#content").html(xmlhttp.responseText);
		}
	}
}

layout:decorate=“layout”	表示被父布局layout.html引用
th:include=“layout :: htmlhead” th:with=“title=‘favorites’”	layout的th:fragment="htmlhead"必须与th:include="layout :: htmlhead"中的值（htmlhead）对应，但th:include="layout :: htmlhead"非必须
layout:fragment=“content”	在子布局中，一般写自己的布局，用来替换父布局，content为自定义名称，需要与layout.html的layout:fragment="content"相对应

综合案例 —— 个人中心

待补充。。

总结：

分析了源码之后我们得到了什么
1.1. 基本掌握MVC设计模式
1.2. 基本掌握thymeleaf
1.3. 基本掌握项目的部署与搭建（Tomcat）
1.4. 基本理解项目整体架构
1.5. 基本掌握Spring-boot框架
1.6. 基本掌握spring-data-jpa框架
我们应该如何去孵化自己的项目
答：其实这个问题应该问下自己，最终学习的目的是什么，如果只是为了学习而学习是很可怕的，因为没有目的性，我们很难坚持，且没有实战的学习毫无意义。笔者也时常问自己究竟想做什么？就在此刻笔者也没有想清楚，但是秉着全栈的初衷，笔者掌握一门后台语言的想法始终不变，就笔者的学习思路，笔者打算就地取材，直接站在巨人的肩膀上面，修修改改，最终改造成一个笔者满意的个人后台系统，可能其中充满着原作者的代码以及版权声明，不过那只是后话。循序渐进的学习才能真正的掌握一门语言，即便笔者有java基础也绝不可能一步登天，任何人都一样，个中的原因笔者不想解释。原作者的项目是从2016年中写到今年下半年，2年之久的项目，加之其精进的代码风格，笔者本着敬畏之心慢慢阅读，断续的花了将近2周的时间，虽收获颇丰，但碍于对java的认知程度不够，仍未能完全理解。

Android小码家

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
基于‘纯洁的微笑’开源项目 — Favorites 源码分析

引言：对于某语言不算熟悉的话自创项目是很痛苦的过程，即便笔者是一位掌握java的Android码农，对于java入门也是深感无力，毕竟语言是基础，但框架设计模式却与Android有出入，且学习成本较高，mybatisc,Spring-boot,thleaf,Spring Data JPA,Tomcat,IDEA,MVC,等等。有的似曾相识，有的一脸蒙蔽，笔者正陷入这漩涡当中，本章笔者将对Favo...
复制链接

扫一扫

专栏目录