vue常用案例

官网

https://cn.vuejs.org/v2/guide/

一、单页面Tab导航栏切换

    
    
    
    


    

        

            

                
                
{{ item.name }}
            
            

        
    

补充案例：底部导航栏路由和图片切换，同时使用router-link和@click点击图标2次才显示，可使用props和$router.push解决
参考文献：https://www.jb51.net/article/160601.htm

// 子组件




// 父组件

二、模拟后端接口，验证用户名是否可用

    
    
    
    


    

        
        用户名：{{ tip }}
    

三、购物车（父子组件传值）

插槽：https://cn.vuejs.org/v2/guide/components-slots.html

    
    
    
    


    

        
我的商品
        
        
        
    
    
    

补充：兄弟组件传值
https://www.cnblogs.com/rich23/p/7110409.html

五、异步操作

promise和ajax使用

query(url){
        let p = new Promise((resolve,reject) => {
            Ajax('get',url,null,success,failed);
            // 返回成功数据
            function success(jsondata){
                let json = JSON.parse(jsondata);
                resolve(json);
            }
            // 返回失败数据
            function failed(){
                reject('服务器错误');
            }
        });
        return p;
    };
    query('http://localhost:3000/data')
        .then(res => {
            // 返回成功数据
            console.log(res);
            // 返回下一次异步调用数据
            return query('http://localhost:3000/data2');
        },rej => {
            // 返回失败数据
            console.log(rej);
        })
        .then(res => {
            console.log(res);
            return query('http://localhost:3000/data3');
        },rej => {
            console.log(rej);
        })
        .then(res => {
            console.log(res);
        },rej => {
            console.log(rej);
        })

// Ajax封装
function Ajax(type, url, data, success, failed){
    // 创建ajax对象
    let xhr = null;
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    } else {
        xhr = new ActiveXObject('Microsoft.XMLHTTP')
    }
    //转化为大写
    type = type.toUpperCase();
    // 用于清除缓存，防止浏览器缓存
    let random = Math.random();
    // 字符串拼接传过来的数据，如'name=zhangsan&'
    if(typeof data == 'object'){
        var str = '';
        for(var key in data){
            str += key+'='+data[key]+'&';
        }
        data = str.replace(/&$/, '');
    }
    // 判断使用方法
    if(type == 'GET'){
        // 根据是否传入数据处理参数显示
        if(data){
            xhr.open('GET', url + '?' + data, true);
        } else {
            xhr.open('GET', url + '?t=' + random, true);
        }
        xhr.send(null);

    } else if(type == 'POST'){
        xhr.open('POST', url, true);
        // 如果需要像html表单那样POST数据，请使用setRequestHeader() 来添加http头
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhr.send(data);
    }
    // 检测状态，处理返回数据
    xhr.onreadystatechange = function(){
        //检测是否已经准备好
        if(xhr.readyState == 4){
            //表示响应准备就绪
            if((xhr.status >= 200&&xhr.status<300)||xhr.status==304){
                //请求成功之后的处理
                success(xhr.responseText);
            } else {
                //处理ajax返回异常的情形
                if(failed){
                    failed(xhr.status);
                }
            }
        }
    }
}

fetch使用
https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch

axios使用
post报错400:https://www.cnblogs.com/chenlw/p/9994891.html
传参：https://blog.csdn.net/zhaofuqiangmycomm/article/details/89479904
官方文档：https://www.kancloud.cn/yunye/axios/234846
vue：https://hacpai.com/article/1567922774522
封装：https://www.cnblogs.com/panax/p/10942889.html
https://www.cnblogs.com/chaoyuehedy/p/9931146.html
async/await使用
https://segmentfault.com/a/1190000007535316

四、后台管理路由

vue-router使用
https://router.vuejs.org/zh/installation.html

五、登录

token：https://blog.csdn.net/c880420/article/details/80346127
完整案例：https://www.cnblogs.com/web-record/p/9876916.html

// 根目录下vue.config.js 解决跨域
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000/api',
        ws: true,
        changeOrigin: true,
        pathRewrite:{
          '^/api': ''
        }
      },    
    }
  }
}

// main.js
import axios from 'axios'
Vue.prototype.$http = axios
// 添加请求头
axios.interceptors.request.use(config => {
    config.headers.Authorization = window.sessionStorage.getItem('token');
    return config;
})

router.beforeEach((to,from,next) => {
    // 登录页无需权限
    if (to.path == '/login') {
        next()
    }else{
        // 获取token
        const token = window.sessionStorage.getItem('token');
        // token不存在直接跳转登录页
        if(!token) return next('/login');
        // 存在放行
        next();
    }
})

// login.vue
this.$http.post('/api/login',data).then(res => {
    if(res.status !== 200){
         // element-ui弹窗
        this.$message.error('登录失败');
    }
    this.$message.success('登录成功');
     // 缓存token
    window.sessionStorage.setItem('token',res.data.token);
    this.$router.push('/home')
})

// 退出，清缓存
window.sessionStorage.clear();
this.$router.push('/login');

六、增删改查

调用后端接口实现图书管理增删改查

https://github.com/mycummity/book

实现功能

• 调用后端接口，实现数据库增删改查并将结果返回给前端

• filter过滤器进行关键字搜索和格式化日期

• watch监听数据变化

• created初始化数据

• directives自定义获取焦点

• computed计算数据

• keydown设置快捷键

• 响应式布局
  https://www.jianshu.com/p/6e77c838ab71
  https://www.cnblogs.com/wgl0126/p/9468804.html
  https://www.cnblogs.com/baiyygynui/p/5903749.html

• 锚链接

navArray: [
        {
          href: "#navTitle1",
          name: "应用简介"
        }
]


          {{item.name}}




      



goAnchor(type) {
      var anchor = this.$el.querySelector(type);
      // chrome
      document.body.scrollTop = anchor.offsetTop - 50;
      // firefox
      document.documentElement.scrollTop = anchor.offsetTop - 50;
}

• props
  https://www.cnblogs.com/xiaohuochai/p/7388866.html

• 适配
  https://blog.csdn.net/weixin_41257563/article/details/97266234
  https://www.cnblogs.com/Anne3/p/11214040.html
  https://www.cnblogs.com/zanguixuan/p/9811167.html