springboot留言板

本项目源码及版权为原作者所有，源码地址如下
https://gitee.com/mm12ww/LeaveWord
最近项目需要此功能，借鉴网上源码，作此总结记录

这一部分，对源代码进行讲解以及详细介绍如何整合到自己的项目

前端页面主要分为登录页面和跳转页面
登录页面表单：

     

          
          
           
            
          立即登录
      

这里看到表单里有3个输入框和1个登录按钮

在主页面，获取用户名和密码
，使用ajax提交到后台，判断是否存在，若不存在，则给出提示，若存在，登录成功，并设置cookie值。

在打印出来的对话框，可以看到该账户的id为69

在主页面添加”留言板“链接

 
 留言板
 

给该网址赋予权限

public static List authorityExcludePathPatterns = Arrays.asList(
			"https://blog.csdn.net/system/leaveword"，
			);

留言板中的代码需要注意

留言板初始化函数

initWords();
  function initWords() {
    var users = JSON.parse(getCookie("user"));
    //var users= JSON.parse("<%=session.getAttribute("user")%>");
    alert("initwords里的 getCookie"+users);
    var user = {};
    user.userId = users.id;
    alert("查询到的userid"+user.userId);
    var response;
    $.ajax({
      async : false,
      type : 'POST',
      url : "/system/getWords",
      data : user,
      dataType : 'json',
      success : function(result) {
        response = result;
        alert("initword里response："+response)
      },
      error : function(result) {
        alert('initword里的服务器异常');
      }
    });
    if(response.status == "0"){
      var words = response.content;
      words = eval("("+words+")");
      alert("words:"+words);
      var html = "";
      for(var i=0;i
        html+=''+words[i].title+'  '+getUserName(words[i].userId)+''+
                '        
'+
                '        '+words[i].content+'';
      }
      document.getElementById("wordArea").innerHTML = html;
    }
    else{
      alert(response.content);
    }
  }

这里注意赋值是否正确，在上文登录页面打印出的cookie值来看，我开发的项目需要把cookie中的users.id赋值给留言板中的留言板主页面的userId ，以便与之后通过此userId查询数据库，判断是否已存在留言。
通过alert打印userId

显示和登录的用户id吻合正确

准备好留言类型以及标题时，点击提交按钮
实现留言函数为

 function leaveWord() {
    alert("点击提交，进入留言函数");
    var users = JSON.parse(getCookie("user"));

    //var users = data.username;
    //var users = JSON.stringify(data);
    alert("留言用户名"+users);
    alert("user.userId"+users.id);
    var word = {};
    word.title = document.getElementById("title").value;
    word.content = document.getElementById("content").value;
    word.userId = users.id;
    alert("word"+word);
    alert("word.title="+word.title);;
    var response;
    $.ajax({
      async : false,
      type : 'POST',
      url : "/system/toleaveword",
      data : word,
      dataType : 'json',
      success : function(result) {
        response = result;
      },
      error : function(result) {
        alert('留言提交时的服务器异常');
      }
    });
    if(response.status == "0"){
      document.getElementById("wordArea").innerHTML += ''+word.title+'  '+getUserName(word.userId)+''+
              '        
'+
              '        '+word.content+'';
    }
    else{
      alert(response.content);
    }

在这里同样需要注意，

userId是否赋值正确。

在前端页面确保传值正确，cookie没有问题（如何设置cookie,这里不做赘述，需要请移步这篇博客）
就可以把后台逻辑代码迁移到自己的项目。
源码推荐去版权博主那下载，页面设计我没有作太大的变动，只是加了返回按钮，后期会增加删除按钮。
需要更改后的源码，在GZH：大鱼海无糖，回复：留言板。