校园调研星-课设项目记录

校园调研星是本学期做的一个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