前言
虽说只是小任务但做的还是挺吃力的…也遇到了许多问题与坑点，记录一下。
任务要求
前端考核：学习资源分享站
项⽬概要：参考⽹上的各类资源分享站点，使⽤vue与相关组件库构建⼀个分享学习资料的⽹站。
后台接⼝⽂档：xxx
⻚⾯基础逻辑：
- 前台展示⻚⾯：
- 展示资源条⽬（默认⾸⻚）
- ⼤厅留⾔板
- 资源⽂章⻚
- 资源标题
- 资源介绍
- 资源下载链接
- 资源评论
- 后台管理⻚⾯：
- 公告管理⻚
- ⼤厅留⾔板管理⻚
- ⽂章管理⻚
额外要求：
不使⽤上次考核的组件库
发布在GitHub上，提前交项⽬链接
多踩坑
DEADLINE：5⽉5⽇（五一放假回来交）
一、关于axios
1.封装
根据业务需求不同有各种各样的封装方式，第一次使用封装，参考了该文章的方法
因为有请求头有token和无token两种请求，故封装成了两个
function myAxios(axiosConfig) {
const service = axios.create({
baseURL: "/api", // 设置统一的请求前缀
timeout: 10000, // 设置统一的超时时长
});
return service(axiosConfig);
}
export function myAxios2(axiosConfig) {
const service = axios.create({
baseURL: "/api", // 设置统一的请求前缀
timeout: 10000, // 设置统一的超时时长
headers: {
token: window.sessionStorage.getItem("token"), //获取保存在sessionStorage中的token值
},
});
return service(axiosConfig);
}
export default myAxios;2.发送请求时params和data的区别
上次考核中全是post请求，又没看文档，完全不知道get请求没有data参数…捣鼓半天最后求助师姐才知道这一说。
params是添加到url的请求字符串中的，一般用于get请求。 data是添加到请求体（body）中的， 一般用于post请求。
实际情况还是要根据后台的接收方式来调整的。
3.上传文件
不要加响应拦截！！！！！！
获取formdata类型数据需要通过如下方式
console.log(data.get("xxx"));4.下载文件
发送请求时需要设置responseType: ‘blob’
收到返回数据要对数据流进行解析
二、关于iview-ui
因为任务的额外要求是不使用上次使用过的组件库，故选择了iview，个人觉得没有element-ui用的舒服
1.DropdownItem 下拉菜单的点击事件
需要加修饰符.native才能正常使用
<DropdownItem @click.native="xxx"></DropdownItem>2.Avatar 头像不显示问题
错误代码：
<Avatar src="@/images/头像.png" />显示情况：
正确代码
<Avatar :src="require('@/images/头像.png')" />即可正常显示。
3.on-change用法
https://blog.csdn.net/YingDaoMonkey/article/details/90606265
4.Upload 上传文件
<Upload action="123" :before-upload="handleUpload">
<button icon="ios-cloud-upload-outline">上传文件</button>
</Upload>action为必填，手动上传随便写就行了 通过在handleUpload函数返回false来组织默认提交事件
handleUpload(file) {
let data = new FormData();
let me = this;
data.append("file", file);
data.append("passageID", this.passageResource[0].id);
// console.log(data.get("file")); 获取formdata数据类型中的数据
apiUploadResource(data) //封装好的请求
.then(function (response) {
me.$Message.success("上传成功");
me.getPassageResource(me.passageResource[0].id);
})
.catch((error) => {
console.log("请求失败", error);
});
return false; //拦截组件默认的请求
},5.修改iview默认样式
通过/deep/穿透
三、关于Vue与JS
1.使用background-image设置背景图报错
background-image: url("@/images/login.png");
// 会报图片路径不对的错误,因为vue2.5及以下版本这种写法没问题;vue2.6及以上版本,用的是webpack4.0就会导致这种错误，需要换一种写法:
background-image: url("~@/images/login.png");
// 带~的路径会被webpack解析为require(src/images/login.png)2.配置代理遇到的坑
上次考核中已经配置过代理服务器了，这次直接cv过来，结果请求爆了404（而且还是有的爆了有的没爆，一下给我整不会了，只有部分接口配置了代理…）
在网上查了一下发现：因为是vue2项目，需要将代理代码写入config文件夹下的index.js中的proxyTable：{}中（原本放在vue.config.js文件中，这是vue3的写法）
...
proxyTable: {
"/api": {
target: "xxx", // 代理目标的基础路径
pathRewrite: { "^/api": "" },
changeOrigin: true,
},
},3.重复点击路由报错
解决方法：在router文件夹中的index.js中添加如下代码
Vue.use(Router);
const router = new Router({
routes,
});
const VueRouterPush = Router.prototype.push;
Router.prototype.push = function push(to) {
return VueRouterPush.call(this, to).catch(err => err);
};也可通过if判断跳转路由是否相同、catch捕捉来解决。
4.vue组件页面里监听vuex里的数据变化
先用computed计算属性获取state中的值，然后watch开启深度监听即可
四、样式相关
1.鼠标形状的改变
即css中的cursor属性。
注意： style=“cursor：hand”，style=“cursor：pointer”这两个虽然都是手型，但style=“cursor：pointer”的兼容性比style=“cursor：hand”要好，所以如果要使用手型的话推荐使用style=“cursor：pointer”。
2.高度自适应铺满整屏
min-height: 100vh; display: flex; justify-content: center; align-items: center;视口单位(Viewport units)：视口单位中的“视口”，桌面端指的是浏览器的可视区域；移动端指的就是Viewport中的Layout Viewport, “视区”所指为浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。
1.vw：1vw等于视口宽度的1%，视框宽度是100vw。
2.vh：1vh等于视口高度的1%，视框高度是100vh。
3.vmin：选取vw和vh中最小的那个。
4.vmax：选取vw和vh中最大的那个。
https://blog.csdn.net/weixin_42531396/article/details/113012211
3.单行文本溢出显示‘…’
overflow: hidden; white-space: nowrap; word-break: break-all;总结
交任务的最后一天因为瞎搞github desktop把代码全抹了…靠vscode的时间线抢救了大部分 又补了几个小时才补回来 样式丢了不少 确实留下了很深刻的印象 以后老老实实git push了 哭( p′︵‵。)