【IMWeb训练营作业】作业1

有幸能参加IMWeb的前端Vue训练营,目前已经进行了5天的学习。期间早上签到,阅读和学习知乎专栏和看录播课都让我感到很充实。虽然对于我这种还没有很熟练掌握JS框架的人来说,Vue还是有一定难度,但是Vue的轻巧和优雅深深的吸引了我。

期间做了一些笔记,摘录一些跟此次作业相关的贴这里吧。

(一)Vue的两个核心:

  1. 响应的数据绑定,即当数据发生变化--》自动更新视图,利用Object.definedProperty中的setter/getter代理数据,监控对数据的操作。
  2. 组合的视图组件

ui页面映射为组件树

划分组件可维护,可重用,可测试

(二)技术要点:

  1. 使用独立开发版Vue.js,下载JS文件后直接在html中通过<script>引用。
  2. var vm=new Vue({});//创建了一个Vue的对象,参数是一个空的Object,创建出来的对象赋值给了vm(每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的:)
  3. el:" ";//设置html中的挂载点;html中渲染数据语法用{{}}
  4. Vue指令:(1)v-model:表单数据双向绑定 
    (2)v-on:绑定事件,缩写为“@”
    (3)v-show:条件渲染,根据值的真假,切换元素display的属性 
    (4)v-bind:Class与Style绑定,缩写为“:”,v-bind:class=”{ completed: item.isChecked}”,item.isChecked为true时元素添加completed这个class; 
    (5)v-for:列表渲染,v-for=”item in info”,遍历变量info中的每个元素进行列表渲染;
  5. watch深度监控数据:例如这样的list                                                                                                                             var list = [
    {
    title:"吃饭打豆豆",
    isChecked:true // 状态为false,为不选中  任务未完成
    },                                                                                                                                                                            watch:{
    /*list:function(){  //监控list这个属性,当这个属性对应的值发生变化就会执行函数
    store.save("miaov-new-class",this.list);
    }*/
    list:{
    handler:function(){
    store.save("miaov-new-class",this.list);
    },
    deep:true//在没有设置deep属性时,只能监控到 list 的title值
    }
    }
  6. 使用localStorage。通过 locaStorage.setItem设置存储和 locaStorage.getItem读取存储,并通过filter函数过滤返回到页面中的数据
作业核心代码(css样式不是作业重点,主要html和js)

Html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="index.css">
    <script src="./vue.js"></script>
</head>
<body>
    <div class="page-top">
        <div class="page-content">
            <h2>任务计划列表</h2>
        </div>
    </div>
    <div class="main">
        <h3 class="big-title">添加任务:</h3>
        <input 
            placeholder="例如:吃饭睡觉打豆豆;    提示:+回车即可添加任务" 
            class="task-input" 
            type="text"
            v-model="todo"
            v-on:keyup.13="addTodo"
        />
        <ul class="task-count" v-show="list.length">
            <li>{{noCheckeLength}}个任务未完成</li>
            <li class="action">
                <a  href="#all" :class="{active:visibility === 'all'}">所有任务</a>
                <a href="#unfinished" :class="{active:visibility === 'unfinished'}">未完成的任务</a>
                <a href="#finished" :class="{active:visibility === 'finished'}">完成的任务</a>
            </li>
        </ul>
        <h3 class="big-title">任务列表:</h3>
        <div class="tasks">

            <span class="no-task-tip" v-show="!list.length">还没有添加任何任务</span>
            <ul class="todo-list">
                <li class="todo" :class="{completed: item.isChecked,editing: item === edtorTodos}" v-for="item in filteredList" >
                    <div class="view">
                        <input class="toggle" type="checkbox" v-model="item.isChecked" />
                        <label @dblclick="edtorTodo(item)">{{ item.title }}</label>
                        <button class="destroy" @click="deleteTodo(item)"></button>
                    </div>
                    <input 
                        v-foucs="edtorTodos === item" 
                        class="edit" 
                        type="text" 
                        v-model = "item.title"
                        @blur="edtorTodoed(item)"
                        @keyup.13="edtorTodoed(item)"
                        @keyup.esc="cancelTodo(item)"
                    />
                </li>
            </ul>
        </div>
    </div>
    <script src="./app.js"></script>
</body>
</html>


JS部分

//存取localStorage中的数据

var store = {
	save(key,value){
		localStorage.setItem(key,JSON.stringify(value));
	},
	fetch(key){
		return JSON.parse(localStorage.getItem(key)) || [];//要么取到值,要么为空
	}
}

//取出所有的值
var list = store.fetch("miaov-new-class");

//过滤的时候有三种情况 all finished unfinished

var filter = {
	all:function(list){
		return list;
	},
	finished:function(list){
		return list.filter(function(item){
			return item.isChecked;
		})
	},
	unfinished:function(){
		return list.filter(function(item){
			return !item.isChecked;
		})
	}
}

var vm = new Vue({
	el:".main",
	data:{
		list:list,
		todo:"",
		edtorTodos:'',  //记录正在编辑的数据
		beforeTitle:'', //记录正在编辑的数据的title
		visibility: "all" //通过这个属性值的变化对数据进行筛选
	},
	watch:{
		/*list:function(){  //监控list这个属性,当这个属性对应的值发生变化就会执行函数
			store.save("miaov-new-class",this.list);
		}*/
		list:{
			handler:function(){
				store.save("miaov-new-class",this.list);
			},
			deep:true
		}
	},
	computed:{
		noCheckeLength:function(){
			return this.list.filter(function(item){
                return !item.isChecked
            }).length
		},
		filteredList:function(){			
			//找到了过滤函数,就返回过滤后的数据;如果没有返回所有数据
			return filter[this.visibility] ? filter[this.visibility](list) : list;

		}
	},
	methods:{
		addTodo(){  //添加任务//ES6使用方法

			this.list.push({
				title:this.todo,
				isChecked:false
			});
			this.todo = '';

		},
		deleteTodo(todo){ //删除任务
			var index = this.list.indexOf(todo);
			this.list.splice(index,1);

		},
		edtorTodo(todo){  //编辑任务
			console.log(todo);
			//编辑任务的时候,记录一下编辑这条任务的title,方便在取消编辑的时候重新给之前的title
			this.beforeTitle = todo.title;

			this.edtorTodos = todo;



		},
		edtorTodoed(todo){ //编辑任务成功
			this.edtorTodos = '';
		},
		cancelTodo(todo){  //取消编辑任务

			todo.title = this.beforeTitle;

			this.beforeTitle = '';

			//让div显示出来,input隐藏
			this.edtorTodos = '';
		}
	},
	directives:{
		"foucs":{
			update(el,binding){
				if(binding.value){
					el.focus();
				}
			}
		}
	}
});

function watchHashChange(){
	var hash = window.location.hash.slice(1);

	vm.visibility = hash;
	
}

watchHashChange();

window.addEventListener("hashchange",watchHashChange);


效果图如下


可以看到还是存在一些问题的,表现为在“已完成的任务“页面中,删除到最后一栏任务后,还是存在最后一项内容,要点选多选框才能将其去除。即hash为all时,能顺利删除,为finished和unfinish时删除会出现问题。暂时个人认为是this.list.splice(index,1);中的index设置,还有待解决。


在Node.js中,你可以使用内置的crypto模块来实现HMAC-SHA256算法。下面是一个示例代码: ```javascript const crypto = require('crypto'); const secret = 'Secret_Key'; const message = 'timestampGET/users/self/verify'; const hmac = crypto.createHmac('sha256', secret); hmac.update(message); const sign = hmac.digest('base64'); console.log(sign); ``` 在这个示例中,我们首先引入了crypto模块。然后,我们定义了密钥(secret)和要加密的消息(message)。接下来,我们使用createHmac方法创建了一个HMAC对象,并指定了算法为SHA256,并传入密钥。然后,我们使用update方法将消息传入HMAC对象进行更新。最后,我们使用digest方法以base64编码格式输出加密后的签名。 请注意,这个示例中的密钥和消息只是示意用法,你需要根据实际情况替换为你自己的密钥和消息。 #### 引用[.reference_title] - *1* [Typescript/Nodejs 使用HmacSHA256 & Base64对接口调用签名](https://blog.csdn.net/HumorChen99/article/details/117548951)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v4^insert_chatgpt"}} ] [.reference_item] - *2* [Hmac SHA256 加密在原生 Java 及 Node.js 的实现](https://blog.csdn.net/frgod/article/details/122025192)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v4^insert_chatgpt"}} ] [.reference_item] - *3* [腾讯IMWeb团队是如何使用 NodeJS 实现 JWT 原理](https://blog.csdn.net/lunahaijiao/article/details/109881868)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v4^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值