【VUE学习笔记】（一）

前后端分离

为什么引入前后端分离开发方式：

前端独立编写客户端代码完成页面，后端独立编写服务端代码提供数据接口；前后端开发者只需要提前约定好接口文档（URL、参数、数据类型……）然后分别独立开发即可。前端可以用假数据测试，不完全依赖于后端；后端通过Postman等接口调试工具测试即可，真正实现前后端解耦合，极大提升开发效率。

前后端将一个单体应用拆分成两个独立的应用，如何进行前后端的交互十分重要。

JSON和RESTful

JSON

JSON（ JavaScript Object Notation），即 JavaScript对象标记法。
简单来说，JSON就是一种用来文本数据交换的格式。
JSON的语法很简单：
·数组（Array）用方括号(“[]”)表示。
·对象（0bject）用大括号(“{}”)表示。
·名称/值对(name/value）组合成数组和对象。
·名称(name）置于双引号中，值（value）有字符串、数值、布尔值、null、对象和数组。
·并列的数据之间用逗号(“,”）分隔。
举个例子：

{
	"name": "xiaoming",
	"sex": "man"
}

前端和后端统一使用JSON语法来进行存储和信息交换，方便前后端之间的交互。

RESTful

REST（Representational State Transfer）表象化状态转变（表述性状态转变），在2000年被提出，基于HTTP、URI、XML、JSON等标准和协议，支持轻量级、跨平台、跨语言的架构设计。是Web服务的一种新的架构风格（一种思想）。
RESTful是一种常见的REST应用，是遵循REST风格的web服务，REST式的web服务是一种ROA（面向资源的架构）。
简单的说：RESTful是一种架构的规范与约束、原则，符合这种规范的架构就是RESTful架构。
在RESTful中，一切都被认为是资源，每个资源有对应的URL标识。处理资源使用GET、POST、PUT、DELETE等http方法操作实现创建、读取、修改、删除等操作。客户端通过四个HTTP动词，对服务器端资源进行操作，实现“表现状态转化”。
常用的HTTP动词有下面四个：
POST（CTEATE）：在服务器新建一个资源。
DELETE（DELETE）：从服务器删除资源。
PUT（UPDATE）：在服务器更新资源（客户端提供改变后的完整资源）。
GET（SELECT）：从服务器取出资源（一项或多项）。

·传统风格资源描述方式

    http://localhost/user/getById?id=1

·Rest风格资源描述方式

    http://localhost/user

Rest风格的优点：
①隐藏资源的访问行为，无法通过地址得知对资源是何种操作
②书写简单

了解了JSON和RESTful，明白了前后端进行信息交互的格式和规范。前后端开发人员便可以根据需求撰写对应的接口文档，然后便可以进行独立的编程开发，实现前后端的分离。

前端开发

本文的前端开发基于IDEA，主要使用vue2+element+echarts。在编程开发的过程中，需要模拟后端接口进行测试，主要使用postman。

VUE

vue的特点：

遵循 MVVM 模式
编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发
它本身只关注 UI, 也可以引入其它第三方库开发项目

MVVM模式（Model-View-ViewModel）：
M：模型Model --->也就是data中的数据
V：视图View --->也就是模板代码
VM：视图模型ViewModel --->也就是Vue实例（vm）

VUE项目实例

结合具体的项目实例，可以更好的理解一个VUE项目的各个部分，本文以github上的开源项目为例。
项目地址：链接

主要文件

package.json

package.json是一个项目描述文件, 里面记录了当前项目的信息。比如: 项目名称、版本、作者、gitHub地址、当前项目依赖哪些第三方模块等。使用npm安装第三方模块，是模块的相关信息会自动添加到package.json文件中。当运行 npm install命令时，会根据文件中的配置自动下载所需的模块配置项目所需的运行和开发环境。

main.js、App.vue和index.html

main.js是入口文件，主要作用是初始化vue实例，并引入所需插件。
App.vue是主组件，所有页面都是在App.vue下进行切换，可以理解为所有的路由都是App.vue的子组件。
index.html是页面的入口文件，里面包含一个id为app挂载点，main.js中定义的Vue根实例就会挂载到该挂载点上。
打开网页的时候，页面Title是index.html中定义的Title，而正文部分是App.vue中定义的内容。但在打开的瞬间是会显示index.html里面的内容（如果定义了的话）。

主要文件夹和文件的用处

1.build 文件夹：用于存放 webpack 相关配置和脚本。开发中仅偶尔使用到此文件夹下 webpack.base.conf.js 用于配置 less、sass等css预编译库，或者配置一下 UI 库。
2.config 文件夹：主要存放配置文件，用于区分开发环境、线上环境的不同。常用到此文件夹下 config.js 配置开发环境的端口号、是否开启热加载或者设置生产环境的静态资源相对路径、是否开启gzip压缩、npm run build 命令打包生成静态资源的名称和路径等。
3.dist 文件夹：默认 npm run build 命令打包生成的静态资源文件，用于生产部署。
4.node_modules：存放npm命令下载的开发环境和生产环境的依赖包。
5.src: 存放项目源码及需要引用的资源文件。
5.1.src下assets：存放项目中需要用到的资源文件，css、js、images等。
5.2.src下componets：存放vue开发中一些公共组件：header.vue、footer.vue等。
5.3.src下emit：自己配置的vue集中式事件管理机制。
5.4.src下router：vue-router vue路由的配置文件。
5.5.src下service：自己配置的vue请求后台接口方法。
5.3.src下page：存在vue页面组件的文件夹。
5.7.src下util：存放vue开发过程中一些公共的.js方法。
5.8.src下vuex：存放 vuex 为vue专门开发的状态管理器。
5.9.src下app.vue：使用标签渲染整个工程的.vue组件。
5.10.src下main.js：vue-cli工程的入口文件。
6.index.html：设置项目的一些meta头信息和挂载 vue 节点。
7.package.json：用于 node_modules资源部和启动、打包项目的 npm 命令管理。

element

Element-UI是为Vue.js服务的UI组件库。UI组件库，即一堆组件的集合。对Html/css/js资源的封装的集合，呈现出的界面样式。
通过使用vue+element，可以很方便的绘制我们的页面。
官网

在vue中使用element

一、引入element-ui
安装node包

cnpm i element-ui --save

二、main.js中注册

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

到这一步element-ui应该配置的文件我们都引入成功了，接下来便可以使用了。打开官网地址，根据想要的效果，将代码加入我们的文件中便可。
另外，使用Element框架的时候,Element Plus 组件默认使用英语，如果希望使用其他语言，可以参考下面的方案：

在main.js文件里面引入包

import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'

添加

.use(ElementPlus,{ locale: zhCn, })

echarts

什么是echarts？
echarts，缩写来自 EnterpriseCharts，商业级数据图表，是百度的一个开源的数据可视化工具，一个纯 Javascript 的图表库，能够在 PC 端和移动设备上流畅运行，兼容当前绝大部分浏览器。它提供了丰富的可视化类型，包括折线图，柱状图，饼状图，k线图，散点图等上百种图形。
通过使用vue+echarts，可以很方便的绘制各种各样的图表。
官网

在vue中使用echarts

该方法和上面的vue中使用element类似
一、引入echarts
安装node包

npm install echarts --save