# VUE入门项目（极简qq空间）

**Repository Path**: haowei0315/vue_helloworld

## Basic Information

- **Project Name**: VUE入门项目（极简qq空间）
- **Description**: VUE入门项目（极简qq空间）
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2023-03-02
- **Last Updated**: 2023-08-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue

## README

# 1.1 配置环境
[Vue官网](https://vuejs.org/)
### 终端

Linux和Mac上可以用自带的终端。
Windows上推荐用powershell或者cmd。Git Bash有些指令不兼容。
### 安装Nodejs

[安装地址](https://nodejs.org/en/)

### 安装@vue/cli

打开Git Bash，执行：

```
npm i -g @vue/cli
```


如果执行后面的操作有bug，可能是最新版有问题，可以尝试安装早期版本，比如：`npm i -g @vue/cli@4`

### 启动vue自带的图形化项目管理界面

`vue ui`

常见问题1：Windows上运行vue，提示无法加载文件，表示用户权限不足。
解决方案：用管理员身份打开终端，输入`set-ExecutionPolicy RemoteSigned`，然后输入y

# 1.2 基本概念
### script部分

export default对象的属性：

    name：组件的名称
    components：存储<template>中用到的所有组件
    props：存储父组件传递给子组件的数据
    watch()：当某个数据发生变化时触发
    computed：动态计算某个数据
    setup(props, context)：初始化变量、函数
        ref定义变量，可以用.value属性重新赋值
        reactive定义对象，不可重新赋值
        props存储父组件传递过来的数据
        context.emit()：触发父组件绑定的函数

### template部分

    <slot></slot>：存放父组件传过来的children。
    v-on:click或@click属性：绑定事件
    v-if、v-else、v-else-if属性：判断
    v-for属性：循环，:key循环的每个元素需要有唯一的key
    v-bind:或:：绑定属性

### style部分

    <style>标签添加scope属性后，不同组件间的css不会相互影响。

### 第三方组件

    view-router包：实现路由功能。
    vuex：存储全局状态，全局唯一。
        state: 存储所有数据，可以用modules属性划分成若干模块
        getters：根据state中的值计算新的值
        mutations：所有对state的修改操作都需要定义在这里，不支持异步，可以通过$store.commit()触发
        actions：定义对state的复杂修改操作，支持异步，可以通过$store.dispatch()触发。注意不能直接修改state，只能通过mutations修改state。
        modules：定义state的子模块

# 1.3 后端API
### 1. 获取Json Web Token（JWT）

    地址：https://app165.acapp.acwing.com.cn/api/token/
    方法：POST
    是否验证jwt：否
    输入参数：
        username: 用户名
        password: 密码
    返回结果：
        access: 访问令牌，有效期5分钟
        refresh: 刷新令牌，有效期14天

### 2. 刷新JWT令牌

    地址：https://app165.acapp.acwing.com.cn/api/token/refresh/
    方法：POST
    是否验证jwt：否
    输入参数：
        refresh: 刷新令牌
    返回结果：
        access: 访问令牌，有效期5分钟

### 3. 获取用户列表

    地址：https://app165.acapp.acwing.com.cn/myspace/userlist/
    方法：GET
    是否验证jwt：否
    输入参数：无
    返回结果：返回10个用户的信息

### 4. 获取某个用户的信息

    地址：https://app165.acapp.acwing.com.cn/myspace/getinfo/
    方法：GET
    是否验证jwt：是
    输入参数：
        user_id：用户的ID
    返回结果：该用户的信息

### 5. 获取某个用户的所有帖子

    地址：https://app165.acapp.acwing.com.cn/myspace/post/
    方法：GET
    是否验证jwt：是
    输入参数：
        user_id：用户的ID
    返回结果：该用户的所有帖子

### 6. 创建一个帖子

    地址：https://app165.acapp.acwing.com.cn/myspace/post/
    方法：POST
    是否验证jwt：是
    输入参数：
    content：帖子的内容
    返回结果：result: success

### 7. 删除一个帖子

    地址：https://app165.acapp.acwing.com.cn/myspace/post/
    方法：DELETE
    是否验证jwt：是
    输入参数：
    post_id：被删除帖子的ID
    返回结果：result: success

### 8. 更改关注状态

如果未关注，则关注；如果已关注，则取消关注。

    地址：https://app165.acapp.acwing.com.cn/myspace/follow/
    方法：POST
    是否验证jwt：是
    输入参数：
    target_id: 被关注的用户ID
    返回结果：result: success

### 9. 注册账号

    地址：https://app165.acapp.acwing.com.cn/myspace/user/
    方法：POST
    是否验证jwt：否
    输入参数：
        username: 用户名
        password：密码
        password_confirm：确认密码
    返回结果：
        result: success
        result: 用户名和密码不能为空
        result: 两个密码不一致
        result: 用户名已存在