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。又没有盖楼啥的。

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

在这里插入图片描述

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

  • 10
    点赞
  • 69
    收藏
    觉得还不错? 一键收藏
  • 15
    评论
好的,我可以为您提供一些实现简易留言板的思路和代码示例。 首先,您需要在Vue中创建一个组件来实现留言板的功能。以下是一个简单的示例: ```html <template> <div> <form @submit.prevent="addMessage"> <input v-model="newMessage" placeholder="请输入留言内容" /> <button type="submit">提交</button> </form> <ul> <li v-for="(message, index) in messages" :key="index">{{ message }}</li> </ul> </div> </template> <script> export default { data() { return { messages: [], // 存储留言内容的数组 newMessage: "" // 输入框中新的留言内容 }; }, methods: { addMessage() { this.messages.push(this.newMessage); // 将新的留言内容添加到数组中 this.newMessage = ""; // 清空输入框 } } }; </script> ``` 在这个组件中,我们使用 `v-for` 指令来渲染留言列表,并使用 `v-model` 指令来实现双向数据绑定,使得输入框中的内容可以实时更新到 `newMessage` 变量中。当用户提交留言时,我们使用 `@submit.prevent` 指令来阻止表单的默认提交行为,然后将新的留言内容添加到 `messages` 数组中,并清空输入框。 您可以将此组件添加到您的Vue应用程序中,并将其放置在需要显示留言板的位置。例如,您可以在App.vue中添加以下代码: ```html <template> <div id="app"> <MessageBoard /> </div> </template> <script> import MessageBoard from "./components/MessageBoard.vue"; export default { name: "App", components: { MessageBoard } }; </script> ``` 这样,留言板组件就会在应用程序中显示出来,并且用户可以使用它来添加和查看留言。 当然,这只是一个简单的示例,您可以根据您的需要进行修改和扩展,例如添加删除留言的功能、使用数据库存储留言内容等等。希望这可以帮助到您!
评论 15
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值