00:00
大家好,我是学习园地的特约讲师高老峰,上节课呢,咱们以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啊演示,只要你换个名就行,对吧,然后我们打开这个。
01:24
Stop。查看。好,因为这里边儿是有创建这个项目的,呃,这那边其他的我们就不用管了,那在这里边我们开启呃控制台,我们创建一个项目吧。嗯。他新建一个项目,这好像咱们改名都没建。选择文件夹,选择我们。呃,吸盘下边这个下边。哦。64下3W,下边咱们找一下第一个就是。方面。
02:00
方便。就在这个窗口了,咱们也不创建别的窗口了,在这里边,现在你看这密码上就有了,这个时候我们安装NPM就可以了,我们先先NP MIIT一下,初始化一下,放Y什么意思啊,就是其他的忽略对不对,我们建一个它会出现一个排点接,这样的文件是空的,当然里边所有的数据你可以改,这我就不重复了,咱们以前也讲过,然后我现在就可以n PM in install,嗯。安装它一定要大S让大地的是开发环境对不对,让大S生产环境对吧,所以呢,我们安装的时候一定要他什么上线的时候得带着这个R,它不像我们外pad装的是呃开发式的应用,这个呢,我们得是运行式应用,所以呢我们安装它。嗯。等待一下,诶好,安装完了,那我们还得装webpa webpa的安装的时候呢,就是嗯,开发时的应用了,那我们还是npm web派得实现一道I web。要拿开了web派和外派脚手架,Web派放C,然后在开发时候安装大地。
03:09
嗯,因为这些东西咱们都是讲过的,所以我就不多重复了,咱们直接演练就行了,那按装完这个了,我们需要写一个外派的一个配置文件,当然了全在命令行也行,咱们最好是在这块写一个配什web pack.cig.JS派文件,那在这里边外派文件呢,我们需要使用呃,Common JS里边的model点,把它导出一个JS的一个格式在里边写,那入口需要项目都写在src目录下,那我这里边新建一个文件夹是SRCSRC下边呢,我新建一个入口文件。我们叫做GS。那这里边我们就可以写ENTR,这里边记得是接层格阶层格式啊,就一条,那我们就直接点斜杠src下边的in带点JS,那入口文件就有了,然后呢,我们再嗯写一下我们的模式。
04:03
因为我们得确定是开发模式,那生产模式呢,会把JD压缩,咱们直接开发模式DV啊,Develop proion。Eve偏对,还有什模式,然后呢,我们这里边还需要安装一个,安装一个什么呢。呃,我们得把HTML应用到这个上面对不对,所以也是TML得打包,然后呢,它得加载上什么,加载上这个GS才可以对不对,所以呢,我们这块安装一下,嗯,在NPM,嗯,In install,装一个插件,HTML的web派的插件p lun,那也是在开发环境中应用的这个插件当地。那安装的时候呢,那我们在这里边应用插件我们就得cost,呃,使用一下这个HTML,当然得用通控命名,它不支持半个格式,对不对?Web pack插件PN等于rere包含。HTML啊,因为没装完的,所以呢,他没给我们提示派杠P派plu。
05:03
插件,然后在这里边我们还需要写一个插件对吧?呃,PLUGIS这个它是一个数组,在数组里边我们直接用HTML这个插件就可以了,那我想把入口文件引它接格式标签好了,入口文件指定这个模板,把固定的模板使用对不对?这里边我们就直接引入src里边,比如说有个index.html啊。这样的话,我们在这里边新src里边再新建一个,嗯。入口店因带的点而加L。有两个点的。新建一个。in.TML,这里边什么也不用管,它就会有打包给我们,嗯,打包的时候它会自动包含这个音带点JS,我们试一下你看啊,Web。打包的时候就会生生成一个,因为咱们没写出口,所以呢,它默认的出口DST这个文件,那这个文件这里边会自动包含这个,呃,入口文件给我们打包好叫慢点JS,所以我们就呃您带点JS,我们打包成转成这个JS,那我们运行它。
06:09
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等于。
07:17
ABC随便写一个,那现在呢,肯定是存在跨域的问题,我现在这么请求,那我写完这个之后,外派必须得重新怎么办?因为我现在被装第server对不对,不能自动编译打包运行,所以呢,我得重新运行一下,重新运行一下,然后这里边还得加一个数据吧。加一个字。处理一下,呃,Res。里边的嗯,处理结果re,点打一下,再重新打包一下。那我们现在运行一下,你看一下就给我们出错,一定是这个跨越的问题,对不对,当然我们可以把这个访问地址改成这个去直接打包的目录去访问,对不对,当是那样的话,我们这每次访问的时候都不能直接这么运行了,所以呢,先解决跨域本身这个运的一个问题,那跨域呢,基本上有三种解决方法,一种是接分P对不对,就是雅贾克斯的时候,咱们总解决的那种方式,一种呢,用我们的web派里边第一个S使用代理的方式,也就是所有的我们这个请求都转到第一个,所有这个代理他俩是同域的,然后代理呢,再给我们指向固定的服务器这一种方式,但是我们在实际生产生活中呢,也就是在开发中呢,我们都是在服务器能解决的,也就是服务器允许我们跨域访问就行了。
08:26
那想在服务器端允许我们跨域访问的,其实我们就是在上面加一个头。开着头,这卡的头这个太长了,我记不住啊,这个好,这一条有券就允许我们发育了。就用头消息,别人请求他的时候,就告诉他你是允许发育的。就这样人际跨域的,那这样的话,我们再反问一下就不存在跨域问题了,两个地址是不一样的,你看我这里边虽然都是域名是log cost的,但是端口号,端口号怎么着是不相同的,对不对,因为我们这里边一旦接我们使用的端口号是默认八零端口,对吧?来我们这回再请求刷新一下,你看就可以了,这里边username ABC。
09:05
就可以了,那同样如果这样是可以的话,那么我们能不能把我们以前的,就是不是咱以前的上上节课咱们学过的用postman请求的这个API的work IB这样的,我们做成一个。我们想要的,呃,跨域呢也是一样的,那我们只需要在哪啊,在我们的找到我们代文件在它的最上面啊,处理下面吧,都可以。头信息一定要在前面发送啊,有输出头信息就不好使了,所以在任何输出之前,我们加上一条这样的语句,这样的话我们其实就可以把我们刚才的这种请求。那请求换成我们自己真正接口的一个数据了,当然呢,咱们这个接口它也是模拟的HTTP,但是是有数据从数据库取数据的HTTP这块,呃,api.e Du work.cn下边的I me下边的link。好的接口当然了,咱们一下参数来重新打包一下。
10:03
然后我们再运行一下。你看这里面就给我们打造这个数组,你看把所有的这个友情链接都拿过来了,如果用vuee的话,那我们就将这个数据怎么来在页面上摆放就OK了,很简单。那我们看一下这个用动词get请求的时候,参数怎么传,参数传呢?呃,有几种方法,比如说几种方法直接加问号,这种在后边传,比如说我们传ID等于一,那么我们这应该装上de为15完,每次都得编译运行来,我们再刷新一下。你看一下啊,今天大家看到这个麻烦的操作也行,对吧,到时候嗯,像那个使用脚手架的时候,它都是自动打包运行,那就更方便了,对吧,你看就能把我们这个数据查询出来,对吧?这是第一种get请求的方式,那我们有没有另外一种get请求的方式呢?有就是全参的方式啊,有多种。一定这样,那第二个我们不在这块算参数,我们可以怎么办呢?我们用第二个这样的方式,你看我能不能直接在这块用阶层格式去传。
11:05
我先用这样能不能用字符串的方式去算分开ID。等于一这样方式,然后安符什么用户名等于什么对吧,我先就这样ID等于一,先看一下可不可以成功,如果可以成功的话,说明这种穿参的方式也是可以的,来我们运行一下。你看。错误,不支持这种格式,对不对,那他不支持这种格式,那我们看一下字符串,这种格式不支持。那我们看一下对象这种格式我们直接写支不支持ID。冒号。这种模式支不支声?试一下啊,你看诶这个我得。给你打包,然后我们刷新一下,那这种。支持了,但是呢,你这个ID等于一他没给我们传过来对不对,不是这个ID等于查询的不是这个这个接口对不对,所以呢,我们用盖的方式请求的时候,这几种都不行,它需要怎么用呢?里边再传一个这个方法里边我们再指定。
12:05
看好了吗?是这样的参数才支持的。盖的这边请一般都是这样指定对吧,那再不就是用这种方式指定,这才是可以的。我们来刷新一下打包。用习惯了脚手架这种每次得打包运行。来刷新,你看这才能获取真正的一个数据,这才是可以的啊。就是这种方式,那钙的方式可以了,那我们的。那R7复制一下。就会把这个盖的方式去掉,那我们再试一下用什么呢?用post的方式。当然POS方式请求接口就不能是这个接口了,对不对,我们必须得是link下边的ADB这个接口,对吧?我们往里面添加数据,那它加数据的方式用的是什么呢?那我们看一下加数据的方式,这里边儿它有这么几种,一种是。
13:00
我们看一下这种格式行不行,比如说这里边我们看一下cosman传递的时候,有用户名,URL对不对这几个,那我们试一下有。再看一下忘了。有name name ord,对吧,还得有do。我们把它这个有name等于,比如说这里边我们拿一个这是。测。嗯。测试,然后安着符,嗯,Ul是e Du work随便写一下啊,然后安的符再来一个,嗯,Ord等于五,但是它必须我们看一下,这块用PP可以看一下啊。你看它必须得判断些do萨对不对,所以这会我们还得有什么DO3号线u MIT do萨me等于哪怕等于什么都行,它只要判断这个存在就可以,对不对,那我们看一下可不可以呢?刚才咱们看钙的方法这么写是不行的,对不对,但是POS的方法这么写行不行的,来我们刷新一下。
14:05
你看得到的数据如果是200,你看添加成功是可以的,添加成功是可以的,那我们在这块再访问一下。啊。不能是API了,我们访问的是3W点。E work。多少点?Shop shop点一定这个域名,那我们看一下我们刚才的数据加不加进去。刚才咱们是测试。测试应该是测试两个字,你看在这呢,对不对,这说明我们已经加进去了,那这个项目咱们说过啊,是两个项目用的一个数据库,所以他从那边加进去,这里边就可。
我来说两句