From b23e62a603f7ed24be43050d766fdb6fcda2ac0e Mon Sep 17 00:00:00 2001
From: = <=>
Date: Sat, 9 Jan 2021 00:28:45 +0800
Subject: [PATCH] =?UTF-8?q?=E7=94=A8vue=E9=87=8D=E5=86=99=E5=89=8D?=
 =?UTF-8?q?=E7=AB=AF=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 APP/templates/add.html      | 170 ++++++++++++++++++++++++--------------------
 APP/templates/personal.html |  48 ++++++-------
 APP/templates/square.html   |  18 ++---
 3 files changed, 121 insertions(+), 115 deletions(-)
diff --git a/APP/templates/add.html b/APP/templates/add.html
index f66694f..6a91bfc 100644
--- a/APP/templates/add.html
+++ b/APP/templates/add.html
@@ -2,8 +2,9 @@
 <html lang="en">
 
 <head>
-    
+
     <meta charset="utf-8">
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta http-equiv="Content-Language" content="en">
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
@@ -15,27 +16,22 @@
     <link href="../static/css/charts.css" rel="stylesheet">
     <link href="../static/css/main.css" rel="stylesheet">
     <script src="../static/js/jquery-3.5.1.min.js"></script>
-    <script src="../static/js/wsy.js"></script>
     <script type="text/javascript">
-        var id,name;
         $(document).ready(function () {
-            var request = GetRequest();
-            id = request['id'];
-            name = request['name'];
-            getBlock();
-        });    
-        
+            getContent('block');
+        });
+
     </script>
 
-<!-- wsy:临时用样式 -->
-<style>
-    .standard-input {
-        height: 100px;
-        width: 500px;
-        background-color: aliceblue;
-        margin-top: 1em;
-    }
-</style>
+    <!-- wsy:临时用样式 -->
+    <style>
+        .standard-input {
+            height: 100px;
+            width: 500px;
+            background-color: aliceblue;
+            margin-top: 1em;
+        }
+    </style>
 </head>
 
 <body>
@@ -458,64 +454,77 @@
                                     <i class="pe-7s-bandaid icon-gradient bg-amy-crisp">
                                     </i>
                                 </div>
-                                <div>集锦名称
-                                    <div class="page-title-subheading">添加集锦块
-                                    </div>
+                                <div id="collection_name">{{name}}
+                                    
                                 </div>
                             </div>
                         </div>
                     </div>
-                    <div class="row">
+                    <div class="row" id="textList">
                         <!-- 集锦块样例 -->
-                        <div class="col-md-4">
+                        <div class="col-md-4" v-for="item in textList" :key="item.id" v-bind:item='item'>
                             <div class="card mb-3 bg-mixed-hopes widget-chart text-white card-border">
                                 <div class="widget-chart-actions">
                                     <div class="btn-group dropdown">
-                                        <button type="button" aria-haspopup="true" data-toggle="dropdown" aria-expanded="false" class="text-white btn btn-link">
+                                        <button type="button" aria-haspopup="true" data-toggle="dropdown"
+                                            aria-expanded="false" class="text-white btn btn-link"  v-if="id=='null'">
                                             <i class="fa fa-ellipsis-h"></i>
                                         </button>
-                                        <div tabindex="-1" role="menu" aria-hidden="true" class="dropdown-menu-lg dropdown-menu-right dropdown-menu">
+                                        <div v-if="id==null"tabindex="-1" role="menu" aria-hidden="true"
+                                            class="dropdown-menu-lg dropdown-menu-right dropdown-menu">
                                             <ul class="nav flex-column">
                                                 <li class="nav-item-header nav-item">操作</li>
                                                 <li class="nav-item">
-                                                    <a href="javascript:void(0);" class="nav-link">上移</a>
-                                                    <a href="javascript:void(0);" class="nav-link">下移</a>
-                                                    <a href="javascript:void(0);" class="nav-link">删除</a>
+                                                    <div v-on:click="swap(item.order,'up','block');" class="nav-link">上移
+                                                    </div>
+                                                    <div v-on:click="swap(item.order,'down','block');" class="nav-link">
+                                                        下移</div>
+                                                    <div v-on:click="delete_item(item.order,'block');" class="nav-link">删除
+                                                    </div>
                                                 </li>
                                                 <li class="nav-item-divider nav-item"></li>
-                                                <li class="nav-item-header nav-item">修改名称</li>
-                                                <li class="nav-item">
-                                                    <input type="text" autocomplete="off" placeholder="原来的名称" class="form-control input-mask-trigger">
+                                                <li class="nav-item-header nav-item" v-if="item.type!='picture' ">修改名称
                                                 </li>
-                                                <li class="nav-item-btn nav-item">
-                                                    <button class="btn-wide btn-shadow btn btn-danger btn-sm" onclick="javascript:window.location.href='add.html'">修改</button>
+                                                <li class="nav-item" v-if="item.type!='picture' ">
+                                                    <input type="text" autocomplete="off" v-model="content"
+                                                        v-bind:placeholder="item.content"
+                                                        class="form-control input-mask-trigger">
+                                                </li>
+                                                <li class="nav-item-btn nav-item" v-if="item.type!='picture' ">
+                                                    <button class="btn-wide btn-shadow btn btn-danger btn-sm"
+                                                        v-on:click="edit(item.order,'block')">修改</button>
                                                 </li>
                                             </ul>
                                         </div>
                                     </div>
                                 </div>
-                                <div class="widget-subheading"><span>名称</span></div><br>
-                                <div class="widget-numbers"><span>内容</span></div>
+                                <div class="widget-numbers">
+                                    <span v-if="item.type!='picture'">{{item.content}}</span>
+                                    <img v-if="item.type=='picture'" v-bind:src="item.content" alt="" >
+                                </div>
                             </div>
                         </div>
-                        <div class="col-md-4">
+                        <div class="col-md-4"  v-show="id=='null'">
                             <div class="card mb-3 bg-mixed-hopes widget-chart text-white card-border">
                                 <div class="widget-chart-actions">
                                     <div class="btn-group dropdown">
-                                        <button type="button" aria-haspopup="true" data-toggle="dropdown" aria-expanded="false" class="text-white btn btn-link">
+                                        <button type="button" aria-haspopup="true" data-toggle="dropdown"
+                                            aria-expanded="false" class="text-white btn btn-link">
                                             <i class="pe-7s-plus"></i>
                                         </button>
-                                        <div tabindex="-1" role="menu" aria-hidden="true" class="dropdown-menu-lg dropdown-menu-right dropdown-menu">
+                                        <div tabindex="-1" role="menu" aria-hidden="true"
+                                            class="dropdown-menu-lg dropdown-menu-right dropdown-menu">
                                             <ul class="nav flex-column">
-                                                <li class="nav-item-header nav-item">添加名称及内容</li>
-                                                <li class="nav-item">
-                                                    <input type="text" autocomplete="off" placeholder="名称" class="form-control input-mask-trigger">
-                                                </li>
+                                                <li class="nav-item-header nav-item">添加内容</li>
+
                                                 <li class="nav-item">
-                                                    <input type="text" autocomplete="off" placeholder="内容" class="form-control input-mask-trigger">
+                                                    <input type="text" autocomplete="off" v-model="content"
+                                                        placeholder="内容" class="form-control input-mask-trigger"
+                                                        id="myInput">
                                                 </li>
                                                 <li class="nav-item-btn nav-item">
-                                                    <button class="btn-wide btn-shadow btn btn-danger btn-sm" onclick="javascript:window.location.href='add.html'">新建</button>
+                                                    <button class="btn-wide btn-shadow btn btn-danger btn-sm"
+                                                        v-on:click="add_item('block')">新建</button>
                                                 </li>
                                             </ul>
                                         </div>
@@ -526,46 +535,49 @@
                             </div>
                         </div>
 
-                        <!-- wsy:添加集锦块 -->
-                        <input type="text" id="myInput" />
-                        <script>
-                            document.getElementById('myInput').addEventListener('paste', function (e) {
-                                if (!(e.clipboardData && e.clipboardData.items)) {
-                                    return;
-                                }
-                                for (var i = 0, len = e.clipboardData.items.length; i < len; i++) {
-                                    var item = e.clipboardData.items[i];
-                    
-                                    if (item.kind === "file") {
-                                        var f = item.getAsFile();
-                                        console.log(f);
-                    
-                                        let reader = new FileReader();
-                                        reader.readAsDataURL(f);
-                    
-                                        reader.onload = function (e) {
-                                            let img = document.createElement('img');
-                                            img.src = e.target.result;
-                                            var block = gengerate_block(img,"block")
-                                            document.getElementById('textList').appendChild(block);
-                                            submit(img, [f], "picture", block.id);
-                    
-                                        };
-                    
-                                    }
-                                }
-                            });
-                        </script>
-                        <input type="button" value="add text" onclick="add('block')">
-                        <!-- wsy:集锦块列表 -->
-                        <div id="textList" style="width: 10px;">
-
-                        </div>
                     </div>
                 </div>
             </div>
         </div>
         <script type="text/javascript" src="../static/assets/scripts/main.js"></script>
+        <script src="../static/js/wsy.js"></script>
+
+        <script>
+            document.getElementById('myInput').addEventListener('paste', function (e) {
+                if (!(e.clipboardData && e.clipboardData.items)) {
+                    return;
+                }
+                for (var i = 0, len = e.clipboardData.items.length; i < len; i++) {
+                    var item = e.clipboardData.items[i];
+
+                    if (item.kind === "file") {
+                        var f = item.getAsFile();
+                        console.log(f);
+
+                        let reader = new FileReader();
+                        reader.readAsDataURL(f);
+                        console.log(f);
+                        reader.onload = function (e) {
+                            submit(f, "picture", page.textList.length);
+                        };
+
+                    }
+                }
+            });
+
+            var collection_name = new Vue({
+                el: "#collection_name",
+                data: {
+                    name: null
+                },
+                created() {
+                    this.name = GetRequest()['name'];
+                    console.log(this.name);
+                },
+            }
+            )
+        </script>
+
 </body>
 
 </html>
\ No newline at end of file
diff --git a/APP/templates/personal.html b/APP/templates/personal.html
index dad5acf..163b907 100644
--- a/APP/templates/personal.html
+++ b/APP/templates/personal.html
@@ -4,6 +4,8 @@
 <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+
     <meta http-equiv="Content-Language" content="en">
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>个人中心</title>
@@ -14,12 +16,11 @@
     <link href="../static/css/main.css" rel="stylesheet">
     <link href="../static/css/charts.css" rel="stylesheet">
     <script src="../static/js/jquery-3.5.1.min.js"></script>
-    <script src="../static/js/wsy.js"></script>
     <script>
         // wsy:这个phonenum可能需要用什么传参的方式得到
         var phonenum = "0";
 
-        $(document).ready(function () { getCollection(); }); 
+        $(document).ready(function () { getContent('collection'); }); 
     </script>
     <!-- wsy:临时用样式 -->
     <style>
@@ -462,14 +463,14 @@
                                 <form>
                                     <i class="nav-link-icon fa fa-search"></i>&nbsp;
                                     <input type="text" name="" id="search">
-                                    <input type="button" value="search" onclick="getContent()">
+                                    <input type="button" value="search" onclick="getContent('collection')">
                                 </form>
                             </div>
                         </div>
                     </div>
-                    <div class="row">
-                        <!-- 集锦样例 -->
-                        <div class="col-md-4">
+                    <div class="row" id ="textList">
+                        <!-- 集锦块样例 -->
+                        <div class="col-md-4" v-for="item in textList":key="item.id" v-bind:item='item'>
                             <div class="card mb-3 bg-ripe-malin widget-chart text-white card-border">
                                 <div class="widget-chart-actions">
                                     <div class="btn-group dropdown">
@@ -480,27 +481,27 @@
                                             <ul class="nav flex-column">
                                                 <li class="nav-item-header nav-item">操作</li>
                                                 <li class="nav-item">
-                                                    <a href="javascript:void(0);" class="nav-link">上移</a>
-                                                    <a href="javascript:void(0);" class="nav-link">下移</a>
-                                                    <a href="javascript:void(0);" class="nav-link">删除</a>
+                                                    <div v-on:click="swap(item.order,'up','collection');" class="nav-link">上移</div>
+                                                    <div v-on:click="swap(item.order,'down','collection');" class="nav-link">下移</div>
+                                                    <div v-on:click="delete_item(item.order,'collection');" class="nav-link">删除</div>
                                                 </li>
                                                 <li class="nav-item-divider nav-item"></li>
                                                 <li class="nav-item-header nav-item">修改名称及标签</li>
                                                 <li class="nav-item">
-                                                    <input type="text" autocomplete="off" placeholder="原来的名称" class="form-control input-mask-trigger">
+                                                    <input type="text" autocomplete="off" v-model="name" v-bind:placeholder="item.name" class="form-control input-mask-trigger">
                                                 </li>
                                                 <li class="nav-item">
-                                                    <input type="text" autocomplete="off" placeholder="原来的标签" class="form-control input-mask-trigger">
+                                                    <input type="text" autocomplete="off" v-model="tag" v-bind:placeholder="item.tag" class="form-control input-mask-trigger">
                                                 </li>
                                                 <li class="nav-item-btn nav-item">
-                                                    <button class="btn-wide btn-shadow btn btn-danger btn-sm" onclick="javascript:window.location.href='personal.html'">修改</button>
+                                                    <button class="btn-wide btn-shadow btn btn-danger btn-sm" v-on:click="edit(item.order,'collection')">修改</button>
                                                 </li>
                                             </ul>
                                         </div>
                                     </div>
                                 </div>
-                                <div class="widget-numbers"><span>名称</span></div><br>
-                                <div class="widget-subheading"><i class="fa fa-tags"></i>&nbsp;&nbsp;<span>标签</span></div>
+                                <div class="widget-numbers" v-on:click="jump_to('add.html',item.name,id);"><span>{{item.name}}</span></div><br>
+                                <div class="widget-subheading"><i class="fa fa-tags"></i>&nbsp;&nbsp;<span>{{item.tag}}</span></div>
                             </div>
                         </div>
                         <div class="col-md-4">
@@ -514,14 +515,14 @@
                                             <ul class="nav flex-column">
                                                 <li class="nav-item-header nav-item">添加名称及标签</li>
                                                 <li class="nav-item">
-                                                    <input type="text" autocomplete="off" placeholder="名称" class="form-control input-mask-trigger">
+                                                    <input type="text" autocomplete="off" v-model="name" placeholder="名称" class="form-control input-mask-trigger">
                                                 </li>
                                                 <li class="nav-item">
-                                                    <input type="text" autocomplete="off" placeholder="标签" class="form-control input-mask-trigger">
+                                                    <input type="text" autocomplete="off" v-model="tag" placeholder="标签" class="form-control input-mask-trigger">
                                                 </li>
                                                 <li class="nav-item-btn nav-item">
-                                                    <!-- 由此跳转到新建block页面 -->
-                                                    <button class="btn-wide btn-shadow btn btn-danger btn-sm" onclick="javascript:window.location.href='add.html'">新建</button>
+                                                    <button class="btn-wide btn-shadow btn btn-danger btn-sm" 
+                                                    v-on:click="add_item('collection')">新建</button>
                                                 </li>
                                             </ul>
                                         </div>
@@ -531,20 +532,11 @@
                                 <div class="widget-subheading"><i class="fa fa-tags"></i>&nbsp;&nbsp;<span>单击右上角添加集锦</span></div>
                             </div>
                         </div>
-
-                        <!-- wsy:集锦列表 -->
-                        <div id="textList">
-
-                        </div>
-                        <!-- wsy:创建集锦-->
-                        <div>
-                            <input type="text" name="" id="myInput">
-                            <input type="button" value="add text" onclick="add('collection')">
-                        </div>
                     </div>
                 </div>
             </div>
         </div>
+        <script src="../static/js/wsy.js"></script>
         <script type="text/javascript" src="../static/assets/scripts/main.js"></script>
 </body>
 
diff --git a/APP/templates/square.html b/APP/templates/square.html
index 17d88ad..c68ef61 100644
--- a/APP/templates/square.html
+++ b/APP/templates/square.html
@@ -3,6 +3,8 @@
 
 <head>
     <meta charset="utf-8">
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta http-equiv="Content-Language" content="en">
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
@@ -13,10 +15,9 @@
     <link href="../static/css/charts.css" rel="stylesheet">
     <link href="../static/css/main.css" rel="stylesheet">
     <script src="../static/js/jquery-3.5.1.min.js"></script>
-    <script src="../static/js/wsy.js"></script>
     <script>
         // wsy
-        $(document).ready(function () { getCollection(); }); 
+        $(document).ready(function () { getContent('collection'); }); 
     </script>
 
     <style>
@@ -375,24 +376,25 @@
                                     <form>
                                         <i class="nav-link-icon fa fa-search"></i>&nbsp;
                                         <input type="text" name="" id="search">
-                                        <input type="button" value="search" onclick="getContent()">
+                                        <input type="button" value="search" onclick="getContent('collection')">
                                     </form>
                                 </div>
                             </div>
                         </div>
-                        <div class="row">
+                        <div class="row" id="textList">
                             <!-- 集锦样例 -->
-                            <div class="col-md-4">
+                            <div class="col-md-4" v-for="item in textList":key="item.id" v-bind:item='item'>
                                 <div class="card mb-3 bg-arielle-smile widget-chart text-white card-border">
-                                    <div class="widget-numbers"><span>名称</span></div><br>
-                                    <div class="widget-subheading"><i class="fa fa-tags"></i>&nbsp;&nbsp;<span>标签</span></div>
+                                    <div class="widget-numbers" v-on:click="jump_to('add.html',item.name,id);"><span>{{item.name}}</span></div><br>
+                                    <div class="widget-subheading"><i class="fa fa-tags"></i>&nbsp;&nbsp;<span>{{item.tag}}</span></div>
                                 </div>
                             </div>
                         </div>
                     </div>
-                    <div id="textList" style="width: 10px;"></div>
                 </div>
             </div>
 <script type="text/javascript" src="../static/assets/scripts/main.js"></script>
+<script src="../static/js/wsy.js"></script>
+
 </body>
 </html>
\ No newline at end of file
