待定事项之存储数据
#### 部署云服务器
### 部署云服务器完整步骤
1. **连接到云服务器**
```bash
ssh root@<服务器IP>
```
2. **创建项目目录结构**
```bash
mkdir -p /var/www/three/study/待办事项
```
3. **克隆项目仓库**
```bash
cd /var/www/three
git clone https://gitee.com/chen-yixin123666abc/study.git
```
4. **安装项目依赖**
```bash
cd /var/www/three/study/待办事项
yarn install
```
5. **配置 Vite**
- 编辑 `vite.config.js` 文件，添加 `allowedHosts` 配置：
```javascript
// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [vue()],
server: {
host: '0.0.0.0',
port: 5173,
allowedHosts: ['three.cyx123.cn', 'localhost']
},
});
```
6. **启动开发服务器**
```bash
yarn dev
```
7. **配置 Nginx**
- 创建或编辑 Nginx 配置文件：
```bash
vim /etc/nginx/conf.d/three.cyx123.cn.conf
```
- 添加以下内容：
```nginx
server {
listen 80;
server_name three.cyx123.cn;
location / {
proxy_pass http://localhost:5173;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}
```
#### **1. 本地存储工具函数**
- 使用 `localStorage` 来持久化待办事项数据。通过定义 `readData` 和 `writeData` 函数，可以方便地读取和写入本地存储
```js
// utils/tools.js
const keyword = 'todosList';
export const readData = () => {
const a = localStorage.getItem(keyword);
return a ? JSON.parse(a) : [];
};
export const writeData = (a) => {
localStorage.setItem(keyword, JSON.stringify(a));
};
```
- **`localStorage`**：Web API 提供的本地存储功能，用于存储键值对数据。
- **`getItem` 和 `setItem`**：分别用于读取和写入本地存储中的数据。
- **`JSON.parse` 和 `JSON.stringify`**：用于将字符串转换为 js 对象，以及将 js 对象转换为字符串。
#### **2. Vue 3 生命周期钩子 `onMounted`**
- 使用 `onMounted` 钩子在组件挂载完成后执行初始化操作，从本地存储中读取待办事项数据并初始化 `arr`
```js
import { ref, onMounted, watch } from 'vue';
import { readData, writeData } from './utils/tools';
let arr = ref([]);
onMounted(() => {
let data = readData();
arr.value = [...data]; // 初始化 arr
});
```
- **`onMounted`**：Vue 3 的生命周期钩子，用于在组件挂载完成后执行代码。
- **`ref`**：Vue 3 的响应式 API，用于创建响应式引用。
- **`arr.value`**：通过 `.value` 访问 `ref` 的值。
#### **3. Vue 3 响应式数据侦听器 `watch`**
- 使用 `watch` 侦听器监听 `arr` 的变化，并将最新的数据写入本地存储。
```js
watch(arr, (newValue) => {
writeData(newValue);
}, { deep: true });
```
- **`watch`**：Vue 3 的响应式 API，用于监听响应式数据的变化。
- **`deep: true`**：配置选项，用于深度监听对象的变化。
- **`writeData`**：将数据写入本地存储的函数。