vue2 实现chatgpt的前端效果

一、Home的子组件

1. 在整理代码前可以先在页面中拆分一下，看看每一部分对应的是哪里的代码；
2. 划分好之后，在静态页面的代码里整理归纳，复制下来；
3. 在Home文件夹下分别创建各个组件文件夹，把整理好的代码粘贴进去；
4. 记得在Home里引入各个组件，注意不要拼错单词，这是我经常犯的错误；
5. 这一步比较简单，主要就是看是否细心和耐心，然后敲三个组件，其他直接复制粘贴就好。

二、获取三级分类信息

1. 获取三级分类信息要先找到TypeNav组件，分清楚一级分类、二级分类和三级分类；
2. 先去Test测试文件中写好发请求的东西，看能否正常打印到控制台；
3. 回到api文件中，在资料里找到请求地址，拆分成前半段和后半段，分别粘贴到文档里；

4. 记得将之前的reqSaying改为reqCategory。

三、配代理解决跨域(第二个获取三级分类数据发送请求之后，控制台报错，这里涉及跨域的问题)

1. 到vue.config.js文件里配置devServer

这里补充：devServer是webpack开发服务器，每次改代码都需要重新部署,或者只改变修改代码行的效果，所以出现了devserver本地服务。

注意：改完vue.config.js文件要重启脚手架。

2.同源策略

同源策略是浏览器的一种安全策略；

同源：协议、域名、端口号必须完全相同；

违背同源策略就是跨域

四、利用vuex动态展示TypeNav数据

(一)搭建vuex环境

什么时候需要vuex？

当项目中组件多，数据多，需要很好地维护时，需要vuex

1. 在src目录下新建store文件夹，创建index.js文件，控制台输入命令npm i vuex@3;
2. 在index.js文件中引入vue、vuex，提前定义actions、mutations、state、getters；

3. 在main.js文件中引入store

(二)vuex的模块化编码

将state中的数据分门别类，且每个分类都对应一个.js文件

创建vuex中的home模块,保存主页的数据

//用于响应组件中的数据：——服务员
const actions = {}

//用于真正操作数据 ——厨师
const mutations = {}

//初始化的数据 ——原材料
const state = {},，

//vuex层面的计算属性
const getters = {},

export default = {
  actions,
  mutations,
  state,
  getters
}

export default store

(三)读取vuex深层数据

利用...mapState读取数据

mapState:当一个组件需要获得多个状态的时候 ，将这些状态声明为计算属性可能会重复和多余， 为了解决这个问题，我们需要用mapState 辅助函数帮助我们生成计算属性。

import {mapState} from 'vuex'

computed:{
  ...mapState({
     name:state => state.user.name
  })
}

(四)TypeNav(三级)数据存入vuex

1. 呼唤一个可以发送请求、得到三级分类数据的服务员

mounted(){
  this.$store.dispatch('getCategoryList');
}

2. home.js路由文件中编写action

const action = {
  async getCategoryList({commit}){
    let relust = await reqCategory()
    if(result.code===200){
      commit('SAVE_CATEGORY_LIST',result.data.slice(0,15))
    }else{
      alert(result.message)
    }
  }
}

const mutations = {
  SAVE_CATEGORY_LIST(state,value){
    state.categoryList
}
}

补充：注意区分响应成功与业务逻辑成功

举例一：用户登录系统，用户名和密码输入成功，服务器告诉你登录成功，则响应成功、业务逻辑成功；

举例二：用户登陆系统，密码输入失败，服务器告诉你登录失败，则响应成功、业务逻辑失败；

举例三：用户登陆系统，服务器繁忙，没有任何反馈，则响应失败、业务逻辑也失败

3. 动态展示TypeNav数据

(1)分析导航数据，分析好数据结构，利用v-for遍历数据

注意点：v-for的嵌套使用

(2)利用mapState读取数据

import {mapState} from 'vuex';

export default{
  name:'TypeNav',
  computed:{
    ...mapState({
      categoryList:state => state.home.categoryList
    })
  }
}

4. 优化分类样式，加渐进渐出的动画

控制台npm i animate,对应代码写入对应位置，实现功能