第一页 上页 1 2 3 4 5 6 7 8 9 10 下页 最后页 [ 显示模式: 摘要 | 列表 ]

vue.js 跨域请求 fetch / axios

[不指定 2019/08/28 13:48 | by 刘新修 ]

 假设我们的请求地址:http://localhost/Graduation_Thesis/a.php

在vue项目下 找到  config  > index.js 文件;修改 index.js 文件下的 proxyTable 对象的内容;如下

JavaScript代码
  1. proxyTable: {  
  2.      '/api': {              //  '/api'相当于代表  http://localhost/Graduation_Thesis  可自行修改名字  
  3.        target: 'http://localhost/Graduation_Thesis', //我们需要请求的主要文件夹地址  
  4.        changeOrigin: true//是否跨域  
  5.        pathRewrite: {  
  6.          '^/api''' //路径重写  
  7.        }  
  8.      }  
  9.    },  

这样就可以跨域请求  http://localhost/Graduation_Thesis    下的文件了,而需要获取文件下的 a.php 文件 需要用 fetch/  来做请求

fetch  请求

fetch 类似于 ajax 数据提交,但 fetch 更好

JavaScript代码
  1. export default {  
  2.   name: 'App',  
  3.   components: {  
  4.     appHeader:Header  
  5.   },  
  6.   created(){  
  7.     fetch('/api/a.php',{              //  /api既是上面跨域定义的文件地址  
  8.       method:"post",                  //请求方式  
  9.       headers: {                      //请求头  
  10.         'Content-Type''application/json',  
  11.         'Accept''application/json'  
  12.       },  
  13.       body:{                          //发送的请求内容  
  14.         username:'hw',  
  15.         pass:'123'  
  16.       }  
  17.     }).then(res => {  
  18.       return res.json();  
  19.     }).then(res => {  
  20.       console.log(res);  
  21.     })  
  22.   }  
  23. }  

axios  请求

首先全局安装

JavaScript代码
  1. npm install axios  

在 mian.js 引用

JavaScript代码
  1. //main.js  
  2.    
  3. import axios from 'axios'  
  4.    
  5.    
  6. //让 axios 可以全局使用  
  7. Vue.prototype.$axios = axios  

这样就可以开始使用了

JavaScript代码
  1. export default {  
  2.   name: 'App',  
  3.   components: {  
  4.     appHeader:Header  
  5.   },  
  6.   created(){  
  7.     this.$axios.post("/api/a.php",{  
  8.       username:'hw',  
  9.       pass:'1123'  
  10.     })  
  11.       .then(res =>{  
  12.         console.log(res);  
  13.       })  
  14.   }  
  15. }  

 

vue中http请求

[不指定 2019/08/28 13:31 | by 刘新修 ]

 前后端采用异步接口进行数据交互,传统情况下,我们采用jquery中的$.ajax()方法来进行异步请求。而在vue中我们并没有引入jquery而是采用了vue的插件vue-resource,它同样对异步请求进行了封装,方便我们同服务端进行数据交互。

1、引用及使用

C#代码
  1. cnpm install vue-resource --save-dev   

在项目根目录下/src/main.js中:

JavaScript代码
  1. import VueResource from 'vue-resource'  
  2. Vue.use(VueResource)  

此时在vue文件中就可以使用this.$http()进行网络请求。

2、通常在项目中是需要将http请求进行封装的。

为了封装成全局因此使用vuex。

参照 vue的一些总结 这个文章进行配置vuex

配置成功后,将main.js中的VueResource内容去掉,写在vuex中的store.js中

store.js内容如下

JavaScript代码
  1. import Vue from 'vue'  
  2. import Vuex from 'vuex'  
  3. import VueResource from 'vue-resource'  
  4. Vue.use(Vuex)  
  5. Vue.use(VueResource)  
  6. export default new Vuex.Store({  
  7.   state: {  
  8.     url: 'www.baidu.com'  
  9.   },  
  10.   mutations: {  
  11.     setUrl (state, res) {  
  12.       // 该方法用来改变全局变量的值  
  13.       state.url = res  
  14.     }  
  15.   }  
  16. })  

3、在store.js中封装http请求的方法

JavaScript代码
  1. import Vue from 'vue'  
  2. import Vuex from 'vuex'  
  3. import VueResource from 'vue-resource'  
  4. Vue.use(Vuex)  
  5. Vue.use(VueResource)  
  6. export default new Vuex.Store({  
  7.   state: {  
  8.     // url: 'www.baidu.com'  
  9.   },  
  10.   mutations: {  
  11.     // setUrl (state, res) {  
  12.     //   // 该方法用来改变全局变量的值  
  13.     //   state.url = res  
  14.     // },  
  15.     get(state, data) {  
  16.       Vue.http({  
  17.         method: 'GET',  
  18.         url: data.url,  
  19.         emulateJSON: true  
  20.       })  
  21.         .then(function (success) {  
  22.         // console.log("成功",success)  
  23.           data.success(success.body);  
  24.         }, function (error) {  
  25.         // console.log("错误",error)  
  26.           data.error(error.body);  
  27.         })  
  28.       /* 
  29.       Vue.http.get("http://test.dcsf.hebeiwanteng.com/api/common/wxParking/getNowTime") 
  30.         .then((success)=>{ 
  31.           console.log("成功",success) 
  32.         }) 
  33.         .catch((error)=>{ 
  34.           console.log("失败",error) 
  35.         }) 
  36.       */  
  37.     },  
  38.     post(state, data) {  
  39.       Vue.http({  
  40.         method: 'POST',  
  41.         url: data.url,  
  42.         params: data.data,  
  43.         emulateJSON: true  
  44.       }).then(function (success) {  
  45.           data.success(success.body);  
  46.         }, function (error) {  
  47.           data.error(error.body);  
  48.         })  
  49.     },  
  50.     delete(state, data) {  
  51.       Vue.http({  
  52.         method: 'DELETE',  
  53.         url: data.url,  
  54.         params: data.data,  
  55.         emulateJSON: true  
  56.       }).then(function (success) {  
  57.           data.success(success.body);  
  58.         }, function (error) {  
  59.           data.error(error.body);  
  60.         })  
  61.     },  
  62.     put(state, data) {  
  63.       Vue.http({  
  64.         method: 'PUT',  
  65.         url: data.url,  
  66.         params: data.data,  
  67.         emulateJSON: true  
  68.       }).then(function (success) {  
  69.           data.success(success.body);  
  70.         }, function (error) {  
  71.           data.error(error.body);  
  72.         })  
  73.     },  
  74.   }  
  75. })  

此时封装好了http请求。

 

在vue的文件中调用:

JavaScript代码
  1. <script>  
  2.   import { mapState, mapMutations } from 'vuex'  
  3.   export default {  
  4.     name: 'HelloWorld',  
  5.     data () {  
  6.       return {  
  7.       }  
  8.     },  
  9.     methods: {  
  10.       ...mapMutations(['get','post','delete','put']), //引入方法  
  11.     },  
  12.     created() {  
  13.       let _this = this;  
  14.       _this.get({  
  15.         url:"此处写请求地址",  
  16.         success(success) {  
  17.           console.log("成功",success)  
  18.         },  
  19.         error(error) {  
  20.           console.log("错误",error)  
  21.         }  
  22.       });  
  23.     }  
  24.   }  
  25. </script>  

4、注意:在store.js中使用Vue.http和在vue文件中使用this.$http是一样的。

5、该方法只验证了get请求,其它请求没有做验证。

JavaScript代码
  1. /****** 拼接按天时间戳的方法 ******/  
  2. var yearStr=new Date().getFullYear();  
  3. var dateStr=new Date().getDate();  
  4. var monthStr=(new Date().getMonth()+1+'');  
  5. if(monthStr.length==1){  
  6.     monthStr = '0'+monthStr;  
  7. }  
  8. var timeStr=yearStr+'_'+monthStr+'_'+dateStr;  
  9. //console.log(yearStr+'_'+monthStr+'_'+dateStr);  
  10.   
  11.   
  12. /****** 遍历CSS按天增加时间戳 ******/  
  13. $("link[type='text/css']").each(function(){  
  14.     console.log($(this).attr("href"))  
  15.     $(this).attr("href",$(this).attr("href")+"?t="+timeStr);  
  16. });  
 

 

一、uni-app (app混合开发)

        uni-app是一个使用Vue.js开发跨平台个人文库应用的前端框架,开发者编写一套代码,可编译到的iOS,安卓,H5,小程序等多个   平台。

        官网:uni-app

二、vue-cli3+cordova (app混合开发)

        网址:https://www.jianshu.com/p/543a1da430c2

 

三、element-ui (后台管理系统)

        网址:http://element.eleme.io/#/zh-CN

 

四、vant-ui、mint-ui(移动端插件)

        网站:mint-ui  好像很久没更新了,不过还是可以用

                   vant-ui  我自己用着还可以

 

五、weex(vue框架中最接近原生app开发)

         在RN的大热下,基本上没人用,所以导致文档不全,社区不大。而且由于fluteer的降临,处境堪忧。但它是国产,我在心里支持它。

        网址:http://weex.apache.org/cn/guide/

 

六、v-charts (基于 Vue2.0 和 ECharts 封装的图表组件)

        个人感觉很好用

         网址:https://v-charts.js.org/#/

 

七、vue-awesome-swiper(vue轮播组件)

        网址:https://www.npmjs.com/package/vue-awesome-swiper

 

八、 Lodash.js 

        一套工具库,内部封装了很多字符串、数组、对象等常见数据类型的处理函数,包括函数防抖和函数节流。

        网址:https://www.lodashjs.com/

 

九、Moment.js (js日期处理类库)

        网址:http://momentjs.cn/

十、vue-amap(地图组件)

        只支持高德接口

        网址:https://elemefe.github.io/vue-amap/#/

十一、nuxt.js( vue服务端渲染应用框架  )

        网址:https://zh.nuxtjs.org/

个人博客迁移至香港机房

[不指定 2019/07/16 15:29 | by 刘新修 ]

 看了co的源码 比较难懂 了解了其原理后实现了一个最简版本https://github.com/yucong/simple-co 希望对想学习的tx有帮助~ yeild后面只支持thunk,co本身也是一个thunk 核心代码:

JavaScript代码
  1. function co(generator) {  
  2.   return function(fn) {  
  3.     var gen = generator();  
  4.     function next(err, result) {  
  5.         if(err){  
  6.             return fn(err);  
  7.         }  
  8.         var step = gen.next(result);  
  9.         if (!step.done) {  
  10.             step.value(next);  
  11.         } else {  
  12.             fn(null, step.value);  
  13.         }  
  14.     }  
  15.     next();  
  16.    }  
  17. }  

用法:

JavaScript代码
  1. var co = require('./co');  
  2. // wrap the function to thunk  
  3. function readFile(filename) {  
  4.     return function(callback) {  
  5.         require('fs').readFile(filename, 'utf8', callback);  
  6.     };  
  7. }  
  8.   
  9. co(function * () {  
  10.     var file1 = yield readFile('./file/a.txt');  
  11.     var file2 = yield readFile('./file/b.txt');  
  12.   
  13.     console.log(file1);  
  14.     console.log(file2);  
  15.     return 'done';  
  16. })(function(err, result) {  
  17.     console.log(result)  
  18. });  

会打印出: content in a.txt content in b.txt done

 

下面做个简单对比:
传统方式,sayhello是一个异步函数,执行helloworld会先输出"world"再输出"hello"

JavaScript代码
  1. function sayhello() {  
  2.     return Promise.resolve('hello').then(function(hello) {  
  3.         console.log(hello);  
  4.     });  
  5. }  
  6. function helloworld() {  
  7.     sayhello();  
  8.     console.log('world');  
  9. }  
  10. helloworld();  

输出

 

JavaScript代码
  1. "world"  
  2. "hello"  

co 的方式,会先输出"hello"再输出"world"

JavaScript代码
  1. function co(gen) {  
  2.     var it = gen();  
  3.     var ret = it.next();  
  4.     ret.value.then(function(res) {  
  5.         it.next(res);  
  6.     });  
  7. }  
  8. function sayhello() {  
  9.     return Promise.resolve('hello').then(function(hello) {  
  10.         console.log(hello);  
  11.     });  
  12. }  
  13. co(function *helloworld() {  
  14.     yield sayhello();  
  15.     console.log('world');  
  16. });  

输出

JavaScript代码
  1. "hello"  
  2. "world"  

 

消除回调金字塔

假设sayhello/sayworld/saybye是三个异步函数,用真正的 co 模块就可以这么写:

JavaScript代码
  1. var co = require('co');  
  2. co(function *() {  
  3.     yield sayhello();  
  4.     yield sayworld();  
  5.     yield saybye();  
  6. });  

输出

JavaScript代码
  1. "hello"  
  2. "world"  
  3. "bye"  

 

 问题背景,从vmware6.0版本的物理机上导出虚拟机ovf模板后,导入到4.1版本物理机上时报错:“硬件系列vmx-11不受支持”。

1.打开xxx.ovf文件,将<vssd:VirtualSystemType>vmx-11</vssd:VirtualSystemType> 改成物理机支持的版本:<vssd:VirtualSystemType>vmx-7</vssd:VirtualSystemType> 

2.打开xxx.mf文件,将对VOF引用的哪一行删掉,不然 在部署的时候会报文件 xxxx.ovf 的完整性检查失败,可能在传输过程中已损坏。

删掉 SHA1(xxx.ovf)= f801b24cd5f664a9f3f88810b87e0080fb5bf29f

google chrome 插件安装目录

[不指定 2017/06/19 13:52 | by 刘新修 ]

MAC:

C#代码
  1. /Users/jesse/Library/Application Support/Google/Chrome/Default/Extensions/nhdogjmejiglipccpnnnanhbledajbpd/0.0.2_0  

windows:

C#代码
  1. C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default\Extensions\nhdogjmejiglipccpnnnanhbledajbpd\3.1.4_0  

 

Docker v17.04.0-ce-rc1 发布了,并将于 2017-04-05 发布 17.04.0-ce  版本。本次更新内容如下:

Client

  • Sort docker stack ls by name #31085

  • Flags for specifying bind mount consistency #31047

  • Suppressing image digest in docker ps #30848

  • Hide command options that are related to Windows #30788

  • Fix docker plugin install prompt to accept "enter" for the "N" default #30769

  • Add truncate function for Go templates #30484

  • Support expanded syntax of ports in stack deploy #30476

  • Support expanded syntax of mounts in stack deploy #30597 #31795

  • Add --add-host for docker build #30383

  • Add .CreatedAt placeholder for docker network ls --format #29900

  • Update order of --secret-rm and --secret-add #29802

  • Fix use of **/ in .dockerignore #29043

  • Add --filter enabled=true for docker plugin ls #28627

  • Add --format to docker service ls #28199

  • Add publish and expose filter for docker ps --filter #27557

  • Support multiple service IDs on docker service ps #25234

  • Allow swarm join with --availability=drain #24993

  • Removal of the email from docker login #26868

Networking

  • Check parameter --ip, --ip6 and --link-local-ip in docker network connect #30807

  • Added support for dns-search #30117

  • Added --verbose option for docker network inspect to show task details from all swarm nodes #31710

Runtime

  • Handle paused container when restoring without live-restore set #31704

  • Do not allow sub second in healthcheck options in Dockerfile #31177

  • Support name and id prefix in secret update #30856

  • Use binary frame for websocket attach endpoint #30460

  • Fix linux mount calls not applying propagation type changes #30416

  • Fix ExecIds leak on failed exec -i #30340

  • Prune named but untagged images if danglingOnly=true #30330

  • Add daemon flag to set no_new_priv as default for unprivileged containers #29984

  • Add daemon option --default-shm-size #29692

  • Support registry mirror config reload #29650

  • Ignore the daemon log config when building images #29552

  • Move secret name or ID prefix resolving from client to daemon #29218

  • Implement optional ring buffer for container logs #28762

  • Allow adding rules to cgroup devices.allow on container create/run #22563

Swarm Mode

  • Add Service logs formatting #31672

  • Fix service logs API to be able to specify stream #31313

  • Add --stop-signal for service create and service update #30754

  • Add --read-only for service create and service update #30162

  • Renew the context after communicating with the registry #31586

Windows

  • Wait for OOBE to prevent crashing during host update #31054

  • Block pulling Windows images on non-Windows daemons #29001

下载

3月2日,Docker 官方发布了一篇 blog ,宣布企业版到来。版本也从1.13.x一跃到17.03。

之后,Docker 会每月发布一个 edge 版本(17.03, 17.04, 17.05...),每三个月发布一个 stable 版本(17.03, 17.06, 17.09...),企业版(EE) 和 stable 版本号保持一致,但每个版本提供一年维护。

Docker 的 Linux 发行版的软件仓库也从以前的https://apt.dockerproject.org / https://yum.dockerproject.org 变更为目前的 https://download.docker.com/。软件包名变更为 docker-ce(社区版) 和 docker-ee(企业版)。

旧的仓库和包名(docker-engine)依旧可以使用,但不确定什么时候会被废弃,docker-engine 的版本号也变成了17.03.0~ce-0这种的版本号。

Docker v17.03.0-ce 版本更新内容和下载地址请查看发行日志

Docker的网络模式和跨主机通信(Docker的四种网络模式Bridge模式)

当Docker进程启动时,会在主机上创建一个名为docker0...

Docker的四种网络模式

1. Bridge模式

当Docker进程启动时,会在主机上创建一个名为docker0的虚拟网桥,此主机上启动的Docker容器会连接到这个虚拟网桥上。虚拟网桥的工作方式和物理交换机类似,这样主机上的所有容器就通过交换机连在了一个二层网络中。

从docker0子网中分配一个IP给容器使用,并设置docker0的IP地址为容器的默认网关。在主机上创建一对虚拟网卡veth pair设备,Docker将veth pair设备的一端放在新创建的容器中,并命名为eth0(容器的网卡),另一端放在主机中,以vethxxx这样类似的名字命名,并将这个网络设备加入到docker0网桥中。可以通过brctl show命令查看。

bridge模式是docker的默认网络模式,不写--net参数,就是bridge模式。使用docker run -p时,docker实际是在iptables做了DNAT规则,实现端口转发功能。可以使用iptables -t nat -vnL查看。

 

bridge模式如下图所示:

演示:

C#代码
  1. #docker run -tid --net=bridge --name docker_bri1 ubuntu-base:v3  
  2. #docker run -tid --net=bridge --name docker_bri2 ubuntu-base:v3  
  3.  
  4. #brctl show  
  5. #docker exec -ti docker_bri1 /bin/bash  
  6. #docker exec -ti docker_bri1 /bin/bash  
  7.  
  8. #ifconfig –a  
  9. #route –n  

2. Host模式

如果启动容器的时候使用host模式,那么这个容器将不会获得一个独立的Network Namespace,而是和宿主机共用一个Network Namespace。容器将不会虚拟出自己的网卡,配置自己的IP等,而是使用宿主机的IP和端口。但是,容器的其他方面,如文件系统、进程列表等还是和宿主机隔离的。

Host模式如下图所示:

演示:

C#代码
  1. #docker run -tid --net=host --name docker_host1 ubuntu-base:v3  
  2. #docker run -tid --net=host --name docker_host2 ubuntu-base:v3  
  3.  
  4. #docker exec -ti docker_host1 /bin/bash  
  5. #docker exec -ti docker_host1 /bin/bash  
  6.  
  7. #ifconfig –a  
  8. #route –n  

3. Container模式

这个模式指定新创建的容器和已经存在的一个容器共享一个 Network Namespace,而不是和宿主机共享。新创建的容器不会创建自己的网卡,配置自己的 IP,而是和一个指定的容器共享 IP、端口范围等。同样,两个容器除了网络方面,其他的如文件系统、进程列表等还是隔离的。两个容器的进程可以通过 lo 网卡设备通信。

Container模式示意图:

演示:

C#代码
  1. #docker run -tid --net=container:docker_bri1 --name docker_con1 ubuntu-base:v3  
  2.  
  3. #docker exec -ti docker_con1 /bin/bash  
  4. #docker exec -ti docker_bri1 /bin/bash  
  5.  
  6. #ifconfig –a  
  7. #route -n  

4. None模式

使用none模式,Docker容器拥有自己的Network Namespace,但是,并不为Docker容器进行任何网络配置。也就是说,这个Docker容器没有网卡、IP、路由等信息。需要我们自己为Docker容器添加网卡、配置IP等。

Node模式示意图:

演示:

C#代码
  1. #docker run -tid --net=none --name docker_non1 ubuntu-base:v3  
  2. #docker exec -ti docker_non1 /bin/bash  
  3.  
  4. #ifconfig –a  
  5. #route -n  

跨主机通信

Docker默认的网络环境下,单台主机上的Docker容器可以通过docker0网桥直接通信,而不同主机上的Docker容器之间只能通过在主机上做端口映射进行通信。这种端口映射方式对很多集群应用来说极不方便。如果能让Docker容器之间直接使用自己的IP地址进行通信,会解决很多问题。按实现原理可分别直接路由方式、桥接方式(如pipework)、Overlay隧道方式(如flannel、ovs+gre)等。

直接路由

通过在Docker主机上添加静态路由实现跨宿主机通信:

Pipework

Pipework是一个简单易用的Docker容器网络配置工具。由200多行shell脚本实现。通过使用ip、brctl、ovs-vsctl等命令来为Docker容器配置自定义的网桥、网卡、路由等。

使用新建的bri0网桥代替缺省的docker0网桥

bri0网桥与缺省的docker0网桥的区别:bri0和主机eth0之间是veth pair

第一页 上页 1 2 3 4 5 6 7 8 9 10 下页 最后页 [ 显示模式: 摘要 | 列表 ]