vue 二

脚手架

1.脚手架的本质：一套文件架构
2.怎样安装脚手架：
npm install -g @vue/cli

创建项目：
vue create 项目名（不能包含大写字母）
选择好以后就回车
根据需要用空格进行选择

文件结构
public：不会编译，静态的

src：会编译
assets：放资源文件（css、js,less等文件）;
components：组件文件；
view：页面级组件；
api：接口
App.vue：根组件；
main.js：入口文件

package.json

node_modules

3.创建组件

//只能有一个根元素

4.使用组件
导入组件
import 名称 from 地址

注册组件
全局注册：Vue.component()
局部注册：components:{
名称:名称2
}

使用组件
<名称 />

为什么组件中的data要写一个function
参考：https://blog.youkuaiyun.com/adley_app/article/details/95939885

5.组件的传值
组件传值：父子关系
属性向下流，事件向上走

父传子：props属性

Vue.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

子传父事件：
父组件中：给子组件添加事件，以及事件处理程序
子组件中：使用this.$emit触发事件，以及传值
https://www.cnblogs.com/fundebug/p/10884896.html

6.slot插槽
http://bugshouji.com/bbs-read-run?tid=333
单个插槽：子组件标签之间的内容全部放到
solt中
具名插槽：子组件给solt标签，分别添加name属性；父组件给分发的标签添加solt属性

分发内容的作用域：在哪里写的DOM元素，就在哪里去定义事件
当没有分发内容时的提示：solt标签里的内容，将在没有分发内容时显示

7.axios（ajax i/o system）
7.1向服务器请求数据的一种技术，不止可以用在vue中，也可以用在react，nodejs等

7.2安装：npm i axios

7.3使用：
在main.js中导入：import Axios from ‘axios’
放到原型上（配置）：Vue.prototype.$axios=Axiosaxios的使用：this.$axios.get();
this.$axios.post();this.$axios.put();
…
注意：axiox中，get,post怎么传参
get,post怎样修改请求头

created () {
    this.$axios.get('/product.json').then((res) => {
      console.log(res)
    }).catch((err) => {
      console.log(err)
    })
  }

get方式的传参
components/HelloWorld.vue：
直接url后面加参数
（1）url?id=2&&name=bijiben

    this.$axios.get('productDetails?id=5')

params属性传参
（2）url,{
params:{
id:2,
name:‘xiaochen’
}
}
post方式传参：
（1）以data的方式

 this.$axios({
      url: 'http://localhost:9999/productDetail',
      method: 'post',
      headers: {
        'Content-Type': 'application/json'
      },
      data: {
        user: 'doubleyong',
        pwd: '123'
      }
    }).then((res) => {
      console.log(res)
    }).catch((err) => {
      console.log(err)
    })
    //写法二：data方式
this.$axios.post('/api/user/login',{username: this.user, pwd: this.pwd }),
 {
   headers: {
     'Content-Type': 'application/json'
   }
 }).then((res) => {
 console.log(res)


 this.$axios.post('http://localhost:9999/productDetail', {
      user: 'doubleyong',
      pwd: '123'
    },{
      params: {
        id: 123
      },
      headers: {
        'Content-Type': 'application/json'
      }
    }).then(function (res) {
       console.log(res)
    })

（2）以url的方式（params）

    this.$axios({
   url: '/api/user/login' ,
   method: 'post',
   headers: {
      'Content-Type': 'application/json'
   },
   params:{
      username: this.user,
      pwd: this.pwd
   }
}).then((res) => {
  console.log(res)
})

拦截器的使用

1 请求拦截
通常用于显示loading组件，及添加token等操作

// 拦截Axios发起的所有请求，给请求添加token
Axios.interceptors.request.use(
  config => {
    vm.$store.dispatch('loadingStart'); // 显示loading组件
    if (store.getters.getToken) {  // 判断是否存在token，如果存在的话，则每个http header都加上token
       config.headers['Authorization'] = store.getters.getToken;
    }else{
       config.headers['Authorization'] = '';
    }
    return config;
  },
  err => {
    return Promise.reject(err);
  });

Axios的封装

import Axios from 'axios'

// const ConfigBaseURL = 'https://localhost:9999/'
// 使用create方法创建axios实例
const Service = Axios.create({
  // baseURL: ConfigBaseURL, // 1. 设置默认地址
  timeout: 7000 // 2. 请求超时时间

})

// 3. 给POST请求添加请求头设置（不同项目，值不一样）
Service.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'

Service.interceptors.request.use(config => {
  console.log('请求来了')
  return config
}, err => {
  console.log(err)
})

Service.interceptors.response.use(config => {
  console.log('响应来了')
  return config
}, err => {
  console.log(err)
})

export default Service

扩展

axios中请求参数为formData时怎么传参？
http://bugshouji.com/bbs-read-run?tid=1202

Axios 参数问题，只需要值的情况（不传对象）
https://blog.youkuaiyun.com/yangyangkl123/article/details/109022628

vue中get请求如何传递数组参数
https://blog.youkuaiyun.com/yangyangkl123/article/details/108997644

跨域

1.什么是跨域？
协议，域名，端口三者有一个不一样，则为跨域
2.为什么要有跨域
http://bugshouji.com/bbs-read-run?tid=337 （同源策略）
3.跨域的实现
三种方案：

1. 通过PHP设置响应头允许跨域

header(“Access-Control-Allow-Origin:*”); // 允许任何来源
 header(“Access-Control-Allow-Origin:http://local.com”); //只允许来自域名http://local.com的请求

2. JSONP(只get请求；原理：回调函数)
   http://bugshouji.com/bbs-read-run?tid=108
3. 通过PHP做代理请求第三方APi接口

//方法一：服务端解决跨域(属于XHR2跨域)
**nodejs 中cors跨域**
 myapp.all('*', function(req, res, next) {
     res.header("Access-Control-Allow-Origin", "*");
     res.header("Access-Control-Allow-Headers", "X-Requested-With,X_Requested_With,Content-Type");
    // res.header("Content-Type", "application/json;charset=utf-8");  //注，如果包括页面等非json, 不要这句
     next();
 });