总结一下最近的学习情况（Vue相关知识）

最近这段时间进一步复习了vue，然后完成了团队的前端考核，总结一下遇到的困难和知识点

---

说一下考核的具体要求

任务要求

前端考核：学习资源分享站

**项⽬概要**：参考⽹上的各类资源分享站点，使⽤vue与相关组件库构建⼀个分享学习资料的⽹站。

**后台接⼝⽂档**：http://119.23.54.229:8082/swagger-ui.html#/

**⻚⾯基础逻辑**：

- 前台展示⻚⾯：
  - 展示资源条⽬（默认⾸⻚）
  - ⼤厅留⾔板
  - 资源⽂章⻚
    - 资源标题
    - 资源介绍
    - 资源下载链接
    - 资源评论
- 后台管理⻚⾯：
  - 公告管理⻚
  - ⼤厅留⾔板管理⻚
  - ⽂章管理⻚

**界⾯参考**：

https://www.macwk.com/

https://share1223.com/

https://www.ghxi.com/

https://www.ludown.com/

https://www.lxapk.com/

https://apphot.cc/

**额外要求**：

不使⽤上次考核的组件库

发布在GitHub上，提前交项⽬链接

多踩坑

 

**DEADLINE**：5⽉5⽇（五一放假回来交）

---

最后也是很艰难的完成了，（遇到的问题一个又一个），大致的效果图如下

 

 

还有一些就不放出来了。下面说说遇到的困难和踩过的坑

---

•  1--Vue数组赋值的问题

---

 

 最近写项目时遇到的问题，用axios发送请求，从后端拿回来了数据（是个数组）。

经过一系列的处理之后，如下图

把处理好的数据从新赋值，然后数组从新渲染了表格，修改了List，然而列表没有改变。 Vue 不是双向绑定吗？当时我就傻了，调试了半天。 列表毫无反应，我明明改变了数组的值，还有他的长度。最后请教了实验室的师兄，师兄也是很高冷啊，反手就扔给了我一篇文章，我看完之后醍醐灌顶。内心真佩服师兄哇，按照他的方法也是顺利解决了。

---

大概的问题就是：由于 JavaScript 的限制，Vue 不能检测刚刚的数组修改操作，要调用$set的方法

• this.$set(this.array,index,value)

---

• 2--proxy error: could not proxy request...的解决办法 

 

---

最近在用Vue写项目时，配置代理服务器后，在终端时不时的出现

proxy error: could not proxy request...

---

一直报这个错，有时候刷新完就没了，但是过一会又有了，后来看了几篇文章找到了解决方法

---

创建axios实例

const service =axios.create（｛

baseURL：apiBaseUrl，

timeout：90000 //请求超时时间

｝）

---

之前timeout我设置的是10000，响应太慢了，设置成90000就可以了

---

• 3--Vue中使用axios封装成request使用 

---

 3-1为什么要封装axios请求方法 

        

在项目的开发中有三个阶段

1. 开发环境
2. 测试环境
3. 生产环境

访问接口数据时，例如：商品接口会是【域名】/api/v1/products
当环境不同时，直接修改域名就可。这就是封装请求的原因。

3-2如何封装 

我这次做了个比较简单的封装，如图

 

最后在页面中调用axios就可以使用了

 

本人前端菜鸡一枚，如有说的不对的，欢迎指出 

---

• 4--Vuex的使用以及问题 

---

这次的任务需要用到登录模块，在用axios发送请求的时候，是需要携带token的，这时候就不得不借助Vuex来实现了 

具体实现如图

import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
export default new Vuex.Store({
    state: {
        user: window.sessionStorage.getItem('user'),
        token: window.sessionStorage.getItem('token'),
    },
    mutations: {
        SET_TOKEN: (state, data) => {
            state.token = data
            window.sessionStorage.setItem('token', data)
        },
        GET_USER: (state, data) => {
            state.user = data
            window.sessionStorage.setItem('user', data)
        },
        LOGOUT: (state) => {
            state.token = null
            state.user = null
            window.sessionStorage.removeItem('token')
            window.sessionStorage.removeItem('user')
        }

    }, actions: {

    }
})

这里的sessionStorage的使用是因为：

Vuex在刷新页面的时候会丢失，所以我们需要在本地存一份，或者还有一种解决方法是在计算属性（computed）里面写Vuex也是可以的

然后在登录组件调用this.$store.state和this.$store.commit方法来实现，具体如下

 axios
            .post(
              `/api/user/userLogin?password=${this.formInline1.password1}&username=${this.formInline1.user1}`
            )
            .then((res) => {
              console.log(res);
              if (res.status === 200) {
                this.$store.commit("SET_TOKEN", res.data.data.token);
                this.$store.commit("GET_USER", this.formInline1.user1);
                this.$Message.success("登陆成功!");
                this.$router.push({
                  name: "LoginDone",
                });
              }
            })
            .catch(function (error) {
              console.log(error);
            });

发送请求成功后，后端会返回token值，我们需要用this.$store.commit的方法把token存起来，方便以后调用

---

Vue的学习也是暂时告一段落了，接下来就是React的学习了，继续加油！