springboot留言板

一、前言

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

二、代码

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

1.前端页面

1）登录页面

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

     <form id="login-form" method="post" >
          <input type="text" placeholder="请输入您的用户名" class="form-control required" name="username" id="username" tips="请填写用户名" />
          <input type="password" placeholder="请输入密码" class="form-control required" id="password" name="password" tips="请填写密码" />
           <input type="text" name="cpacha" id="cpacha" maxlength="4" class="form-control required" placeholder="验证码" tips="请填验证码" >
            <img src="/cpacha/generate_cpacha?vl=4&fs=25&w=128&h=40&method=admin_login" class="pull-right" id="captcha" style="cursor: pointer;" onclick="this.src=this.src+'&d='+Math.random();" title="点击刷新" alt="captcha">
          <button class="btn btn-block btn-primary" type="button" id="submit-btn">立即登录</button>
      </form>

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

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

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

2）主页面

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

<li> 
 <a href=/system/leaveword>留言板</a>
 </li>

给该网址赋予权限

public static List<String> authorityExcludePathPatterns = Arrays.asList(
			"/system/leaveword"，
			);

3）留言板页面

留言板中的代码需要注意

留言板初始化函数

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<words.length;i++){
        html+='<h2 class="s-margin-2">'+words[i].title+'&nbsp;&nbsp;<small>'+getUserName(words[i].userId)+'</small></h2>'+
                '        <hr>'+
                '        <h5>'+words[i].content+'</h5>';
      }
      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 += '<h2 class="s-margin-2">'+word.title+'&nbsp;&nbsp;<small>'+getUserName(word.userId)+'</small></h2>'+
              '        <hr>'+
              '        <h5>'+word.content+'</h5>';
    }
    else{
      alert(response.content);
    }

在这里同样需要注意，

userId是否赋值正确。

三、最后

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