Vue分成四个阶段 第四段~
begin enjoy👇

Vue第四段

mini-ui的使用:

  • mint-ui是一款灰常优秀的Vue客户端UI框架,所谓UI框架就是在客户端开发时,有很多相似的排版效果,因此将这些相似的排版效果公共的全部封装出来,以一种组件的形式来直接使用,因此UI框架也是针对不同前端框架结构来开发设计的。

  • 下载安装mint-ui后就可以直接在代码中直接导入MintUi的关键对象了,进而使用Vue的静态方法use来使用这个中间件了

  • 但是实际开发时,这样直接用use使用mint的话,会把所有mint-ui里的组件全部导入到项目中,但是实际项目开发时有可能不会用那么多的组件,因此这样做是浪费资源的事情,所以优化的方式就是用哪个组件了就导入哪个组件来使用,以下边代码为例

    import Button from 'mint-ui/lib/button';
    Vue.component(Button.name,Button);
    //注意:Lazyload组件需要通过use()方法以中间件的方式
    //经验:因为弹框组件Toast经常在某个事件触发后去执行触发的,所以把它绑定到Vue对象上使用,通过Vue.prototype.$toast=Toast就ok了
    
  • 可是对于Lazyload组件的使用就不能去像上边的方式来引入了,而是可以直接的采用Vueuse()方法来引入使用效果更佳,唯有这一个特殊一点,真正使用这块官网上也有详细解释

vue-preview的使用

  • vue-previewvue的一款优秀的图片预览效果扩展架包,使用方式就是直接导入VuePreview对象后,使用use方法添加到Vue框架中使用即可

  • 使用方式就是,在项目中需要循环创建缩略图的地方,给每个img加上一个preview-imgclass样式,然后在@click里调用$preview.open(索引, 图片集合)

  • 注意:使用vue-preview时,如果接口响应的图片集合数据里没有宽高的字段时,需要自己加个宽高!否则vue-preview没效果!

    当然现在还有新的vue2-preview,可以自行去百度学习,或者npm安装好后,看里边的readMe.md学习

axios的使用

  • axios是一个优秀的基于ajax封装的扩展框架包(架包),解决项目中ajax访问的问题

  • axios的优点有:

    • 基于浏览器模式创建XMLHttpRequest对象
    • NodeJS发出http请求
    • 响应结果接收支持Promise,解决了回调地狱问题
    • 带有请求和响应的Intercept拦截器功能
    • 可以转换请求(Request)参数和响应(Response)结果数据,那么基于拦截器功能,就可以根据判断条件取消请求发送行为
    • 自动转换JSON数据
    • 客户端支持防止XSRF
  • 可以配置proxy代理请求模式

  • 导入Axios对象后,这货不能用use,因为没抱Vue大腿,人家是一个独立的框架,所以要扩展到Vue中使用则需要Vue.prototype.$axios=Axios;这样来做,这样了,就可以在Vue中通过this.$axios来使用

  • 基于上边的使用,可以直接调用get()方法,发送get请求

    this.$axios.get('请求路径地址/:id',{
        //请求参数,可以这样独立配置,结果就是发送请求时,是以?拼接的请求参数,当然也可能是路由路径,那么就用上边方式在请求路径后边加上/:id动态路由参数即可
        params:{
            id:1,
        }
    }).then(response => {
        console.log(response);
    }).catch(err => console.log(err));
    
  • 调用post()方法就可以直接发送post请求,post()方法的第二个参数直接传json做为post请求时的参数,当然动态路由路径参数,也是用和get拼接一样的使用

    什么情况下会用路由路径拼接参数的使用呢?毕竟这个ajax请求,不是我们说的算的!后端给的接口文档是啥?就照着啥弄即可!后端是大佬!

  • 如果是post请求的话,可以配置对请求参数的转换处理选项

    this.$axios.post(
        '请求路径',
        {参数},
    	{
            //axios默认的请求参数是以"application/json",服务端大多喜欢"application/x-www-form-urlencoded"
            transformRequest(data){
                //这个data就是请求参数的原值,有时后端直接传json过去他们不会解析时,会让你在这里转成拼接字符串传过去,唉,后端呀!!!
                var queryString = '';
                for(const key in data){
                    queryString+=`${key}=${data[key]}&`;
                }
                queryString = querString.substring(0,queryString.lastIndexOf('&'));
                return queryString;
            },
            transformResponse(data){
                return JSON.stringfy(data);
            },
        },
    ).then(res=>{});
    
  • 不管是get还是post请求,axios里都可以使用transformResponse配置项来转换相应数据的类型

    this.$axios.post(
        '请求路径',
        {参数},
    	{
            transformResponse(data){
                //后端响应的数据如果是非json类型,而是json的字符串类型了,那么就需要在这里转数据类型使用后,再在then()里使用了
                return JSON.parse(data);
            },
        },
    );
    
  • 从上边两点可以看出axios自带了各种请求方法。是的,没错!不仅仅有getpost请求,还有putdelete请求方法,使用方式大同小异,要根据后端给的接口文档来判断使用

  • axios有很多通用配置,意思就是先配置axios请求对象,然后再发起请求时,有些功能可以直接使用了。配置方式有两种,一种是通过axios.create()方法创建出来一个新的axios对象,在create时传入一个json参数来进行配置,例如下边的

    const axiosInstance = this.$axios.create({
        //baseURL是基本请求路径配置
        baseURL:'请求路径的根路径配置',
        //请求时长,毫秒为单位,意思就是在规定的毫秒数内如果接口路径未响应结果数据,则本次请求自动终止
        timeout:2000,
        //请求头的配置项
        //类似原生的xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')    token令牌
        headers:{
            'Content-Type':'application/x-www-form-urlencoded',
        },
        //是否允许跨域接收cookie数据信息,配合xsrfCookieName配置项来防止xsrf攻击使用
        //基于原生ajax的封装配置项  
        //其作用就是是否允许接收到服务端跨域响应的一些资源数据,包括cookie等等
        withCredentials:false,
        //配置xsrf令牌值的cookie名称
        xsrfCookieName:'XSRF-TOKEN',
        //配置http头部里携带的xsrf令牌值名称
        xsrfHeaderName:'X-XSRF-TOKEN',
        //httpAgent和httpsAgent的作用是将本次请求做为一个http代理方式的请求配置,意思就是说把axios模仿成一个浏览器来请求
        httpAgent:new http.Agent({keepAlive:true}),
        httpsAgent:new https.Agent({keepAlive:true}),
        //如果配置了httpAgent活httpsAgent后,就可以配置proxy代理跨域请求操作了,当然了你所使用的代理的IP和端口是能够帮你跨域的,不能了的话,即便配置了也没意义,所以说跨域还是后端的事,他们不给你跨域了就是他们的程序问题,让他们改bug!!!
        proxy:{
            host:'127.0.0.1',
            port:9000,
            auth: {
          		username: 'mikeymike',
          		password: 'rapunz3l'
        	}
        },
    });
    
  • 如果不想上边那样使用create()方法来实例化一个新的Axios对象来做全局配置了,那么也可以像下边这样来做全局配置

    this.$axios.defaults.baseURL='';
    this.$axios.get();
    
  • axios拦截器的使用,直接看下边代码

    //拦截器可以配置在整个项目的`main.js`入口里,包括配置项的使用也是
    Axios.defaults.baseURL = '请求路径根路径的配置';
    //请求前的拦截器,就是在请求前会执行这里边的代码
    Axios.interceptors.request.use((config) => {
        //请求前可以考虑打开loading数据加载中的友好提示图标
        //可以利用mint-ui里的Indicator组件来做
        //将其他配置项返回出来继续传递
        return config;
    });
    //响应后的拦截器,就是在请求响应成功后会触发执行这里边的代码
    Axios.interceptors.response.use((config) => {
        //可以在这里将加载数据时的loading图标给关闭掉即可
        return config;
    });
    
  • axios可以合并请求,意思就是说一次发送多个请求,那么返回结果了也要分发响应接收处理

    //在all()方法里,通过传递个数组,来合并多个不同的请求
    this.$axios.all([
        this.$axios.get('请求路径1'),
        this.$axios.get('请求路径2'),
    ]).then(this.$axios.spread((response1,response2) => {
        //利用spread()方法则可以分发响应结果的接收
     	console.log(response1);
        console.log(response2);
    }).catch(err => console.log(err));
    

项目基本环境的搭建

  • 跟着我的节奏,来一起搭建项目开发时的基本目录环境
  • 最后则是如果你不想自己手工搭建了,恭喜你,可以使用vue脚手架工具来初始化项目环境
    • npm i vue-cli -g装一个全局的vue脚手架工具
    • 在某个目录里,打开命令窗口,在里边输入vue init webpack 项目名
    • 再然后就是各个配置项的配置弄好就完事了!大功告成!

posted @ Zycin (非转载 来自个人学习资料整理)