diff --git a/components/RichEditor.vue b/components/RichEditor.vue
index ee650fe..e15ef2e 100644
--- a/components/RichEditor.vue
+++ b/components/RichEditor.vue
@@ -72,7 +72,7 @@ function handleCreated(editor) {
async function update() {
const editor = editorRef.value
const markdown = turndownService.turndown(editor.getHtml())
- await useFetch('/api/post/setNew', {
+ const { data, pending, error, refresh } = await useFetch('/api/post/setNew', {
method: 'POST',
body: JSON.stringify({
id: editState.currentEditFileName,
diff --git a/layouts/default.vue b/layouts/default.vue
index c2c4caa..2ec5711 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,12 +1,15 @@
+
+
+
+
+ [Default Layout]
+
+
- [Default Layout]
-
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 982857c..6a3d500 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -66,4 +66,4 @@ export default defineNuxtConfig({
enabled: true,
},
},
-})
\ No newline at end of file
+})
diff --git a/pages/editor.vue b/pages/editor.vue
index 3708837..910a9fc 100644
--- a/pages/editor.vue
+++ b/pages/editor.vue
@@ -7,12 +7,12 @@ interface Text {
}
const text = ref
({ markdown: '', html: '' })
editState.$subscribe(async (state) => {
- const data = await useFetch(`/api/post/${editState.currentEditFileName}`, {
+ const { data, pending, error, refresh } = await useFetch(`/api/post/${editState.currentEditFileName}`, {
options: {
method: 'GET',
lazy: true,
},
- }).data.value
+ })
text.value.markdown = data?.fileContent
text.value.html = data?.contentHtml
@@ -26,7 +26,7 @@ function changeHtml(value: any) {
-
+
diff --git a/pages/list.vue b/pages/list.vue
index 27b3b73..2adb092 100644
--- a/pages/list.vue
+++ b/pages/list.vue
@@ -1,24 +1,24 @@
-
-
diff --git a/pages/posts/[id].vue b/pages/posts/[id].vue
index 35b5c70..2917e63 100644
--- a/pages/posts/[id].vue
+++ b/pages/posts/[id].vue
@@ -2,17 +2,18 @@
const route = useRoute()
const id = route.params.id
-const data = await useFetch(`/api/post/${id}`, {
- method: 'GET',
- body: JSON.stringify({
- id,
- }),
-}).data?.value
-console.log(data?.contentHtml)
+const { data, pending, error, refresh } = await useFetch(`/api/post/${id}`)
-
+
+ Loading...
+
+
-
+
diff --git "a/posts/\347\254\254\344\270\200\346\254\241\344\276\213\344\274\232.md" "b/posts/\347\254\254\344\270\200\346\254\241\344\276\213\344\274\232.md"
new file mode 100644
index 0000000..80fce1e
--- /dev/null
+++ "b/posts/\347\254\254\344\270\200\346\254\241\344\276\213\344\274\232.md"
@@ -0,0 +1,708 @@
+# 四轮问题
+
+## 代码风格
+
+1. `if`、`{}`、`''`、运算符、`;`
+
+**bad:**
+
+```js
+if(){
+ let age=18;
+ let str="fff";
+}else{}
+function xxx(){}
+```
+
+**good**
+
+```js
+if() {
+ let age = 18
+ let str = 'fff'
+} else {
+
+}
+function xxx() {}
+```
+
+2. `:`、`,`
+
+**bad：**
+
+```js
+let obj = {
+ name:'plumbiu',
+ fn:(a,b)=>{}
+}
+```
+
+**good：**
+
+```js
+let obj = {
+ name: 'plumbiu',
+ fn: (a, b) => {}
+}
+```
+
+3. 使用 `===` 而不是 `==`
+4. `tabsize = 2`
+
+**bad：**
+
+```js
+const obj = {
+ name: 'xj'
+}
+```
+
+**good：**
+
+```js
+const obj = {
+ name: 'xj'
+}
+```
+
+5. `...`
+
+## 简洁写法
+
+1. 使用 `` 模板字符串
+
+
+
+```js
+`${Nmb++} ${id.innerText} rwE 1`
+```
+
+2. 使用 `const`、`let`，而不是 `var`
+
+**bad**
+
+```js
+var a = 1
+var PI = 3.14
+```
+
+**good**
+
+```js
+let a = 1
+const PI = 3.14
+```
+
+## 一个文件不要超过 300 行代码
+
+
+
+# JavaScript
+
+学习网站：
+
+- [ECMAScript 6](https://www.bookstack.cn/read/es6-3rd/sidebar.md)
+- [MDN](https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript)
+
+## 模板字符串
+
+` `` `和 `${}` 运算符
+
+```js
+const str = 'Plumbiu'
+console.log(`Hi ${str}`) // Hi Plumbiu
+```
+
+## 解构赋值
+
+**对象：**
+
+```js
+const obj = {
+ foo: 'bar',
+ baz: 42,
+ person: {
+ uname: 'Plumbiu',
+ age: 20
+ }
+}
+const { foo, baz: bazs, person: { uname } } = obj
+console.log(foo, bazs, uname) // "bar" 42 "Plumbiu"
+```
+
+**数组：**
+
+```js
+const arr = [1, 2, 3, 4, 5]
+const [a, b, c] = arr
+console.log(a, b, c) // 1 2 3
+```
+
+## 展开运算符
+
+形式 `...`
+
+**对象**
+
+```js
+const person_profile = {
+ uname: 'Plumbiu',
+ age: 20
+}
+const person_appearance = {
+ height: 180,
+ weight: 68
+}
+const person = {
+ ...person_profile,
+ ...person_appearance
+}
+console.log(person) // { uname: 'Plumbiu', age: 20, height: 180, weight: 68 }
+```
+
+**数组**
+
+对类数组同理，例如可以对字符串解构
+
+```js
+const arr = [1, 2, 3, 4, 5]
+const [a, ...b] = arr
+console.log(a, b) // 1 [2, 3, 4, 5]
+```
+
+**运用到函数中**
+
+```js
+function sum(...args) {
+ let sum = 0
+ args.forEach(item => sum += item)
+ return sum
+}
+console.log(sum(1, 2, 3, 4, 5)) // 15
+```
+
+> 箭头函数没有 `arguments` ！！！
+
+## includes()
+
+用来判断一个**字符串/元素**是否包含在另一个**字符串/数组**中，返回布尔值
+
+`indexOf` 返回数字，相比之下，纯粹的判断一个字符串是否包含在另一个字符串中，使用 `includes` 更有语义化
+
+```js
+'Hello world'.includes('Hello') // true
+'Hello world'.includes('Hi') // false
+```
+
+```js
+[1, 2, 3].includes(2) // true
+[1, 2, 3].includes(4) // false
+```
+
+## Object
+
+`Object.entries(obj)`、`Object.keys(obj)`、`Object.values(obj)`
+
+```js
+const obj = {
+ a: 1,
+ b: 2,
+ c: 3,
+ d: 4,
+ e: 5,
+}
+for (let [key, value] of Object.entries(obj)) {
+ console.log(key, value)
+}
+for(let key of Object.keys(obj)) {
+ console.log(key)
+}
+for(let value of Object.values(obj)) {
+ console.log(value)
+}
+```
+
+## flat()
+
+```js
+let arr = [[1, 2, 3], [4, 5, 6, [6.1, 6.2,]], [7, 8, 9]]
+console.log(arr.flat(Infinity))
+```
+
+
+
+# 展示自己
+
+一个程序员需要好好展现自己，才能获得面试官和其他人的赏识
+
+必备：
+
+- 一个 [`github`](https://github.com/) 账号
+- 一个 [`vercel`](https://vercel.com/) 或者 [`netifly`](https://app.netlify.com/) 账号
+- 一台服务器
+- 一个域名
+- 科学上网
+
+## github profile
+
+只需要在 `github` 上新建一个与 `github` 用户名一样的仓库即可，更改其中的 `README.md`
+
+
+
+**图片的来源：**
+
+记得把其中的 `Plumbiu` 换成自己的 `github` 用户名
+
+```markdown
+
+
+```
+
+**第三张图片**：[wakatime](https://wakatime.com/)
+
+访问 [Embeddables - WakaTime](https://wakatime.com/share/embed)，配置好之后，点击最下方 `Get Embeddable Code`，即可生成对应的图片地址(选 `HTML` 对应的图片标签)
+
+**对应的配置：**
+
+1. `Format：PNG`
+2. `Chart Type: Languages`
+3. `Date Range: All Time`
+4. ....
+
+> `vscode` 需要安装 `WakaTime` 插件
+
+## 博客
+
+博客可以记录自己的笔记和学习过程，面试官看到你写的博客那么棒，肯定会给你加分的
+
+关于如何搭建一个博客有很多教程，这里列举一个比较详细的教学视频
+
+- [hexo 博客搭建](https://www.bilibili.com/video/BV13v4y1c75G)
+
+# NodeJS
+
+`NodeJS` 实质上是一门服务端 `JavaScript` 框架，底层是用 `C/C++` 实现的，只不过我们可以使用 `JavaScript` 语言编写代码
+
+## 模块化编程
+
+传统的 `JavaScript` 编程方式是在 `html` 文件中使用 `
+
+
+```
+
+这样做有以下缺点
+
+- 容易触发变量污染的情况，导致报错
+- 各个 `script` 脚本引用有顺序
+- ...
+
+`NodeJS` 默认采用 `CommonJS` 规范
+
+```js
+// exports.js
+let a = 1
+module.exports = a
+```
+
+```js
+// require.js
+let a = require('./exports.js')
+console.log(a) // 1
+```
+
+当然你会问，`NodeJS` 既然是服务端语言，那么我们的网页(客户端)怎么使用这种规范？别急，在最后介绍
+
+## 包/依赖管理工具
+
+包就是别人为你写好的代码，你拿来使用
+
+例如，`express` 框架实质上也是包，原生的 `nodejs` 的服务端语言编写及其麻烦，需要我们手动判断请求的地址、手动设置 `header`、将对象转换为 `JSON` 格式，而 `express` 内部做了很多优化
+
+```js
+const http = require('http')
+const server = http.createServer()
+
+server.on('request', (req,res) => {
+ let content = 'not found'
+ if(req.url === '/') {
+ content = '首页'
+ } else if(req.url === '/about') {
+ content = '关于'
+ }
+ res.setHeader('Content-Type','text/html;charset=utf-8') // 设置Content-Type 响应头，防止中文乱码
+ res.end(content)
+})
+
+server.listen(80,()=>{
+ console.log('http server running at http://127.0.0.1');
+})
+```
+
+```js
+const express = require('express')
+const app = express()
+
+app.get('/', (req, res) => {
+ res.send('首页')
+})
+app.get('/about', (req, res) => {
+ res.send('关于')
+})
+
+app.listen(80,()=>{
+ console.log('http server running at http://127.0.0.1');
+})
+```
+
+常见的包管理工具有 `npm`、`yarn`、`pnpm`
+
+这里只介绍 `npm`、`yarn`，因为 `pnpm` 涉及 `monorepo` 现阶段比较困难理解
+
+`npm` 和 `yarn` 的区别主要在于**对依赖安装的位置管理**以及**缓存**，`yarn` 对比 `npm` 来说，采用了缓存机制，理论上安装速度会更快，且采用扁平化处理依赖，也更节省磁盘空间
+
+- 扁平化处理
+
+ **npm：**
+
+ ```
+ ├── A
+ | └── C
+ │ └── B
+ | └── C
+ ├── B
+ │ └── C
+ ├── C
+ ```
+
+ **yarn**
+
+ 将所有包/依赖放入当前项目的 `node_module` 文件
+
+ ```
+ ├── A
+ ├── B
+ ├── C
+ ```
+
+ 如果遇到引用版本不一致的情况，那么 **yarn** 会做以下处理：
+
+ > 相同包不同版本不会出现在同一级目录
+
+ ```
+ ├── A
+ | └── C@1
+ ├── B
+ │ └── C@2
+ ├── C@2
+ ```
+
+ ```
+ ├── A
+ | └── C@1
+ ├── B
+ ├── C@2
+ ```
+
+**两者执行命令的主要区别：**
+
+| npm | yarn |
+| ----------------------------------- | -------------------- |
+| npm install | yarn |
+| npm install react | yarn add react |
+| npm uninstall react | yarn remove react |
+| npm install element-plus --save-dev | yarn add react --dev |
+| npm update | yarn upgrade |
+
+# Vscode 插件
+
+`GitHub Copilot`：智能代码提示，需要获取 `Github` 学生包优惠
+
+`TODO Hightlight`：搭配 `Todo Tree` 使用，可以高亮 `TODO` 代码
+
+`Todo Tree`：搭配 `TODO Hightlight` 使用，可以对含有 `TODO` 的文件做树形处理
+
+`WakaTime`：将 `WakaTime` 集成到 `IDE` 的插件
+
+`Project Manager`：更好地管理自己的项目文件
+
+# 客户端模块化编程
+
+## 构建工具
+
+构建工具帮我们配置好了各个依赖，不需要我们手动配置
+
+这里只介绍 `vite` 构建工具，还有 `webpack`、`parcel`、`turborepo` 等
+
+| 构建工具 | 优点 | 缺点 |
+| ----------- | ----------------------------------------- | ---------------------------------- |
+| `vite` | 启动速度最快、支持各种框架模板 | 可配置性很强，但不如 `webpack` |
+| `webpack` | 可配置性非常强 | 需要手动配置各个依赖，启动速度缓慢 |
+| `parcel` | 自动化安装依赖 | 可配置性非常差 |
+| `turborepo` | `monorepo` 管理，启动速度快(采用缓存技术) | 学习成本大 |
+
+## 如何使用
+
+```bash
+yarn create vite
+```
+
+客户端模块化编程使用 `ES` 规范，当然其中的 `NodeJS` 模块还是 `CommonJS` 规范
+
+**`ES` 规范**
+
+```js
+// export.js
+let a = 1
+export const b = 2
+export default a
+```
+
+```js
+// import.js
+import a, { b } from './export.js'
+console.log(a, b) // 1, 2
+```
+
+# Vue
+
+Vue 是一个渐进性 `JavaScript` 框架，采用 `MVVM` 模型
+
+另外还有 `React`、`Angular`、`Svelte`、`JQuery`、`NextJS`、`Nuxt`、`SolidJS`、`Qwik` 等框架
+
+主要的几个为 `React`、`Vue`、`NextJS`、`NuxtJS`
+
+- `Angular`：框架虽然是最先提出的，功能也是最多的，但是编程模式偏向后端，国内很少公司在用
+- `Sevlte`：新生框架，语法类似 `vue`，但是更简洁，国外挺火的
+- `JQuery`：已经淘汰了，还是操作 DOM 那一套
+- `NextJS`：基于 `React` 的服务端渲染框架
+- `Nuxt`：基于 `Vue` 的服务端渲染框架
+- `SolidJS`：新生框架，主打性能，语法和 `React` 类似，但更简单
+- `Qwik`：新生的服务端渲染框架，速度巨快
+- ....
+
+`vue` 在国外的流行度远远低于 `React`、`Angular` 热度，甚至比 `JQuery` 还低，但是在国内很多人用。因为语法简单，`React` 的学习需要我们熟练掌握 `ES6` 语法，而 `Vue` 不需要
+
+**传统编程**
+
+```html
+
+
+
+```
+
+**vue**
+
+vue 采用**数据驱动视图**的方式，省去了我们获取 DOM 元素的操作
+
+```vue
+
+ {{count}}
+
+
+
+```
+
+> `@click` 是 `vue` 提供的语法糖，表示点击触发事件，和 `onclick` 差不多。
+>
+> `ref` 是 `vue` 提供的响应式数据语法
+>
+> `{{}}` 是 `vue` 提供的模板语法，可以在里面写 `script` 标签定义的数据，如果变量不是响应式数据(即使用 `ref` 包裹)，那么数据的改变不影响视图
+
+## .vue 文件
+
+`.vue` 文件是我们编写 vue 代码的文件，其基本的内容为：
+
+```vue
+
+
+
+```
+
+- ``：编写 HTML 代码的地方
+- `
+
+
+
App组件
+
+
+
+
+```
+
+**components/Son.vue**
+
+```vue
+
+
+
Son组件
+
+
+```
+
+父组件可以向子组件传递数值
+
+**App.vue**
+
+在子组件加上要传递的属性及属性值
+
+```vue
+
+```
+
+**components/Son.vue**
+
+子组件使用 `defineProps` 接收父组件传递过来的数值
+
+```vue
+
+
+
+
Son组件
+ {{msg}}
+
+
+```
+
+
+
+## 渲染
+
+`vue` 提供了条件渲染和循环渲染
+
+**条件渲染：**
+
+`v-if`、`v-else-if`、`v-else`
+
+```vue
+
+
+ 不及格
+ 及格
+ 良好
+ 优秀
+
+
+
+```
+
+**循环渲染：**
+
+`v-for`
+
+```vue
+
+
+
+ 序号: {{index + 1}}
+ 名字: {{item.name}}
+ 分数: {{item.score}}
+
+