vue项目搭建(spa-restful-代理) 总结

最新推荐文章于 2024-06-24 18:35:41 发布

蓝衫黑裤白鞋

最新推荐文章于 2024-06-24 18:35:41 发布

阅读量378

点赞数

分类专栏： Vue2 大前端 javaScript 文章标签： vue spa webpack 代理跨域

本文链接：https://blog.csdn.net/u013368397/article/details/83787600

版权

javaScript 同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

大前端

3 篇文章 0 订阅

订阅专栏

前言

罪过罪过，上次说看完教程写个心得的，结果一多月过去了，说好的写总结的呢？首先这里想向自己道歉，没按时记录博客是有原因的，鄙人也没有偷懒，望大家见谅。带着求情味道的煽情话不多说了，说多了会觉得虚假。上一篇推荐了大神的实战项目教程，这里就从一个新手小白的角度给自己健忘的脑袋加深一下印象，也给潜意识里好吃懒做的自己打打气。

这几年前端发展的很快，不像前几年掌握了js，会画h5页面就能混口饭吃。现在的前端，不仅要会这些基本功，而且还要回更多更多。比如前后端调试接口定义数据结构,别以为调试接口事件容易的情，有人说数据结构的定义交给后台开发就行了，我们负责拼接一下，想法很天真，但是我又不能反驳你，因为从某些角度来看你说的没错。现在数据模型驱动页面展示的格局已是大势所趋，这不得不让我们在构建页面之前就想好页面的数据结构，如果页面的数据需要从后台获取，你看，这不就需要我们在画页面之前就想好整个页面的架子了嘛？难道你以为这就结束了？你不光要弄懂这些，在接口联调的过程中，你还要学会分析浏览器的报错信息，请求如何传参，如何接受返回值，这不得不让你去了解一下http协议，以及get、post等等，postman了解一下。有人说:“天呐，我只是请求一个接口，拿个数据而已”。年轻人，这才遇到了一个接口联调而已。you have no idea，幸好我们还年轻。

我从我的角度，着重记录的重要的观念，值钱的技术，记录分享。

SPA

说句实话单页面应用我老早就听过了，我以为我懂了，结果遇到了这个解释才发现其实我以前一点也不懂，这里我也不怕出丑，我也就迷迷糊糊了半年，直到我遇到了@FungLeo的解释。他说所有前端成员都应该懂得这个url的构成：

http://www.fengcms.com/index.html?name=fungleo&old=32#mylove/is/world/peace

首先大多数人都知道这是个get请求，我一开始也以为考察对请求方式的认知。后来看了一下大神解释，对自己真是大失所望。

如上的 url 由以下部分组成：

1.http:// 规定了页面采用的协议。
2.www.fengcms.com 为页面所属的域名。
3.index.html 为读取的文件名称。
4.?name=fungleo&old=32 给页面通过 GET 方式传送的参数
5.#mylove/is/world/peace 为页面的锚点区域

前4项中任意一项改变都会导致页面跳转或者是刷新，但是唯有第5点，在更改页面锚点的情况下是不会出现这种行为的，绝大多数的spa都是利用这个原理来实现路由之间的转换的。大家在后面可以注意到几张途中浏览器地址栏中总有‘#’出现，也就明白了这个道理。

RESTFUL

其实，这是属于一种风格，说得接地气一点呢就是一种代码规范。这种规范呢经常体现在前后端请求接口的封装上面。脚手架的axios就是基于restful规范对请求接口进行了统一的封装，这个封装的方法网上很多，就不用详细介绍了，大家知道这么用就行了。不是难点，但是却特别基础的东西，这里讲最后暴露的方法给大家看看。

/* 返回在vue模板中的调用接口 */
export default {
  get: function (url, params, success, failure) {
    return apiAxios('GET', url, params, success, failure)
  },
  post: function (url, params, success, failure) {
    return apiAxios('POST', url, params, success, failure)
  },
  put: function (url, params, success, failure) {
    return apiAxios('PUT', url, params, success, failure)
  },
  delete: function (url, params, success, failure) {
    return apiAxios('DELETE', url, params, success, failure)
  }

文章作者好像还强调了学会敲指令的重要性，这确实重要，但是就以我们现有的水平和接触面来看，npm install ，npm run start就够了，这里只是随便列出来两个。这里想说的是等有钱买mac再去学吧。

webpack代理

作者讲到代理时，没有一点底子的人是不太容易看得懂的。我就属于没有底子的那种。不懂是因为我们不了解他，刚开始我也试着直接去了解跨域去理解代理，甚至还把react的代理给看了一遍，但是毛用没有，为什么？是因为我不明白webpack代理的意图。也就是说这种行为能帮我们解决什么问题？为什么这样做？当弄清楚这个问题之后也许你就明白了。

我们确实在很多前后端分离项目中实践过，但是何为前后端分离呢？到这里我们似乎忘了前端分离的显著的特征。分离分离，前端脱离后端，后端脱离前端，分别在不同的机器上跑。我们经常在开发过程当中连不同的开发的机器调试接口，这就是分离。

接着如果我们的项目进入了sit，那么前端调试是不是可以连上sit环境上的机器呢？这样就形成了本地的前端代码，sit环境的后端代码。是不是很灵活，当我们的前端代码访问sit环境的接口时是有可能会遇到跨域的问题的。

在这里我们就需要先去了解一下跨域问题：浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域 ,记住跨域是由于浏览器自身的限制导致（ps：协议和端口的不同只能有后端修改）。当你知道如何解决跨域的问题的时候，我们就了解到了其中一种解决方案就是反向代理。实际上就是讲服务端的请求映射（伪装）成本地环境的请求来避免跨域问题。下图是cli的config配置。