美文网首页
flask+vue单页快速CURD操作

flask+vue单页快速CURD操作

作者: 雨夜剪魂 | 来源:发表于2019-12-22 15:16 被阅读0次

    需要为app做个音乐管理的内容,我的想法就是在一个页面内完成,展示与编辑修改为一个输入框,那么我需要在span上面进行设置contentedit=true让span可以自由编辑,也要让vue能够获取到改变了的值,来对操作进行更新删除提交。

    问题

    这里如果使用v-model,就有问题了,首先它无法作用在span组件上,另外如果设置contentedit它也无法获取内容。以此便只能使用一个小技巧.

    小技巧

    在span中@blur=’music.icon=$event.target.innerText' v-html='music.icon' 在焦点事件中处理span的内容变化,这样更新后,在事件处理上面就可以调用@clck="operation(music)"

    <span class="text-danger" v-html="music.title" @blur="music.title=$event.target.innerText" 
    contenteditable="true"></span>
    
    <span>
                                <button class="btn btn-danger btn-sm" @click="delete_music(music)">删除</button>
                            </span>
                                <span>
                                <button class="btn btn-primary btn-sm" @click="update_music(music)">更新</button>
                            </span>
                                <span>
                                <button class="btn btn-success btn-sm" @click="add_music(music)">添加</button>
                            </span>
    

    全部代码如下

    {% extends 'base.html' %}
    {% block content %}
    <h2>后台系统</h2>
        <div class="column header">
            <h4 style="text-indent: 50px;font-size: 16px;">在此管理您的音乐</h4>
            {% if current_user.username %}
                <div class="float-right">{{ current_user.username }}您已经登录 <a href="{{ url_for('auth.logout') }}">登出</a>
                </div>
            {% else %}
                <div class="float-right">
                    您还未登录
                    <a href="{{ url_for('auth.login') }}">登入</a>
                    <a href="{{ url_for('auth.register') }}">注册</a>
                </div>
            {% endif %}
        </div>
    
        <div class="container" id="app" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml" >
            <div class="list-group">
                    <ul class="list-group">
                        <li class="list-group-item list-group-item-success">
                            <span>id</span>
                            <span>曲目</span>
                            <span>种类</span>
                            <span>文件名称</span>
                            <span>封面</span>
                            <span>歌词名称</span>
                            <span>作者</span>
                        </li>
    
                        <li class="list-group-item list-group-item-light" v-for="music in musics">
    
                            <span v-html="music.id"></span>
                            <span class="text-danger" v-html="music.title" @blur="music.title=$event.target.innerText" contenteditable="true"></span>
                            <span contenteditable="true" v-html="music.category" @blur="music.category=$event.target.innerText"></span>
                            <span contenteditable="true" v-html="music.filename" @blur="music.filename=$event.target.innerText"></span>
                            <span contenteditable="true" @blur="music.icon=$event.target.innerText"><a v-bind:href='music.icon'>封面链接</a></span>
                            <span contenteditable="true" v-html="music.lyc" @blur="music.lyc=$event.target.innerText"> </span>
                            <span contenteditable="true" v-html="music.name" @blur="music.name=$event.target.innerText"></span>
                            <div class="float-right">
                            <span>
                                <button class="btn btn-danger btn-sm" @click="delete_music(music)">删除</button>
                            </span>
                                <span>
                                <button class="btn btn-primary btn-sm" @click="update_music(music)">更新</button>
                            </span>
                                <span>
                                <button class="btn btn-success btn-sm" @click="add_music(music)">添加</button>
                            </span>
                            </div>
                        </li>
                    </ul>
            </div>
        </div>
    
    {% endblock %}
    {% block addjs %}
        <script>
    
            new Vue({
                delimiters: ['{[', ']}'],
                el: '#app',
                data: {
                    musics: [],
                },
                created: function () {
                    let f = this;
                    $.get('/app/music', function (v) {
                        f.musics = v.data;
                    })
                },
                methods: {
                    delete_music: function (music) {
                        alert(music.icon);
                    },
                    add_music: function () {
                        alert(music.icon)
                    },
                    update_music: function (music) {
                        alert(music.icon);
                    }
                }
            });
        </script>
    
    {% endblock %}
    
    

    created中是在页面加载之前进行获取数据的操作,这里调用api进行所有曲目的音乐获取.

    相关文章

      网友评论

          本文标题:flask+vue单页快速CURD操作

          本文链接:https://www.haomeiwen.com/subject/bwyonctx.html