前端常见跨域解决方案
前端常见跨域解决方案什么是跨域？跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。 广义的跨域： 1231.) 资源跳转： A链接、重定向、表单提交2.) 资源嵌入： <link>、<script>、<img>、<frame>等dom标签，还有样式中background:url()、@font-face()等文件外链3.) 脚本请求： js发起的ajax请求、dom和js对象的跨域操作等 其实我们通常所说的跨域是狭义的，是由浏览器同源策略限制的一类请求场景。 什么是同源策略？同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。 同源策略限制以下几种行为： 1231.) Cookie、LocalStorage 和 IndexDB 无法...
跨域CORS原理
跨域CORS原理上篇博客介绍了JSONP原理，其不足，就是只能使用GET提交，若传输的数据量大，这个JSONP方式就歇菜了。那这篇博客就来介绍另一种跨域介绍方案—CORS。 相对JSONP，CORS支持POST提交，并且实施起来灰常简单，CORS原理只需要向响应头header中注入Access-Control-Allow-Origin，这样浏览器检测到header中的Access-Control-Allow-Origin，则就可以跨域操作了。 CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。 它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。 一、简介CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。 整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出...
pjax局部页面刷新
pjax = pushState + ajaxpjax是一个jQuery插件，它通过ajax和pushState技术提供了极速的（无刷新ajax加载）浏览体验，并且保持了真实的地址、网页标题，浏览器的后退（前进）按钮也可以正常使用。 pjax的工作原理是通过ajax从服务器端获取HTML，在页面中用获取到的HTML替换指定容器元素中的内容。然后使用pushState技术更新浏览器地址栏中的当前地址。以下两点原因决定了pjax会有更快的浏览体验： 不存在页面资源（js/css）的重复加载和应用； 如果服务器端配置了pjax，它可以只渲染页面局部内容，从而避免服务器渲染完整布局的额外开销。 项目现状jquery-pjax的维护方向：可能会继续修复重要的bug，但其功能不会再发生变化，即不会再实现新功能，也不会再扩展现有功能。 安装pjax依赖于jQuery 1.8或者更高版本。 通过npm安装1$ npm install jquery-pjax 通过js引入下载 jquery.pjax.js 插件并在页面中引用： 1curl -LO https://raw....
JS中iframe子页面与父页面之间通信
JS中iframe子页面与父页面之间通信 iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接，通信方式也不同 原文：https://www.cnblogs.com/wxlevel/p/7646943.html 一、同域下父子页面的通信父页面parent.html1234567891011121314151617<html><head> <script type="text/javascript"> function say(){ alert("parent.html"); } function callChild(){ myFrame.window.say(); myFrame.window.document.getElementById("button").value="调用结束"; ...
vue .sync修饰符用法
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152<!DOCTYPE html><html lang="zh-cn"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="./fontFace.css"> <script src="../vue2.6.js"></script></head><body> <div id=&...
vue-props
1.v-bind 是用来绑定属性的和 props 传递对象或值使用的「props 默认传递的是字符串，如果想要传值、对象，那么就要使用 v-bind」 2.如果 props 中声明的是数据是驼峰标识，那么传值的时候就要使用 - 标识 3.如：props 中的数据是 myData 那么在组件中传值时就要使用 my-data="" ,如果没有使用驼峰那不牵扯 4.props 用来定义一些默认值，我们不能直接修改 props 的值，只能通过 data 来间接修改 5.要写一个"合格"的 vue 组件，那么 props 最好加上验证 6.props 也可以用来传递方法，达到父组件调用子组件方法并且回调的目标 7.vue 中的方法建议写在 methods 中，无参方法调用时就不要加括号 链接：https://www.jianshu.com/p/87ff57037d9c
vue添加全局方法属性
在使用vue构建一些大型项目的时候，会发现许多组件会共用到一些函数或常量，我们需要把它提取出来，每次需要的时候调用一次就可以了，避免每个组件都重新写再一篇的麻烦。这就需要写一个插件，在Vue.prototype上挂载我们需要的全局方法属性，比如Vue.prototype.const={}就是项目中的常量，Vue.prototype.utils={}就是项目的方法。下面就详细介绍下基于vue-cli的架子如何开发。 方法一1、新建插件文件Plugins.js：12345678910111213141516171819202122232425262728293031323334353637383940export default{ install(Vue){ // 形式一 Vue.prototype.$const={//常量 URL:"http://www.fly63.com/",//项目请求接口的url } Vue.prototype.$...
vue-computed
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869<html> <head> <script src="https://jsd.012700.xyz/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> computed属性计算 <div> val3: {{ val3 }} </div> <div> val4: {...
vue-methods
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061<html> <head> <script src="https://jsd.012700.xyz/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> methods <div> test1(): {{ test1() }} {{ test2() }} {{ test3() ...
vue-watch
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081<html> <head> <script src="https://jsd.012700.xyz/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> 实际开发中，watch会随着组件一并销毁。 </div> </body> <script> var app = new Vue({ el: '#app', data: {...
Vue-cli3搭建一个Vue项目
Vue-cli3搭建一个Vue项目1、下载安装Node.js下载地址：https://nodejs.org/en/download/ ，选择合适自己的版本下载即可。 安装Node.js会默认安装npm（包管理工具） 2、安装vue-cli3脚手架如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g卸载它。 12npm install -g @vue/cli# vue --version 3、创建项目1234# vue create --helpvue create hello-world# 图形界面vue ui 4.运行项目1npm run serve 5.编译项目1npm run build
Vue实例中data属性的三种写法及区别
Vue实例中data属性的三种写法及区别 1、第一种 12345678<script type="text/javascript"> var app=new Vue({ el:'#app', data:{ isLogin: false } })</script> 2、第二种 12345678910<script type="text/javascript"> var app=new Vue({ el:'#app', data: function(){ return { isLogin: false } } })</script> 3、第三...
Vue最简单例子
IDE:HBuilderX Vue最简单例子html1234567891011121314<html> <head> <link rel="stylesheet" href="index.css"> <script src="https://jsd.012700.xyz/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> {{ message }} </div> <script src="index.js"></script> </body></html> css1234...
vue后台模板
d2admind2admin官方文档https://doc.d2admin.fairyever.com/zh/ d2admin源码https://github.com/d2-projects/d2-admin beego + d2adminhttps://github.com/Qsnh/goa 1234567git clone https://github.com/d2-projects/d2-admin.gitcd d2-adminnpm installnpm run dev vue-element-adminhttps://github.com/PanJiaChen/vue-element-admin https://panjiachen.github.io/vue-admin-template/ 精简版 https://github.com/dongdong-cloud/dd-admin [*] vue antdhttps://github.com/vue-alain/vue-alain https://github.com/sendya/ant-design-pro-v...
Vue-cli webpack配置分析
Vue-cli webpack配置分析分析不包括check-versions.js文件，因为check-versions.js是检测npm和node版本，不涉及webpack，所以就没有对check-versions.js进行分析。同时，也不包括测试部分的代码，该分析只是针对开发和生产环境的webpack配置进行分析。 vue-cli 版本2.8.1 入口从package.json可以看到开发和生产环境的入口。 1234"scripts": { "dev": "node build/dev-server.js", "build": "node build/build.js"} 开发环境开发环境的入口文件是 build/dev-server.js。 dev-server.js该文件中，使用express作为后端框架，结合一些关于webpack的中间件，搭建了一个开发环境。 1234567891011121314151617181920212...
Vue-cli搭建一个Vue项目
Vue-cli搭建一个Vue项目1、下载安装Node.js下载地址：https://nodejs.org/en/download/ ，选择合适自己的版本下载即可。 安装Node.js会默认安装npm（包管理工具） 2、安装vue-cli脚手架① 使用npm（需要安装node环境）全局安装webpack 123npm install -g webpacknpm install -g webpack-cliwebpack -v ② 全局安装vue-cli，在cmd中输入命令: 1npm install --global vue-cli 3、创建项目1vue init webpack test 项目配置选择 Project name (test)：项目名称，直接回车，按照括号中默认名字,注意这里的名字不能有大写字母，如果有会报错Sorry, name can no longer contain capital letters），阮一峰老师博客为什么文件名要小写 ，可以参考一下。 Project description (A Vue.js project)： 项目描述，也可直接...
前端vue
VUE资源汇总:https://github.com/vuejs/awesome-vue https://github.com/opendigg/awesome-github-vue 中文 基于vue的库https://cn.vuejs.org/ vue官方中文网站 https://panjiachen.github.io/vue-element-admin-site/zh/ vue后台框架(github)https://gitee.com/liuyuantao/vue-element-admin vue后台框架(gitee) https://element.eleme.cn/#/zh-CN 基于Vue2.0的桌面端组件库 https://iviewui.com/ Vue UI组件库 https://at-ui.github.io/at-ui/#/zh Vue UI组件库 https://vuetifyjs.com/zh-Hans/ Vue UI组件库 https://dafrok.github.io/vue-baidu-map/#/zh/index Vue2.x的百度地图组件 ...
ab压力测试
ab压力测试1. ab工具下载windows：https://www.apachehaus.com/cgi-bin/download.plx 2. ab参数说明有关 ab 命令的使用，我们可以通过帮助命令进行查看。如下： 123456789101112131415161718192021222324252627282930313233343536373839404142$ ./ab.exeC:\Users\Windows10\Desktop\Apache24\bin\ab.exe: wrong number of argumentsUsage: C:\Users\Windows10\Desktop\Apache24\bin\ab.exe [options] [http://]hostname[:port]/pathOptions are: -n requests Number of requests to perform -c concurrency Number of multiple requests to make at a time -t ti...
hey压力测试
hey压力测试1. hey工具下载https://github.com/rakyll/hey 2. hey参数说明有关hey命令的使用，我们可以通过帮助命令进行查看。如下： 12345678910111213141516171819202122232425262728293031323334Usage: hey [options...] <url>Options: -n Number of requests to run. Default is 200. -c Number of workers to run concurrently. Total number of requests cannot be smaller than the concurrency level. Default is 50. -q Rate limit, in queries per second (QPS) per worker. Default is no rate limit. -z Duration of application to send requ...
搭建个人博客
ubuntu 16.04 x64 mysql5.7 php7.0 apache2 阿里云服务器首先要sudo apt update 1.安装MySql安装的版本最好是5.7+ 1sudo apt-get install mysql-server 123456789101112131415161718192021#方法1：用SET PASSWORD命令mysql> set password for root@localhost = password('123');#方法2：用mysqladminmysqladmin -uroot -p123456 password 123#方法3：用UPDATE直接编辑user表#对于5.7以下版本：mysql> use mysql;mysql> update user set password=password('123') where user='root' and host='localhost';mysql> flush privi...
