第一篇：原生JS到Vue前端工程化开发

html完成了网页的结构和内容，再通过css美化，但这时候的网页是死的，没有交互性，我们还需要利用JavaScript与HTML和CSS集成，并通过操作DOM来改变网页的结构和样式。此外，JavaScript还可以处理各种操作，如表单验证、数据处理、动画效果、图像操作以及与服务器的通信（通过AJAX等技术）。

1.2 JavaScript的引入和基本用法

JavaScript的代码有两种引入方式：

第一种方式：内部脚本，将JS代码定义在HTML页面中

JavaScript代码必须位于<script></script>标签内

在HTML文档中，可以在任意地方，放置任意数量的<script> ，一般会把脚本置于<body>元素的底部，可改善显示速度。如：

<script>
    alert("Hello JavaScript！"); 
</script>

第二种方式：外部脚本，将JS代码定义在外部JS文件中，然后引入到 HTML页面中

外部JS文件中，只包含JS代码，不包含<script>标签，引入外部js的<script>标签，必须是双标签。且注意，JavaScript.js文件中不用加<script>标签

外部引入：
<script src="../js/JavaScript.js"></script>

注释：

单行注释：// 注释内容

多行注释：/* 注释内容 */

JavaScript的三种输出方式：

API	描述
window.alert()	警告框
document.write()	在HTML输出内容
console.log()	写入浏览器控制台

如弹出警告框：

1.4 JavaScript对象

Array：JavaScript中的Array对象用于定义数组，相当于Java中的集合，数组长度可变，而JavaScript是弱类型，所以可以存储任意类型的数据。

定义创建方式：

var arr = new Array(1, 2, 3, 4);
var arr = [1, 2, 3, 4];

访问：arr[0] = "Hello";

属性：arr.length，可以设置或者返回数组中元素的个数

方法：

arr.forEach( (e) => {console.log(e)} )，遍历数组中每个有值的元素，调用一次传入的函数。
arr.push(5, 6, 7)，添加元素到数组末尾。
arr.splice(2, 2)，删除从2开始的两个元素

String：String字符串对象创建的两种方式

var str = new String("Hello JS!")
var str = "Hello JS!"

属性：str.length，返回字符串长度

方法：

str.charAt(3)，返回指定位置的字符
str.indeof("llo")，检索该字符起始位置
str.trim()，去除字符串两边空格
str.substring()，截取从a开始到b的字符串，不包括b

JavaScript自定义对象

var user = {

name:"Bree",

age:21,

gender:"male",

run: function(){ alert("跑步") }

}

调用：user.name，user.run()

JSON对象：Javascript Object Notation，JavaScript对象标记语言，通过JavaScript对象标记法书写的文本。语法简单，结构简明，多用于作为数据载体，在网络中进行数据传输。

定义：var jsonStr = '{ "key01": "Bree", "key02": 21, "arr01": ["男", "女"] }'

JSON字符串转化为JS对象：var jsObj = JSON.parse(jsonStr);

JS对象转化为JSON字符串：var jsonStr = JSON.stringify(jsObj);

BOM对象：Browser Object Model，浏览器对象模型，JavaScript将浏览器的各个组成部分封装成对象，允许JavaScript与浏览器对话。

组成：

Window：浏览器窗口对象

Location：地址栏对象（重点前两，从这以下都是window对象的属性）

Navigator：浏览器对象

Screen：屏幕对象

History：历史记录对象

其中Window对象方法和属性：

window.alert("消息")，或直接alert("消息")，显带有消息和确认按钮的警告框 window.comfirm("消息")，显示带有一段消息与确认和取消的对话框，点击确认返回true，取消返回false
window.setInterval( 某函数(), 2000 )，参数为某函数和时间（毫秒），周期性调用函数
window.setTimeout( 某函数(), 2000 )，参数为某函数和时间（毫秒），在指定时间后调用函数
window.location.href：设置或返回完整的url

window的属性和方法的调用都可以省略window对象

DOM对象：Document Object Model，文档对象模型(如xml)，将标记语言的各个标签元素封装为对应的对象。HTML中的element对象可以通过document对象获取，而document对象是通过window对象获取的，window对象可以省略。

文档中的对象：

document：整个文档对象
element：标签元素对象
attribute：属性对象
text：标签元素当中的文本对象
comment：注释对象

获取document对象中的element对象的方法：

根据id获取：var ele01 = document.getElementById('id01');
根据标签名获取：var divs = document.getElementsByTagName('div');
根据name属性值获取：var brees = document.getElementsBy('bree');
根据class属性值获取：var classes = document.getElementsByClassName('cls');

修改对象属性：

var div01 = divs[0] //获取到第一个元素对象

div01.innerHTML = "明天是比赛日！" //设置文本内容

var img = document.getElementById('img01');

img.src = "../images/bree.jpg"; //设置图像url

1.5 JavaScript事件监听

事件：HTML事件是发生在HTML元素上的"事情"。如：

按钮被点击

鼠标移动到元素模块上

按下键盘按键

事件监听：监听到这些事件时会执行相应的JS代码。

事件绑定：

1、通过HTML标签中的事件属性：

<input type="button" onclick="click()" value="按钮01">
<script>
 function click(){
     alert("点击事件发生，执行此方法");
 }
</script>

2、通过DOM元素对象绑定：

<input type="button" id="btn01" value="按钮02">
<script>
document.getElementById("btn01").onclick=function(){
     alert("点击事件发生，执行此方法");
 }
</script>

常见事件绑定：

onclick：鼠标单击事件，鼠标点击元素模块

onblur：元素失去焦点事件，鼠标离开元素模块点击

onfocus：元素获取焦点，鼠标移动到元素模块点击

onload：页面或图像完全加载

onsubmit：表单提交时触发事件

onkeydown：按下某个键

onmouseover：鼠标被移到某元素模块上

onmouseout：鼠标从某元素模块移开

2 通过链接使用vue.js

前后端不分离的项目中，客户端向服务器发送请求获取页面，服务端接收到请求后生成数据并挂载到HTML页面中一并返回。

前后端分离项目中降低了这种数据与页面的耦合，后端只需要关注数据处理，前端只需要关注数据的渲染和挂载。客户端向服务器发送请求获取页面，服务器中的前端此时可以响应页面了，但缺少数据，所有又向服务端发送请求，然后服务端响应数据给前端，然后通过前端美化后响应给用户。

Vue是一套基于MVVM模型的渐进式前端js框架，免除原生JavaScript中的DOM操作，简化书写。基于MVVM（Model-View-View-Mode）思想，其实就是得益于前后端分离项目中需要前后端数据的一致性。所以Vue的MVVM模型脱胎于MVC前后端不分离的设计模式，在MVC中控制器这块比较拥堵繁琐，而MVVM提供了数据绑定和一个可组合的组件系统，实现数据的双向绑定，将编程的关注点放在数据上。简单地说，这种js框架可以单独开发出动态的的页面应用，然后通过MVVM实现页面与服务端进行双向的数据连接和绑定。

MVVM实现双向数据绑定的核心是VM，也就是ViewModel，ViewModel负责连接View和Model，保证视图和数据模型的一致性。ViewModel负责向服务端发送请求获取后端的数据，然后绑定到vue对象的组件页面上，最终被挂载渲染到HTML网页上。

2.1 基本用法

2.1.1 常用指令

v-bind：为html标签绑定在数据模型中声明的属性值如href、css样式等，v-bind:href="url" 或者 :href=""
v-model：在元素上创建双向数据绑定
v-on：标签上绑定事件，单击事件：v-on:click("handle")或者用@click("handle")，还有@blur：离焦事件，@focus：聚焦事件
v-if、v-else-if、v-else：条件性渲染某元素标签，判定为true时渲染，否则不创建该标签元素
v-show：根据条件展示某标签元素，区别在于切换css样式的display属性的值
v-for：列表渲染，用于遍历容器或数组中的元素和对象的属性

引入Vue.js，创建vue实例对象，然后在html页面中声明一个将被Vue所控制的Dom区域，即MVVM中的View。

<head>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="message">{{message}} <!-- 数据双向绑定，在网页输入则绑定到data中 -->
        <hr><a v-bind:href="link">百度</a><hr>
        <p v-if="flag">flag: 开</p>   <!-- 条件flag=false,标签不被创建，不显示 -->
        <p v-show="!flag">!flag: 关</p> <!-- flag=false,标签被创建，通过css隐藏不显示，性能好 -->
        <button @click="offon">开关</button>
    </div>
</body>

<script>
    Vue.createApp({ // Vue2: new Vue
        data: function(){ //在data中指定页面数据源，即Model，如可以返回一个json对象
            return {
                    message: 'Hello Vue!',
                    link:"http://www.baidu.com/",
                    flag: true,
                   }
        },
        methods: {
            offon(){
                this.flag = !this.flag; //为vue对象中data的相应属性赋值
            }
        }
    }).mount('#app') //将数据传给实例对象，绑定到当前vue对象控制的页面区域
</script>

2.1.2 列表渲染

<div id="app">
    <ul>
        <!-- 可以重复生成标签 -->
        <li v-for="(user, i) in userList" :key="user.id" > 索引是：{{i}}，姓名是：{{user.name}}</li> 
        <!-- 为li标签加key属性，为每一个被循环的标签加一个唯一的索引，后面组件化开发时不加会报错 -->
    </ul>
</div>

Vue.createApp({
    data: function(){
        return { 
                userList: [
                    {id: 1, name: "bree1"},
                    {id: 2, name: "bree2"},
                    {id: 3, name: "bree3"},
                ]
               }//指定数据源，即Model，如可以返回一个json对象
    }
}).mount('#app')//将数据传给实例对象，绑定当前vue实例对象控制页面的区域

2.1.3 事件绑定

<div id="app">
    {{ message }}
    <a v-bind:href="link">bree</a>
    <botton v-on:click="addCount">+1</botton>{{count}}    <!--或者 <botton @click="addCount">+1</botton> -->
</div>

Vue.createApp({
    data: function(){
        return { 
                message: 'Hello Vue!',
                link: "http://www.bree.com/",
                count: 0,
               }//指定数据源，即Model，如可以返回一个json对象
    },
    methods: {
        addCount(){
            this.count += 1 // 对vue对象中data的相应属性进行加和
        },
    },
}).mount('#app')//将数据传给实例对象，绑定当前vue实例对象控制页面的区域

2.2 生命周期

生命周期是指一个vue对象从创建到销毁的整个过程。分为八个阶段，每触发一次生命周期事件，就会自动执行一个生命周期方法（钩子)。

我们主要掌握两个阶段，一个叫做created函数，当组件组件被创建该函数会被调用；另一个叫做mounted函数，当app挂载完成，页面完全渲染后调用。这两个函数与data和methods平级：

<div id="app">
    {{ message }}
    <a v-bind:href="link">bree</a>
    <botton v-on:click="addCount">+1</botton>    <!--或者 <botton @click="addCount">+1</botton> -->
</div>

Vue.createApp({
    data: function(){
        return { 
                message: 'Hello Vue!',
                link: "http://www.bree.com/",
                count: 0,
               }//指定数据源，即Model，如可以返回一个json对象
    },
    methods: {
        addCount(){
            this.count += 1
        },
    },
    created: funcation(){//每个组件都有自己的生命周期函数，组件每次被创建时都会调用一次。
        console.log("组件被创建了！")//作用就是可以在里面发送axios请求
    },
    mounted (){//表明vue初始化成功，html页面渲染成功，在该方法当中发送请求到服务端，获取数据。
        alert("vue对象挂载完成，发送请求到服务器！")
    }，
}).mount('#app')//将数据传给实例对象，绑定当前vue实例对象控制页面的区域

3 前后端分离开发

混合开发：

首先，在前后端混合开发模式当中，开发人员要开发一个项目，既需要使用前端的技术栈来开发前端的功能，有需要使用Java技术栈来编写功能实现，还需要操作数据库，这样的开发模式将前端代码和后端代码全都写在一个工程当中了，前后端代码耦合度高，那么开发过程中对前端开发人员与后端开发人员的对接上要求很高，沟通成本高，分工不明确，项目不便于管理和维护扩展。

分离开发：

当前最为主流的开发模式是前后端分离开发：前端工程和后端工程。前端工程要通过发送异步请求消息，后端工程进行处理后再返回响应消息，实现前后端的数据交互。

这样前端工程与后端工程就由独立的团队进行开发，所以在开发过程中要实现对接功能必须遵守开发规范，开发规范根据产品经理提供的页面原型与功能需求，定义在专门的文档当中，称为接口文档。接口文档中定义了各个接口功能，描述功能的基本信息，请求参数，响应数据。

有了接口文档后前后端开发工程师就可以根据接口文档的描述进行开发：需求分析->接口定义(API接口文档)->前后端并行开发(遵守规范)->前后端测试->前后端联调测试

接口文档有在线接口文档与离线接口文档。离线接口文档一般如md文件等，常用的在线接口文档的管理平台有YAPI、Swagger和Rap等等。

3.1 YAPI

YApi是高效、易用、功能强大的api管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务。

主要两大服务：API接口管理、Mock数据模拟服务

地址： https://yapi.pro/

打开网站注册登录：

添加项目：项目对应的接口文档。

添加分离：将项目接口划分为几个模块。

添加接口：编辑具体的基本设置、请求参数设置、返回数据测试，以及设置Mock。

4 前端工程化VueCli

编码工具：VS Code

依赖管理：NPM

项目构建：VueCli

NPM（Node Package Manager)：是一个NodeJS包管理和分发工具，最常见就是用于安装和更新依赖。要使用NPM，首先要安装包含NPM工具的NodeJS（前端工程化的运行环境），是一个基于Chrome V8引擎的JavaScript运行时环境。NodeJS是VueCli工具的依赖环境。

VueCli：是Vue官方提供的构建项目的模板工具，通常成为脚手架，用于快速搭建一个带有热重载（自动呈现修改后的效果)，以及构建生产版本等功能的单页面应用。

VueCli基于webpack构建，也可以通过项目内的配置文件进行配置

下载安装脚手架：npm install -g @vue/cli

VueCli提供了如下功能：

统一的目录结构

本地调试

热部署

单元测试

集成打包上线

4.1 安装步骤

首先在官网上下载好NodeJS并安装在指定磁盘文件中，然后在打开命令行窗口，输入node -v验证NodeJS的是否安装成功。第二再进行npm的全局安装路径，输入cmd以管理员身份打开命令行窗口，输入npm config set prefix "NodeJS的安装路径"，然后回车配置好npm全局安装路径。最后切换npm的淘宝镜像，以便后期加速资源的下载，以管理员的身份运行命令行窗口，执行npm config set register https://registry.npm.taobao.org，切换资源下载镜像。

NodeJS安装完后就可以安装VueCli脚手架了，以管理员的身份运行命令行窗口，执行npm install -g @vue/cli，zid联网下载，等待一段时间后vue的脚手架安装成功。之后在命令行中执行vue --version验证是否安装成功。

安装完后就可以在文件目录下通过命令行快速生成一个Vue的项目模板了

vue create hello：创建一个叫"hello"的前端项目

eslint是检查语法风格的，现在用不着

如图向下选择该选项按空格取消选择，也就是前面说的eslint

选择最新版本vue3，继续回车

选择相关配置和依赖记录的方式，这里选json文件就行，类似于maven项目中的xml文件。如给项目安装Element-ui时可以加[-S]将依赖信息记录到package.json中，下载的很多依赖包都是放在node_modules文件夹，文件内容很多，不方便导出。所以当导出项目时可以把node_modules文件删除，当要项目运行时，在该项目下打开终端，输入npm install，安装程序会自动扫描当前项目下的package.json文件，通过package.json中的依赖信息下载相关的依赖包。

是否为项目保存快照，方便以后基于快照快速创建项目，最后等待连网下载项目即可。

如图整个项目以及下载完成，通过脚手架创建的项目工程目录结构如下：

源码目录下：(链接和组件对应关系的设置可以单独创建router文件夹存放路由的js文件)

4.2 组件化开发

4.2.1 开发流程

组件（Component)是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。Vue的组件系统允许我们使用小型、独立和通常可复用的组件构建大型应用。

Vue中规定组件的后缀名是 .vue，其中App.vue是vue提供的根组件

每个 .vue 组件都由3部分构成，分别是： template：组件的模板结构，包含HTML标签及其他的组件，这是在页面中显示的结构 script：组件的JavaScript代码，控制组件模板数据来源和行为 style：组件的样式

项目开发流程：首先在components目录下创建一个组件如Movie.vue

编写组件的视图、数据模型和样式，其中template中只能有一个根标签，一般用div包含

<template>
    <div>
        <h1>书名：{{ title }}</h1>
        <span>作者：{{ author }}</span>
        <br>
        <button @click="fun">点击加入书架</button>
    </div>
</template>

<script>
    export default{ //这里可以导出组件的数据，便于外面的组件可以导入
        props:["title", "author"], //这里可以自定义组件的属性名称，外部使用组件实现不同展示时可以设置新的属性值
        data: function(){

        },
        methods: {
            fun(){
                alert("添加成功！")
            }
        },
    }
</script>

<style></style>

因为App.vue已经在入口文件main.js中进行导入然后创建Vue对象并挂载渲染到相应的标签上，所以直接在App.vue中的script标签下导入和注册Hello.vue组件，后面学习可以通过VueRouter路由来定义组件页面的切换和管理：

import Hello from './components/Book.vue'

export defaut{
    name: App,
        components: {
            Book
        }
}

导入Book组件后，可以在App.vue的视图上定义，使用组件的属性进行外部传值，然后与App.vue一起渲染到页面上：

<Book v-for="book in books" :key="book.id" :title="book.title" :author="book.author"></Book>

4.3 Element-UI

Element是国内饿了么公司提供的一套开源前端框架，简洁优雅，提供了Vue、React、Angular等多个版本。

安装：npm i element-ui [-S]

文档地址：Element - The world's most popular Vue UI framework

在main.js中引入Element：

导入element-ui：
import ElementUI from 'element-ui';
导入element-ui内部组件用到的样式文件：
import 'element-ui/lib/theme-chalk/index.css';
最后在main.js中进行全局注册，这样element-ui中的所有组件都注册了，可以在任意组件下使用：
Vue.use(ElementUI);

然后就可以通过官方文档进行组件开发了。打开官方文档，在组件下有很多组件实例可以使用，如：

我们可以在组件实例下复制代码进行使用，在template中使用element-ui的组件，element-ui提供的组件都是以"el-"开头的，组件中定义有很多属性，外部组件可以根据不同的数据展示进行赋值。如图：

显示：

4.4 图标库

除了组件外，有时候网站还需要一些图标，ElementUI提供的图标较少，一般用到其他的图标库。这样对于网站来说就不需要引入图片作图片，直接通过图标库的标签就可以显示出来了。

第三方图标库如 Font Awesome：

文档地址：http://fontawesome.dashgame.com/ 安装：npm install font-awesome 使用：import 'font-awesome/css/font-awesome.min.css'

需要在哪用就放在哪，如：
<i class="fa fa-camera-retro"></i>

5 前端异步通信技术

在实际项目开发中，前端页面所需要的数据往往需要从服务器端获取，这必然涉及与服务器的通信。

首先先来了解Ajax请求：

概念：Asynchronous JavaScript And XML，异步的JavaScript和XML。Ajax是一种前端技术，用于实现异步通信和动态更新网页内容。

作用：通过异步交互进行数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。简单地说，可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索关键词联想、用户名是否可用等校验。

Ajax原理：通过XmlHttpRequest对象来向服务器发送异步请求，从服务器获得数据，然后用JavaScript来操作DOM 而更新页面。要清楚异步请求这个过程和原理，就需要了解XmlHttpRequest。

XmlHttpRequest：客户端把请求交给代理对象—XMLHttpRequest，由代理对象向服务器发起请求，然后接收、解析服务端响应的数据。

创建XMLHttpRequest对象。

发送请求，包括设置请求方法和URL，并使用send方法发送请求。

与服务器通信，服务器根据请求处理并返回响应数据。

处理响应，通过监听onreadystatechange事件和使用readyState属性来获取请求状态。

解析响应数据，通过responseText或responseXML属性获取服务器返回的数据。

更新页面内容，使用JavaScript操作DOM，将数据插入到特定位置，实现局部页面的更新。

在传统的同步请求中，当浏览器发送请求给服务器时，它必须等待服务器处理完请求并返回响应才能进行下一步操作。这意味着用户在请求期间可能会遇到页面冻结或无响应的情况。

而使用Ajax异步请求，浏览器发送请求后，不会等待服务器返回响应，它可以继续处理其他任务，比如用户可以继续浏览页面、与页面进行交互或执行其他JavaScript操作。一旦服务器返回响应，浏览器会触发相应事件或回调函数来处理响应数据并更新页面的特定部分。

5.1 原生Ajax

准备数据

创建XMLHttpRequest对象，用于和服务器进行数据交互

向服务器发送请求

获取服务器响应数据

点击事件触发执行ajaxRequest()方法，首先构造一个XMLHttpRequest对象，向指定服务端发送一个请求，然后对该请求的状态变化进行监测。readyState保存了XMLHttpRequest对象的状态，为4表示请求已完成且响应已就绪。status是返回请求的状态号，为200表示请求成功。responseText属性表示返回的字符串响应数据。

    <script>
        function ajaxRequest () {
            //1. 初始化代理对象
            var xhr = new XMLHttpRequest();
            
            //2. 发送异步请求
            xhr.open("GET", "https://127.0.0.1/statics/demosource/ajax_info.txt", true);
            xhr.send();
            
            //3. 监测并获取服务端响应数据
            xhr.onreadystatechange = function(){
                if (xhr.readyState === 4 && xhr.status === 200) {
                    document.getElementById("view").innerHTML = xhr.responseText;
                }                
            }
        }
    </script>

5.2 Axios

原始的技术就是通过发送Ajax请求获取服务端的数据，但原生的Ajax比较繁琐，用起来不太方便，开发中一般都用基于Ajax的请求框架，比如Axios。

Axios是一个基于 promise 的网络请求库，可以用于node.js和浏览器。Axios在浏览器使用XMLHttpRequests发送网络请求，并能自动完成JSON数据的转换。安装后就可以在入口文件main.js中导入了，或者在哪个组件使用就在哪个组件导入。

地址：https://www.axios-http.cn/

安装：npm install axios

导入：import axios from 'axios'

安装完成以后axios的依赖包就添加到了node_modules文件下，并在json文件中有记录。

vueJS组件开发的中vue对象和组件都有自己的生命周期，并提供有相应的周期函数，而我们发送异步请求的阶段就是前面提到的组件的created阶段：

created: funcation(){//每个组件都有自己的生命周期函数，组件每次被创建时都会调用一次。
        console.log("组件被创建了！")//在app被挂载之前可以在这里发送axios请求
    },

导入axios，在Book组件中发送axios的get请求，从响应消息对象中可以获取服务端返回的数据属性data，赋值给vue对象中data的相应属性，最后渲染到页面的特定部分。

<template>
    <el-table
      :data="tableData"
      style="width: 100%"
      :row-class-name="tableRowClassName">
      <el-table-column
        prop="title"
        label="书名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="author"
        label="作者"
        width="180">
      </el-table-column>
      <el-table-column
        prop="publisher"
        label="出版社">
      </el-table-column>
    </el-table>
  </template>

  <script>
    import axios from 'axios'
    
    export default {
      created: function(){
        axios.get("http://localhost:8088/user/findAll").then( (response) => {
          console.log(response.data);
          this.tableData = response.data;
        } )
      },
      data(){
          return{
              tableData: []
          }
      },
      methods: {
        tableRowClassName({row, rowIndex}) {
          if (rowIndex === 1) {
            return 'warning-row';
          } else if (rowIndex === 3) {
            return 'success-row';
          }
          return '';
        }
      },
    }
  </script>
    
  <style>
    .el-table .warning-row {
      background: oldlace;
    }
  
    .el-table .success-row {
      background: #f0f9eb;
    }
  </style>

在实际的项目开发中，几乎每个组件中都会用到axios发送数据请求。此时会遇到以下问题：

每个组件中都需要导入axios

每次发送请求都需要填写完整的请求路径

所以可以通过全局配置的方式解决上述问题。在入口文件main.js中进行配置：

这样就可以在任意组件中使用：

created: function(){
        this.$http.get("/user/findAll").then( (response) => {
          console.log(response.data);
          this.tableData = response.data;
        })
      },

在成功回调函数中可以接收一个js对象，通过属性data可以获取服务器响应的数据。

axios.get('/user', {params: {ID: 1234, Name: Bree}})
.then( (response) => console.log(response.data) )
.catch( (error) => console.log(error.data) )
.then( () => 总是会执行 );

6 跨域问题

以上axios发送请求实际上还不能成功获得数据，因为前后端项目的端口不一样，前端发送请求会被浏览器阻止并报错，这就是出现了跨域问题（跨源，不同源)。

在前后端分离项目中：跨域问题：为了保证浏览器的安全，不同源（同一个域或者局域网中）的客户端脚本在没有明确授予的情况下，不能读写对方的资源，该约定称为同源策略，同源策略时浏览器安全的基石或者核心。所以说要得到服务端的授权才能发送请求。

所以当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同，就称为跨域。此时无法读取非同源网页的Cookie，无法向非同源地址发送AJAX请求。

CORS（Cross-Origin Resource Sharing)：即跨域资源共享，是由W3C制定的一种跨域资源共享技术标准，其目的就是为了解决前端的跨域请求问题。通过后端服务器实现CORS接口，从而实现跨域通信。

6.1 解决方法

解决方法就是CORS策略，CORS策略将前端请求分为简单请求和非简单请求，分别对跨域通信提供支持。

简单请求：

对于简单请求，CORS的策略是请求时在请求头（消息头）中增加一个Origin字段Origin: http://localhost:7777，即告诉服务端该请求来自于哪个主机哪个的端口。服务端收到请求后根据该字段判断是否允许该请求访问，如果允许就在响应消息中的响应头（消息头）中加一个Access-Control-Allow-Origin: http://localhost:7777的字段。

非简单请求：

对于非简单请求的跨域请求，浏览器会在真实请求发出前增加一次OPTION请求，称为预检验请求（preflight request）。预检验请求中将真实请求的信息，包括请求方法、自定义头字段、源信息添加到HTTP请求消息的请求头（消息头）中，询问服务器是否允许这些操作。

服务端接收到请求时，需要对Origin、Access-Control-Request-Method、Access-Control-Request-Header进行判断验证，验证通过后会在返回HTTP响应头（消息体)中添加"Access-Control-Allow-XXX: "允许字段信息。

服务端具体的CORS配置：

发送请求之后需要，在传统的Java EE开发中，可以通过过滤器（Filter)统一配置CORS策略。

而在SpringBoot中：

第一种设置跨域策略的方式，只需要在对应的控制器中添加一个@CrossOrigin注解，注解中已对CORS进行默认配置，使得控制器中的所有方法都允许被跨域请求。
第二种方式是通过定义配置类实现WebMvcConfigure接口，在重写方法中设置跨域策略。需要对CORS策略进行精细化控制则使用第二种方式。

7 后面的学习

由于字数限制，接下文：第二篇：VueRouter和Vuex插件的使用以及项目的打包部署_Maxlec的博客-CSDN博客

Maxlec

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
1
评论
第一篇：原生JS到Vue前端工程化开发

当前最为主流的开发模式是前后端分离开发：前端工程和后端工程。前端工程要通过发送异步请求消息，后端工程进行处理后再返回响应消息，实现前后端的数据交互。这样前端工程与后端工程就由独立的团队进行开发，所以在开发过程中要实现对接功能必须遵守开发规范，开发规范根据产品经理提供的页面原型与功能需求，定义在专门的文档当中，称为接口文档。接口文档中定义了各个接口功能，描述功能的基本信息，请求参数，响应数据。
复制链接

扫一扫