# 开始

又到了实训周，之前实训周做了啥都忘记了…… 于是记录一下，表示我真的做了（

老师的要求是，先用 Vue.js 做一个简单的 Todo List，有点基础后，再做一个微信小程序。

# 看法

我觉得前端界面，简单一点的话，就是组件的拼装，组件自身的样式，组件和同级组件的关系，组件和父级组件的关系。

# 做 Todo List

# npm

，用 npm 创建了项目框架。而 bootstrap 组件库也不错，有好多好看的组件供使用

npm run dev

# 数据绑定传输等

@ （v-on）和 ： （v-vbind），

@ 用于处理事件，而 : 用于处理属性绑定。这两个符号都是Vue.js中的常见语法糖，使代码更简洁易读 
@ 符号是 v-on 指令的缩写。它用于监听DOM事件并触发相应的Vue实例中的方法。
: 符号是 v-bind 指令的缩写。它用于动态绑定属性或表达式
查自chatgpt 2023/12/11

我大致理解成，@是绑定事件（函数），：是跟参数之类的有关，也就是属性

v-model 可以在组件上使用以实现双向绑定

{{ item.task }} ，可以动态获取属性的值

@click="changeCompleted(item.id)" ，（）里的，可以传参，而在微信小程序里，可以用 data-xxx=“” 传递参数

# $emit 的使用

起初是想在 todoList.vue 调用 App.vue 里的函数，我用的是方法是，在 todoList.vue 里导入 App.vue，然后用 App.method.XXX() ，结果不行，后来老师说使用 emit 什么的，并帮我找到在官方文档哪，让我自己学一下。

以下摘自 Vue.js - 事件 - 事件参数

有时候我们会需要在触发事件时附带一个特定的值。举例来说，我们想要 <BlogPost> 组件来管理文本会缩放得多大。在这个场景下，我们可以给 $emit 提供一个额外的参数：

template

<button @click="$emit('increaseBy', 1)">
  Increase by 1
</button>

然后我们在父组件中监听事件，我们可以先简单写一个内联的箭头函数作为监听器，此函数会接收到事件附带的参数：

template

<MyButton @increase-by="(n) => count += n" />

或者，也可以用一个组件方法来作为事件处理函数：

template

<MyButton @increase-by="increaseCount" />

该方法也会接收到事件所传递的参数：

function increaseCount(n) {
  count.value += n
}

# axios 的使用

npm install axios

	remove(itemid) {
	// 发送 POST 请求给后端添加新任务
	axios.post('http://localhost:8080/todolist/removeTodolist', {
	// 参数传递
	id: itemid,
	}).then(response => {
	// 添加成功后，重新获取待办事项列表
	this.$emit("fetchTodoList");
	})
	.catch(error => {
	// 处理错误
	console.error('Error adding task:', error);
	});
	}

# 后端的搭建

老师说如果有后端能加分，我想着这不能错过啊，于是几个月前学的 java 的 Spring Boot + Mybatis plus + mysql 就派上用场了

根据之前跟着做的一个项目配置好 Todo List 后端后，写了点简单的增删查改，好些用法都忘记了，悲。

# 做微信小程序

想着我自己也有个公众号，做一个我也能用的上的小程序接上去。

挑来挑去，做了番茄时钟和一个简单的待办。

也用了 van weapp 组件库，不过用不太来。

# 界面样式

# 今日诗词的 API

搭在 github 上的 hexo 博客也接入了这个免费的 API，需要在小程序后台添加该 API 的地址到可访问名单

# 界面的搭建

直到做的差不多了，我才把大一时的前端课、近期学习的，在脑内乱成一锅粥的知识整理的差不多，也就是前端界面，简单一点的话，就是组件的拼装，组件自身的样式，组件和同级组件的关系，组件和父级组件的关系。

# 数据

数据则有的放 page 的 data 里，有的放缓存里，通过 wx.setStorageSync('logs', logs); 和 wx.getStorageSync('logs', logs);

# 开始

# 看法

# 做 Todo List

# npm

# 数据绑定传输等

# $emit 的使用

# axios 的使用

# 后端的搭建

# 做微信小程序

# 界面样式

# 今日诗词的 API

# 界面的搭建

# 数据

todolist

redis学习记录