Vue webAPP首页开发（四）

接上篇 https://www.cnblogs.com/chenyingying0/p/12635080.html

上拉加载更多

base/scroll/index.vue

<template>
    <!-- wiper会实例化构造函数，生成swiper实例 -->
    <!-- ref="swiper"能够获取到这个swiper实例 -->
    <swiper :options="swiperOption" ref=‘swiper‘>
        <div class="mine-scroll-pull-down" v-if="pullDown">
            <!-- ref="pullDownLoading" -- 获取下拉的loading -->
            <me-loading :text="pullDownText" inline ref="pullDownLoading" />
        </div>
        <swiper-slide>
            <slot></slot>
        </swiper-slide>
        <div class="mine-scroll-pull-up" v-if="pullUp">
            <!-- ref="pullUpLoading" -- 获取上拉的loading -->
            <me-loading :text="pullUpText" inline ref="pullUpLoading" />
        </div>
        <div class="swiper-scrollbar" v-if="scrollbar" slot="scrollbar"></div>
    </swiper>
</template>

<script>
// 组件首字母大写，否则会报错
import {Swiper,SwiperSlide} from ‘vue-awesome-swiper‘;
import MeLoading from ‘base/loading‘;

import {
    PULL_DOWN_HEIGHT,
    PULL_DOWN_TEXT_INIT,
    PULL_DOWN_TEXT_START,
    PULL_DOWN_TEXT_ING,
    PULL_DOWN_TEXT_END,
    PULL_UP_HEIGHT,
    PULL_UP_TEXT_INIT,
    PULL_UP_TEXT_START,
    PULL_UP_TEXT_ING,
    PULL_UP_TEXT_END
} from ‘./config‘;

export default {
    name:"MeScroll",
    components:{
        Swiper,
        SwiperSlide,
        MeLoading
    },
    props:{//过滤器
       scrollbar:{
           type:Boolean,
           default:true
       },
       data:{//热门推荐加载完成后传递过来的recommends数据
           type:[Array,Object]
       },
       pullDown:{//是真就开启下拉刷新
           type:Boolean,
           default:false
       },
       pullUp:{//是真就开启下拉加载
           type:Boolean,
           default:false
       }
    },
    data(){
        return {
            pulling:false,//是否正在下拉
            pullDownText:PULL_DOWN_TEXT_INIT,//设置下拉初始化文字
            pullUpText:PULL_UP_TEXT_INIT,//设置上拉初始化文字
            swiperOption:{
                direction:‘vertical‘,//垂直方向
                slidesPerView:‘auto‘,//一次显示几张
                freeMode:true,//任意滑动多少距离
                setWrapperSize:true,//根据内容设置容器尺寸
                scrollbar:{
                    el:this.scrollbar?‘.swiper-scrollbar‘:null,
                    hide:true //滚动条自动隐藏
                },
                on:{
                    //swiper配置时会触发sliderMove方法，这里调用时执行自定义的scroll方法
                    sliderMove:this.scroll,
                    touchEnd:this.touchEnd//touchEnd是swiper提供的滚动结束的函数，this.touchEnd是我们自己写的函数
                }

            }
        }
    },
    methods:{
        update(){//不知道怎么写就去swiper官网查api
            //console.log(this.$refs.swiper);//打印swiper实例

            this.$refs.swiper && this.$refs.swiper.$swiper.update();//调用swiper.update()更新滚动条
        },
        scroll(){
            const swiper=this.$refs.swiper.$swiper;

            //如果正在下拉中，不会再次执行
            if(this.pulling) return;

            //console.log(swiper.translate);//打印出滚动条滚过的距离
            if(swiper.translate>0){//下拉
                if(!this.pullDown){//如果不需要下拉刷新
                    return;
                }
                if(swiper.translate>PULL_DOWN_HEIGHT){
                    this.$refs.pullDownLoading.setText(PULL_DOWN_TEXT_START);
                }else{
                    this.$refs.pullDownLoading.setText(PULL_DOWN_TEXT_INIT);
                }
            }else if(swiper.isEnd){//上拉
                if(!this.pullUp){
                    return;
                }

                //是否达到上拉的触发条件
                //swiper的位移加上swiper的高度（617px）-50px的值如果大于当前内容高度
                //swiper.translate这个属性可以获取到wrapper的位移，其实可以理解为滚动条滚动的距离
                //swiper.height这个属性获取swiper容器的高度， 也就是显示区域的高度
                //PULL_UP_HEIGHT是我们设置的一个值。为了让页面不是到达最低部的时候，可以提前加载内容
                //parseInt(swiper.$wrapperEl.css(‘height‘))是wrapper的HTML元素的height属性， 也就是所有内容的高度
                const isPullUp=Math.abs(swiper.translate)+swiper.height-PULL_UP_HEIGHT>parseInt(swiper.$wrapperEl.css(‘height‘));

                if(isPullUp){//开始上拉
                    this.$refs.pullUpLoading.setText(PULL_UP_TEXT_START);
                }else{//保持初始化
                    this.$refs.pullUpLoading.setText(PULL_UP_TEXT_INIT);
                }
            }
        },
        touchEnd(){
            const swiper=this.$refs.swiper.$swiper;

            //如果正在下拉中，不会再次执行
            if(this.pulling) return;           

            if(swiper.translate>PULL_DOWN_HEIGHT){//如果距离大于设定的距离
                if(!this.pullDown){//如果不需要下拉刷新
                    return;
                }
                this.pulling=true;

                swiper.allowTouchMove=false;//禁止触摸
                swiper.setTransition(swiper.params.speed);//设置初始速度
                swiper.setTranslate(PULL_DOWN_HEIGHT);//移动到设定的位置（拖动过度时回到设置的位置）
                swiper.params.virtualTranslate=true;//定住不给回弹
                this.$refs.pullDownLoading.setText(PULL_DOWN_TEXT_ING);//设置正在刷新中的文字
                this.$emit("pull-down",this.pullDownEnd);//触发消息，传递结束下拉的函数
            }else if(swiper.isEnd){//上拉
                //是否达到上拉的触发条件
                const isPullUp=Math.abs(swiper.translate)+swiper.height-PULL_UP_HEIGHT>parseInt(swiper.$wrapperEl.css(‘height‘));

                if(isPullUp){//开始上拉
                    if(!this.pullUp){//如果不需要上拉刷新
                        return;
                    }

                    this.pulling=true;

                    swiper.allowTouchMove=false;//禁止触摸
                    swiper.setTransition(swiper.params.speed);//设置初始速度
                    swiper.setTranslate(-(parseInt(swiper.$wrapperEl.css(‘height‘))+PULL_UP_HEIGHT-swiper.height));//超过拉动距离时回弹
                    swiper.params.virtualTranslate=true;//定住不给回弹
                    this.$refs.pullUpLoading.setText(PULL_UP_TEXT_ING);//设置正在刷新中的文字
                    this.$emit("pull-up",this.pullUpEnd);//触发消息，传递结束下拉的函数
                }
            }
        },
        pullDownEnd(){
            const swiper=this.$refs.swiper.$swiper;

            this.pulling=false;

            this.$refs.pullDownLoading.setText(PULL_DOWN_TEXT_END);//设置加载结束后的文字
            swiper.allowTouchMove=true;//可以触摸
            swiper.setTransition(swiper.params.speed);//设置初始速度
            swiper.params.virtualTranslate=false;//可以回弹
            swiper.setTranslate(0);//移动到最初的位置
        },
        pullUpEnd(){
            const swiper=this.$refs.swiper.$swiper;

            this.pulling=false;

            this.$refs.pullUpLoading.setText(PULL_UP_TEXT_END);//设置加载结束后的文字
            swiper.allowTouchMove=true;//可以触摸
            swiper.params.virtualTranslate=false;//可以回弹
        }
    },
    watch:{//检测数据变化的事件
        data(){
            this.update();//data数据变化时执行update函数
        }
    }
}
</script>

<style lang="scss" scoped>
    @import ‘~assets/scss/mixins‘;

    .swiper-container{
        width:100%;
        height:100%;
        overflow:hidden;

        & .swiper-slide{
            height:auto;
        }
    }
    //默认是不显示的
    .mine-scroll-pull-down{
        position:absolute;
        left:0;
        bottom:100%;
        width:100%;
        height:80px;
    }
    .mine-scroll-pull-up{
        position:absolute;
        left:0;
        top:100%;
        width:100%;
        height:30px;
    }

</style>

base/scroll/config.js

// 下拉相关常量
export const PULL_DOWN_HEIGHT=100;
export const PULL_DOWN_TEXT_INIT=‘再拉，再拉就刷新给你看‘;
export const PULL_DOWN_TEXT_START=‘够了啦，松开人家嘛‘;
export const PULL_DOWN_TEXT_ING=‘刷的好累呀，喵~‘;
export const PULL_DOWN_TEXT_END=‘刷新完啦‘;

// 上拉相关常量
export const PULL_UP_HEIGHT=50;
export const PULL_UP_TEXT_INIT=‘上拉初始文本‘;
export const PULL_UP_TEXT_START=‘上拉开始文本‘;
export const PULL_UP_TEXT_ING=‘正在上拉中‘;
export const PULL_UP_TEXT_END=‘上拉结束文本‘;

pages/home/index.vue

<template>
    <div class="home">
        <header class="g-header-container">
            <!-- 没有内容自闭合即可-->
            <home-header/>
        </header>
        <!-- 滚动条接收到数据后开始更新 -->
        <!-- pullDown是布尔值，可以使用简写直接传入，不加冒号 -->
        <!-- 接收到pull-down消息后，触发pullToRefresh方法 -->
        <me-scroll :data="recommends" pullDown pullUp @pull-down="pullToRefresh" @pull-up="pullToLoadMore">
            <home-slider ref="slider" />
            <home-nav />
            <!-- 接收热门推荐加载完毕的消息 -->
            <home-recommend @loaded="getRecommends" ref="recommend" />
        </me-scroll>
        <div class="g-backup-container"></div>
        <!-- 当前页面存在二级页面时需要使用router-view -->
        <router-view></router-view>
    </div>
</template>

<script>
import MeScroll from ‘base/scroll‘;
import HomeHeader from ‘./header‘;
import HomeSlider from ‘./slider‘;
import HomeNav from ‘./nav‘;
import HomeRecommend from ‘./recommend‘;

export default {
    name:"Home",
    components:{
        HomeHeader,
        HomeSlider,
        MeScroll,
        HomeNav,
        HomeRecommend
    },
    data(){
        return{
            recommends:[]
        }
    },
    methods:{
        getRecommends(recommends){
            this.recommends=recommends;
        },
        updateScroll(){

        },
        pullToRefresh(end){
            this.$refs.slider.update().then(end);
        },
        pullToLoadMore(end){
            this.$refs.recommend.update().then(end).catch(err=>{
                //没有更多内容时
                if(err){
                    console.log(err);
                }
                end();
                //禁止继续加载更多数据
                //替换上拉时的loading，改为“没有更多数据了”
            });
        }
    }
}
</script>

<style lang="scss" scoped>
    // 引入前面需要加波浪线，否则会报错
    @import "~assets/scss/mixins";
    .home{
        overflow:hidden;
        width:100%;
        height:100%;
        background:$bgc-theme;
    }

</style>

pages/home/recommend.vue

<template>
    <div class="recommend">
        <h3 class="recommend-title">热卖推荐</h3>
        <div class="loading-container" v-if="!recommends.length">
            <!-- 完整写法是 inline:inline ，不过布尔值类型可以直接写 inline -->
            <me-loading inline />
        </div>
        <ul class="recommend-list">
            <li class="recommend-item" v-for="(item,index) in recommends" :key="index">
                <router-link class="recommend-link" :to="{name:‘home-product‘,params:{id:item.baseinfo.itemId}}">
                    <p class="recommend-pic"><img class="recommend-img" v-lazy="item.baseinfo.picUrl" ></p>
                    <!-- <p class="recommend-pic"><img class="recommend-img" :src="item.baseinfo.picUrl" ></p> -->
                    <p class="recommend-name">{{item.name.shortName}}</p>
                    <p class="recommend-oriPrice"><del>￥{{item.price.origPrice}}</del></p>
                    <p class="recommend-info">
                        <span class="recommend-price">¥<strong class="recommend-price-num">{{item.price.actPrice}}</strong></span>
                        <span class="recommend-count">{{item.remind.soldCount}}件已售</span>
                    </p>
                </router-link>
            </li>
        </ul>
    </div>
</template>

<script>
import {getHomeRecommend} from ‘api/home‘;
import MeLoading from ‘base/loading‘;

export default {
    name:"HomeRecommend",
    data(){
        return {
           recommends:[],
           curPage:1,
           totalPage:1
        }
    },
    components:{
        MeLoading
    },
    created(){
        this.getRecommends();
    },
    methods:{
        //api
        update(){
            return this.getRecommends();//返回promise对象
        },
        getRecommends(){

            if(this.curPage>this.totalPage) return Promise.reject(new Error(‘没有更多了‘));

            return getHomeRecommend(this.curPage).then(data=>{
                return new Promise(resolve=>{

                    if(data){
                        //console.log(data);

                        this.curPage++;
                        this.totalPage=data.totalPage;

                        // concat合并数组内容，每次获取的数据都追加进来
                        this.recommends=this.recommends.concat(data.itemList);

                        this.$emit("loaded",this.recommends);//热门推荐区域加载完毕后触发消息
                        resolve();
                    }
                })
            });
        }
    }
}
</script>

<style lang="scss" scoped>
    @import ‘~assets/scss/mixins‘;

    .recommend{
        position:relative;
        width:100%;
        padding:10px 0;
        font-size:$font-size-l;
        text-align:center;

        &:before,
        &:after{
            content:"";
            display:block;
            position:absolute;
            top:50%;
            width:40%;
            height:1px;
            background:#ddd;
        }

        &:before{
            left:0;
        }

        &:after{
            right:0;
        }
    }
    .recommend-list{
        @include flex-between();
        flex-wrap:wrap;
    }
    .recommend-title{
        margin-bottom:8px;
    }
    .recommend-item{
        width:49%;
        background:#fff;
        box-shadow:0 1px 1px 0 rgba(0,0,0,0.12);
        margin-bottom:8px;
    }
    .recommend-link{
        display:block;
    }
    .recommend-pic{
        position:relative;
        width:100%;
        padding-top:100%;// 可以实现高度与宽度一致
        margin-bottom:5px;
    }
    .recommend-img{
        width:100%;
        position:absolute;
        top:0;
        left:0;
        height:100%;
    }
    .recommend-name{
        height:40px;
        padding:0 5px;
        margin-bottom:8px;
        line-height:1.5;
        @include multiline-ellipsis();
        text-align:left;

    }
    .recommend-oriPrice{
        padding:0 5px;
        margin-bottom:8px;
        color:#ccc;

        del{

        }
    }
    .recommend-info{
        @include flex-between();
        padding:0 5px;
        margin-bottom:8px;
    }
    .recommend-price{
        color:#e61414;

        &-num{
            font-size:20px;
        }
    }
    .recommend-count{
        color:#999;
    }
    .loading-container{
        padding-top:150px;
    }

</style>

效果图

完善滚动条组件

base/scroll/index.vue

<template>
    <!-- wiper会实例化构造函数，生成swiper实例 -->
    <!-- ref="swiper"能够获取到这个swiper实例 -->
    <swiper :options="swiperOption" ref=‘swiper‘>
        <div class="mine-scroll-pull-down" v-if="pullDown">
            <!-- ref="pullDownLoading" -- 获取下拉的loading -->
            <me-loading :text="pullDownText" inline ref="pullDownLoading" />
        </div>
        <swiper-slide>
            <slot></slot>
        </swiper-slide>
        <div class="mine-scroll-pull-up" v-if="pullUp">
            <!-- ref="pullUpLoading" -- 获取上拉的loading -->
            <me-loading :text="pullUpText" inline ref="pullUpLoading" />
        </div>
        <div class="swiper-scrollbar" v-if="scrollbar" slot="scrollbar"></div>
    </swiper>
</template>

<script>
// 组件首字母大写，否则会报错
import {Swiper,SwiperSlide} from ‘vue-awesome-swiper‘;
import MeLoading from ‘base/loading‘;

import {
    PULL_DOWN_HEIGHT,
    PULL_DOWN_TEXT_INIT,
    PULL_DOWN_TEXT_START,
    PULL_DOWN_TEXT_ING,
    PULL_DOWN_TEXT_END,
    PULL_UP_HEIGHT,
    PULL_UP_TEXT_INIT,
    PULL_UP_TEXT_START,
    PULL_UP_TEXT_ING,
    PULL_UP_TEXT_END
} from ‘./config‘;

export default {
    name:"MeScroll",
    components:{
        Swiper,
        SwiperSlide,
        MeLoading
    },
    props:{//过滤器
       scrollbar:{
           type:Boolean,
           default:true
       },
       data:{//热门推荐加载完成后传递过来的recommends数据
           type:[Array,Object]
       },
       pullDown:{//是真就开启下拉刷新
           type:Boolean,
           default:false
       },
       pullUp:{//是真就开启下拉加载
           type:Boolean,
           default:false
       }
    },
    methods:{
        update(){//不知道怎么写就去swiper官网查api
            //console.log(this.$refs.swiper);//打印swiper实例

            this.$refs.swiper && this.$refs.swiper.$swiper.update();//调用swiper.update()更新滚动条
        },
        scrollToTop(speed,runCallback){
            // slideTo回到第x张幻灯片，swiper的API提供的
            this.$refs.swiper && this.$refs.swiper.$swiper.slideTo(0,speed,runCallback);
        },
        init(){
            //将不需要设置getter和setter的数据，放在init中初始化即可
            this.pulling=false;//是否正在下拉
            this.pullDownText=PULL_DOWN_TEXT_INIT;//设置下拉初始化文字
            this.pullUpText=PULL_UP_TEXT_INIT;//设置上拉初始化文字
            this.swiperOption={
                direction:‘vertical‘,//垂直方向
                slidesPerView:‘auto‘,//一次显示几张
                freeMode:true,//任意滑动多少距离
                setWrapperSize:true,//根据内容设置容器尺寸
                scrollbar:{
                    el:this.scrollbar?‘.swiper-scrollbar‘:null,
                    hide:true //滚动条自动隐藏
                },
                on:{
                    //swiper配置时会触发sliderMove方法，这里调用时执行自定义的scroll方法
                    sliderMove:this.scroll,
                    touchEnd:this.touchEnd,//touchEnd是swiper提供的滚动结束的函数，this.touchEnd是我们自己写的函数,
                    transitionEnd:this.scrollEnd
                }

            };

        },
        scroll(){
            const swiper=this.$refs.swiper.$swiper;

            //滚动时触发scroll事件
            this.$emit("scroll",swiper.translate,this.$refs.swiper.$swiper);

            //如果正在下拉中，不会再次执行
            if(this.pulling) return;

            //console.log(swiper.translate);//打印出滚动条滚过的距离
            if(swiper.translate>0){//下拉
                if(!this.pullDown){//如果不需要下拉刷新
                    return;
                }
                if(swiper.translate>PULL_DOWN_HEIGHT){
                    this.$refs.pullDownLoading.setText(PULL_DOWN_TEXT_START);
                }else{
                    this.$refs.pullDownLoading.setText(PULL_DOWN_TEXT_INIT);
                }
            }else if(swiper.isEnd){//上拉
                if(!this.pullUp){
                    return;
                }

                //是否达到上拉的触发条件
                //swiper的位移加上swiper的高度（617px）-50px的值如果大于当前内容高度
                //swiper.translate这个属性可以获取到wrapper的位移，其实可以理解为滚动条滚动的距离
                //swiper.height这个属性获取swiper容器的高度， 也就是显示区域的高度
                //PULL_UP_HEIGHT是我们设置的一个值。为了让页面不是到达最低部的时候，可以提前加载内容
                //parseInt(swiper.$wrapperEl.css(‘height‘))是wrapper的HTML元素的height属性， 也就是所有内容的高度
                const isPullUp=Math.abs(swiper.translate)+swiper.height-PULL_UP_HEIGHT>parseInt(swiper.$wrapperEl.css(‘height‘));

                if(isPullUp){//开始上拉
                    this.$refs.pullUpLoading.setText(PULL_UP_TEXT_START);
                }else{//保持初始化
                    this.$refs.pullUpLoading.setText(PULL_UP_TEXT_INIT);
                }
            }
        },
        scrollEnd(){
            this.$emit("scroll-end",this.$refs.swiper.$swiper.translate,this.$refs.swiper.$swiper);
        },
        touchEnd(){
            const swiper=this.$refs.swiper.$swiper;

            //如果正在下拉中，不会再次执行
            if(this.pulling) return;           

            if(swiper.translate>PULL_DOWN_HEIGHT){//如果距离大于设定的距离
                if(!this.pullDown){//如果不需要下拉刷新
                    return;
                }
                this.pulling=true;

                swiper.allowTouchMove=false;//禁止触摸
                swiper.setTransition(swiper.params.speed);//设置初始速度
                swiper.setTranslate(PULL_DOWN_HEIGHT);//移动到设定的位置（拖动过度时回到设置的位置）
                swiper.params.virtualTranslate=true;//定住不给回弹
                this.$refs.pullDownLoading.setText(PULL_DOWN_TEXT_ING);//设置正在刷新中的文字
                this.$emit("pull-down",this.pullDownEnd);//触发消息，传递结束下拉的函数
            }else if(swiper.isEnd){//上拉
                //是否达到上拉的触发条件
                const isPullUp=Math.abs(swiper.translate)+swiper.height-PULL_UP_HEIGHT>parseInt(swiper.$wrapperEl.css(‘height‘));

                if(isPullUp){//开始上拉
                    if(!this.pullUp){//如果不需要上拉刷新
                        return;
                    }

                    this.pulling=true;

                    swiper.allowTouchMove=false;//禁止触摸
                    swiper.setTransition(swiper.params.speed);//设置初始速度
                    swiper.setTranslate(-(parseInt(swiper.$wrapperEl.css(‘height‘))+PULL_UP_HEIGHT-swiper.height));//超过拉动距离时回弹
                    swiper.params.virtualTranslate=true;//定住不给回弹
                    this.$refs.pullUpLoading.setText(PULL_UP_TEXT_ING);//设置正在刷新中的文字
                    this.$emit("pull-up",this.pullUpEnd);//触发消息，传递结束下拉的函数
                }
            }
        },
        pullDownEnd(){
            const swiper=this.$refs.swiper.$swiper;

            this.pulling=false;

            this.$refs.pullDownLoading.setText(PULL_DOWN_TEXT_END);//设置加载结束后的文字
            swiper.allowTouchMove=true;//可以触摸
            swiper.setTransition(swiper.params.speed);//设置初始速度
            swiper.params.virtualTranslate=false;//可以回弹
            swiper.setTranslate(0);//移动到最初的位置

            //下拉完成后，显示head组件（下拉过程中会被隐藏）
            setTimeout(()=>{
                this.$emit("pull-down-transition-end");
            },swiper.params.speed);
        },
        pullUpEnd(){
            const swiper=this.$refs.swiper.$swiper;

            this.pulling=false;

            this.$refs.pullUpLoading.setText(PULL_UP_TEXT_END);//设置加载结束后的文字
            swiper.allowTouchMove=true;//可以触摸
            swiper.params.virtualTranslate=false;//可以回弹
        }
    },
    watch:{//检测数据变化的事件
        data(){
            this.update();//data数据变化时执行update函数
        }
    },
    created(){//在created中初始化数据
        this.init();
    }
}
</script>

<style lang="scss" scoped>
    @import ‘~assets/scss/mixins‘;

    .swiper-container{
        width:100%;
        height:100%;
        overflow:hidden;

        & .swiper-slide{
            height:auto;
        }
    }
    //默认是不显示的
    .mine-scroll-pull-down{
        position:absolute;
        left:0;
        bottom:100%;
        width:100%;
        height:80px;
    }
    .mine-scroll-pull-up{
        position:absolute;
        left:0;
        top:100%;
        width:100%;
        height:30px;
    }

</style>

原文地址：https://www.cnblogs.com/chenyingying0/p/12635369.html

时间： 2024-04-26 22:03:37

Vue webAPP首页开发（四）的相关文章

vue项目 首页开发 part3

da当拖动图标时候,只有上部分可以,下部分无响应 swiper 为根页面引用,其中的css为独立,点击swiper标签可以看见其包裹区域只有部分 那么需要修改 就需要穿透样式 外部  >>> 需要修改元素 .icons >>> .swiper-container height 0 padding-bottom: 50% 1 计算属性,自带缓存 内容超出 使用省略号 overflow: hidden; white-space: nowrap; text-overflow:

向军2017年最新laravel开发宝典 laravel结合vue与接口开发webapp实战视频教程

课程介绍:Laravel是一套简洁.优雅的PHP Web开发框架(PHP Web Framework).它不仅可以让我们从面条一样杂乱的代码中解脱出来,还可以帮我们构建一个完美的网络APP,而且每行代码都可以简洁.富于表达力.在Laravel中已经具有了一套高级的PHP ActiveRecord实现 -- Eloquent ORM.它能方便的将"约束(constraints)"应用到关系的双方,这样你就具有了对数据的完全控制,而且享受到ActiveRecord的所有便利.Eloquen

Vue 2.0开发企业级移动端音乐WebAPP

第1章 课程内容介绍包括课程概述.课程安排.学习前提.讲授方式等方面的介绍,最后演示了整个音乐App的功能,让同学们对课程项目有一个直观的了解.1-1 导学1-2 课前必读(源码获取方式) 第2章 项目准备工作包括项目需求分析.脚手架初始化代码.项目目录介绍及图标字体.公共样式等资源的准备 .2-1 需求分析2-2 Vue-cli脚手架安装2-3 项目目录介绍及图标字体.公共样式等资源准备 第3章 页面骨架开发包括页面入口.header 组件的编写.路由配置及顶导 tab 组件开发.3-1 页面

Vue 旅游网首页开发

Vue 旅游网首页开发 环境安装 安装 node.js 原文地址:https://www.cnblogs.com/wjw1014/p/10355973.html

向军laravel和vuejs webAPP实战开发

1 向军laravel开发宝典-git库与开发环境及工具软件介绍.mp42 向军laravel开发宝典-安装laravel框架.mp4 3 向军老师laravel开发宝典-安装laravel-ide-helper增强代码提示.mp4 4 向军老师laravel开发宝典-配置数据库与使用migrations创建表.mp4 5 向军老师laravel开发宝典-解决mysql5.7以下laravel不能执行数据迁移的问题.mp4 6 向军老师laravel开发宝典-合理的路由布局与分组路由.mp4 7

webApp前端开发技巧

自Iphone和Android这两个牛逼的手机操作系统发布以来,在互联网界从此就多了一个新的名词-WebApp(意为基于WEB形式的应用程序,运行在高端的移动终端设备). 开发者们都知道在高端智能手机系统中有两种应用程序:一种是基于本地(操作系统)运行的APP:一种是基于高端机的浏览器运行的WebApp,本文将主要讲解后者. WebApp与Native App有何区别呢? Native App: 1.开发成本非常大.一般使用的开发语言为JAVA.C++.Objective-C. 2.更新体验较差

移动web开发案例实战/webApp网站开发/手机网站模板/web前端切页

网站目录.代码结构清晰,语义化.主张100%纯手打代码.拒绝冗余框架慵懒建站.拒绝散漫,执着于把细节做到完美无瑕.我们的作品,可以逐级放大欣赏. 运用当下热门HTML5+CSS3(rem)+jQuery+zepto+Iscroll+swiper+Vue等技术开发手机webApp应用 - 移动端web网站(移动端web开发/APP开发).前端开发.移动端App模版.手机网站模版.HTML5+CSS3响应式网站模版~~~ /** 我们建站作品特色 **/主张原创设计,拒绝数量.追求质量!独特的设计风

如何加快Vue项目的开发速度

如何加快Vue项目的开发速度 本文摘自奇舞周刊,侵权删. 现如今的开发,比如内部使用的管理平台这种项目大都时间比较仓促.实际上来说,在使用了webpack + vue 这一套来开发的话已经大大了提高了效率.但是对于我们的开发层面.还是有很多地方可以再次提高我们的项目开发效率,让我们更加专注于业务,毕竟时间就是生命.下面我们挨个来探讨. 巧用Webpack Webpack是实现我们前端项目工程化的基础,但其实她的用处远不仅仅如此,我们可以通过Webpack来帮我们做一些自动化的事情.首先我们要了解

windows环境下搭建vue+webpack的开发环境

前段时间一直在断断续续的看vue的官方文档,后来就慢慢的学习搭建vue的开发环境,已经有将近两周了,每到最后一步的时候就会报错,搞的我好郁闷,搁置了好几天,今天又接着搞vue的开发环境,终于成功了.我要把我所参考的文档和实际遇到的问题分享给大家.由于本人也是初级菜鸟一枚,如果有错误,还望谅解指正.下面言归正传: 所参考的文档链接:http://blog.csdn.net/syyling/article/details/52004892 http://www.cnblogs.com/ixxonli