vue中 fetch跨域请求
fetch 是原生javaScript提供的,它可以当作全局变量使用,挂载在window对象身上的
fetch的get请求方法
简单基本的fetch请求(get)
- <div id="app">
- <button @click="getData">get请求</button>
- </div>
- <script>
- 是原生javaScript提供的,它可以当作全局变量使用,挂载在window对象身上的
- new Vue({
- // fetch
- el:"#app",
- methods:{
- getData(){
- // var p=fetch();
- // console.log(p)//fetch方法也是promise对象
- fetch('./data/name.json')
- .then( (res) => { return res.json() } )//对fetch进行格式化,否则读取不到内容
- .then( (data) => { console.log(data)} )//拿到格式化后的数据data
- .catch(error=>console.log(error))
- },
- },
- })
注意事项:
A: fetch 的 get 请求的参数是直接连接在url上的, 我们可以使用Node.js提供的url或是qureystring模块来将
Object --> String
B: fetch 的请求返回的是Promise对象,所以我们可以使用.then().catch(),但是要记住.then()至少要写两个, 第一个then是用来格式
- 格式化处理的其他方式
- fetch('./data.json')
- .then(res=>{
- res.json() //格式化json数据
- //res.text()格式胡文本数据
- //res.blob()==格式化二进制文件==
- })
- .then( data => console.log(data))
- .catch( error => console.log( error ))
fetch的post请求方法
代码示例
- <div id="app">
- <button @click="postData">post请求</button>
- </div>
- <script>
- new Vue({
- // fetch
- el:"#app",
- methods:{
- postData(){
- fetch('http://10.31.161.60:8080',{
- method:'post',
- hearders:new Headers({
- //设置请求头,解决跨域问题
- 'Content-Type':'application/x-www-form-urlencoded'
- }),
- //解决请求数据类型限制的问题
- // body:new URLSearchParams([["a", 1],["b", 2]]).toString()
- })
- .then( res => res.text() )
- .then( data => console.log( data ))
- .catch( error => console.log( error ))
- }
- },
- })
总结
fetch要手动进行一次数据格式化,但是axios是内部进行了数据的格式化
fetch get 方法请求数据,参数要直接连接在url上
fetch 格式化数据 有三种 处理方法
.json() 格式化 json 类型数据, 将 json类型 string 转换成 json 对象
.text() 格式化文本
.blob() 格式化二进制数据
fetch 书写post请求、处理
设置请求头
通过 new URLSearchPrams 来携带参数
vue.js 跨域请求 fetch / axios
假设我们的请求地址:http://localhost/Graduation_Thesis/a.php
在vue项目下 找到 config > index.js 文件;修改 index.js 文件下的 proxyTable 对象的内容;如下
- proxyTable: {
- '/api': { // '/api'相当于代表 http://localhost/Graduation_Thesis 可自行修改名字
- target: 'http://localhost/Graduation_Thesis', //我们需要请求的主要文件夹地址
- changeOrigin: true, //是否跨域
- pathRewrite: {
- '^/api': '' //路径重写
- }
- }
- },
这样就可以跨域请求 http://localhost/Graduation_Thesis 下的文件了,而需要获取文件下的 a.php 文件 需要用 fetch/ 来做请求
fetch 请求
fetch 类似于 ajax 数据提交,但 fetch 更好
- export default {
- name: 'App',
- components: {
- appHeader:Header
- },
- created(){
- fetch('/api/a.php',{ // /api既是上面跨域定义的文件地址
- method:"post", //请求方式
- headers: { //请求头
- 'Content-Type': 'application/json',
- 'Accept': 'application/json'
- },
- body:{ //发送的请求内容
- username:'hw',
- pass:'123'
- }
- }).then(res => {
- return res.json();
- }).then(res => {
- console.log(res);
- })
- }
- }
axios 请求
首先全局安装
- npm install axios
在 mian.js 引用
- //main.js
- import axios from 'axios'
- //让 axios 可以全局使用
- Vue.prototype.$axios = axios
这样就可以开始使用了
- export default {
- name: 'App',
- components: {
- appHeader:Header
- },
- created(){
- this.$axios.post("/api/a.php",{
- username:'hw',
- pass:'1123'
- })
- .then(res =>{
- console.log(res);
- })
- }
- }
vue中http请求
前后端采用异步接口进行数据交互,传统情况下,我们采用jquery中的$.ajax()方法来进行异步请求。而在vue中我们并没有引入jquery而是采用了vue的插件vue-resource,它同样对异步请求进行了封装,方便我们同服务端进行数据交互。
1、引用及使用
- cnpm install vue-resource --save-dev
在项目根目录下/src/main.js中:
- import VueResource from 'vue-resource'
- Vue.use(VueResource)
此时在vue文件中就可以使用this.$http()进行网络请求。
2、通常在项目中是需要将http请求进行封装的。
为了封装成全局因此使用vuex。
参照 vue的一些总结 这个文章进行配置vuex
配置成功后,将main.js中的VueResource内容去掉,写在vuex中的store.js中
store.js内容如下
- import Vue from 'vue'
- import Vuex from 'vuex'
- import VueResource from 'vue-resource'
- Vue.use(Vuex)
- Vue.use(VueResource)
- export default new Vuex.Store({
- state: {
- url: 'www.baidu.com'
- },
- mutations: {
- setUrl (state, res) {
- // 该方法用来改变全局变量的值
- state.url = res
- }
- }
- })
3、在store.js中封装http请求的方法
- import Vue from 'vue'
- import Vuex from 'vuex'
- import VueResource from 'vue-resource'
- Vue.use(Vuex)
- Vue.use(VueResource)
- export default new Vuex.Store({
- state: {
- // url: 'www.baidu.com'
- },
- mutations: {
- // setUrl (state, res) {
- // // 该方法用来改变全局变量的值
- // state.url = res
- // },
- get(state, data) {
- Vue.http({
- method: 'GET',
- url: data.url,
- emulateJSON: true
- })
- .then(function (success) {
- // console.log("成功",success)
- data.success(success.body);
- }, function (error) {
- // console.log("错误",error)
- data.error(error.body);
- })
- /*
- Vue.http.get("http://test.dcsf.hebeiwanteng.com/api/common/wxParking/getNowTime")
- .then((success)=>{
- console.log("成功",success)
- })
- .catch((error)=>{
- console.log("失败",error)
- })
- */
- },
- post(state, data) {
- Vue.http({
- method: 'POST',
- url: data.url,
- params: data.data,
- emulateJSON: true
- }).then(function (success) {
- data.success(success.body);
- }, function (error) {
- data.error(error.body);
- })
- },
- delete(state, data) {
- Vue.http({
- method: 'DELETE',
- url: data.url,
- params: data.data,
- emulateJSON: true
- }).then(function (success) {
- data.success(success.body);
- }, function (error) {
- data.error(error.body);
- })
- },
- put(state, data) {
- Vue.http({
- method: 'PUT',
- url: data.url,
- params: data.data,
- emulateJSON: true
- }).then(function (success) {
- data.success(success.body);
- }, function (error) {
- data.error(error.body);
- })
- },
- }
- })
此时封装好了http请求。
在vue的文件中调用:
- <script>
- import { mapState, mapMutations } from 'vuex'
- export default {
- name: 'HelloWorld',
- data () {
- return {
- }
- },
- methods: {
- ...mapMutations(['get','post','delete','put']), //引入方法
- },
- created() {
- let _this = this;
- _this.get({
- url:"此处写请求地址",
- success(success) {
- console.log("成功",success)
- },
- error(error) {
- console.log("错误",error)
- }
- });
- }
- }
- </script>
4、注意:在store.js中使用Vue.http和在vue文件中使用this.$http是一样的。
5、该方法只验证了get请求,其它请求没有做验证。
JQ增加时间戳清除清除CSS缓存
- /****** 拼接按天时间戳的方法 ******/
- var yearStr=new Date().getFullYear();
- var dateStr=new Date().getDate();
- var monthStr=(new Date().getMonth()+1+'');
- if(monthStr.length==1){
- monthStr = '0'+monthStr;
- }
- var timeStr=yearStr+'_'+monthStr+'_'+dateStr;
- //console.log(yearStr+'_'+monthStr+'_'+dateStr);
- /****** 遍历CSS按天增加时间戳 ******/
- $("link[type='text/css']").each(function(){
- console.log($(this).attr("href"))
- $(this).attr("href",$(this).attr("href")+"?t="+timeStr);
- });
vue常用开发ui框架(app,后台管理系统,移动端)及插件
一、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 封装的图表组件)
个人感觉很好用
七、vue-awesome-swiper(vue轮播组件)
网址:https://www.npmjs.com/package/vue-awesome-swiper
八、 Lodash.js
一套工具库,内部封装了很多字符串、数组、对象等常见数据类型的处理函数,包括函数防抖和函数节流。
九、Moment.js (js日期处理类库)
十、vue-amap(地图组件)
只支持高德接口
网址:https://elemefe.github.io/vue-amap/#/
十一、nuxt.js( vue服务端渲染应用框架 )
co最简版实现,学习generator & co
看了co的源码 比较难懂 了解了其原理后实现了一个最简版本https://github.com/yucong/simple-co 希望对想学习的tx有帮助~ yeild后面只支持thunk,co本身也是一个thunk 核心代码:
- function co(generator) {
- return function(fn) {
- var gen = generator();
- function next(err, result) {
- if(err){
- return fn(err);
- }
- var step = gen.next(result);
- if (!step.done) {
- step.value(next);
- } else {
- fn(null, step.value);
- }
- }
- next();
- }
- }
用法:
- var co = require('./co');
- // wrap the function to thunk
- function readFile(filename) {
- return function(callback) {
- require('fs').readFile(filename, 'utf8', callback);
- };
- }
- co(function * () {
- var file1 = yield readFile('./file/a.txt');
- var file2 = yield readFile('./file/b.txt');
- console.log(file1);
- console.log(file2);
- return 'done';
- })(function(err, result) {
- console.log(result)
- });
会打印出: content in a.txt content in b.txt done
下面做个简单对比:
传统方式,sayhello
是一个异步函数,执行helloworld
会先输出"world"
再输出"hello"
。
- function sayhello() {
- return Promise.resolve('hello').then(function(hello) {
- console.log(hello);
- });
- }
- function helloworld() {
- sayhello();
- console.log('world');
- }
- helloworld();
输出
- > "world"
- > "hello"
co 的方式,会先输出"hello"
再输出"world"
。
- function co(gen) {
- var it = gen();
- var ret = it.next();
- ret.value.then(function(res) {
- it.next(res);
- });
- }
- function sayhello() {
- return Promise.resolve('hello').then(function(hello) {
- console.log(hello);
- });
- }
- co(function *helloworld() {
- yield sayhello();
- console.log('world');
- });
输出
- > "hello"
- > "world"
消除回调金字塔
假设sayhello
/sayworld
/saybye
是三个异步函数,用真正的 co 模块就可以这么写:
- var co = require('co');
- co(function *() {
- yield sayhello();
- yield sayworld();
- yield saybye();
- });
输出
- > "hello"
- > "world"
- > "bye"
vmware 4.1版本物理机部署6.0版本OVF模板 报“硬件系列vmx-11不受支持“的解决办法
问题背景,从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 插件安装目录
MAC:
- /Users/jesse/Library/Application Support/Google/Chrome/Default/Extensions/nhdogjmejiglipccpnnnanhbledajbpd/0.0.2_0
windows:
- C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default\Extensions\nhdogjmejiglipccpnnnanhbledajbpd\3.1.4_0
Docker v17.04.0-ce-rc1 发布,应用容器引擎
Docker v17.04.0-ce-rc1 发布了,并将于 2017-04-05 发布 17.04.0-ce 版本。本次更新内容如下:
Client
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
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
Clear stale datapath encryption states when joining the cluster docker/libnetwork#1354
Ensure iptables initialization only happens once docker/libnetwork#1676
Fix bad order of iptables filter rules docker/libnetwork#961
Add anonymous container alias to service record on attachable network docker/libnetwork#1651
Support for com.docker.network.container_interface_prefix driver label docker/libnetwork#1667
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
Topology-aware scheduling #30725
Automatic service rollback on failure #31108
Worker and manager on the same node are now connected through a UNIX socket docker/swarmkit#1828, docker/swarmkit#1850, docker/swarmkit#1851
Improve raft transport package docker/swarmkit#1748
No automatic manager shutdown on demotion/removal docker/swarmkit#1829
Use TransferLeadership to make leader demotion safer docker/swarmkit#1939
Decrease default monitoring period docker/swarmkit#1967
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
下载
deb/rpm install: curl -fsSL https://test.docker.com/ | sh
Linux 64bits tgz: https://test.docker.com/builds/Linux/x86_64/docker-17.04.0-ce-rc1.tgz
Darwin/OSX 64bits client tgz: https://test.docker.com/builds/Darwin/x86_64/docker-17.04.0-ce-rc1.tgz
Linux 32bits arm tgz: https://test.docker.com/builds/Linux/armel/docker-17.04.0-ce-rc1.tgz
Windows 64bits zip: https://test.docker.com/builds/Windows/x86_64/docker-17.04.0-ce-rc1.zip
Windows 32bits client zip: https://test.docker.com/builds/Windows/i386/docker-17.04.0-ce-rc1.zip
What does el5, el6, and el7 mean?
EL is short for Red Hat Enterprise Linux (EL).
EL6 is the download for Red Hat 6.x, CentOS 6.x, and CloudLinux 6.x.
EL5 is the download for Red Hat 5.x, CentOS 5.x, CloudLinux 5.x.
EL7 is the download for Red Hat 7.x, CentOS 7.x, and CloudLinux 7.x.
The UNIXy Varnish Plugins run on all the above platforms.
RC ?
RC=Release Candidate,含义是”发布候选版”,它不是最终的版本,而是最终版(RTM=Release To Manufacture)之前的最后一个版本。广义上对测试有三个传统的称呼:alpha、beta、gamma,用来标识测试的阶段和范围。alpha 是指内测,即现在说的CB,指开发团队内部测试的版本或者有限用户体验测试版本。beta 是指公测,即针对所有用户公开的测试版本。然后做过一些修改,成为正式发布的候选版本时叫做gamma,现在叫做RC(Release Candidate)。
官网tar.gz下载:https://download.docker.com/linux/static/stable/x86_64/
官网安装教程:https://docs.docker.com/engine/installation/linux/centos/#install-from-a-package
下载