前端常见跨域解决方案
前端常见跨域解决方案什么是跨域？跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。
广义的跨域：
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.gi ...
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=&qu ...
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.$ut ...
vue-methods
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> methods <div> test1(): {{ test1() }} {{ test2() }} {{ test3() ...
vue-computed
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> computed属性计算 <div> val3: {{ val3 }} </div> <div> val4: { ...
vue-watch
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081<html> <head> <script src="https://cdn.jsdelivr.net/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://cdn.jsdelivr.net/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-vue ...
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的中间件，搭建了一个开发环境。
123456789101112131415161718192021222 ...
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的百度地图组件
ht ...
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 time ...
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 reques ...
搭建个人博客
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 privile ...
