222100211——个人技术总结

---

一.技术概述

Vue是构建用户界面的渐进式JavaScript框架。学习Vue可提升前端开发能力，应对团队作业中复杂的响应式开发需求。其难点在于组件间通信、Vue实例的生命周期等。

---

二.技术详述

1.用vue cli 创建一个项目
安装

npm install -g @vue/cli
# OR
yarn global add @vue/cli

创建

vue create my-project
# OR
vue ui

2.对页面组件进行划分
根据组件的功能以及在页面上的位置两个方面进行考虑，把组件进行细致划分，方便组件化地开发网页。

3.页面组件间数据传输

如果是父组件传子组件可以用prop的方式，但是在实际开发中常常会遇到非父子组件之间数据的相互传递，我采用了数据总线的方式进行数据传输。

在页面的js文件中添加如下代码

Vue.prototype.$bus=this;

让后就可以在这个页面的任意两个组件之间用this.$ bus.$ on和this.$ bus.$ emit来传递数据，例子如下：

---

三.遇到的问题和解决过程

问题1
当点击一个按钮时要发送两个axios请求从数据库获取数据时，这两个axios请求并不会按照代码顺序执行，而是各自开启一个线程进行请求。这样就可能导致其中一个axios线程的请求已经完成但是另一个axios线程的请求还未完成，而页面就已经加载完毕，从而导致页面信息不全的情况。这是网络请求和本地页面加载属于不同线程且响应时间快慢不一造成的。

解决办法

• 1.从后端解决：后端接口把这两个axios请求合并成一个，这样前端使用时就不会造成如上问题，但是本次团队作业，我没有选择这个方案。
• 2.从前端自身解决：我将其中一个axios请求写出一个函数，然后将其放入另一个axios请求中，这样就是开启了一个axios线程和这个axios线程的子axios线程，这样就可以保证在页面挂载完毕之前，都会执行完这两个axios请求。这样做也增加了一些时间上的消耗，但对于本次团队作业影响不大。

//修改个人信息
this.$axios.post('/user/self/info', params, { headers: headers })
        .then((response) => {
                    if (response.data.code == 1 && response.status == 200) {
                        //修改个人标签
                        this.editTags(tagParams,headers);
                    }
                    else
                        window.alert(response.data.msg);
                })
                .catch((err) => {
                    if (err.response.status == 401) {
                        window.location.href = "./frontendLogin.html"
                    }
                })



editTags(tagParams, headers) {
            this.$axios.post('/user/self/tag', tagParams, { headers: headers })
                .then((response) => {
                    if (response.data.code == 1 && response.status == 200) {
                        console.log(response);
                        //保存成功后回到个人中心页面
                        window.location.href = "./userCenter.html?token=" + this.active.token;
                    }
                    else
                        window.alert(response.data.msg);
                })
                .catch((err) => {
                    if (err.response.status == 401) {
                        window.location.href = "./frontendLogin.html"
                    }
                })
        },

问题2
用第三方库element-ui时，其中组件自定义化没有html原生标签方便，如要改变el-input框的背景色，用一般的选择器无法直接用background-color进行修改。

解决办法
通过网上查找资料，学会了用/deep/深度选择器对element-ui样式进行修改

/**改变input框背景颜色和字体颜色*/
.base-information-item-input /deep/.el-input__inner {
    background-color: rgb(235, 243, 239);
    font-size: 3vh;
    text-align: left;
    /** 修改输入框透明及选择完字体颜色更改*/
    border-color: transparent !important;
    color: black;
}

---

四.总结

Vue的组件化开发模式极大地提升了小组内的工作效率，因为它允许小组成员将复杂的界面拆分成多个可复用的、独立的组件。每个组件都有明确的职责和边界，使得代码更加清晰、易于理解和维护。此外组件化开发也为多人共同开发项目带来了极大的便利。通过明确的组件划分和接口定义，团队成员可以并行工作，互不干扰。当某个组件需要修改或更新时，只需要关注该组件本身及其依赖的接口，大大降低了代码耦合度和维护成本。总之，Vue是一个功能强大的前端框架。

---

五.参考文献

Vue官网文档

在Vue中如何修改element UI组件的样式