# 《前端开发必备：深入学习Vue.js框架》

1. Vue.js 简介

Vue.js是一款流行的JavaScript前端框架，旨在简化Web应用的开发。它采用了MVVM（Model-View-ViewModel）架构模式，通过数据驱动和组件化的方式，提供了高效、灵活和可维护的开发方式。

1.1 Vue.js 是什么？

Vue.js 是一款流行的前端 JavaScript 框架，用于构建用户界面和单页面应用。它专注于视图层，并且易于学习和集成到现有项目中。Vue.js 的核心目标是通过提供响应式数据绑定和可组合的组件系统来简化 Web 应用的开发。Vue.js 提供了一种渐进式的开发方式，使开发者可以逐步应用其特性，从而更容易地构建复杂的 Web 应用。Vue.js 采用了 MVVM（Model-View-ViewModel）架构模式，允许开发者将数据与 DOM 元素进行绑定，实现数据驱动的视图更新。它还提供了诸如路由、状态管理等功能，以及丰富的生态系统和社区支持。Vue.js 在前端开发领域广受欢迎，被广泛应用于各种类型的项目中。

1.2 Vue.js 的优点和缺点

优点

1. 简单易学：Vue.js 的 API 设计简洁，易于上手，对于初学者和有经验的开发者来说都很友好。
2. 响应式数据绑定：Vue.js 提供了响应式数据绑定机制，使得数据的变化能够自动反映在视图上，简化了开发过程。
3. 组件化开发：Vue.js 支持组件化开发，使得代码可复用性更高，组件间的通信和协作更加便捷。
4. 高效的虚拟 DOM：Vue.js 通过虚拟 DOM 技术实现了高效的页面更新，提升了应用的性能表现。
5. 生态系统丰富：Vue.js 生态系统完善，拥有大量插件、工具和第三方库，能够满足各种需求。

缺点

1. 相对较小的社区规模：相比于一些主流框架，Vue.js 的社区规模相对较小，因此在一些特定问题上可能需要花费更多时间去解决。
2. 不够成熟：虽然 Vue.js 在不断发展壮大，但相对于一些老牌框架来说，有些功能或解决方案可能尚不够成熟。
3. 管理大型项目的挑战：在处理大型复杂项目时，有时可能需要更多的工程化和架构设计能力。

1.3 Vue.js 与其他前端框架的比较

Vue.js 与其他主流前端框架（如React和Angular）相比有以下特点：

1. 学习曲线：Vue.js 的学习曲线相对较低，容易上手。React 和 Angular 则可能需要更多的学习和熟悉时间。
2. 性能：Vue.js 在性能方面表现优秀，通过虚拟 DOM 和精细的更新机制实现了高效的渲染。React 也采用了虚拟 DOM 技术，而 Angular 则使用了更复杂的变化检测机制。
3. 组件化开发：Vue.js、React 和 Angular 都支持组件化开发，但在语法和使用方式上有些不同。Vue.js 的组件化开发更加简洁明了，模板语法类似于HTML，易于理解和维护。
4. 生态系统：React 生态系统非常庞大，拥有大量的第三方库和工具，社区活跃度高。Vue.js 的生态系统也不断增长，虽然规模相对较小，但也有许多优秀的插件和库可供选择。Angular 生态系统相对较全面，但与 Vue.js 和 React 相比较而言，社区规模相对较小。
5. 社区支持：React 拥有庞大的社区支持，问题解答和资源丰富。Vue.js 社区规模虽然相对较小，但也有积极的开发者社区提供支持和帮助。Angular 的社区相对较小，但由于其背后有 Google 的支持，官方文档和资源较为全面。

2. Vue.js 基础

2.1 数据绑定

Vue.js 的数据绑定是其核心特性之一，它可以通过简单的语法实现数据和视图之间的自动同步更新。在 Vue.js 中，可以使用 v-model 指令来实现双向数据绑定，也可以使用 {{}} 插值表达式来实现单向数据绑定。另外，Vue.js 还提供了 v-bind 指令用于动态绑定属性，以及 v-on 指令用于绑定事件。这些数据绑定的方式使得开发者能够轻松地在模板中操作数据，同时保持数据和视图的同步。

例子

<template>
  <div>
    <input type="text" v-model="message">
    <p>您输入的信息是: {{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello World'
    }
  }
}
</script>

2.2条件渲染和循环渲染

条件渲染

条件渲染允许你基于某个条件来选择性地渲染特定的内容。Vue.js 提供了 v-if、v-else 和 v-else-if 指令来实现条件渲染。

<template>
  <div>
    <p v-if="showMessage">显示消息</p>
    <p v-else>隐藏消息</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showMessage: true
    }
  }
}
</script>

循环渲染

循环渲染允许你迭代数组并为每个元素渲染相同的模板内容。Vue.js 提供了 v-for 指令来实现循环渲染。

<template>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Orange' }
      ]
    }
  }
}
</script>

在上面的例子中，通过 v-for 指令将 items 数组中的每个元素渲染为一个 <li> 元素，并使用 :key 属性指定每个元素的唯一标识符。除了基本的循环渲染外，Vue.js 还提供了更高级的循环渲染方式，如结合对象的循环渲染、循环渲染的索引等

3. Vue.js 组件

3.1 组件的基本概念

在 Vue.js 中，组件可以看作是一个自定义的元素，你可以在应用中使用这个元素来构建更大的界面。组件能够接收数据进行渲染，并可以通过事件与父组件或其他组件进行通信。

• 组件的注册：在使用组件之前，需要先将组件注册到 Vue 实例中。可以通过全局注册或局部注册的方式进行组件的注册。
• 组件的定义：组件的定义包括模板、样式和逻辑，它们可以被封装在一个独立的文件中，也可以直接写在 Vue 文件中。
• 组件的使用：一旦组件注册完成，就可以在模板中使用组件作为自定义元素，将其渲染到页面中。
• 组件的通信：组件之间可以通过属性和事件进行通信。父组件可以通过属性向子组件传递数据，子组件可以通过事件向父组件发送消息。

<template>
  <div>
    <h1>{{ greeting }}</h1>
    <button @click="changeGreeting">修改问候语</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      greeting: 'Hello, Vue!'
    }
  },
  methods: {
    changeGreeting() {
      this.greeting = 'Bonjour, Vue!';
    }
  }
}
</script>

在上面的例子中，我们定义了一个组件，其中包含一个标题和一个按钮。点击按钮会改变 greeting 数据的值，从而更新界面上的问候语。该组件可以通过注册后在其他地方使用。

以上是关于 Vue.js 组件的基本概念。组件化的开发方式可以让我们将复杂的界面划分为多个可复用的组件，提高了代码的可维护性和可重用性。

3.2 组件的生命周期钩子函数

在 Vue.js 组件中，有一系列的生命周期钩子函数可以让你在组件不同的阶段执行代码。这些钩子函数可以帮助你在特定的时机进行初始化、获取数据、处理操作等。

下面是 Vue.js 组件的生命周期钩子函数及其执行顺序：

1. beforeCreate：在实例创建之前被调用，此时组件的数据和事件还未初始化。
2. created：在实例创建完成后被调用，此时已经完成了数据的初始化，但 DOM 还未生成，无法访问到元素。
3. beforeMount：在挂载之前被调用，此时组件的模板已经编译完成，但尚未将其渲染到页面中。
4. mounted：在挂载完成后被调用，此时组件已经被渲染到页面中，可以访问到 DOM 元素。
5. beforeUpdate：在更新之前被调用，当组件的数据发生变化时会触发该钩子函数。
6. updated：在更新完成后被调用，当数据更新导致重新渲染组件时会触发该钩子函数。
7. beforeDestroy：在销毁之前被调用，可以用来进行清理工作，比如清除定时器、取消订阅等。
8. destroyed：在销毁完成后被调用，此时组件已经被完全销毁，不再存在。

除了上述的常用钩子函数，Vue.js 还提供了一些其他的生命周期钩子函数，如 activated、deactivated、errorCaptured 等，用于处理路由切换、错误捕获等特定场景下的操作。

这些生命周期钩子函数可以在组件中进行重写，并在对应的时机执行自定义的代码。通过合理地利用这些钩子函数，可以更好地控制组件的行为和交互逻辑。

3.3 组件的 props 和 events

Props

Props 是父组件向子组件传递数据的一种方式。子组件可以通过 props 接收父组件传递过来的数据，然后在子组件中使用这些数据进行渲染或其他操作。

父组件可以在子组件上使用 v-bind 指令将数据作为 props 进行传递，子组件则可以在内部通过 props 属性接收这些数据。

<!-- ParentComponent.vue -->
<template>
  <ChildComponent :message="parentMessage" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from Parent!'
    }
  }
}
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: ['message']
}
</script>

在上面的示例中父组件 ParentComponent 通过 v-bind 指令将 parentMessage 数据作为 props 传递给子组件 ChildComponent，子组件则通过 props 属性接收并使用这个数据。

Events

Events 则是子组件向父组件发送消息的一种方式。子组件可以通过 $emit 方法触发一个事件，并且可以携带数据，父组件可以监听这个事件并做出相应的响应。

<!-- ChildComponent.vue -->
<template>
  <button @click="sendMessage">Send Message to Parent</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message', 'Hello from Child!');
    }
  }
}
</script>

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent @message="handleMessage" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleMessage(message) {
      console.log(message);
    }
  }
}
</script>

在上面的示例中，子组件 ChildComponent 通过 $emit 方法触发了一个名为 “message” 的事件，并且传递了消息数据。父组件 ParentComponent 在模板中监听了这个事件，并在对应的方法中处理接收到的消息。

3.4 组件的插槽

组件插槽（Slots）是 Vue.js 中一种强大的机制，用于在组件中传递内容并进行灵活的布局。通过插槽，我们可以在父组件中编写子组件的内容，实现更高度可定制化的组件设计。

命名插槽

命名插槽允许父组件将不同的内容插入到子组件的指定位置。在子组件的模板中，通过 <slot> 元素定义一个插槽，并为其指定一个名称。父组件可以使用具有相同名称的 <template> 元素来传递内容到该插槽。

下面是一个使用命名插槽的示例

<!-- ChildComponent.vue -->
<template>
  <div>
    <h2>Child Component</h2>
    <slot name="content"></slot>
  </div>
</template>

<!-- ParentComponent.vue -->
<template>
  <div>
    <child-component>
      <template v-slot:content>
        <p>This is the content provided by the parent component.</p>
      </template>
    </child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  }
}
</script>

在上面的示例中，子组件 ChildComponent 定义了一个名为 “content” 的插槽，并通过 <slot> 元素来表示插槽的位置。父组件 ParentComponent 使用 <template> 元素，并使用 v-slot 指令来将内容传递到子组件的插槽中。

默认插槽

默认插槽（也称为匿名插槽）是在没有指定名称的情况下使用的插槽。如果子组件没有定义任何命名插槽，那么父组件传递给子组件的内容将会被放置在默认插槽中。

下面是一个使用默认插槽的示例：

<!-- ChildComponent.vue -->
<template>
  <div>
    <h2>Child Component</h2>
    <slot>This is the fallback content provided by the child component.</slot>
  </div>
</template>

<!-- ParentComponent.vue -->
<template>
  <div>
    <child-component>
      <p>This is the content provided by the parent component.</p>
    </child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  }
}
</script>

在上面的示例中，子组件 ChildComponent 定义了一个默认插槽，即没有指定名称的插槽。父组件 ParentComponent 在子组件标签内直接传递内容，这些内容将被放置在默认插槽中。

通过命名插槽和默认插槽的使用，Vue.js 组件可以提供更大的灵活性，允许父组件以不同的方式定制子组件的内容和布局。

4. 项目开发

4.1 项目创建

使用 Vite 来创建一个新的 Vue 3 项目非常简单。首先，确保你已经安装了 Node.js（推荐使用最新的稳定版本）。

接下来，你可以按照以下步骤使用 Vite 来创建一个新的 Vue 3 项目：

1. 全局安装 Vite

如果你还没有全局安装 Vite，可以在命令行中使用以下命令进行安装

npm install -g create-vite

或者

yarn global add create-vite

2. 创建 Vue 3 项目

yarn create vite vue-demo

3. 进入项目目录

cd vue-demo

4. 安装依赖

yarn

或

npm install

5. 运行开发服务器

yarn dev

或

yarn dev

4.2 路由管理

安装 Vue Router

npm install vue-router@next

或者

yarn add vue-router@next

创建路由配置

在项目的 src 目录中创建一个新的文件夹，例如 router，并在其中创建一个新的 JavaScript 文件，例如 index.js。在 index.js 文件中，编写路由配置代码。以下是一个简单的示例：

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

在上面的示例中，我们导入了 createRouter 和 createWebHistory 函数，以及两个视图组件 Home 和 About。然后，我们定义了一个 routes 数组，其中包含了各个路由的配置信息。最后，我们使用 createRouter 函数创建了一个路由实例，并将路由配置传递给它。

将路由配置应用到应用程序： 在你的应用程序的入口文件（通常是 main.js）中，导入和应用路由配置。以下是一个示例：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);

app.use(router);
app.mount('#app');

在模板中使用路由：

在你的组件的模板中，可以使用 <router-link> 组件来创建链接到其他页面的链接，以及使用 <router-view> 组件来显示当前页面的内容。以下是一个示例：

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

5. Vuex 状态管理

安装 Vuex

npm install vuex@next

或者

yarn add vuex@next

创建状态管理模块

在项目的 src 目录中创建一个新的文件夹，例如 store，并在其中创建一个新的 JavaScript 文件，例如 index.js。在 index.js 文件中，编写状态管理模块的代码。以下是一个简单的示例：

import { createStore } from 'vuex';

export default createStore({
  state() {
    return {
      count: 0
    };
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    }
  }
});

在上面的示例中，我们使用 createStore 函数创建了一个 Vuex store 实例，并定义了状态、mutations、actions 和 getters。

将状态管理模块应用到应用程序： 在你的应用程序的入口文件（通常是 main.js）中，导入并应用状态管理模块。以下是一个示例：

import { createApp } from 'vue';
import App from './App.vue';
import store from './store';

const app = createApp(App);

app.use(store);
app.mount('#app');

在上面的示例中，我们导入了应用程序的根组件 App.vue 和之前创建的 Vuex store 实例 store。然后，我们使用 app.use() 方法将状态管理模块添加到应用程序中。

在组件中使用状态管理： 在你的组件中，可以使用 mapState、mapMutations、mapActions 和 mapGetters 辅助函数来映射状态、提交 mutation、分发 action 和获取 getter。以下是一个示例：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
    <button @click="incrementAsync">Increment Async</button>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';

export default {
  computed: {
    ...mapState(['count']),
    ...mapGetters(['doubleCount'])
  },
  methods: {
    ...mapMutations(['increment', 'decrement']),
    ...mapActions(['incrementAsync'])
  }
};
</script>

在上面的示例中，我们使用辅助函数来映射状态、提交 mutation、分发 action 和获取 getter，然后在模板中使用它们来更新和显示状态。

6. Axios

Axios 是一个基于 Promise 的 HTTP 客户端，用于发送 HTTP 请求。它可以在浏览器和 Node.js 中使用，并提供了许多强大的功能，如拦截器、取消请求、转换请求和响应数据等。

要在你的项目中使用 Axios，需要先安装它：

npm install axios

或

yarn add axios

安装完成后，你可以在你的代码中引入 Axios 并开始使用它：

import axios from 'axios';

// 发送 GET 请求
axios.get('/api/users')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

// 发送 POST 请求
axios.post('/api/users', { name: 'John Doe' })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

在上面的示例中，我们首先导入了 Axios 模块。然后，我们使用 axios.get() 方法发送一个 GET 请求，并使用 .then() 处理返回的响应数据，使用 .catch() 处理错误情况。类似地，我们还可以使用 axios.post() 方法发送 POST 请求。

Axios 还提供了其他常用的 HTTP 请求方法，如 axios.put()、axios.delete() 等。

7. 项目分享-图床系统

图床系统（Image Hosting System）是一种用于存储和管理图片的服务。它提供了一个网络接口，使用户能够上传、存储和获取图片，并为用户生成图片的访问链接。图床系统通常用于在网页、博客、社交媒体等平台上共享图片

gitee地址-前端：https://gitee.com/codexiaoke/node-drawing-bed-client

gitee地址-后端：https://gitee.com/codexiaoke/node-drawing-bed-server

在线地址：http://tc.xkbk.top/#/

测试用户：473208893@qq.com 123456

项目截图

node-图床系统 API 文档

1.1. API 接口说明

• 接口基准地址：http://127.0.0.1:8888/api/
• 服务端已开启 CORS 跨域支持
• API 认证统一使用 Token 认证
• 需要授权的 API ，必须在请求头中使用 Authorization 字段提供 token 令牌
• 使用 HTTP Status Code 标识状态
• 数据返回格式统一使用 JSON

1.1.1. 支持的请求方法

• GET（SELECT）：从服务器取出资源（一项或多项）。
• POST（CREATE）：在服务器新建一个资源。
• PUT（UPDATE）：在服务器更新资源（客户端提供改变后的完整资源）。
• DELETE（DELETE）：从服务器删除资源。

1.1.2. 通用返回状态说明

状态码	含义	说明
200	OK	请求成功
201	CREATED	创建成功
204	DELETED	删除成功
400	BAD REQUEST	请求的地址不存在或者包含不支持的参数
401	UNAUTHORIZED	未授权
403	FORBIDDEN	被禁止访问
404	NOT FOUND	请求的资源不存在
422	Unprocesable entity	[POST/PUT/PATCH] 当创建一个对象时，发生一个验证错误
500	INTERNAL SERVER ERROR	内部错误

1.2 用户登陆

• 请求路径：login
• 请求方式：post
• 请求参数

参数名	说明	备注
email	邮箱	不能为空
password	密码	不能为空

• 响应参数

参数名	说明	备注
id	用户 id
username	用户名
email	邮箱
role	角色
token	token 令牌

• 响应数据

{
    "data": {
        "id": 3,
        "username": "xioake",
        "email": "xiaokenb@88.com",
        "role": "ordinary",
        "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6Inhpb2FrZSIsImlhdCI6MTYxMjQwOTEwNn0.qxBvXTfRfXjOjqC_1-vg4z2ZQsmhBaS7U2v_oE59rSE"
    },
    "meta": {
        "msg": "登陆成功！",
        "status": 200
    }
}

1.3 用户注册

• 请求路径：register
• 请求方式：post
• 请求参数

参数名	说明	备注
username	用户名	不能为空
email	邮箱	不能为空
password	密码	不能为空

• 响应数据

{
    "data": null,
    "meta": {
        "msg": "注册成功！",
        "status": 201
    }
}

1.4 文件上传

• 请求路径：
• 请求方式：
• 请求参数

参数名	说明	备注
file	文件对象	不能为空

• 响应参数

参数名	说明	备注
path	相对路径
url	文件地址
size	文件大小	单位：kb

• 响应数据

{
    "data": {
       "path": "/xioake/agS5MrG1C4.jpg",
        "url": "http://localhost:8888/xioake/agS5MrG1C4.jpg",
        "size": "1082.60kb",
    },
    "meta": {
        "msg": "上传成功！",
        "status": 200
    }
}

1.5 文件管理

1.5.1 获取文件列表

• 请求路径：getfile
• 请求方式：get
• 请求参数

参数名	说明	备注
pagenum	页码	不能为空
pagesize	当前页显示条数	不能为空
user_id	用户id	为空则获取所有文件

• 响应参数

参数名	说明	备注
total	总条数
id	文件 ID
user_id	用户 ID
img_name	文件名称
img_path	文件路径
img_size	文件大小	单位：KB
img_data	文件上传日期
img_url	文件地址

• 响应数据

{
    "data": {
        "total": 6,
        "file": [
            {
                "id": 62,
                "user_id": 1,
                "img_name": "Chhoyp4icr.jpg",
                "img_path": "/admin/z97rlhAW9c.jpg",
                "img_size": 796.59,
                "img_data": "2021-02-04T07:17:21.000Z",
                "img_url": "http://localhost:8888/admin/z97rlhAW9c.jpg"
            },
            {
                "id": 63,
                "user_id": 1,
                "img_name": "EmbSw4gNVA.jpg",
                "img_path": "/admin/dmB0XGkqHD.jpg",
                "img_size": 695.98,
                "img_data": "2021-02-04T09:39:01.000Z",
                "img_url": "http://localhost:8888/admin/dmB0XGkqHD.jpg"
            }
        ]
    },
    "meta": {
        "msg": "获取成功！",
        "status": 200
    }
}

1.5.2 删除文件

• 请求路径：delfile
• 请求方式：delete
• 请求参数

参数名	说明	备注
id	文件 ID	不能为空

• 响应数据

{
    "data": null,
    "meta": {
        "msg": "删除成功！",
        "status": 200
    }
}

1.5.3 根据用户ID 获取文件总数

• 请求路径：allimg

• 请求方式：get

• 请求参数

参数名	说明	备注
id	用户id	不能为空

• 响应参数

参数名	说明	备注
total	文件总数

• 响应数据

{
    "data": {
        "total": 10
    },
    "meta": {
        "msg": "获取成功！",
        "status": 200
    }
}

1.6 用户管理

1.6.1 获取用户列表

• 请求路径：users
• 请求方式：get
• 请求参数：

参数名	说明	备注
pagenum	页吗	不能为空
pagesize	当前显示条数	不能为空

• 响应参数

参数名	说明	备注
total	总条数
id	用户ID
username	用户名
email	邮箱
key	令牌
capacity	容量
state	状态
role	角色

• 响应数据

{
    "data": {
        "total": 2,
        "file": [
            {
                "id": 2,
                "username": "xioake",
                "email": "xiaoke@88.com",
                "key": "wLBFd0kCZJ742xS7Z6K1TJwo4qpklYpg",
                "capacity": 99.32,
                "state": true,
                "role": "ordinary"
            }
        ]
    },
    "meta": {
        "msg": "获取成功！",
        "status": 200
    }
}

1.6.2 修改密码

• 请求路径：editpwd
• 请求方式：put
• 请求参数

参数名	说明	备注
id	用户 id	不能为空
password	密码	不能为空

• 响应数据

{
    "data": null,
    "meta": {
        "msg": "修改密码成功！",
        "status": 200
    }
}

1.6.3 修改用户状态

• 请求路径：editste
• 请求方式：put
• 请求参数

参数名	说明	备注
id	用户 id	不能为空
state	用户状态（布尔值）	不能为空

• 响应数据

{
    "data": null,
    "meta": {
        "msg": "修改用户状态成功！",
        "status": 200
    }
}

1.6.4 修改用户容量

• 请求路径：editcpt
• 请求方式：put
• 请求参数

参数名	说明	备注
id	用户 id	不能为空
capacity	容量值	不能为空 +10 添加 -10 减

• 响应参数

参数名	说明	备注
capacity	可用容量
maxcapacity	用户容量

• 响应数据

{
    "data": {
        "capacity": 214.41,
        "maxcapacity": 220
    },
    "meta": {
        "msg": "修改用户容量值成功！",
        "status": 200
    }
}

1.7 卡密管理

1.7.1 生成卡密

• 请求路径：addCami
• 请求方式：post
• 请求参数：

参数名	说明	备注
number	生成数量	不能为空
size	容量大小	不能为空

• 响应数据

{
    "data": null,
    "meta": {
        "msg": "生成成功！",
        "status": 200
    }
}

1.7.2 使用卡密

• 请求路径：cami
• 请求方式：post
• 请求参数：

参数名	说明	备注
id	用户 id	不能为空
key	卡密	不能为空

• 响应数据

{
    "data": null,
    "meta": {
        "msg": "使用成功！",
        "status": 200
    }
}