山东大学项目实训-地图圈系统-web开发——月总结

该月总结主要是总结项目开题一个月以来，我在开发web页面上所踩过的坑与填坑过程。与大家共勉。

一、创建vue项目的过程：

关于创建vue项目，如果了解命令行，可以直接在idea里创建vue项目。这样做，如果需要额外的依赖，可以在下方terminal中直接以命令行的形式安装所需插件以及依赖。

但是由于以前没有进行过vue项目的开发，依赖的命令行安装方式不熟悉。在安装依赖时，每次都要进行搜索，这样大大降低了项目的开发效率。并且终端操作有时候比较迷惑，所以我建议直接在vue-ui这里进行vue项目的创建和依赖、插件的安装。

执行vue-ui命令后，会有一个GUI供用户使用。

GUI这个东西很好，相比命令行的操作方式，大大提升了用户体验度。虽然很多老一辈的程序员还是信奉命令行的方式来进行计算机的操作，他们认为这才是与计算机进行交流最好的方式，但是他们也不得不承认，GUI的问世，使得计算机普遍化和流行化的速度大大加快。

本人第一篇博客就是使用vue-ui的GUI来进行vue项目的创建、插件及依赖的安装以及项目的部署。idea仅仅只作为开发工具使用。

二、vue MVVM架构：

MVVM，model-modelview-view架构，实际上就是MVC的改进版。MVC作为一个基础的架构，在世面上流传已久。它本身是模型-视图-控制器架构。视图很好理解，就是用户界面。基本的操作流程是：视图向控制器发送请求，控制器响应相应视图或者对模型进行更新。模型更新后，视图层应该随之更新。但是随着业务越来越复杂，控制层也越来越臃肿。为了解决这个问题，MVVM便应运而生。

MVVM架构，图片如下（图片转载自https://www.jianshu.com/p/0ae3c0d830e5）：

简单来说，它实现了视图层和视图适配器之间的数据双向绑定。

vue中，v-bind方法具有MVVC的思想，但是在实现时，却仍然保留着MVC/MVP等架构的思想，以及自己独到的理解。可以说vue是集成了一些框架的思想，并且仍有其独特风格。

三、ajax与axios区别：

axios实现并封装了ajax，可以说，axios包含于ajax。在vue2.0中，它推荐我们使用axios进行前后端交互。ajax支持MVC架构，但是却不是非常的符合MVVM架构。
下面列举ajax与axios的区别：

ajax：
1、本身是针对MVC编程，不符合前端MVVM的浪潮
2、基于原生XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案，jquery整个项目太大，单纯使用ajax却要引入整个jquery非常不合理（采取个性化打包方案又不能享受cdn服务）
3、ajax不支持浏览器的back按钮
4、安全问题ajax暴露了与服务器交互的细节
5、对搜索引擎的支持比较弱
6、破坏程序的异常机制
7、不容易调试

axios：
1、从node.js创建http请求
2、支持Promise API
3、客户端防止CSRF（网站恶意利用）
4、提供了一些并发请求的接口

本博客中，使用axios进行前后端的交互，使用http请求。

四、vue ref：

示例代码：

<el-form class="login-container" label-position="left"
         label-width="0px" :model="loginForm" :rules="loginFormRules" ref="loginFormRef">
</el-form>

上述代码中的ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例。
在后面的js中，我们就可以使用this.$refs.loginFormRef来获取该表单元素。

那么为什么不在该表单中设置一个id，然后在js中使用document.getElementById()来获取该表单元素呢？由于本项目时使用element-ui框架进行封装，关于组件有很多集成的方法，这些方法只能通过ref来进行调用，而使用id无法调用。

五、请求设置请求头：

在main.js中，设置：

Vue.prototype.$http = axios

这样做，请求方法就会变成（get为例）：

this.$http.get(要请求的url)

那么怎么样设置请求头呢？

this.$http.get(要请求的url, {
	// 在此处设置请求头
	// 设置方式：请求参数:变量
})