Web前端框架通用技术 axios 6_axios在生产环境的应用 学习猿地原创

大家好，我是学习园地的特约讲师高老峰，上节课呢，咱们以CDN的方式引入X，然后呢，用他的一些默认的构造方法，咱们做了一下简单的应用，当然了，在生产环境中这么用的方式很少，那我们通常呢会把r ourselves结合到vuee或者是right里边去应用，当然了，我们在开发vuee和right的时候呢，通常都使用的是脚手架，那我们看一下生产环境我们怎么应用，我们通常使用NPM包安装，不使用这种CDN的方式，然后呢，我们按标准的方式去，呃，请求使用那个标准的rest for API这样方式使用HTTP的动词，比如说get的请求啊，Posts请求啊，比咱们上节课用起来要稍稍的简单一些，Get POS的，这样是我们在生产管理用的比较多的，那么这节课呢，就用NPM包安装这个，并结合外派打个包，咱们一起用这个啊。来我们看一下，这是我们目录下的这个程序，那个咱们上次上节课在外派里边应用的时候呢，咱们建了一个目录名叫X这个AXLS，这个名呢，我们在NPM安装的时候，你的项目名和我们用web用那个web storm创建的项目名如果相同的话，你这包是安装不上的，所以呢，我们我把这个改个名，比如说我把这块改成咱们叫做它的DEMO啊，演示啊，或者是叫做使用啊，比如说我叫DEMO啊演示，只要你换个名就行，对吧，然后我们打开这个。

Stop。查看。好，因为这里边儿是有创建这个项目的，呃，这那边其他的我们就不用管了，那在这里边我们开启呃控制台，我们创建一个项目吧。嗯。他新建一个项目，这好像咱们改名都没建。选择文件夹，选择我们。呃，吸盘下边这个下边。哦。64下3W，下边咱们找一下第一个就是。方面。

方便。就在这个窗口了，咱们也不创建别的窗口了，在这里边，现在你看这密码上就有了，这个时候我们安装NPM就可以了，我们先先NP MIIT一下，初始化一下，放Y什么意思啊，就是其他的忽略对不对，我们建一个它会出现一个排点接，这样的文件是空的，当然里边所有的数据你可以改，这我就不重复了，咱们以前也讲过，然后我现在就可以n PM in install，嗯。安装它一定要大S让大地的是开发环境对不对，让大S生产环境对吧，所以呢，我们安装的时候一定要他什么上线的时候得带着这个R，它不像我们外pad装的是呃开发式的应用，这个呢，我们得是运行式应用，所以呢我们安装它。嗯。等待一下，诶好，安装完了，那我们还得装webpa webpa的安装的时候呢，就是嗯，开发时的应用了，那我们还是npm web派得实现一道I web。要拿开了web派和外派脚手架，Web派放C，然后在开发时候安装大地。

嗯，因为这些东西咱们都是讲过的，所以我就不多重复了，咱们直接演练就行了，那按装完这个了，我们需要写一个外派的一个配置文件，当然了全在命令行也行，咱们最好是在这块写一个配什web pack.cig.JS派文件，那在这里边外派文件呢，我们需要使用呃，Common JS里边的model点，把它导出一个JS的一个格式在里边写，那入口需要项目都写在src目录下，那我这里边新建一个文件夹是SRCSRC下边呢，我新建一个入口文件。我们叫做GS。那这里边我们就可以写ENTR，这里边记得是接层格阶层格式啊，就一条，那我们就直接点斜杠src下边的in带点JS，那入口文件就有了，然后呢，我们再嗯写一下我们的模式。

因为我们得确定是开发模式，那生产模式呢，会把JD压缩，咱们直接开发模式DV啊，Develop proion。Eve偏对，还有什模式，然后呢，我们这里边还需要安装一个，安装一个什么呢。呃，我们得把HTML应用到这个上面对不对，所以也是TML得打包，然后呢，它得加载上什么，加载上这个GS才可以对不对，所以呢，我们这块安装一下，嗯，在NPM，嗯，In install，装一个插件，HTML的web派的插件p lun，那也是在开发环境中应用的这个插件当地。那安装的时候呢，那我们在这里边应用插件我们就得cost，呃，使用一下这个HTML，当然得用通控命名，它不支持半个格式，对不对？Web pack插件PN等于rere包含。HTML啊，因为没装完的，所以呢，他没给我们提示派杠P派plu。

插件，然后在这里边我们还需要写一个插件对吧？呃，PLUGIS这个它是一个数组，在数组里边我们直接用HTML这个插件就可以了，那我想把入口文件引它接格式标签好了，入口文件指定这个模板，把固定的模板使用对不对？这里边我们就直接引入src里边，比如说有个index.html啊。这样的话，我们在这里边新src里边再新建一个，嗯。入口店因带的点而加L。有两个点的。新建一个。in.TML，这里边什么也不用管，它就会有打包给我们，嗯，打包的时候它会自动包含这个音带点JS，我们试一下你看啊，Web。打包的时候就会生生成一个，因为咱们没写出口，所以呢，它默认的出口DST这个文件，那这个文件这里边会自动包含这个，呃，入口文件给我们打包好叫慢点JS，所以我们就呃您带点JS，我们打包成转成这个JS，那我们运行它。

L12你看一下就可以了，当然我们JS里什么没有，那这回我们在这里边，在GS里边，你在GS里边，那我们就可以按port用ES6里边的这个语法，那我们。X o from从哪呢？从我们X这样的话，我们就可以引入这个阿了，引入之后我们看一下就有X点，你看get就有这样的方法，来我们请求一下服务器，那我们服务器呢，原来有这个，呃，Get API对不对，但是我们现在这么打包运行了，你看使用的是这个端口63442对不对，肯定是不行的，那我们访问的时候呢，得相同的域对不对，那我也直接帮你解决一下跨域的一个问题。你看这里边我们改用get请求，所以呢，我们先给它改成get接收，在这里边get接收，然后我们在这个in带JS里边，你看我们直接写URL请求，请求HTTP冒号local host下边的这个目录变了是AX iOS DEMO下边的有个get api.pp请求这个那我可以传一些数据，比如说user name等于。

ABC随便写一个，那现在呢，肯定是存在跨域的问题，我现在这么请求，那我写完这个之后，外派必须得重新怎么办？因为我现在被装第server对不对，不能自动编译打包运行，所以呢，我得重新运行一下，重新运行一下，然后这里边还得加一个数据吧。加一个字。处理一下，呃，Res。里边的嗯，处理结果re，点打一下，再重新打包一下。那我们现在运行一下，你看一下就给我们出错，一定是这个跨越的问题，对不对，当然我们可以把这个访问地址改成这个去直接打包的目录去访问，对不对，当是那样的话，我们这每次访问的时候都不能直接这么运行了，所以呢，先解决跨域本身这个运的一个问题，那跨域呢，基本上有三种解决方法，一种是接分P对不对，就是雅贾克斯的时候，咱们总解决的那种方式，一种呢，用我们的web派里边第一个S使用代理的方式，也就是所有的我们这个请求都转到第一个，所有这个代理他俩是同域的，然后代理呢，再给我们指向固定的服务器这一种方式，但是我们在实际生产生活中呢，也就是在开发中呢，我们都是在服务器能解决的，也就是服务器允许我们跨域访问就行了。

那想在服务器端允许我们跨域访问的，其实我们就是在上面加一个头。开着头，这卡的头这个太长了，我记不住啊，这个好，这一条有券就允许我们发育了。就用头消息，别人请求他的时候，就告诉他你是允许发育的。就这样人际跨域的，那这样的话，我们再反问一下就不存在跨域问题了，两个地址是不一样的，你看我这里边虽然都是域名是log cost的，但是端口号，端口号怎么着是不相同的，对不对，因为我们这里边一旦接我们使用的端口号是默认八零端口，对吧？来我们这回再请求刷新一下，你看就可以了，这里边username ABC。

就可以了，那同样如果这样是可以的话，那么我们能不能把我们以前的，就是不是咱以前的上上节课咱们学过的用postman请求的这个API的work IB这样的，我们做成一个。我们想要的，呃，跨域呢也是一样的，那我们只需要在哪啊，在我们的找到我们代文件在它的最上面啊，处理下面吧，都可以。头信息一定要在前面发送啊，有输出头信息就不好使了，所以在任何输出之前，我们加上一条这样的语句，这样的话我们其实就可以把我们刚才的这种请求。那请求换成我们自己真正接口的一个数据了，当然呢，咱们这个接口它也是模拟的HTTP，但是是有数据从数据库取数据的HTTP这块，呃，api.e Du work.cn下边的I me下边的link。好的接口当然了，咱们一下参数来重新打包一下。

然后我们再运行一下。你看这里面就给我们打造这个数组，你看把所有的这个友情链接都拿过来了，如果用vuee的话，那我们就将这个数据怎么来在页面上摆放就OK了，很简单。那我们看一下这个用动词get请求的时候，参数怎么传，参数传呢？呃，有几种方法，比如说几种方法直接加问号，这种在后边传，比如说我们传ID等于一，那么我们这应该装上de为15完，每次都得编译运行来，我们再刷新一下。你看一下啊，今天大家看到这个麻烦的操作也行，对吧，到时候嗯，像那个使用脚手架的时候，它都是自动打包运行，那就更方便了，对吧，你看就能把我们这个数据查询出来，对吧？这是第一种get请求的方式，那我们有没有另外一种get请求的方式呢？有就是全参的方式啊，有多种。一定这样，那第二个我们不在这块算参数，我们可以怎么办呢？我们用第二个这样的方式，你看我能不能直接在这块用阶层格式去传。

我先用这样能不能用字符串的方式去算分开ID。等于一这样方式，然后安符什么用户名等于什么对吧，我先就这样ID等于一，先看一下可不可以成功，如果可以成功的话，说明这种穿参的方式也是可以的，来我们运行一下。你看。错误，不支持这种格式，对不对，那他不支持这种格式，那我们看一下字符串，这种格式不支持。那我们看一下对象这种格式我们直接写支不支持ID。冒号。这种模式支不支声？试一下啊，你看诶这个我得。给你打包，然后我们刷新一下，那这种。支持了，但是呢，你这个ID等于一他没给我们传过来对不对，不是这个ID等于查询的不是这个这个接口对不对，所以呢，我们用盖的方式请求的时候，这几种都不行，它需要怎么用呢？里边再传一个这个方法里边我们再指定。

看好了吗？是这样的参数才支持的。盖的这边请一般都是这样指定对吧，那再不就是用这种方式指定，这才是可以的。我们来刷新一下打包。用习惯了脚手架这种每次得打包运行。来刷新，你看这才能获取真正的一个数据，这才是可以的啊。就是这种方式，那钙的方式可以了，那我们的。那R7复制一下。就会把这个盖的方式去掉，那我们再试一下用什么呢？用post的方式。当然POS方式请求接口就不能是这个接口了，对不对，我们必须得是link下边的ADB这个接口，对吧？我们往里面添加数据，那它加数据的方式用的是什么呢？那我们看一下加数据的方式，这里边儿它有这么几种，一种是。

我们看一下这种格式行不行，比如说这里边我们看一下cosman传递的时候，有用户名，URL对不对这几个，那我们试一下有。再看一下忘了。有name name ord，对吧，还得有do。我们把它这个有name等于，比如说这里边我们拿一个这是。测。嗯。测试，然后安着符，嗯，Ul是e Du work随便写一下啊，然后安的符再来一个，嗯，Ord等于五，但是它必须我们看一下，这块用PP可以看一下啊。你看它必须得判断些do萨对不对，所以这会我们还得有什么DO3号线u MIT do萨me等于哪怕等于什么都行，它只要判断这个存在就可以，对不对，那我们看一下可不可以呢？刚才咱们看钙的方法这么写是不行的，对不对，但是POS的方法这么写行不行的，来我们刷新一下。

你看得到的数据如果是200，你看添加成功是可以的，添加成功是可以的，那我们在这块再访问一下。啊。不能是API了，我们访问的是3W点。E work。多少点？Shop shop点一定这个域名，那我们看一下我们刚才的数据加不加进去。刚才咱们是测试。测试应该是测试两个字，你看在这呢，对不对，这说明我们已经加进去了，那这个项目咱们说过啊，是两个项目用的一个数据库，所以他从那边加进去，这里边就可。