Vue全家桶

Vue全家桶

vue-cli:用脚手架搭建项目

vue:mvvm模式开发，数据上绑双定，页面渲染

vue-router:定义路径跳转

vuex:前端数据存储

axios:ajax技术：用来链接后台

element-ui:用来制作html和css,完成响应式和动画

子路由：

var routers=[

{path:"/",components:Center}，

{path:"/",components:Main

Children:[

{path:"/a",components:Work1}，

{path:"/b",components:Work2}，]

    }

]

js下跳转路由

<router-link:to=”{path:’/index’,query:{name:”lisi”,age:23}}}></router-link>

Router.push({

path:’index’,

query:{name:”lisi”,age:23}

})

axios技术

axios用来链接后台，执行ajax,封装了promise,处理了兼容性，地域回调，可以执行多个回调函数，可在node中发送http请求，自动转化json数据，防止XSRF攻击

请求方法

axios.get(路径,参数)

axios.post(路径,参数)

axios.delete(路径,参数)

axios.head(路径,参数)

axios.put(路径,参数)

axios.patch(路径,参数)

axios.options(路径,参数)

axios.request(参数)

使用方式

npm install axios --save安装axios

npm install axios --S安装axios

shift+鼠标右键 选择打开命令行窗口，直接打开指定路径位置

get请求方式

 axios.get(路径，{参数：值})

    .then(function(res){

      console.log(res.data)

      th.arr=res.data

    })

    .catch(function(error){

      console.log(error)

    })

  }

request请求方式

axios.request({

      url:"/api/News/new_list",

      mothod:"get",

      data:{type:3,page:20},

    }).then(function(res){

      console.log(res)

    }).catch(error=>{ console.log(error) })

  }

}

request的参数

url定义路径

method http请求方式

data 传给后台的变量

headers:{Content-Type:’application/json’}自定义请求头

params:{type:3,page:20}发送无格式对象体数据

timeout:1000指定请求超时的毫秒数

withCredentials:true跨域请求是否需要凭证

responseType:’json’服务器返回的数据类型

json,ArrayBuffer,blob,document,text,stream

responseEncoding:”utf8”响应字符集

处理跨域

在项目根目录下，定义一个vue.config.js文件

在文件下定义代理的地址

Module.exports={

 devServer:{

        proxy:{

            '/api':{

              target:"https://api.isoyu.com/",

              changeOrigin:true,

              ws:true,

              sucure:true,

              pathRewrite:{

                '^/api':''

              }

            }

          }

    }

}

使用的文件当中

import axios from 'axios'

axios.defaults.baseURL="/api"

什么是跨域

同源策略

要求访问的地址必须协议、端口号、域名相同，为了保证用户信息的安全，防止恶意的窃取数据，禁止不同域直接进行js交互

限制：无法获取dom，ajax不能发送，cookie、localStorage、

indexDB无法读取

解决跨域的方法：

1.document.domain+iframe执行跨域

var iframe=document.getElementById(“iframe”)

var win=iframe.contentWindow

iframe.contentWindow.document

2.window.name+iframe解决跨域

window.name=”名字”

window.location=”路径”

另一个页面直接获取window.name

3.location.hash+iframe解决跨域

var iframe=document.getElementById(“iframe”)

location.hash

4.window.postMessage解决跨域

window.postMessage(“发送内容”)

另一个页面

window.onMessage=function(e){}

5.web sockets 解决跨域

var s=new WebSockt(“路径”)

s.send(“发送内容”)

另一个页面

window.onMessage=function(e){}

6.jsonp与ajax链接 解决跨域

function fun(red){}

script.callback=fun

7.跨域资源共享(CORS)

var xdr=new XDomainRequest()

xdr.open(get,路径)

xdr.send()

8.nginx服务器 解决跨域

需要在服务器配置代理路径，修好服务器的配置文件

conf文件

server{

listen 8080

server_name wasad.com

location{.....}

}

http://www.baidu.com/ww/b.html:8080#login?name=12

http://www.baidu.com/ww/c.html:8080#login?name=12

http://www.baidu.com/ww/cb.html:8080#res?name=12  http://www.baidu.com/ww/b.html:8081#login?name=12--不能

https://www.baidu.com/ww/b.html:8080#login?name=12--不能

http://www.bdfs.com/ww/b.html:8080#login?name=12--不能

vuex状态管理模式

vuex是vue状态管理库，用来存储前端变量，保证数据的一致性，定义的变量是全局的，供给vue下的所有组件使用，类似于html5本地存储的sessionStorage

安装vuex

  npm install vue@next --save安装vue3.0的vuex

npm install next --save 安装vue2.0的vuex

属性和方法

1. state存储变量
2. getters 获取数据的函数,也可以叫做计算函数
3. mutations变更函数,是同步函数执行增删改功能
4. action处理函数，是异步函数，可以提交mutations的数据
5. modules:分割函数，为vuex创建子模块，在开发大型项目时，把变量分别存储在若干个子模块中，不会太臃肿
6. this.$store.state.变量 获取vuex的变量
7. this.$store.getters.fun调用get函数
8. this.$store.commit(函数名，参数值)
9. this.$store.dispath(函数名)

getter定义方式

getters:{

        getnum:function(state){

            return state.num+20

        }

    }

mutations定义方式

    mutations:{

        setnum:function(store,parms){

            console.log("setnum被调用了")

            store.num=parms

        }

    }

actions定义方式

    actions:{

        addnum:function({commit}){

            setTimeout(function(){

                console.log("addnum被调用了")

                commit("setnum",66)

            },1000)

        }

    },

modules定义方式

    modules:{

        a,b

    }

var a={state:{a:1}}

var b={state:{b:1}}