vue+storage面向对象实现博客发布

a.html   b.html   

a.html 如何传递参数给b.html

1.先将a.html的参数存储在storage中

2.切换到b.html时取storage数据

考虑步骤

 1.使用bootstrap框架。

 2.引入了vuejs文件。

3.如何防止刷新页面后数据不消失。解决存储在前端。前端存储的好处,减少了http请求,减轻服务端的压力。

页面样式

<!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">
    <title>Document</title>
    <link rel="stylesheet" href="./bootstrap-3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/demo.css">
    <script src="../vuejs/vue.js"></script>
    <script src="./js/demo.js"></script>
</head>
<body>
    <div class="container" id="my">
        <div class="form-horizontal">
            <div class="form-group">
                <label class="col-sm-1 control-label">昵称:</label>
                <div class="col-sm-11">
                    <input type="text" class="form-control name"
                    placeholder="请输入昵称" v-model="nickname">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-1 control-label">标题:</label>
                <div class="col-sm-11">
                    <input type="text" class="form-control name"
                    placeholder="请输入标题" v-model="title">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-1 control-label">内容:</label>
                <div class="col-sm-11">
                    <textarea  class="form-control message" rows="5"
                    placeholder="请输入内容" v-model='content'>

                    </textarea>
                </div>
            </div>
            <div class="form-group btn-box">
              <div class="col-sm-offset-1 col-sm-11">
                    <button type="submit" class="btn btn-success submit"
                    @click="submit()">发布</button>
                    <button class="btn btn-danger deleteAll" @click="delAll()">删除所有</button>
              </div>
            </div>
        </div>
        <div class="panel panel-primary">
            <div class="panel-heading">
                文章列表
            </div>
            <div class="panel-body">
                <table class="table">
                    <thead>
                        <tr>
                            <th>标题</th>
                            <th>内容</th>
                            <th>发布者</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="o in listData">
                            <td> {{o.title}} </td>
                            <td> {{o.content}} </td>
                            <td> {{o.nickname}} </td>
                            <td>
                                <button @click="del(o.nickname)">删除</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>
</html>
View Code

demo.js文件

//事件
window.onload = function () {
    //面向对象:抽象 多态 继承 封装
    //对象:成员 方法
    new Vue({
        el: "#my",
        data: {
            nickname: '',
            title: '',
            content: '',
            listData: [{
                nickname: "aaa",
                title: "test",
                content: "content"
            }]
        },
        methods: {
            list: function () {
                var obj = localStorage.getItem('article');
                if (obj) {

                    this.listData = JSON.parse(obj);
                }
            },
            submit: function () {
                var obj = {}
                obj.nickname = this.nickname;
                obj.title = this.title;
                obj.content = this.content;
                this.listData.push(obj);
                localStorage.setItem('article', JSON.stringify(this.listData));
             

            },
            // 删除一条数据
            del(nickname) {
                // for(var i=0;i<=this.listData.length;i++){
                //     if(this.listData[i].nickname===nickname){
                //         this.listData.splice(i,1);
                //         break;
                //     }
                // }
                this.listData = this.listData.filter(o=>o.nickname != nickname);

                //持久化
                localStorage.setItem('article', JSON.stringify(this.listData));
            },
            delAll() {
                this.listData = [];
                localStorage.removeItem('article');
            }
        },
        mounted() { //vue实例声明周期
            this.list();
        },
    })

}

 

posted @ 2019-10-17 18:55  林夕孟  阅读(326)  评论(0)  编辑  收藏  举报