python学习之flask(三)-前端页面_flask前端页面

	<div>
        歌手:<input type="text" class="authorIpt"><br>
        歌曲名:<input type="text" class="nameIpt"><br>
        <button class="submit">提交</button>
    </div>
    <div>
        <ul class="music">这里是歌手的列表</ul>
    </div>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js">
	</script>
1
2
3
4
5
6
7
8
9
10

就两个输入框 和一个按钮


前端部分就直接贴代码了 用的jquery

    let m = {
        data: {
            currenIndex: 0,
            parentIndex: 0,
            songId: null,
            singerId:null,
        },
        getMusic(cb) {
            $.ajax({
                url: 'http://127.0.0.1:5000/getMusic',
                success(res) {
                    $('.music').empty()
                    let m = res.data;
                    for (let i in res.data) {
                        m[i].hasSong = m[i].songs.length?true:false
                        $('.music').append(`
                        <li data-id=${m[i].id} class="item" data-index=${i}>
                            ${m[i].name}  ${!m[i].hasSong?`<a data-id=${m[i].id} style="margin-left:20px" href="#" class="singer" ">删除歌手</a>`:''}
                            
                            <div style="margin-left:20px">
                        ${!m[i].hasSong ? '无' : m[i].songs.map((item, index) => {
                            return ` <p >${item.song_name} 
                            <a data-id=${item.song_id}  data-name=${item.song_name} data-index=${index} href='#' class='edit' >编辑歌曲</a>
                            </p> <div class="editIpt">
                            <input  value="${item.song_name}" class="songIpt"></input>
                            <button data-index=${item.index} style="margin-left:20px" class="ok-btn">确定</button>
                            <button style="margin-left:20px" class="cancel">取消</button>
                            <button style="margin-left:20px" class="del">删除</button>
                            </div>`
                        }).join('')}
                    </div>
                        </li>`)
                    }
                    $('.editIpt').hide()
                }
            })
        },
        addMusic() {
            $.ajax({
                url: 'http://127.0.0.1:5000/addmusic',
                data: {
                    author: $('.authorIpt').val(),
                    name: $('.nameIpt').val(),
                },
                method: 'POST',
                success: res => {
                    if (res.code === 200) {
                        alert('提交成功');
                        this.getMusic()
                        return
                    }
                }
            })
        },
        editSongs() {
            let $dom_text =  $('.item').eq(m.data.parentIndex).find('.songIpt').eq(m.data.currenIndex).val()
            let ok = confirm('确认修改吗?')
            if (ok) {
                $.ajax({
                    url: 'http://127.0.0.1:5000/editMusic',
                    method: 'post',
                    data: {
                        name: $dom_text,
                        id: this.data.songId
                    },
                    success:res=>{
                        if (res.code === 200) {
                            alert('修改成功');
                            this.getMusic()
                            return
                        }
                    }
                })
            }
        },
        delSongs(){
            let ok = confirm('确认删除吗?')
            if (ok) {
                $.ajax({
                    url: 'http://127.0.0.1:5000/delMusic/'+this.data.songId,
                    success:res=>{
                        if (res.code === 200) {
                            alert('删除成功');
                            this.getMusic()
                            return
                        }
                    }
                })
            }
        },
        delSinger(){
            let ok = confirm('确认删除该歌手吗?')
            if (ok) {
                $.ajax({
                    url: 'http://127.0.0.1:5000/delSinger/'+this.data.singerId,
                    success:res=>{
                        if (res.code === 200) {
                            alert('删除成功');
                            this.getMusic()
                            return
                        }
                    }
                })
            }
        },
        cancel() {
            $('.item').eq(this.data.parentIndex).find('.editIpt').eq(this.data.currenIndex).hide()
        }

    }

    m.getMusic()

    $('.submit').on('click', () => {
        m.addMusic()
    })
    $(document).on('click', '.edit', e => {
        let { id, name, index } = e.currentTarget.dataset
        let parentIndex = $(e.currentTarget).parent().parent().parent().data('index');
        m.data.songId = id;
        m.data.currenIndex = index;
        m.data.parentIndex = parentIndex
        $('.item').eq(m.data.parentIndex).find('.editIpt').eq(m.data.currenIndex).show()
    })
    $(document).on('click', '.cancel', e => {
    	let dom = $(e.currentTarget).parent().prev().children();
        let { index } = dom[0].dataset
        let parentIndex = dom.parent().parent().parent().data('index')
        m.data.currenIndex = index;
        m.data.parentIndex = parentIndex
        m.cancel()
    })
    $(document).on('click', '.ok-btn', e => {
        m.editSongs()
    })
    $(document).on('click', '.del', e => {
        m.delSongs()
    })
    $(document).on('click', '.singer', e => {
        let { id} = e.currentTarget.dataset
        m.data.singerId = id;
        m.delSinger()
    })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143