vue 实现简约留言板

vue 实现简约留言板

实现：element ui 的几个组件-1：Card 卡片-2：InfiniteScroll 无限滚动-3：Timeline 时间线

要用到 element UI 2.13-2.14 版本 都可以。太低了各别组件可能没有。

npm i element-ui -S

在main.js中引入element

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

它长这个样子🙄 ——>

无内容展示：

有了内容之后的展示

在线查看：大黄子博客的留言板-http://www.dhzi.com.cn/message

注：这个打开可能稍微有点慢哈，服务器1M带宽。😂

前端代码段：

<el-card class="el-card-d" shadow="always">
             <div class="infinite-list-wrapper" style="overflow:auto;">
                <el-timeline
                  infinite-scroll-disabled="disabled">
                <div v-if="allmessages.length>0"> 
                  <el-timeline-item v-for="(item,index) in allmessages"  :key="index" :timestamp='item.createTime' placement="top">
                    <el-card class="el-card-m" style="height:120px">
                      <h4>{{item.memberName}}：</h4>
                      <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{item.content}}</p>
                    </el-card>
                  </el-timeline-item>
                </div>
                <div v-else>
                   <el-timeline-item placement="top">
                    <el-card class="el-card-m" style="height:120px">
                      <h4>大黄子：</h4>
                      <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 说点什么吧😁</p>
                    </el-card>
                  </el-timeline-item>
                </div>
              </el-timeline> 
              </div>
              <div class="el-card-messages">
                 <el-input type="textarea" :rows="5" placeholder="输入留言" maxlength="200" v-model="message"></el-input>
                 <el-button type="info" round class="submit-message" @click="submitMessage">留言</el-button>
              </div>
            </el-card>

要注意input textarea 必须在data定义 v-model 双向绑定才能输入；

 data() {
    return {
        message:'',
    };
  },

关于防止空提交和空格提交：

 methods: {
 submitMessage(){
      if(this.message=='' || this.message.replace(/(^\s*)|(\s*$)/g, "")==""){
          this.$message('写点啥提交也行呀😉');
          return;
      }
      //  这里往下写调用后端的代码；
      }

css的我这边写一点吧，相信你们都能写出自己想要的样子

   .infinite-list-wrapper{
      width: 100%;
      height: 500px;
    }
    .submit-message{
        width: 100%; 
        background: rgb(235, 245, 247);
        color: cadetblue;
        letter-spacing:20px;
    }
 @media screen and (max-width: 3000px) and (min-width: 767px) {
    .el-card-d{
      float: left;
      margin-top: 20px;
      margin-left: 10%; 
      width: 80%;
      height: 90%;
    }

   }
  /*
  屏幕小于768px的
  */
  @media screen and (max-width:768px) and (min-width: 100px){  
     .el-card-d{

      width: 100%;
      height: 100%;
    }
  }

@media 这个我的用法可能不标准：实现 电脑端存在背景；H5100%展示；

后端 springboot

在做博客的时候就没想着要有登陆这个东西，不做任何信息的收集；

//一个小小的代码片段吧
 HealthUtils healthUtils = new HealthUtils();
        Set<String> health = healthUtils.isHealth(message.getContent());
        if(health.size()>0){
            return AjaxResult.error(-1,"你是不是乱说话了 ╰_╯ ╰_╯ !  ————>：" + health + "，要注意文明哦。");
        }else{
            int i = blogMessageService.insertBlogMessage(message);
        }
        return AjaxResult.success();

后端的实在没啥要写的，就是一个表的crud。又没有盖楼啥的。

做了一个关于敏感词的处理，效果如下：

敏感词这边我单写一个实现的博客吧；敏感词太多了，不好收集也。各位要试的话，可以稍微友好点哈。😄