基于vue练习demo：发表评论案例 (使用localStorage存储数据)

￡神魔★判官ぃ 2022-03-27 14:10 222阅读 0赞

## 前言 ##

最近在学习 VUE的相关知识，之前学习html和css3和原生js及jq库时感觉还挺轻松，但是接触vue框架之后才发现需要了解的东西太多了(如 vue-router，vue-cli，webpack，npm等等都得接触到一些)，太庞杂了，因此因为这一个月以来看的东西太多了脑壳有点儿懵，想了想先巩固一下VUE的基础再往后面进行，所以练习写了这个 发表评论功能 的小玩意儿。  
（emmmmmmmm…以上废话可忽略）

## 实现功能 ##

1.  一个提交评论的表单区域（包括：评论人及评论内容，组件呈现）
2.  评论列表显示的区域（vue实例展现）
3.  使用localStorage存储数据使得刷新或关闭浏览器不影响评论数量

## 效果展示 ##

![演示][20190113231109220.gif]

## 代码 ##

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
      <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
      <title>Title</title>
    </head>
    
    <body>
      
      <div id="app-listcomments">
        <publish @func="getlocalinfo"></publish>
        <br>
        <div class="container">
          <ul class="list-group">
            <li class="list-group-item d-flex justify-content-between align-items-center" v-for="item in list" :key="item.id">
              {
       { item.content }}
              <span class="badge badge-secondary badge-pill">{
       { item.user }}</span>
            </li>
          </ul>
        </div>
      </div>
    
      
      <template id="publish">
        <div>
          <div class="card border-info">
            <div class="card-header">评论系统</div>
            <div class="card-body">
              <div class="container">
                <form>
                  <div class="form-group">
                    <label for="user">
                      评论人:
                    </label>
                    <input type="text" class="form-control" id="user" v-model="user">
                  </div>
                  <div class="form-group">
                    <label for="content">
                      评论内容:
                    </label>
                    <textarea id="content" class="form-control" v-model="content"></textarea>
                  </div>
                  <input type="button" value="发表评论" class="btn btn-primary" @click="getinfo">
                </form>
              </div>
            </div>
          </div>
        </div>
      </template>
      <script>
        //组件创建（使用局部组件方式）
        var publish = {
          data() {
            return {
              user: '',
              content: ''
            }
          },
          template: "#publish",
          methods: {
            getinfo() {//获得输入框的user及content数据并更新到评论列表
              if (this.user == '' || this.content == '') { //判断输入框是否为空
                alert("输入框请不要留空白")
              } else {
                var info = {
                  id: Math.random(),
                  user: this.user,
                  content: this.content
                }  //获取用户输入的数据存到info对象中
                var list = JSON.parse(localStorage.getItem('cmts') || '[]') //获取localstrage中的数据，字符串类型需要转换为json对象
                list.push(info)//将得到的info对象的添加到list
                localStorage.setItem('cmts', JSON.stringify(list))//将更新好的数据重新添加到localstrage
                this.user = this.content = '' //清空输入框
    
                this.$emit('func')//更新页面的评论列表
              }
            }
          },
        }
        //vue实例部分创建
        var listcomment = new Vue({
          el: "#app-listcomments",
          data: {
            list: [{
                id: Math.random(),
                user: "林宥嘉",
                content: "多久了我都没变，爱你这回事整整六年"
              },
              {
                id: Math.random(),
                user: "华晨宇",
                content: "看着飞舞的尘埃掉下来"
              }
            ]
          },
          created() {
            var localinfo = JSON.parse(localStorage.getItem('cmts') || '[]')
            if (localinfo.length == 0) {
              var list = this.list
              localStorage.setItem('cmts', JSON.stringify(list))
            }
            this.getlocalinfo()
          },
          components: {
            'publish': publish
          },
          methods: {
            getlocalinfo() {
              var list = JSON.parse(localStorage.getItem('cmts') || '[]')
              this.list = list
            }
          }
        })
      </script>
    
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
    </body>
    
    </html>

## 上例整体思路 ##

1.利用bootstrap4创建出基本的页面内容（包括 发表评论区域(vue组件)及下方的评论列表(vue实例)）  
2.创建vue实例  
3.vue实例中 先设置data区 中的list数组对象存储初始化的评论数据  
4.再添加局部组件publish  
5.vue实例中 再使用生命周期钩子函数created来将初始化的list数据存储到localstrage里  
6.vue实例中 然后在方法methods中写一个函数getlocalinfo()来获取localstrage中的数据并显示到列表中  
7.组件中使用v-model双向绑定数据得到 需要添加的user及content  
8.组件的方法methods中实现将获取到的user及content数据取出放到localstrage中并同步更新页面上的评论列表

ps：加油，进步！

[20190113231109220.gif]: /images/20220327/421c4361380a4d9b964ea79bf5789ed6.png