一奄容、前言
? ? ? ?上期用最簡(jiǎn)單技術(shù)形式走通了前后臺(tái)的需求，制作了一個(gè)任務(wù)管理系統(tǒng)锨侯，方便記錄并規(guī)劃每天的成長(zhǎng)嫩海。
? ? ? ? 寫(xiě)任務(wù)的核心是為了更好的規(guī)劃時(shí)間冬殃，想象讓你做一個(gè)計(jì)劃系統(tǒng)你該如何考慮囚痴？
? ? ? ? 1）首先你必須有地方去寫(xiě)，有地方展示
? ? ? ? 2）展示時(shí)需區(qū)別未完成和已完成的狀態(tài)
? ? ? ? 3）需要規(guī)定一個(gè)結(jié)束日期审葬，并且加入提醒深滚，到指定時(shí)間未完成的任務(wù)奕谭，需要寫(xiě)清理由。
? ? ? ? 4）......
所以這期做一下調(diào)整：
1. 整體界面需要重新修改
2.PHP從面向過(guò)程升級(jí)成面向?qū)ο?/b>
3.刪除接口從物理刪除變?yōu)?b>邏輯刪除
4.因布局調(diào)整所影響前端邏輯的改良
5.基礎(chǔ)SQL語(yǔ)法舉一反三
二痴荐、調(diào)整樣式
三血柳、業(yè)務(wù)梳理
?前端邏輯主要是練習(xí)vue基本語(yǔ)法，以及事件觸發(fā)之間的邏輯關(guān)系生兆，如何跟php交互數(shù)據(jù)难捌。
????主要功能：
? ? 用戶輸入添加后變?yōu)榇k項(xiàng)，完成后用戶勾選變?yōu)橐艳k項(xiàng)鸦难，每一項(xiàng)計(jì)劃可刪除和編輯根吁，還記錄了計(jì)劃的條數(shù)和未完成的條數(shù)
四、前端布局
上期的布局及樣式完全推倒重做合蔽，代碼如下：
?<div?class="hello"
???????id="box">
????<h4>任務(wù)便簽</h4>
????<p?style="font-size:12px;">總數(shù)為?<span?style="color:#35b96d;">{{?arr.length}}</span>個(gè)击敌，還有?<span?style="color:#35b96d;">{{?choose()?}}</span>個(gè)未完成</p>
????<p?style="font-size:12px;?text-align:?right;">【<span?style="color:#35b96d;"
????????????class="span1"
????????????@click='finish()'>清除已選</span>】【<span?class="span1"
????????????@click='Allfinish()'
????????????style="color:#35b96d;">全部清除</span>】</p>
????<ul>
??????<li?v-for="(item,index)?in?arr"
??????????v-bind:class='{finish:?item.bol}'>
????????<span?class="icon_num">{{index+1}}</span>
????????<input?type="checkbox"
???????????????v-model='item.bol'
???????????????@change="updataFn()"></input>
????????<span?v-text='item.des'
??????????????v-show='!item.edit'
??????????????@click='edit(index)'></span>
????????<input?type="text"
???????????????v-model='item.des'
???????????????v-show='item.edit'
???????????????v-on:keyup.13='item.edit?=?!item.edit'
???????????????@blur='item.edit?=?false;updataFn()'>
????????<span?class="redStyle?delBtn"
??????????????@click='del(item.des)'></span>
??????</li>
????</ul>
????<textarea?placeholder="安排新的任務(wù)吧"
??????????????type="text"
??????????????class="add"
??????????????v-model='msg'
??????????????v-on:keyup.13="add"></textarea><button?@click='add()'>保存</button>
??</div>
-------------------------------------------------------------------------------------------------------------------
export?default?{
??name:?'HelloWorld',
??data?()?{
????return?{
??????arr:?[
????????//?數(shù)據(jù)結(jié)構(gòu):
????????//?des:?任務(wù)描述
????????//?bol:?任務(wù)完成標(biāo)志
????????//?edit:?任務(wù)編輯標(biāo)志
????????//?{?des:'設(shè)計(jì)',?bol:false,?edit:false?}
??????],
??????msg:?''
????}
??},
??created?()?{
????if?(localStorage.getItem('msg'))?{
??????//如果有就讀取msg存到arr數(shù)組中
??????this.arr?=?JSON.parse(localStorage.getItem('msg'))
????}
??},
??methods:?{
????//?添加（判斷msg是否為空，如果不為空就給arr數(shù)組里push內(nèi)容拴事，然后在把msg設(shè)置為空）
????add:?function?()?{
??????if?(this.msg.replace(/[\r\n]/g,?"")?==?'')?{
????????this.msg?=?''
????????alert('請(qǐng)輸入名稱(chēng)');
????????return;
??????}?else?{
????????for?(var?i?=?0;?i?<?this.arr.length;?i++)?{
??????????if?(this.arr[i].des?==?this.msg.replace(/[\r\n]/g,?""))?{
????????????this.msg?=?''
????????????alert('任務(wù)名稱(chēng)不能重復(fù)');
????????????return;
??????????}
????????}
??????}
??????this.arr.push({?des:?this.msg.replace(/[\r\n]/g,?""),?bol:?false,?edit:?false?});
??????localStorage.setItem('msg',?JSON.stringify(this.arr))
??????this.msg?=?''
????},
????//更新到本地存儲(chǔ)中
????updataFn:?function?()?{
??????localStorage.setItem('msg',?JSON.stringify(this.arr))
????},
????//?返回未完成的數(shù)量
????choose:?function?()?{
??????var?num?=?0;????//?未完成的數(shù)量
??????this.arr.forEach(function?(item)?{
????????if?(!item.bol)?{
??????????num?+=?1;
????????}
??????});
??????return?num;
????},
????//?返回未完成的任務(wù)
????finish:?function?()?{
??????var?forNum?=?0;
??????for?(var?i?=?0;?i?<?this.arr.length;?i++)?{
????????if?(this.arr[i].bol)?{
??????????forNum++
????????}
??????}
??????if?(forNum?==?0)?{
????????alert('您需要選中復(fù)選框刪除');
??????}
??????var?temp?=?this.arr;
??????this.arr?=?[]
??????for?(var?i?=?0;?i?<?temp.length;?i++)?{
????????if?(!temp[i].bol)?{
??????????this.arr.push(temp[i]);
??????????console.log(temp[i])
????????}
??????}
??????this.updataFn();
????},
????//單條刪除
????del?(des)?{
??????var?index?=?this.arr.findIndex(item?=>?{
????????if?(item.des?==?des)?{
??????????return?true
????????}
??????})
??????this.arr.splice(index,?1)
??????this.updataFn();
????},
????//清除每條數(shù)據(jù)
????Allfinish?()?{
??????if?(this.arr.length?==?0)?{
????????alert('沒(méi)有可刪除的選項(xiàng)')
??????}?else?{
????????this.arr?=?[];
????????this.updataFn();
??????}
????},
????//?編輯
????edit:?function?(i)?{
??????if?(this.arr[i].bol)?{
????????return;
??????}
??????this.arr[i].edit?=?true;
????}
??}
}
</script>
--------------------------------------------------------------------------------------------------------------
.redStyle{background:#ccc;display:inline-block;width:20px;height:20px;vertical-align:middle}
h4{color:#252434}
.delBtn{margin-top:15px;float:right;background:url(../../src/assets/del.png) no-repeat;background-size:60%;vertical-align:middle}
#box{width:580px;margin:30px auto;background:#fff;color:#222131;padding:30px 50px;border:1px solid #252434;border-bottom-width:4px;border-radius:3px;font-family:"Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei"}
li:nth-child(2n+2){margin-right:0}
.icon_num{opacity:.8;color:#fff;box-sizing:border-box;border-radius:100%;display:inline-block;background:#35b96d;font-size:11px;left:-5px;width:15px;height:15px;line-height:15px;vertical-align:middle;text-align:center;bottom:-8px;border-radius:100%}
input[type=text]{outline:0;width:100%;border:1px solid #f9f9f9}
li{position:relative;background:#fff;border:1px solid #ccc;border-radius:3px;box-sizing:border-box;padding:0 11px;list-style-type:none;width:47%;line-height:40px;font-size:14px;color:#5e5d6d;margin-bottom:10px;margin-right:16px;float:left;font-size:12px;overflow:hidden}
ul{padding-left:0;margin-top:30px;margin-bottom:20px;overflow:hidden}
.add{width:100%;height:80px;margin-right:10px;margin-bottom:5px;outline:0}
.span1{color:#87ceeb}
.finish{box-sizing:border-box;color:#ccc;text-decoration:line-through;height:40px;line-height:40px;background:#eee;font-size:14px;border:none}
textarea{border:1px solid #252434;font-family:"Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei";padding:5px 10px;box-sizing:border-box;background:#fff;color:#252434}
button{outline:0;width:100%;background:#252434;border:none;height:40px;color:#ccc}
五沃斤、后臺(tái)邏輯
六、下期預(yù)告
? 下期會(huì)增加定時(shí)提醒（包含聲音和彈窗提示）刃宵，歷史查詢和顯示以天為單位衡瓶。
? 下期會(huì)增加刪除的再次詢問(wèn)功能，避免誤刪组去。
? 下期會(huì)調(diào)整修改的布局樣式鞍陨。
? 下下期做一個(gè)響應(yīng)式布局，來(lái)適配手機(jī)端从隆、平板诚撵、pc端。
?? 下下期加入登錄和注冊(cè)功能键闺，加入users表寿烟。
