校园调研星是本学期做的一个UML课程设计
前端采用了Vuejs+ElementUI+Axios进行编写
后端采用Go+Gin框架进行编写
经过一个多月的不懈努力,终于把项目搞定了…
由于我负责了一部分前端的编写,这里记录(吐槽)一下在此次项目编写中遇到的问题
项目前端采用ElementUI做界面设计,有文档的帮助,本以为可以一路顺利进行下去,但是在实际使用中还是遇到了一些小问题…
一、关于ElementUi的一些小问题
1.MessageBox组件没有适应移动端
当移动端弹出MessageBox时,MessageBox会超出手机显示。
通过浏览器的开发者工具查看该组件元素,发现该组件的宽度貌似被设置为定值750px。
可以通过media查询的方式判断屏幕大小调整MessageBox的宽度。
因为MessageBox可能会用到很多地方,故在App.vue下的script中设置全局样式。
@media screen and (max-width: 750px) {
.el-message-box {
width: 60% !important;
}
}
2.hidden-xxxx-and-down 和 hidden-xxxx-and-up在同一页面使用会出一点小问题
ElementUI提供了Layout布局组件,可以灵活地布局。
设想是移动和PC共用一套页面,根据页面大小的不同动态改变布局的内容。
预设利用Hidden族类控制显示菜单,当低于某一值时,左边菜单隐藏,显示顶部导航中的菜单图标。
但是使用中实际发现同时使用up和down(例如hidden-md-and-down和hidden-md-and-up),当窗口变化的大小在设定值附近的一小段范围内,左边菜单被隐藏了,而顶部的菜单图标却没有显示。也就是可能up和down的值设定有一小段差值。
可以通过设置一个监听函数,监听窗口的变化。再根据得到窗口的大小决定菜单的显示(此做法可能在窗口大小频繁变化时导致CPU占用变高)。
//监听窗口大小变化
window.addEventListener('resize', () => {
//do something...
});
在编写中大概就遇到这两个问题,其实第二个关于菜单的显示隐藏或许会有更好的方法,我猜测up和down的差值可能是给页面变化显示一个缓冲的区间。
二、关于axios的使用
前端使用axios库进行异步请求。 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
【Axios的特性】
· 从浏览器中创建 XMLHttpRequests
· 从 node.js 创建 http 请求
· 支持 Promise API
· 拦截请求和响应
· 转换请求数据和响应数据
· 取消请求
· 自动转换 JSON 数据
· 客户端支持防御 XSRF
使用文档:
http://www.axios-js.com/zh-cn/docs/ 【axios中文网】广告有点多…
https://www.kancloud.cn/yunye/axios/234845 【看云的axios文档】无广告
https://github.com/axios/axios 【github项目】你懂的,没经过特殊渠道,打开巨慢…
1. 导入
一起从import开始…
import axios from 'axios'
2.添加实例 property
在Vue.property中添加实例,最好以" $ "开头,任意起名,当然名字最好与实例相关。
我这里起名 $http,也可以起 $axios 之类的名字。
设置之后可以在每个单页面可以通过 this.$http调用
Vue.prototype.$http = axios;
3. 配置一下axios
可以参考文档对axios进行一些配置
Vue.prototype.$http.defaults.withCredentials = true; //设置允许跨域发送cookie
Vue.prototype.$http.defaults.baseURL = "xxxxx"; //设置域名,这些每次写请求就不用写前面的域名
require("promise.prototype.finally").shim(); //解决在低版本浏览器不支持Promise的finally