10185101272
/
Personal-Collections-Website
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

用vue重写前端逻辑

master
= 4 years ago
parent
8349e42c21
commit
b23e62a603
3 changed files with 121 additions and 115 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +91
    -79
      APP/templates/add.html
  2. +20
    -28
      APP/templates/personal.html
  3. +10
    -8
      APP/templates/square.html

+ 91
- 79
APP/templates/add.html View File

@ -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>

+ 20
- 28
APP/templates/personal.html View File

@ -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>

+ 10
- 8
APP/templates/square.html View File

@ -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>

Write Preview
Loading…
Cancel
Save