新闻

当前位置:手机版美高梅网站 > 新闻 > 基于Vue的WebApp项目开发

基于Vue的WebApp项目开发

来源:http://www.best-sclae.com 作者:手机版美高梅网站 时间:2019-12-23 08:56

实现新闻咨询页面

实现商品购买列表页面

实现图片分享列表

目录结构

步骤一:新建goodslist.vue文件

步骤一:新增图片列表文件photolist.vue

手机版美高梅网站 1

手机版美高梅网站 2手机版美高梅网站 3

手机版美高梅网站 4手机版美高梅网站 5

步骤一:创建newslist.vue文件

<template>
  <div id="tml">
    <!--利用mui中的图文表格组件实现-->
    <div id="mui-content" class="mui-content" style="background-color:#fff">
      <ul class="mui-table-view mui-grid-view">
        <li v-for="item in list" class="mui-table-view-cell mui-media mui-col-xs-6">
          <router-link v-bind="{to:'/goods/goodsinfo/'+item.id}">
            <img class="mui-media-object" :src="item.img_url" style="height: 250px;">
            <div class="mui-media-body" v-text="item.title"></div>
            <div class="desc">
              <p>
                ¥{{item.sell_price}}
                <s>¥{{item.market_price}}</s>
              </p>
              <p>
                <h6 class="left">热卖中</h6>
                <h6 class="right">剩余{{item.stock_quantity}}件</h6>
              </p>
            </div>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import { Toast } from 'mint-ui';
  // 代表vm
  export default {
    data() {
      return {
        list: []
      }
    },
    created() {
      this.getlist();
    },
    methods: {
      getlist() {
        //获取到商品列表数据
        var url = '../../../statics/json/goodslist.json';
        this.$http.get(url).then(function(res) {
          if(res.body.status != 0) {
            Toast(res.body.message);
            return;
          }
          //当服务器返回了正常数据的时候做赋值操作
          this.list = res.body.message;
        });
      }
    }
  }
</script>

<style scoped>
  #mui-content li {
    border: 1px solid rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0 0 4px #000;
    -moz-box-shadow: 0 0 4px #000;
    box-shadow: 0 0 4px #000;
    margin-left: 4px;
    padding: 0px;
    background-color: #fff;
    margin-bottom: 6px;
  }  
  #mui-content .mui-media-body {
    color: #0094ff;
  } 
  #mui-content .desc {
    height: 60px;
    background-color: rgba(0, 0, 0, 0.2);
    margin-top: 10px;
    padding: 5px;
    text-align: left;
  } 
  #mui-content .desc span {
    color: #a22b2b;
    margin-right: 15px;
  }  
  #mui-content a {
    padding-left: 0px;
    margin-left: 0px;
  }  
  #mui-content .desc .right {
    position: absolute;
    right: 10px;
    bottom: 0px;
    font-weight: bold;
  }  
  #mui-content .desc .left {
    position: absolute;
    left: 10px;
    bottom: 0px;
    color: red;
    font-weight: bold;
  }
</style>
<template>
  <div id="tml">
    图片分享页面
  </div>
</template>

<script>
</script>

<style>

</style>

手机版美高梅网站 6手机版美高梅网站 7

View Code

View Code

<template>
  <div id="tml">
    <!--使用mui框架,实现新闻资讯列表样式-->
    <ul class="mui-table-view">
      <li v-for="item in list" class="mui-table-view-cell mui-media">
        <a href="javascript:void(0);">
          <img class="mui-media-object mui-pull-left" :src="item.img_url">
          <div class="mui-media-body">
            {{item.title}}
            <p class='mui-ellipsis' v-text="item.zhaiyao" style="margin-top: 3px;"></p>
            <div class="ft">
              发表时间:{{item.add_time}}
              点击数:{{item.click}}
            </div>
          </div>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
  import { Toast } from 'mint-ui';
  export default {
    data() {
      return {
        list: [] //新闻列表功能
      }
    },
    created() {
      this.getnewslist();
    },
    methods: {
      //获取JSON中的新闻资讯
      getnewslist() {
        //1.0确定url
        var url = '../../statics/json/newslist.json';
        // 2.0调用$http.get()
        this.$http.get(url).then(function (response) {
          //3.0获取响应报文体数据
          var data = response.body;
          //4.0判断响应报文体中的状态值
          //如果非0,则将服务器响应回来的错误消息提示给用户
          if (data.status != 0) {
            Toast(data.message);
            return;
          }
          //5.0如果服务器返回数据正常,则赋值给list
          this.list = data.message;
        })
      }
    }

  }
</script>

<style>
  .mui-table-view img {
    height: 80px;
    width: 80px;
  }
  .mui-table-view .mui-media-object {
    height: 80px;
    line-height: 80px;
    max-width: 80px;
  }
  .ft {
    margin-top: 1.5em;
    font-size: 14px;
    color: #0094ff;
  }
</style>

步骤二:新建goodslist.json文件

 步骤二:配置入口文件main.js的路由规则

View Code

手机版美高梅网站 8手机版美高梅网站 9

手机版美高梅网站 10手机版美高梅网站 11

 步骤二:创建newslist.json文件,模仿服务端存储数据

{
  "status": 0,
  "message": [
    {
      "id": 1,
      "title": "动漫被套床单",
      "add_time": "2017-12-25",
      "zhaiyao": "尺寸图样皆可以订制,如果在店铺展示页面没有喜欢的角色,可以咨询客服,查看图库,进行选取!",
      "click": 30,
      "img_url": "../../statics/imgs/goodslist/goodslist01.jpg",
      "sell_price": 78,
      "market_price": 68,
      "stock_quantity": 200,
      "goods_no": "SD13313123"
    }, {
      "id": 2,
      "title": "二次元毛绒抱枕",
      "add_time": "2017-12-25",
      "zhaiyao": "此优惠限5件,超出则该商品全部恢复非活动价",
      "click": 33,
      "img_url": "../../statics/imgs/goodslist/goodslist02.jpg",
      "sell_price": 58,
      "market_price": 63,
      "stock_quantity": 500
    }, {
      "id": 3,
      "title": "逍遥宅品猫咪痛包",
      "add_time": "2017-12-25",
      "zhaiyao": "一共是一个外包+印花猫咪内包+纯色内包+肩带+手拎带。自由发挥自主搭配!带子之后会换成皮的!",
      "click": 34,
      "img_url": "../../statics/imgs/goodslist/goodslist03.jpg",
      "sell_price": 57,
      "market_price": 63,
      "stock_quantity": 500
    }, {
      "id": 4,
      "title": "动漫周边保温杯",
      "add_time": "2017-12-25",
      "zhaiyao": "采用304不锈钢 双层真空内胆 保温久不烫手 支持来图定制 买就送杯套",
      "click": 36,
      "img_url": "../../statics/imgs/goodslist/goodslist04.jpg",
      "sell_price": 80,
      "market_price": 100,
      "stock_quantity": 300
    }, {
      "id": 5,
      "title": "雪初音卫衣棉服",
      "add_time": "2017-12-25",
      "zhaiyao": "此优惠限5件,超出则该商品全部恢复非活动价",
      "click": 63,
      "img_url": "../../statics/imgs/goodslist/goodslist05.jpg",
      "sell_price": 66,
      "market_price": 80,
      "stock_quantity": 300
    }, {
      "id": 6,
      "title": "Monchhichi萌趣趣",
      "add_time": "2017-12-25",
      "zhaiyao": "Monchhichi萌趣趣十二生肖狗鸡小兔马羊龙老虎猪小鸡公仔送人礼品",
      "click": 38,
      "img_url": "../../statics/imgs/goodslist/goodslist06.jpg",
      "sell_price": 75,
      "market_price": 90,
      "stock_quantity": 800
    }
  ]
}
//导入vue核心包
import Vue from 'vue';

//导入vue-router
import vueRouter from 'vue-router';
//将vueRouter对象绑定到Vue对象上
Vue.use(vueRouter);

//将vue-resource在vue中绑定,自动在vue对象实例上注入一个$http对象就可以使用ajax方法了
import vueResource from 'vue-resource';
Vue.use(vueResource);

//导入App.vue的vue对象
import App from './App.vue';

//导入路由规则对应的组件对象
import home from './components/Home.vue';
import shopcar from './components/shopcar/car.vue';
import news from './components/news/newslist.vue';
import newsinfo from './components/news/newsinfo.vue';
import photolist from './components/photo/photolist.vue';

//定义路由规则
var router1 = new vueRouter({
  //改变路由激活时的class名称
  linkActiveClass: 'mui-active',
  routes: [{
      path: '/',
      component: home
    },
    {
      path: '/home',
      component: home
    },
    {
      path: '/shopcar',
      component: shopcar
    }, {
      path: '/news/newlist',
      component: news
    },{
      path: '/news/newsinfo/:id',
      component: newsinfo
    },{
      path: '/photo/photolist',
      component: photolist
    }
  ]
});

//导入mint-ui的css文件
import 'mint-ui/lib/style.min.css';
//导入mint-ui组件对象
import mintui from 'mint-ui';
//在Vue中全局使用mintui
Vue.use(mintui);

//注册mui的css样式
import '../statics/mui/css/mui.css';

//导入一个当前系统的全局基本样式
import '../statics/css/site.css';

//定义一个全局过滤器实现日期的格式化
import moment from 'moment';
Vue.filter('datefmt',function(input,fmtstring){
    //使用momentjs这个日期格式化类库实现日期的格式化功能
    //input代表左值(原始时间格式),fmtstring代表右值括号内的规则
    return moment(input).format(fmtstring);
});

//利用Vue对象进行解析渲染
new Vue({
  el: '#app',
  //使用路由对象实例
  router: router1,
  render: c => c(App)
})

手机版美高梅网站 12手机版美高梅网站 13

View Code

View Code

{
  "status": 0,
  "message": [
    {
      "id": 1,
      "title": "《火影忍者》揭秘",
      "add_time": "2017-12",
      "zhaiyao": "《火影忍者》中诡异的战斗招式 效果令人毛骨悚然",
      "click": 30,
      "img_url": "../../statics/imgs/news/news01.jpg"
    }, {
      "id": 2,
      "title": "将要被遗忘的经典动漫",
      "add_time": "2017-11",
      "zhaiyao": "童年优秀大作 盘点那些将要被遗忘的经典动画片",
      "click": 25,
      "img_url": "../../statics/imgs/news/news02.jpg"
    }, {
      "id": 3,
      "title": "伊藤润二的世界",
      "add_time": "2017-10",
      "zhaiyao": "欢迎来到伊藤润二的世界 ",
      "click": 38,
      "img_url": "../../statics/imgs/news/news03.jpg"
    }, {
      "id": 4,
      "title": "声优种田梨沙最新视频公布",
      "add_time": "2017-10",
      "zhaiyao": "声优种田梨沙最新视频公布 熟悉的大美女回来了",
      "click": 51,
      "img_url": "../../statics/imgs/news/news04.jpg"
    }, {
      "id": 5,
      "title": "《阴阳师》手游2018",
      "add_time": "2017-10",
      "zhaiyao": "《阴阳师》手游泡面番2018年春季开播 开启欢乐日常",
      "click": 11,
      "img_url": "../../statics/imgs/news/news05.jpg"
    }, {
      "id": 6,
      "title": "面向动画行业的虚拟货币",
      "add_time": "2017-10",
      "zhaiyao": "面向动画行业的虚拟货币,「宅币」正在准备第一次公开发行",
      "click": 31,
      "img_url": "../../statics/imgs/news/news06.jpg"
    }
  ]
}

步骤三:在入口文件main.js中配置好路由规则

 

View Code

手机版美高梅网站 14手机版美高梅网站 15

实现图片分类样式

步骤三:配置入口文件main.js的相关路由规则

//导入vue核心包
import Vue from 'vue';

//导入App.vue的vue对象
import App from './App.vue';

//导入vue-router
import vueRouter from 'vue-router';

//将vueRouter对象绑定到Vue对象上
Vue.use(vueRouter);

//导入路由规则对应的组件对象
import home from './components/Home.vue';
import shopcar from './components/shopcar/car.vue';
import newslist from './components/news/newslist.vue';
import newsinfo from './components/news/newsinfo.vue';
import photolist from './components/photo/photolist.vue';
import photoinfo from './components/photo/photoinfo.vue';
import goodslist from './components/goods/goodslist.vue';

//定义路由规则
var router1 = new vueRouter({
    //改变路由激活时的class名称
  linkActiveClass: 'mui-active', 
  routes: [{
      path: '/',
      component: home 
    }, {
      path: '/home',
      component: home
    },
    {
      path: '/shopcar',
      component: shopcar
    },
    {
      path: '/news/newslist',
      component: newslist
    },
    {
      path: '/news/newsinfo/:id',
      component: newsinfo
    },
    {
      path: '/photo/photolist',
      component: photolist
    },
    {
      path: '/photo/photoinfo/:id',
      component: photoinfo
    },
    {
      path: '/goods/goodslist',
      component: goodslist
    }
  ]
});

//导入mint-ui的css文件
import 'mint-ui/lib/style.min.css';
//导入mint-ui组件对象
import mintui from 'mint-ui';
//在Vue中全局使用mintui
Vue.use(mintui);

//注册mui的css样式
import '../statics/mui/css/mui.css';

//导入一个当前系统的全局基本样式
import '../statics/css/site.css';

//将vue-resource在vue中绑定,自动在vue对象实例上注入一个$http对象就可以使用ajax方法了
import vueResource from 'vue-resource';
Vue.use(vueResource);

//定义一个全局过滤器实现日期的格式化
import moment from 'moment';
Vue.filter('datefmt', function(input, fmtstring) {
  //使用momentjs这个日期格式化类库实现日期的格式化功能
  //input代表左值(原始时间格式),fmtstring代表右值括号内的规则
  return moment(input).format(fmtstring);
});

//使用图片预览组件vue-preview
import VuePreview from 'vue-preview';
Vue.use(VuePreview);

//利用Vue对象进行解析渲染
new Vue({
  el: '#app',
  //使用路由对象实例
  router: router1,
  render: c => c(App) //es6写法
})

步骤一:创建phototitle.json文件,存储相关数据信息

手机版美高梅网站 16手机版美高梅网站 17

View Code

手机版美高梅网站 18手机版美高梅网站 19

//导入vue核心包
import Vue from 'vue';

//导入vue-router
import vueRouter from 'vue-router';
//将vueRouter对象绑定到Vue对象上
Vue.use(vueRouter);

//将vue-resource在vue中绑定,自动在vue对象实例上注入一个$http对象就可以使用ajax方法了
import vueResource from 'vue-resource';
Vue.use(vueResource);

//导入App.vue的vue对象
import App from './App.vue';

//导入路由规则对应的组件对象
import home from './components/Home.vue';
import shopcar from './components/shopcar/car.vue';
import news from './components/news/newslist.vue';

//定义路由规则
var router1 = new vueRouter({
  //改变路由激活时的class名称
  linkActiveClass: 'mui-active',
  routes: [{
      path: '/',
      component: home
    },
    {
      path: '/home',
      component: home
    },
    {
      path: '/shopcar',
      component: shopcar
    }, {
      path: '/news/newlist',
      component: news
    }
  ]
});

//导入mint-ui的css文件
import 'mint-ui/lib/style.min.css';
//导入mint-ui组件对象
import mintui from 'mint-ui';
//在Vue中全局使用mintui
Vue.use(mintui);

//注册mui的css样式
import '../statics/mui/css/mui.css';

//导入一个当前系统的全局基本样式
import '../statics/css/site.css';

//利用Vue对象进行解析渲染
new Vue({
  el: '#app',
  //使用路由对象实例
  router: router1,
  render: c => c(App)
})

 项目结构图:

{
  "status": 0,
  "message": [
    {
      "title": "火影忍者",
      "id": 1
    }, {
      "title": "海贼王",
      "id": 2
    }, {
      "title": "犬夜叉",
      "id": 3
    }, {
      "title": "进击的巨人",
      "id": 4
    }, {
      "title": "全职猎人",
      "id": 5
    }, {
      "title": "光能使者",
      "id": 6
    }, {
      "title": "哆啦A梦",
      "id": 7
    }
  ]
}

View Code

手机版美高梅网站 20

View Code

 

 

步骤二:修改photolist.vue文件

实现新闻资讯日期格式化

商品详情页开发(一)

手机版美高梅网站 21手机版美高梅网站 22

对于页面日期的处理,一般都需要有统一的样式来进行管理,该项目使用的是Moment.js日期处理类库,下面是具体的开发步骤

步骤一:创建goodsinfo.vue文件

<template>
  <div id="tml">
    <!--图片分类-->
    <div id="cate">
      <ul v-bind="{style:'width:'+ulWidth+'px'}">
        <li>全部</li>
        <li v-for="item in cates">{{item.title}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
  import { Toast } from 'mint-ui';
  export default {
    data() {
      return {
        ulWidth: 320,
        cates: []
      }
    },
    created() {
      this.getcates();
    },
    methods: {
      getcates() {
        //1.0确定url
        var url = '../../../statics/json/phototitle.json';
        // 2.0调用$http.get()
        this.$http.get(url).then(function (response) {
          //3.0获取响应报文体数据
          var data = response.body;
          //4.0判断响应报文体中的状态值
          //如果非0,则将服务器响应回来的错误消息提示给用户
          if (data.status != 0) {
            Toast(data.message);
            return;
          }
          //5.0如果服务器返回数据正常,则赋值给list
          this.cates = data.message;
          //6.0实现当前分类数据所在的ul的总宽度
          var w = 62;
          var count = data.message.length + 1;
          this.ulWidth = w * count;
        })
      }
    }
  }
</script>

<style>
  /*图片分类*/  
  #cate {
    width: 375px;
    max-width: 375px;
    overflow-x: auto;
  }
  #cate ul {
    margin: 0px;
    padding-left: 10px;
  }
  #cate li {
    list-style: none;
    display: inline-block;
    color: #0094FF;
    font-size: 14px;
    padding-left: 6px;
  }
</style>

步骤一:下载安装Moment.js日期处理类库

手机版美高梅网站 23手机版美高梅网站 24

View Code

手机版美高梅网站 25

<template>
  <div id="tml">
    商品详情
  </div>
</template>

<script>
</script>

<style>

</style>

项目结构:

步骤二:在入口文件中定义一个全局过滤器

View Code

手机版美高梅网站 26

手机版美高梅网站 27手机版美高梅网站 28

步骤二:修改goodslist.vue文件

 

//导入vue核心包
import Vue from 'vue';

//导入vue-router
import vueRouter from 'vue-router';
//将vueRouter对象绑定到Vue对象上
Vue.use(vueRouter);

//将vue-resource在vue中绑定,自动在vue对象实例上注入一个$http对象就可以使用ajax方法了
import vueResource from 'vue-resource';
Vue.use(vueResource);

//导入App.vue的vue对象
import App from './App.vue';

//导入路由规则对应的组件对象
import home from './components/Home.vue';
import shopcar from './components/shopcar/car.vue';
import news from './components/news/newslist.vue';

//定义路由规则
var router1 = new vueRouter({
  //改变路由激活时的class名称
  linkActiveClass: 'mui-active',
  routes: [{
      path: '/',
      component: home
    },
    {
      path: '/home',
      component: home
    },
    {
      path: '/shopcar',
      component: shopcar
    }, {
      path: '/news/newlist',
      component: news
    }
  ]
});

//导入mint-ui的css文件
import 'mint-ui/lib/style.min.css';
//导入mint-ui组件对象
import mintui from 'mint-ui';
//在Vue中全局使用mintui
Vue.use(mintui);

//注册mui的css样式
import '../statics/mui/css/mui.css';

//导入一个当前系统的全局基本样式
import '../statics/css/site.css';

//定义一个全局过滤器实现日期的格式化
import moment from 'moment';
Vue.filter('datefmt',function(input,fmtstring){
    //使用momentjs这个日期格式化类库实现日期的格式化功能
    return moment(input).format(fmtstring);
});

//利用Vue对象进行解析渲染
new Vue({
  el: '#app',
  //使用路由对象实例
  router: router1,
  render: c => c(App)
})

手机版美高梅网站 29手机版美高梅网站 30

使用mint-ui实现图片的懒加载

View Code

<template>
  <div id="tml">
    <!--利用mui中的图文表格组件实现-->
    <div id="mui-content" class="mui-content" style="background-color:#fff">
      <ul class="mui-table-view mui-grid-view">
        <li v-for="item in list" class="mui-table-view-cell mui-media mui-col-xs-6">
          <router-link v-bind="{to:'/goods/goodsinfo/'+item.id}">
            <img class="mui-media-object" :src="item.img_url" style="height: 250px;">
            <div class="mui-media-body" v-text="item.title"></div>
            <div class="desc">
              <p>
                ¥{{item.sell_price}}
                <s>¥{{item.market_price}}</s>
              </p>
              <p>
                <h6 class="left">热卖中</h6>
                <h6 class="right">剩余{{item.stock_quantity}}件</h6>
              </p>
            </div>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import { Toast } from 'mint-ui';
  // 代表vm
  export default {
    data() {
      return {
        list: []
      }
    },
    created() {
      this.getlist();
    },
    methods: {
      getlist() {
        //获取到商品列表数据
        var url = '../../../statics/json/goodslist.json';
        this.$http.get(url).then(function(res) {
          if(res.body.status != 0) {
            Toast(res.body.message);
            return;
          }
          //当服务器返回了正常数据的时候做赋值操作
          this.list = res.body.message;
        });
      }
    }
  }
</script>

<style scoped>
  #mui-content li {
    border: 1px solid rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0 0 4px #000;
    -moz-box-shadow: 0 0 4px #000;
    box-shadow: 0 0 4px #000;
    margin-left: 4px;
    padding: 0px;
    background-color: #fff;
    margin-bottom: 6px;
  }  
  #mui-content .mui-media-body {
    color: #0094ff;
  } 
  #mui-content .desc {
    height: 60px;
    background-color: rgba(0, 0, 0, 0.2);
    margin-top: 10px;
    padding: 5px;
    text-align: left;
  } 
  #mui-content .desc span {
    color: #a22b2b;
    margin-right: 15px;
  }  
  #mui-content a {
    padding-left: 0px;
    margin-left: 0px;
  }  
  #mui-content .desc .right {
    position: absolute;
    right: 10px;
    bottom: 0px;
    font-weight: bold;
  }  
  #mui-content .desc .left {
    position: absolute;
    left: 10px;
    bottom: 0px;
    color: red;
    font-weight: bold;
  }
</style>

 步骤一:创建photolist.json文件,存储相关信息

步骤三:在newslist.vue中使用过滤器

View Code

手机版美高梅网站 31手机版美高梅网站 32

手机版美高梅网站 33手机版美高梅网站 34

步骤三:配置入口文件mian.js的路由规则

{
  "status": 0,
  "message": [
    {
      "id": 1,
      "title": "《海贼王》",
      "img_url": "../../statics/imgs/photo/photo01.jpg",
      "zhaiyao": "该动漫是日本漫画家尾田荣一郎作画的少年漫画作品,在"周刊少年Jump"1997年34号开始连载。"
    }, {
      "id": 2,
      "title": "《火影忍者》",
      "img_url": "../../statics/imgs/photo/photo02.jpg",
      "zhaiyao": "该动漫是日本漫画家岸本齐史的代表作,作品于1999年开始在《周刊少年JUMP》上连载。"
    }, {
      "id": 3,
      "title": "《全职猎人》",
      "img_url": "../../statics/imgs/photo/photo03.jpg",
      "zhaiyao": "该动漫是日本漫画家富坚义博的一部漫画作品。作于1998年起在日本漫画杂志"周刊少年Jump"不定期连载."
    }, {
      "id": 4,
      "title": "《犬夜叉》",
      "img_url": "../../statics/imgs/photo/photo04.jpg",
      "zhaiyao": "该动漫是日本漫画家高桥留美子于1996年开始在"周刊少年Sunday"杂志上连载,以描写战国童话故事为题材的长篇漫画"
    }, {
      "id": 5,
      "title": "《进击的巨人》",
      "img_url": "../../statics/imgs/photo/photo05.jpg",
      "zhaiyao": "该动漫是日本漫画家谏山创创作的少年漫画作品,于2009年在讲谈社旗下的漫画杂志"别册少年Magazine"上开始连载。"
    }
  ]
}
<template>
  <div id="tml">
    <!--使用mui框架,实现新闻资讯列表样式-->
    <ul class="mui-table-view">
      <li v-for="item in list" class="mui-table-view-cell mui-media">
        <a href="javascript:void(0);">
          <img class="mui-media-object mui-pull-left" :src="item.img_url">
          <div class="mui-media-body">
            {{item.title}}
            <p class='mui-ellipsis' v-text="item.zhaiyao" style="margin-top: 3px;"></p>
            <div class="ft">
              发表时间:{{item.add_time | datefmt('YYYY-MM-DD')}}
              点击数:{{item.click}}
            </div>
          </div>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
  import { Toast } from 'mint-ui';
  export default {
    data() {
      return {
        list: [] //新闻列表功能
      }
    },
    created() {
      this.getnewslist();
    },
    methods: {
      //获取JSON中的新闻资讯
      getnewslist() {
        //1.0确定url
        var url = '../../statics/json/newslist.json';
        // 2.0调用$http.get()
        this.$http.get(url).then(function (response) {
          //3.0获取响应报文体数据
          var data = response.body;
          //4.0判断响应报文体中的状态值
          //如果非0,则将服务器响应回来的错误消息提示给用户
          if (data.status != 0) {
            Toast(data.message);
            return;
          }
          //5.0如果服务器返回数据正常,则赋值给list
          this.list = data.message;
        })
      }
    }

  }
</script>

<style>
  .mui-table-view img {
    height: 80px;
    width: 80px;
  }
  .mui-table-view .mui-media-object {
    height: 80px;
    line-height: 80px;
    max-width: 80px;
  }
  .ft {
    margin-top: 1.5em;
    font-size: 14px;
    color: #0094ff;
  }
</style>

手机版美高梅网站 35手机版美高梅网站 36

View Code

View Code

//导入vue核心包
import Vue from 'vue';

//导入App.vue的vue对象
import App from './App.vue';

//导入vue-router
import vueRouter from 'vue-router';

//将vueRouter对象绑定到Vue对象上
Vue.use(vueRouter);

//导入路由规则对应的组件对象
import home from './components/Home.vue';
import shopcar from './components/shopcar/car.vue';
import newslist from './components/news/newslist.vue';
import newsinfo from './components/news/newsinfo.vue';
import photolist from './components/photo/photolist.vue';
import photoinfo from './components/photo/photoinfo.vue';
import goodslist from './components/goods/goodslist.vue';
import goodsinfo from './components/goods/goodsinfo.vue';

//定义路由规则
var router1 = new vueRouter({
    //改变路由激活时的class名称
  linkActiveClass: 'mui-active', 
  routes: [{
      path: '/',
      component: home 
    }, {
      path: '/home',
      component: home
    },
    {
      path: '/shopcar',
      component: shopcar
    },
    {
      path: '/news/newslist',
      component: newslist
    },
    {
      path: '/news/newsinfo/:id',
      component: newsinfo
    },
    {
      path: '/photo/photolist',
      component: photolist
    },
    {
      path: '/photo/photoinfo/:id',
      component: photoinfo
    },
    {
      path: '/goods/goodslist',
      component: goodslist
    },
    {
      path: '/goods/goodsinfo/:id',
      component: goodsinfo
    }
  ]
});

//导入mint-ui的css文件
import 'mint-ui/lib/style.min.css';
//导入mint-ui组件对象
import mintui from 'mint-ui';
//在Vue中全局使用mintui
Vue.use(mintui);

//注册mui的css样式
import '../statics/mui/css/mui.css';

//导入一个当前系统的全局基本样式
import '../statics/css/site.css';

//将vue-resource在vue中绑定,自动在vue对象实例上注入一个$http对象就可以使用ajax方法了
import vueResource from 'vue-resource';
Vue.use(vueResource);

//定义一个全局过滤器实现日期的格式化
import moment from 'moment';
Vue.filter('datefmt', function(input, fmtstring) {
  //使用momentjs这个日期格式化类库实现日期的格式化功能
  //input代表左值(原始时间格式),fmtstring代表右值括号内的规则
  return moment(input).format(fmtstring);
});

//使用图片预览组件vue-preview
import VuePreview from 'vue-preview';
Vue.use(VuePreview);

//利用Vue对象进行解析渲染
new Vue({
  el: '#app',
  //使用路由对象实例
  router: router1,
  render: c => c(App) //es6写法
})

步骤二:修改photolist.vue文件

 

View Code

手机版美高梅网站 37手机版美高梅网站 38

实现新闻资讯详情页

 

<template>
  <div id="tml">
    <!--图片分类-->
    <div id="cate">
      <ul v-bind="{style:'width:'+ulWidth+'px'}">
        <li>全部</li>
        <li v-for="item in cates">{{item.title}}</li>
      </ul>
    </div>

    <!--图片列表 利用mint-ui框架实现懒加载-->
    <div id="imglist">
      <ul>
        <li v-for="item in list">
          <router-link v-bind="{to:'/photo/photoinfo/'+item.id}">
            <img v-lazy="item.img_url">
            <div id="desc">
              <h5 v-text="item.title"></h5>
              <p v-text="item.zhaiyao"></p>
            </div>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import { Toast } from 'mint-ui';
  export default {
    data() {
      return {
        ulWidth: 320,
        cates: [],
        list: []
      }
    },
    created() {
      this.getcates();
      this.getimages();
    },
    methods: {
      getimages() {
        //1.0确定url
        var url = '../../../statics/json/photolist.json';
        // 2.0调用$http.get()
        this.$http.get(url).then(function (response) {
          //3.0获取响应报文体数据
          var data = response.body;
          //4.0判断响应报文体中的状态值
          //如果非0,则将服务器响应回来的错误消息提示给用户
          if (data.status != 0) {
            Toast(data.message);
            return;
          }
          //5.0如果服务器返回数据正常,则赋值给list
          this.list = data.message;
        })
      },
      getcates() {
        //1.0确定url
        var url = '../../../statics/json/phototitle.json';
        // 2.0调用$http.get()
        this.$http.get(url).then(function (response) {
          //3.0获取响应报文体数据
          var data = response.body;
          //4.0判断响应报文体中的状态值
          //如果非0,则将服务器响应回来的错误消息提示给用户
          if (data.status != 0) {
            Toast(data.message);
            return;
          }
          //5.0如果服务器返回数据正常,则赋值给list
          this.cates = data.message;
          //6.0实现当前分类数据所在的ul的总宽度
          var w = 62;
          var count = data.message.length + 1;
          this.ulWidth = w * count;
        })
      }
    }
  }
</script>

<style>
  /*图片分类*/ 
  #cate {
    width: 375px;
    max-width: 375px;
    overflow-x: auto;
  }
  #cate ul {
    margin: 0px;
    padding-left: 10px;
  }
  #cate li {
    list-style: none;
    display: inline-block;
    color: #0094FF;
    font-size: 14px;
    padding-left: 6px;
  }
  /*实现图片列表样式*/  
  #imglist {}
  #imglist ul {
    padding: 0;
  }
  #imglist li {
    list-style: none;
    position: relative;
  }
  #imglist img {
    width: 100%;
    height: 200px;
  }
  #desc {
    width: 100%;
    height: auto;
    background-color: #272020;
    opacity: 0.6;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  #desc h5 {
    color: #F0F0F0;
    font-weight: bold;
  }
  #desc p {
    color: #fff;
  }
</style>

该功能难点是如何传递父页面的唯一值(id),然后通过判断这个唯一值去请求不同的json数据,返回对应的子页面

案例四(商品详情页轮播图实现)

View Code

步骤一:创建一个新闻详情页newsinfo.vue

步骤一:在subcom文件夹中封装一个公用轮播组件slider.vue

 

手机版美高梅网站 39手机版美高梅网站 40

手机版美高梅网站 41手机版美高梅网站 42

增加图片的详情页

<template>
  <div id="tml">
    <!--1.0 实现新闻详情-->
    <div class="title">
      <h4 v-text="info.title"></h4>
      <p>
        {{ info.add_time | datefmt('YYYY-MM-DD') }}
        {{info.click}}次浏览
        <div id="content" v-html="info.content"></div>
      </p>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        id: 0, // 传入的id值
        info: {}
      }
    },
    created() {
      //1.0 获取url传入的id参数值赋值给data中的id属性
      this.id = this.$route.params.id;
      //2.0 请求服务器获取到这个id对应的详情数据对象
      this.getinfo();
    },
    methods: {
      getinfo() {
        //1.0 定义url
        var url = '../../statics/json/newsinfo.json';
        //2.0 发出ajax请求获取数据
        this.$http.get(url).then(function (res) {
          var body = res.body;
          if (body.status != 0) {
            alert(body.message);
            return;
          }
          for (var i = 0; i < body.message.length; i++) {
            if (this.id == body.message[i].id) {
              this.info = body.message[i];
            }
          }
        });
      }
    }
  }
</script>

<style scoped>
  .title h4 {
    color: #0094ff;
  }
  .title p {
    color: rgba(0, 0, 0, 0.5);
  }
  .title,
  #content {
    padding: 5px;
  }
  #content {
    line-height: 27px;
  }
</style>
<template>
  <div id="tml">
    <mt-swipe :auto="2000">
      <mt-swipe-item v-for="item in imgs">
        <img :src="item.img">
      </mt-swipe-item>
    </mt-swipe>
  </div>
</template>

<script>
  export default {
    //用来接收父组件传入过来的数据
    props: ['imgs']
  }
</script>

<style scoped>
  /*重写轮播图样式*/

  .mint-swipe {
    height: 310px;
  }
  .mint-swipe-item {
    width: 100%;
    height: 300px;
  }
  .mint-swipe-item img {
    width: 100%;
    height: 80%;
  }
</style>

步骤一:创建photoinfo.json文件

View Code

View Code

手机版美高梅网站 43手机版美高梅网站 44

步骤二:创建newsinfo.json文件,伪造数据库存放新闻信息

此时Home.vue的代码为

{
  "status": 0,
  "message": [
    {
      "id": 1,
      "title": "海贼王",
      "click": 13,
      "add_time": "2017-12-25",
      "content": "&nbsp;&nbsp;&nbsp;&nbsp;拥有财富、名声、权力,这世界上的一切的男人 “海贼王”哥尔·D·罗杰,在被行刑受死之前说了一句话,让全世界的人都涌向了大海。“想要我的宝藏吗?如果想要的话,那就到海上去找吧,我全部都放在那里。”,世界开始迎接“大海贼时代”的来临。<br><br>&nbsp;&nbsp;&nbsp;&nbsp;时值“大海贼时代”,为了寻找传说中海贼王罗杰所留下的大秘宝“ONE PIECE”,无数海贼扬起旗帜,互相争斗。有一个梦想成为海盗的少年叫路飞,他因误食“恶魔果实”而成为了橡皮人,在获得超人能力的同时付出了一辈子无法游泳的代价。十年后,路飞为实现与因救他而断臂的香克斯的约定而出海,他在旅途中不断寻找志同道合的伙伴,开始了以成为海贼王为目标的伟大的冒险旅程。"
    }, {
      "id": 2,
      "title": "火影忍者",
      "click": 33,
      "add_time": "2017-12-15",
      "content": "&nbsp;&nbsp;&nbsp;&nbsp;作品设定在一个忍者的世界,故事从主人公漩涡鸣人的孤儿生活开始,四代火影为了保护村子,将攻击村子九尾妖狐封印到了他体内,鸣人因此受尽了村人的冷落,只是拼命用各种恶作剧试图吸引大家的注意力。好在还是有伊鲁卡老师的关心,鸣人的性格才没有变得扭曲,他总是干劲十足、非常乐观。<br><br>&nbsp;&nbsp;&nbsp;&nbsp;为了让更多的人认可自己,鸣人的目标是成为火影。整个故事就围绕鸣人的奋斗、成长,鸣人的伙伴们,以及这个忍者世界的各种争斗和阴谋展开。"
    }, {
      "id": 3,
      "title": "全职猎人",
      "click": 23,
      "add_time": "2017-10-18",
      "content": "&nbsp;&nbsp;&nbsp;&nbsp;主人公杰·富力士从小在鲸鱼岛长大,与米特阿姨和阿婆相依为伴。性格开朗的他,有着能与动物沟通的灵性。因为无父无母,杰将米特阿姨当成自己的生母爱着。直到9岁那一年,杰在森林里被一位青年男子搭救。从他口中杰得知自己的父亲还活着而且职业是猎人。<br><br>&nbsp;&nbsp;&nbsp;&nbsp;在说服米特阿姨之后,杰独自踏上了寻父的征程。于是,杰决定成为猎人,从这里开始找寻他父亲的踪迹。靠这样一种信念开始了冒险旅途,并在旅途当中结交好友,不断成长,从而引发了后面的所有故事,引出猎人的精彩世界。"
    }, {
      "id": 4,
      "title": "犬夜叉",
      "click": 44,
      "add_time": "2017-10-10",
      "content": "&nbsp;&nbsp;&nbsp;&nbsp;大妖怪犬大将斗牙王与人类公主十六夜的儿子---犬夜叉,因为自己半妖的身份受到人类与妖怪的排斥,为了成为真正的妖怪而想得到四魂之玉;而巫女桔梗为了保护和净化四魂之玉,运用灵力不断与前来抢夺四魂之玉的妖怪战斗而犬夜叉也看到了渴望过平凡生活的巫女桔梗。<br><br>&nbsp;&nbsp;&nbsp;&nbsp;在不断的相互了解中,两人相爱了,并最终约定利用四魂之玉的力量,把犬夜叉变成人类,守护使命结束的桔梗也可以回归到平凡生活。但是,在约定的日子里,发生了难以预料的变故。被假犬夜叉袭击而受到重伤的桔梗在背叛的愤怒中,用尽力气把犬夜叉封印在御神木上,然后带着四魂之玉在火焰中死去。悲剧就此拉开序幕……"
    }, {
      "id": 5,
      "title": "进击的巨人",
      "click": 44,
      "add_time": "2017-04-18",
      "content": "&nbsp;&nbsp;&nbsp;&nbsp;107年前(743年),世界上突然出现了人类的天敌“巨人”。面临着生存危机而残存下来的人类逃到了一个地方,盖起了三重巨大的城墙。人们在这隔绝的环境里享受了一百多年的和平,直到艾伦·耶格尔十岁那年,60米高的“超大型巨人”突然出现,以压倒性的力量破坏城门,其后瞬间消失,凶残的巨人们成群的冲进墙内捕食人类。<br><br>&nbsp;&nbsp;&nbsp;&nbsp;艾伦亲眼看着人们以及自己的母亲被巨人吞食,怀着对巨人无法形容的憎恨和痛恨,誓言杀死所有巨人。城墙崩坏的两年后,艾伦加入104期训练兵团学习和巨人战斗的技术。在训练兵团的三年,艾伦在同期训练兵里有着其他人无法比拟的强悍精神力。即使亲眼见过地狱也依然勇敢地向巨人挑战的艾伦,如愿以偿加入了向往已久的调查兵团。"
    }
  ]
}

手机版美高梅网站 45手机版美高梅网站 46

手机版美高梅网站 47手机版美高梅网站 48

View Code

{
  "status": 0,
  "message": [
    {
      "id": 1,
      "title": "《火影忍者》揭秘",
      "click": 30,
      "add_time": "2017-12-16",
      "content": "&nbsp;&nbsp;&nbsp;&nbsp;在《火影忍者》中有不少忍术和战斗方法都以怪诞的形式出现,令人印象深刻,比如大蛇丸的"科学方法",会让对手感到极度的不适。今天就为大家带来几个效果堪比恐怖漫画的忍术,毛骨悚然的效果令人浮想联翩。<br><br><h4>迪达拉的C4.迦楼罗</h4>&nbsp;&nbsp;&nbsp;&nbsp;C4.迦楼罗是迪达拉专门为了针对宇智波鼬所开发出来的爆炸忍术,跟以往迪达拉所使用的肉眼可见炸弹不同,C4.迦楼罗是超小型的毫微炸弹,通过一次巨大的爆炸把这些纳米级别的炸弹散布到敌人体内。<img src='../../statics/imgs/news/newsinfo01.jpg' height='200px' width='100%' style='margin-top:5px'/><br><br><h4>志乃的寄生大虫.虫蛀</h4>&nbsp;&nbsp;&nbsp;&nbsp;油女一族的寄坏虫本来就是令人感到不适的秘术,这些虫子平时寄居在族人的身体里,战斗的时候才出来。志乃的虫子甚至是从眼睛里往外爬出来,寄大虫·虫蛀更是可怕的术。<img src='../../statics/imgs/news/newsinfo02.jpg' height='200px' width='100%' style='margin-top:5px'/>"
    },{
      "id": 2,
      "title": "将要被遗忘的经典动漫",
      "click": 25,
      "add_time": "2017-12-11",
      "content": "&nbsp;&nbsp;&nbsp;&nbsp;现在每年都会产出数百部新动画,随着时光流逝和动画数量的冲击之下,曾经陪伴我们的经典作品逐渐被淡出了人们的视线。盘点那些将要被遗忘的经典动画。<br><br>&nbsp;&nbsp;&nbsp;&nbsp;未完待续...."
    },{
      "id": 3,
      "title": "伊藤润二的世界",
      "click": 38,
      "add_time": "2017-12-10",
      "content": "&nbsp; &nbsp;&nbsp;著名恐怖漫画大师伊藤润二的名字相信喜欢恐怖题材的漫迷们绝不陌生,作为“日本恐怖漫画界的大师”的他创作了多部经典的漫画作品,比如《双一恣意的诅咒》、《富江》早已为大众所知。<br><br>&nbsp;&nbsp;&nbsp;&nbsp;未完待续...."
    },{
      "id": 4,
      "title": "声优种田梨沙最新视频公布",
      "click": 51,
      "add_time": "2017-12-10",
      "content": "&nbsp;&nbsp;&nbsp;&nbsp;正在准备中...."
    },{
      "id": 5,
      "title": "《阴阳师》手游2018",
      "click": 11,
      "add_time": "2017-12-10",
      "content": "&nbsp;&nbsp;&nbsp;&nbsp;正在准备中...."
    },{
      "id": 6,
      "title": "面向动画行业的虚拟货币",
      "click": 31,
      "add_time": "2017-12-10",
      "content": "&nbsp;&nbsp;&nbsp;&nbsp;正在准备中...."
    }

  ]
}
<template>
  <div id="tml">
      <!--使用组件结合mint-ui实现轮播图-->
    <silder :imgs="list"></silder>

    <!--使用MUI的九宫格-->
    <div class="mui-content">
      <ul class="mui-table-view mui-grid-view mui-grid-9">
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/news/newslist">

            <div class="mui-media-body">新闻资讯</div>
          </router-link>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/photo/photolist">

            <div class="mui-media-body">图片分享</div>
          </router-link>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/goods/goodslist">

            <div class="mui-media-body">商品购买</div>
          </router-link>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/feedback">

            <div class="mui-media-body">留言反馈</div>
          </router-link>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/vide">

            <div class="mui-media-body">视频专区</div>
          </router-link>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/callme">

            <div class="mui-media-body">联系我们</div>
          </router-link>
        </li>
      </ul>
    </div>

  </div>
</template>

<script>
  import { Toast } from 'mint-ui';
  import silder from './subcom/slider.vue';

  export default {
    components: {
      silder
    },
    data() {
      return {
        list: []
      }
    },
    created() {
      // 当页面中的data和methods对象都创建完毕以后,就会自动调用created
      this.getimgs();
    },
    methods: {
      getimgs() {
        // 实现轮播组件中的数据请求
        // 1.0 确定url
        var url = '../../statics/json/homeslide.json'
        console.log(url);
        // 2.0 调用$http.get()
        this.$http.get(url).then(function(response) {
          var data = response.body;
          //错误处理
          if(data.status != 0) {
            Toast(data.message);
            return;
          }
          // 如果服务器返回的数据正常则赋值给list
          this.list = data.message;
        });
      }
    }
  }
</script>

<style scoped>
  /*重写九宫格样式*/  
  .mui-content,
  .mui-content ul li a {
    background: #fff;
  }
  /*改变九宫格图标样式*/ 
  .mui-grid-9 .mui-icon-home:before,
  .mui-grid-9 .mui-icon-email:before,
  .mui-grid-9 .mui-icon-chatbubble:before,
  .mui-grid-9 .mui-icon-location:before,
  .mui-grid-9 .mui-icon-search:before,
  .mui-grid-9 .mui-icon-phone:before {
    content: '';
    display: inline-block;
    width: 50px;
    height: 50px;
    background-repeat: round;
  }
  .mui-grid-9 .mui-icon-home:before {
    background-image: url(../../statics/imgs/Hgrid/1.png);
  }
  .mui-grid-9 .mui-icon-email:before {
    background-image: url(../../statics/imgs/Hgrid/2.png);
  }
  .mui-grid-9 .mui-icon-chatbubble:before {
    background-image: url(../../statics/imgs/Hgrid/3.png);
  }
  .mui-grid-9 .mui-icon-location:before {
    background-image: url(../../statics/imgs/Hgrid/4.png);
  }
  .mui-grid-9 .mui-icon-search:before {
    background-image: url(../../statics/imgs/Hgrid/5.png);
  }
  .mui-grid-9 .mui-icon-phone:before {
    background-image: url(../../statics/imgs/Hgrid/6.png);
  }
</style>

步骤二:修改photolist.vue

View Code

View Code

手机版美高梅网站 49手机版美高梅网站 50

步骤三:配置newslist.vue文件

步骤二:创建goodslunbo1.json和goodslunbo.json用来存放轮播图片

<template>
  <div id="tml">
    <!--图片分类-->
    <div id="cate">
      <ul v-bind="{style:'width:'+ulWidth+'px'}">
        <li>全部</li>
        <li v-for="item in cates">{{item.title}}</li>
      </ul>
    </div>

    <!--图片列表 利用mint-ui框架实现懒加载-->
    <div id="imglist">
      <ul>
        <li v-for="item in list">
          <router-link v-bind="{to:'/photo/photoinfo/'+item.id}">
            <img v-lazy="item.img_url">
            <div id="desc">
              <h5 v-text="item.title"></h5>
              <p v-text="item.zhaiyao"></p>
            </div>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import { Toast } from 'mint-ui';
  export default {
    data() {
      return {
        ulWidth: 320,
        cates: [],
        list: []
      }
    },
    created() {
      this.getcates();
      this.getimages();
    },
    methods: {
      getimages() {
        //1.0确定url
        var url = '../../../statics/json/photolist.json';
        // 2.0调用$http.get()
        this.$http.get(url).then(function (response) {
          //3.0获取响应报文体数据
          var data = response.body;
          //4.0判断响应报文体中的状态值
          //如果非0,则将服务器响应回来的错误消息提示给用户
          if (data.status != 0) {
            Toast(data.message);
            return;
          }
          //5.0如果服务器返回数据正常,则赋值给list
          this.list = data.message;
        })
      },
      getcates() {
        //1.0确定url
        var url = '../../../statics/json/phototitle.json';
        // 2.0调用$http.get()
        this.$http.get(url).then(function (response) {
          //3.0获取响应报文体数据
          var data = response.body;
          //4.0判断响应报文体中的状态值
          //如果非0,则将服务器响应回来的错误消息提示给用户
          if (data.status != 0) {
            Toast(data.message);
            return;
          }
          //5.0如果服务器返回数据正常,则赋值给list
          this.cates = data.message;
          //6.0实现当前分类数据所在的ul的总宽度
          var w = 62;
          var count = data.message.length + 1;
          this.ulWidth = w * count;
        })
      }
    }
  }
</script>

<style scoped>
  /*图片分类*/ 
  #cate {
    width: 375px;
    max-width: 375px;
    overflow-x: auto;
  }
  #cate ul {
    margin: 0px;
    padding-left: 10px;
  }
  #cate li {
    list-style: none;
    display: inline-block;
    color: #0094FF;
    font-size: 14px;
    padding-left: 6px;
  }
  /*实现图片列表样式*/  
  #imglist {}
  #imglist ul {
    padding: 0;
  }
  #imglist li {
    list-style: none;
    position: relative;
  }
  #imglist img {
    width: 100%;
    height: 200px;
  }
  #desc {
    width: 100%;
    height: auto;
    background-color: #272020;
    opacity: 0.6;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  #desc h5 {
    color: #F0F0F0;
    font-weight: bold;
  }
  #desc p {
    color: #fff;
  }
</style>

手机版美高梅网站 51手机版美高梅网站 52

手机版美高梅网站 53手机版美高梅网站 54

View Code

<template>
  <div id="tml">
    <!--使用mui框架,实现新闻资讯列表样式-->
    <ul class="mui-table-view">
      <li v-for="item in list" class="mui-table-view-cell mui-media">
        <router-link v-bind="{to:'/news/newsinfo/'+item.id}">
          <img class="mui-media-object mui-pull-left" :src="item.img_url">
          <div class="mui-media-body">
            {{item.title}}
            <p class='mui-ellipsis' v-text="item.zhaiyao" style="margin-top: 3px;"></p>
            <div class="ft">
              发表时间:{{item.add_time | datefmt('YYYY-MM-DD')}}
              点击数:{{item.click}}
            </div>
          </div>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
  import { Toast } from 'mint-ui';
  export default {
    data() {
      return {
        list: [] //新闻列表功能
      }
    },
    created() {
      this.getnewslist();
    },
    methods: {
      //获取JSON中的新闻资讯
      getnewslist() {
        //1.0确定url
        var url = '../../statics/json/newslist.json';
        // 2.0调用$http.get()
        this.$http.get(url).then(function (response) {
          //3.0获取响应报文体数据
          var data = response.body;
          //4.0判断响应报文体中的状态值
          //如果非0,则将服务器响应回来的错误消息提示给用户
          if (data.status != 0) {
            Toast(data.message);
            return;
          }
          //5.0如果服务器返回数据正常,则赋值给list
          this.list = data.message;
        })
      }
    }
  }
</script>

<style>
  .mui-table-view img {
    height: 80px;
    width: 80px;
  }
  .mui-table-view .mui-media-object {
    height: 80px;
    line-height: 80px;
    max-width: 80px;
  }
  .ft {
    margin-top: 1.5em;
    font-size: 14px;
    color: #0094ff;
  }
</style>
{
  "status": 0,
  "message": [
    {
      "src": "../../statics/imgs/goodsinfo/lunbo01.jpg",
      "url": "#",
      "img": "../../statics/imgs/goodsinfo/lunbo01.jpg"
    }, {
      "src": "../../statics/imgs/goodsinfo/lunbo02.jpg",
      "url": "#",
      "img": "../../statics/imgs/goodsinfo/lunbo02.jpg"
    }, {
      "src": "../../statics/imgs/goodsinfo/lunbo03.jpg",
      "url": "#",
      "img": "../../statics/imgs/goodsinfo/lunbo03.jpg"
    }
  ]
}

步骤三:创建photoinfo.vue

View Code

View Code

手机版美高梅网站 55手机版美高梅网站 56

步骤四:配置入口文件的路由规则

手机版美高梅网站 57手机版美高梅网站 58

<template>
  <div id="tml">
    <!--实现的是图片详情和缩略图-->
    <div id="desc">
      <!--图片详情- 标题部分-->
      <div class="title">
        <h4>{{photoinfo.title}}</h4>
        <p>
          {{photoinfo.add_time | datefmt('YYYY-MM-DD')}} {{photoinfo.click}}次浏览
        </p>
        <p class="line"></p>
      </div>

      <!--缩略图-->
      <div class="mui-content">
        <ul class="mui-table-view mui-grid-view mui-grid-9">
          <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
            <a href="#">
              <img src="../../../statics/imgs/home/home02.jpg" style="width: 100%;"/>
            </a>
          </li>
        </ul>
      </div>

      <!--图片详情- 摘要部分-->
      <p v-html="photoinfo.content"></p>
    </div>

    <!--集成评论组件-->
    <div id="comment">
      <comment></comment>
    </div>
  </div>
</template>

<script>
  //导入评论组件
  import comment from '../subcom/comment.vue';
  import { Toast } from 'mint-ui';
  export default {
    components: {
      comment //注册评论组件
    },
    data() {
      return {
        id: 0, //图片的id
        photoinfo: {} //图片的详情描述数据对象
      }
    },
    created() {
      this.id = this.$route.params.id;
      //ajax请求图片的详情数据
      this.getinfo();
    },
    methods: {
      //1.0  获取图片想起描述数据
      getinfo() {
        var url = '../../../statics/json/photoinfo.json';
        this.$http.get(url).then(function (res) {
          var body = res.body;
          if (body.status != 0) {
            Toast(body.message);
            return;
          }

          for (var i = 0; i < body.message.length; i++) {
            if (this.id == body.message[i].id) {
              this.photoinfo = body.message[i];
            }
          }
        });
      }
    }
  }
</script>

<style scoped>
  /*图片详情样式*/  
  #desc {
    padding: 10px;
  }
  #desc .title h4 {
    color: #0094ff;
  }
  #desc .title p {
    color: rgba(0, 0, 0, 0.4);
    margin-top: 10px;
  }
  #desc .title .line {
    width: 100%;
    height: 1px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.4);
  }
  .mui-content,
  .mui-content ul {
    background-color: #fff;
  }
  .mui-grid-view.mui-grid-9 .mui-table-view-cell {
    border-right: 0px;
    border-bottom: 0px;
  }
  .mui-grid-view.mui-grid-9 {
    border-top: 0px;
    border-left: 0px;
  }
</style>

手机版美高梅网站 59手机版美高梅网站 60

{
  "status": 0,
  "message": [
    {
      "src": "../../statics/imgs/goodsinfo/lunbo04.jpg",
      "url": "#",
      "img": "../../statics/imgs/goodsinfo/lunbo04.jpg"
    }, {
      "src": "../../statics/imgs/goodsinfo/lunbo05.jpg",
      "url": "#",
      "img": "../../statics/imgs/goodsinfo/lunbo05.jpg"
    }, {
      "src": "../../statics/imgs/goodsinfo/lunbo06.jpg",
      "url": "#",
      "img": "../../statics/imgs/goodsinfo/lunbo06.jpg"
    }
  ]
}

View Code

//导入vue核心包
import Vue from 'vue';

//导入vue-router
import vueRouter from 'vue-router';
//将vueRouter对象绑定到Vue对象上
Vue.use(vueRouter);

//将vue-resource在vue中绑定,自动在vue对象实例上注入一个$http对象就可以使用ajax方法了
import vueResource from 'vue-resource';
Vue.use(vueResource);

//导入App.vue的vue对象
import App from './App.vue';

//导入路由规则对应的组件对象
import home from './components/Home.vue';
import shopcar from './components/shopcar/car.vue';
import news from './components/news/newslist.vue';
import newsinfo from './components/news/newsinfo.vue';

//定义路由规则
var router1 = new vueRouter({
  //改变路由激活时的class名称
  linkActiveClass: 'mui-active',
  routes: [{
      path: '/',
      component: home
    },
    {
      path: '/home',
      component: home
    },
    {
      path: '/shopcar',
      component: shopcar
    }, {
      path: '/news/newlist',
      component: news
    },{
      path: '/news/newsinfo/:id',
      component: newsinfo
    }
  ]
});

//导入mint-ui的css文件
import 'mint-ui/lib/style.min.css';
//导入mint-ui组件对象
import mintui from 'mint-ui';
//在Vue中全局使用mintui
Vue.use(mintui);

//注册mui的css样式
import '../statics/mui/css/mui.css';

//导入一个当前系统的全局基本样式
import '../statics/css/site.css';

//定义一个全局过滤器实现日期的格式化
import moment from 'moment';
Vue.filter('datefmt',function(input,fmtstring){
    //使用momentjs这个日期格式化类库实现日期的格式化功能
    //input代表左值(原始时间格式),fmtstring代表右值括号内的规则
    return moment(input).format(fmtstring);
});

//利用Vue对象进行解析渲染
new Vue({
  el: '#app',
  //使用路由对象实例
  router: router1,
  render: c => c(App)
})

View Code

步骤四:配置入口文件main.js

View Code

步骤三:修改goodsinfo.vue文件

手机版美高梅网站 61手机版美高梅网站 62

项目结构图:

手机版美高梅网站 63手机版美高梅网站 64

//导入vue核心包
import Vue from 'vue';

//导入vue-router
import vueRouter from 'vue-router';
//将vueRouter对象绑定到Vue对象上
Vue.use(vueRouter);

//将vue-resource在vue中绑定,自动在vue对象实例上注入一个$http对象就可以使用ajax方法了
import vueResource from 'vue-resource';
Vue.use(vueResource);

//导入App.vue的vue对象
import App from './App.vue';

//导入路由规则对应的组件对象
import home from './components/Home.vue';
import shopcar from './components/shopcar/car.vue';
import news from './components/news/newslist.vue';
import newsinfo from './components/news/newsinfo.vue';
import photolist from './components/photo/photolist.vue';
import photoinfo from './components/photo/photoinfo.vue';

//定义路由规则
var router1 = new vueRouter({
  //改变路由激活时的class名称
  linkActiveClass: 'mui-active',
  routes: [{
      path: '/',
      component: home
    },
    {
      path: '/home',
      component: home
    },
    {
      path: '/shopcar',
      component: shopcar
    }, {
      path: '/news/newlist',
      component: news
    },{
      path: '/news/newsinfo/:id',
      component: newsinfo
    },{
      path: '/photo/photolist',
      component: photolist
    },{
      path: '/photo/photoinfo/:id',
      component: photoinfo
    }
  ]
});

//导入mint-ui的css文件
import 'mint-ui/lib/style.min.css';
//导入mint-ui组件对象
import mintui from 'mint-ui';
//在Vue中全局使用mintui
Vue.use(mintui);

//注册mui的css样式
import '../statics/mui/css/mui.css';

//导入一个当前系统的全局基本样式
import '../statics/css/site.css';

//定义一个全局过滤器实现日期的格式化
import moment from 'moment';
Vue.filter('datefmt',function(input,fmtstring){
    //使用momentjs这个日期格式化类库实现日期的格式化功能
    //input代表左值(原始时间格式),fmtstring代表右值括号内的规则
    return moment(input).format(fmtstring);
});

//利用Vue对象进行解析渲染
new Vue({
  el: '#app',
  //使用路由对象实例
  router: router1,
  render: c => c(App)
})

手机版美高梅网站 65

<template>
  <div id="tml">
    <!--1.0 商品轮播图-->
    <silder :imgs="imgs"></silder>

    <!--2.0 实现商品购买区-->

    <!--3.0 图文详情-->

    <!--4.0 商品评论-->
  </div>
</template>

<script>
  import silder from '../subcom/slider.vue';

  export default {
    components: {
      silder
    },
    data() {
      return {
        id: 0, //表示商品id
        imgs: []
      }
    },
    created() {
      //获取url传入的商品id值
      this.id = this.$route.params.id;
      this.getimgs();
    },
    methods: {
      getimgs() {
        var url = '../../../statics/json/goodslunbo' + this.id + '.json';
        this.$http.get(url).then(function(res) {
          if(res.body.status != 0) {
            Toast(res.body.message);
            return;
          }
          //当服务器返回了正常数据的时候做赋值操作
          this.imgs = res.body.message;
        });
      }
    }
  }
</script>

<style scoped>

</style>

View Code

 

View Code

 

实现评论组件

 

实现缩略图九宫格和使用预览图片vue-preview插件

步骤一:创建一个评论组件comment.vue。由于没有使用到数据库方面的技术,因此在这一块有很多必须的功能都未开发

实现商品购买区

步骤一:安装vue-preview

手机版美高梅网站 66手机版美高梅网站 67

步骤一:修改goodsinfo.vue文件

手机版美高梅网站 68

<template>
  <div id="tml">
    <!--评论组件-->
    <!--实现提交评论数据到服务器的静态结构-->
    <div id="postcomment">
      <h4>提交评论</h4>
      <p class="p"></p>
      <textarea placeholder="请输入您要评论的内容..." v-model="postcontent"></textarea>
      <mt-button type="primary" size="large" @click="postcomment">发表</mt-button>
    </div>
    <!--实现获取评论数据列表-->
    <div id="list">
      <h4>评论列表</h4>
      <p class="p"></p>
      <div v-for="(item,index) in list">
        <div class="title">
          第{{index + 1}}楼
          用户:{{item.user_name}}
          发表时间:{{item.add_time | datefmt('YYYY-MM-DD')}}
        </div>
        <ul class="mui-table-view">
          <li class="mui-table-view-cell" v-text="item.content"></li>
        </ul>
      </div>
    </div>
    <!--实现获取更多按钮-->
    <mt-button type="danger" size="large" plain>加载更多</mt-button>
  </div>
</template>

<script>
  import { Toast } from 'mint-ui';
  export default {
    data() {
      return {
        id: 0,
        postcontent: '', //用来自动获取用户填写的评论内容
        list: [] //评论数据的数组
      }
    },
    created() {
      //获取url传入的id参数值赋值给data中的id属性
      this.id = this.$route.params.id;
      //获取当前资讯数据的评论信息列表
      this.getcommentlist();
    },
    methods: {
      //获取当前数据的评论数据 pageindex:代表的是当前获取的是哪一页的数据,默认值是1
      getcommentlist() {
        //确定评论数据的url
        var url = '../../statics/json/userslist.json';
        //发出ajax请求获取数据即可
        this.$http.get(url).then(function (res) {
          if (res.body.status != 0) {
            Toast(res.body.message);
            return;
          }
          //3.0 message数组中的数据赋值给this.list
          this.list = this.list.concat(res.body.message);
        });
      },
      //1.0 评论数据的提交
      postcomment() {
        //2.0 判断用户是否填写评论内容
        if (this.postcontent.trim().length <= 0) {
          Toast('您要评论的内容不能为空');
          return;
        }
      }
    }
  }
</script>

<style scoped>
  /* 1.0 实现提交评论样式 */  
  #postcomment {
    padding: 5px;
  }
  .p {
    height: 1px;
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  }
  /*2.0 评论列表的样式*/ 
  #list {
    padding: 5px;
  }
  .title {
    padding: 5px;
    color: #6d6d72;
    font-size: 15px;
    background-color: rgba(0, 0, 0, 0.1);
  }
  textarea {
    height: 70px;
    width: 100%;
    box-sizing: border-box;
    margin-right: 10px;
  }
</style>

手机版美高梅网站 69手机版美高梅网站 70

步骤二:配置webpack.config.js文件

View Code

<template>
  <div id="tml">
    <!--1.0 商品轮播图-->
    <div class="silder">
      <silder :imgs="imgs"></silder>
    </div>

    <!--2.0 实现商品购买区-->
    <div id="buy">
      <h4 v-text="info.title"></h4>
      <p class="line"></p>
      <ul>
        <li class="price">
          市场价: <s>¥{{info.market_price}}</s> 销售价:¥{{info.sell_price}}
        </li>
        <li>
          购买数量:
        </li>
        <li>
          <mt-button type="primary" size="small">立即购买</mt-button>
          <mt-button type="danger" size="small">加入购物车</mt-button>
        </li>
      </ul>
    </div>

    <div id="params">
      <h6>商品参数</h6>
      <p class="line"></p>
      <ul>
        <li>商品货号:{{info.goods_no}}</li>
        <li>库存情况:{{info.stock_quantity}}</li>
        <li>上架时间:{{info.add_time}}</li>
      </ul>
    </div>

    <!--3.0 图文详情-->
    <!--4.0 商品评论-->
    <div id="other">
      <mt-button plain class="imgdesc" type="primary" size="large">图文详情</mt-button>
      <mt-button plain type="danger" size="large">商品评论</mt-button>
    </div>
  </div>
</template>

<script>
  import silder from '../subcom/slider.vue';

  export default {
    components: {
      silder
    },
    data() {
      return {
        id: 0, //表示商品id
        imgs: [],
        info: {} //存储商品详细信息
      }
    },
    created() {
      //获取url传入的商品id值
      this.id = this.$route.params.id;
      this.getimgs();
      this.getinfo();
    },
    methods: {
      getimgs() {
        var url = '../../../statics/json/goodslunbo' + this.id + '.json';
        this.$http.get(url).then(function(res) {
          //判断状态
          this.imgs = res.body.message;
        });
      },
      getinfo() {
        var url = '../../../statics/json/goodslist.json';
        this.$http.get(url).then(function(res) {
          var body = res.body;
          if(body.status != 0) {
            alert(body.message);
            return;
          }

          for(var i = 0; i < body.message.length; i++) {
            if(this.id == body.message[i].id) {
              console.log(body.message[i])
              this.info = body.message[i];
              console.log(this.info);
            }
          }
        });
      }

    }
  }
</script>

<style scoped>
  .silder {
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    margin: 5px;
  }

  #buy,
  #params,
  #other {
    margin: 5px;
    padding: 5px;
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: 5px;
  }

  .line {
    height: 1px;
    border: 1px solid rgba(0, 0, 0, 0.2);
  }

  #buy ul,
  #params ul {
    padding-left: 0px;
  }

  #buy h4 {
    color: #0094ff;
    padding: 5px;
  }

  #buy li,
  #params li {
    list-style: none;
    padding: 8px;
  }

  #buy .price span {
    color: red;
  }

  #other .imgdesc {
    margin-bottom: 20px;
  }
</style>

手机版美高梅网站 71手机版美高梅网站 72

步骤二:创建一个userlist.json文件,存储相关的评论信息

View Code

var htmlwp = require('html-webpack-plugin');

module.exports = {
  entry: './src/main.js', 
  output: {
    path: __dirname + '/dist', 
    filename: 'build.js' 
  },
  module: {
    loaders: [{
        test: /.css$/, 
        loader: 'style-loader!css-loader'
      },
      {
        test: /.scss$/, 
        loader: 'style-loader!css-loader!sass-loader'
      },
      {
        test: /.less$/, 
        loader: 'style-loader!css-loader!less-loader'
      },
      {
        test: /.(png|jpg|gif|ttf|svg)$/, 
        loader: 'url-loader?limit=40000'
      },
      {
        test: /.js$/, 
        loader: 'babel-loader?presets[]=es2015',
        //node_modules中的所有.js文件不去转换,提高打包性能
        exclude: /node_modules/
      },
      {
        test: /.vue$/, 
        loader: 'vue-loader'
      },
      {
         //vue-preivew组件专用
        test: /vue-preview.src.*?js$/,
        loader: 'babel-loader'
      }
    ]
  },

  plugins: [
    new htmlwp({
      title: '首页',
      filename: 'index.html',
      template: 'index.html'
    })
  ]
}

手机版美高梅网站 73手机版美高梅网站 74

步骤二:创建goodslist.json文件

View Code

{
  "status": 0,
  "message": [
    {
      "user_name": "jack李",
      "add_time": "2017-12-23",
      "content": "有点意思,希望越来越好"
    }, {
      "user_name": "hock廖",
      "add_time": "2017-12-21",
      "content": "尝到泪水的味道,才发现酒是那么的好喝"
    }, {
      "user_name": "猪猪侠",
      "add_time": "2017-12-20",
      "content": "2018我来也"
    }
  ]
}

手机版美高梅网站 75手机版美高梅网站 76

步骤三:配置入口文件main.js

View Code

{
  "status": 0,
  "message": [
    {
      "id": 1,
      "title": "动漫被套床单",
      "add_time": "2017-12-25",
      "zhaiyao": "尺寸图样皆可以订制,如果在店铺展示页面没有喜欢的角色,可以咨询客服,查看图库,进行选取!",
      "click": 30,
      "img_url": "../../statics/imgs/goodslist/goodslist01.jpg",
      "sell_price": 78,
      "market_price": 68,
      "stock_quantity": 200,
      "goods_no": "SD13313123"
    }, {
      "id": 2,
      "title": "二次元毛绒抱枕",
      "add_time": "2017-12-25",
      "zhaiyao": "此优惠限5件,超出则该商品全部恢复非活动价",
      "click": 33,
      "img_url": "../../statics/imgs/goodslist/goodslist02.jpg",
      "sell_price": 58,
      "market_price": 63,
      "stock_quantity": 500,
      "goods_no": "SD13313123"
    }, {
      "id": 3,
      "title": "逍遥宅品猫咪痛包",
      "add_time": "2017-12-25",
      "zhaiyao": "一共是一个外包+印花猫咪内包+纯色内包+肩带+手拎带。自由发挥自主搭配!带子之后会换成皮的!",
      "click": 34,
      "img_url": "../../statics/imgs/goodslist/goodslist03.jpg",
      "sell_price": 57,
      "market_price": 63,
      "stock_quantity": 500,
      "goods_no": "SD13313123"
    }, {
      "id": 4,
      "title": "动漫周边保温杯",
      "add_time": "2017-12-25",
      "zhaiyao": "采用304不锈钢 双层真空内胆 保温久不烫手 支持来图定制 买就送杯套",
      "click": 36,
      "img_url": "../../statics/imgs/goodslist/goodslist04.jpg",
      "sell_price": 80,
      "market_price": 100,
      "stock_quantity": 300,
      "goods_no": "SD13313123"
    }, {
      "id": 5,
      "title": "雪初音卫衣棉服",
      "add_time": "2017-12-25",
      "zhaiyao": "此优惠限5件,超出则该商品全部恢复非活动价",
      "click": 63,
      "img_url": "../../statics/imgs/goodslist/goodslist05.jpg",
      "sell_price": 66,
      "market_price": 80,
      "stock_quantity": 300,
      "goods_no": "SD13313123"
    }, {
      "id": 6,
      "title": "Monchhichi萌趣趣",
      "add_time": "2017-12-25",
      "zhaiyao": "Monchhichi萌趣趣十二生肖狗鸡小兔马羊龙老虎猪小鸡公仔送人礼品",
      "click": 38,
      "img_url": "../../statics/imgs/goodslist/goodslist06.jpg",
      "sell_price": 75,
      "market_price": 90,
      "stock_quantity": 800,
      "goods_no": "SD13313123"
    }
  ]
}

手机版美高梅网站 77手机版美高梅网站 78

步骤三:修改newsinfo.vue文件

View Code

//导入vue核心包
import Vue from 'vue';

//导入App.vue的vue对象
import App from './App.vue';

//导入vue-router
import vueRouter from 'vue-router';

//将vueRouter对象绑定到Vue对象上
Vue.use(vueRouter);

//导入路由规则对应的组件对象
import home from './components/Home.vue';
import shopcar from './components/shopcar/car.vue';
import newslist from './components/news/newslist.vue';
import newsinfo from './components/news/newsinfo.vue';
import photolist from './components/photo/photolist.vue';
import photoinfo from './components/photo/photoinfo.vue';

//定义路由规则
var router1 = new vueRouter({
    //改变路由激活时的class名称
  linkActiveClass: 'mui-active', 
  routes: [{
      path: '/',
      component: home 
    }, {
      path: '/home',
      component: home
    },
    {
      path: '/shopcar',
      component: shopcar
    },
    {
      path: '/news/newslist',
      component: newslist
    },
    {
      path: '/news/newsinfo/:id',
      component: newsinfo
    },
    {
      path: '/photo/photolist',
      component: photolist
    },
    {
      path: '/photo/photoinfo/:id',
      component: photoinfo
    }
  ]
});

//导入mint-ui的css文件
import 'mint-ui/lib/style.min.css';
//导入mint-ui组件对象
import mintui from 'mint-ui';
//在Vue中全局使用mintui
Vue.use(mintui);

//注册mui的css样式
import '../statics/mui/css/mui.css';

//导入一个当前系统的全局基本样式
import '../statics/css/site.css';

//将vue-resource在vue中绑定,自动在vue对象实例上注入一个$http对象就可以使用ajax方法了
import vueResource from 'vue-resource';
Vue.use(vueResource);

//定义一个全局过滤器实现日期的格式化
import moment from 'moment';
Vue.filter('datefmt', function(input, fmtstring) {
  //使用momentjs这个日期格式化类库实现日期的格式化功能
  //input代表左值(原始时间格式),fmtstring代表右值括号内的规则
  return moment(input).format(fmtstring);
});

//使用图片预览组件vue-preview
import VuePreview from 'vue-preview';
Vue.use(VuePreview);

//利用Vue对象进行解析渲染
new Vue({
  el: '#app',
  //使用路由对象实例
  router: router1,
  render: c => c(App) //es6写法
})

手机版美高梅网站 79手机版美高梅网站 80

 

View Code

<template>
  <div id="tml">
    <!--1.0 实现新闻详情-->
    <div class="title">
      <h4 v-text="info.title"></h4>
      <p>
        {{ info.add_time | datefmt('YYYY-MM-DD') }}
        {{info.click}}次浏览
        <div id="content" v-html="info.content"></div>
      </p>
    </div>
    <!--调用评论组件-->
    <comment></comment>
  </div>
</template>

<script>
  //导入评论组件 comment.vue
  import comment from '../subcom/comment.vue';
  export default {
    components: {
      comment // 注册评论组件
    },
    data() {
      return {
        id: 0, // 传入的id值
        info: {}
      }
    },
    created() {
      //1.0 获取url传入的id参数值赋值给data中的id属性
      this.id = this.$route.params.id;
      //2.0 请求服务器获取到这个id对应的详情数据对象
      this.getinfo();
    },
    methods: {
      getinfo() {
        //1.0 定义url
        var url = '../../statics/json/newsinfo.json';
        //2.0 发出ajax请求获取数据
        this.$http.get(url).then(function (res) {
          var body = res.body;
          if (body.status != 0) {
            alert(body.message);
            return;
          }
          for (var i = 0; i < body.message.length; i++) {
            if (this.id == body.message[i].id) {
              this.info = body.message[i];
            }
          }
        });
      }
    }
  }
</script>

<style scoped>
  .title h4 {
    color: #0094ff;
  }
  .title p {
    color: rgba(0, 0, 0, 0.5);
  }
  .title,
  #content {
    padding: 5px;
  }
  #content {
    line-height: 27px;
  }
</style>

实现商品图文详情

步骤四:修改photoinfo.vue文件

View Code

步骤一:创建一个goodsdesc.json文件

手机版美高梅网站 81手机版美高梅网站 82

 项目结构图:

手机版美高梅网站 83手机版美高梅网站 84

<template>
  <div id="tml">
    <!--实现的是图片详情和缩略图-->
    <div id="desc">
      <!--图片详情- 标题部分-->
      <div class="title">
        <h4>{{photoinfo.title}}</h4>
        <p>
          {{photoinfo.add_time | datefmt('YYYY-MM-DD')}} {{photoinfo.click}}次浏览
        </p>
        <p class="line"></p>
      </div>

      <!--缩略图使用到mui和vue-preview-->
      <div class="mui-content">
        <ul class="mui-table-view mui-grid-view mui-grid-9">
          <li v-for="(item,index) in list" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
            <img class="preview-img" :src="item.src" height="100" @click="$preview.open(index, list)">
          </li>
        </ul>
      </div>

      <!--图片详情- 摘要部分-->
      <p v-html="photoinfo.content"></p>
    </div>

    <!--集成评论组件-->
    <div id="comment">
      <comment :id="id"></comment>
    </div>
  </div>
</template>

<script>
  //导入评论组件
  import comment from '../subcom/comment.vue';
  import { Toast } from 'mint-ui';
  export default {
    components: {
      comment //注册评论组件
    },
    data() {
      return {
        //图片的id
        id: 0,
        //图片的详情描述数据对象
        photoinfo: {},
        list: []
      }
    },
    created() {
      this.id = this.$route.params.id;
      //ajax请求图片的详情数据
      this.getinfo();
      this.getimgs();
    },
    methods: {
      //获取图片详细描述数据
      getinfo() {
        var url = '../../../statics/json/photoinfo.json';
        this.$http.get(url).then(function (res) {
          var body = res.body;
          if (body.status != 0) {
            Toast(body.message);
            return;
          }

          //将正常的逻辑数据赋值给this.photoinfo对象
          for (var i = 0; i < body.message.length; i++) {
            if (this.id == body.message[i].id) {
              this.photoinfo = body.message[i];
            }
          }
        });
      },
      getimgs() {
        var url = '../../../statics/json/imginfo' + this.id + '.json';
        this.$http.get(url).then(function (res) {
          var body = res.body;
          if (body.status != 0) {
            Toast(body.message);
            return;
          }
          this.list = body.message;
        });
      }
    }

  }
</script>

<style scoped>
  /*图片详情样式*/

  #desc {
    padding: 10px;
  }
  #desc .title h4 {
    color: #0094ff;
  }
  #desc .title p {
    color: rgba(0, 0, 0, 0.4);
    margin-top: 10px;
  }
  #desc .title .line {
    width: 100%;
    height: 1px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.4);
  }
  .mui-content,
  .mui-content ul {
    background-color: #fff;
  }
  .mui-grid-view.mui-grid-9 .mui-table-view-cell {
    border-right: 0px;
    border-bottom: 0px;
  }
  .mui-grid-view.mui-grid-9 {
    border-top: 0px;
    border-left: 0px;
  }
</style>

手机版美高梅网站 85

{
  "status": 0,
  "message": [
    {
      "id": 1,
      "title": "动漫被套床单",
      "content": "尺寸图样皆可以订制,如果在店铺展示页面没有喜欢的角色,可以咨询客服,查看图库,进行选取!"
    }, {
      "id": 2,
      "title": "二次元毛绒抱枕",
      "content": "此优惠限5件,超出则该商品全部恢复非活动价"
    }
  ]
}

View Code

 

View Code

步骤五:创建imginfo1.json和imginfo2.json

步骤二:创建goodsdesc.vue文件

手机版美高梅网站 86手机版美高梅网站 87

手机版美高梅网站 88手机版美高梅网站 89

imginfo1.json

{
  "status": 0,
  "message": [
    {
      "src": "../../statics/imgs/imginfo/haizei01.jpg",
      "h": 230,
      "w": 300
    }, {
      "src": "../../statics/imgs/imginfo/haizei02.jpg",
      "h": 230,
      "w": 300
    }, {
      "src": "../../statics/imgs/imginfo/haizei03.jpg",
      "h": 230,
      "w": 300
    }, {
      "src": "../../statics/imgs/imginfo/haizei04.jpg",
      "h": 230,
      "w": 300
    }, {
      "src": "../../statics/imgs/imginfo/haizei05.jpg",
      "h": 230,
      "w": 300
    }, {
      "src": "../../statics/imgs/imginfo/haizei06.jpg",
      "h": 230,
      "w": 300
    }
  ]
}
<template>
  <div id="tml">
    <h4 v-text="info.title" style="padding-top: 10px;"></h4>
    <p class="line"></p>
    <p v-html="info.content"></p>
  </div>
</template>

<script>
  import { Toast } from 'mint-ui';
  export default {
    data() {
      return {
        id: 0, // 代表的是当前商品的id
        info: {}
      }
    },
    created() {
      this.id = this.$route.params.id;
      this.getinfo();
    },
    methods: {
      getinfo() {
        //1.0 定义url
        var url = '../../../statics/json/goodsdesc.json';
        //2.0 发出ajax请求获取数据
        this.$http.get(url).then(function (res) {
          var body = res.body;
          if (body.status != 0) {
            alert(body.message);
            return;
          }
          //3.0 赋值
          for (var i = 0; i < body.message.length; i++) {
            if (this.id == body.message[i].id) {
              console.log(body.message[i])
              this.info = body.message[i];
              console.log(this.info);
            }
          }
        });
      }
    }
  }
</script>

<style scoped>
  #tmpl {
    padding: 5px;
    margin-top: 60px;
  }
  #tmpl h4 {
    color: #0094ff;
  }
  #tmpl .line {
    height: 1px;
    border: 1px solid rgba(0, 0, 0, 0.3);
  }
</style>

View Code

手机版美高梅网站,View Code

手机版美高梅网站 90手机版美高梅网站 91

步骤三:修改goodsinfo.vue文件

imginfo2.json

{
  "status": 0,
  "message": [
    {
      "src": "../../statics/imgs/imginfo/huoying01.jpg",
      "h": 230,
      "w": 300
    }, {
      "src": "../../statics/imgs/imginfo/huoying02.jpg",
      "h": 230,
      "w": 300
    }, {
      "src": "../../statics/imgs/imginfo/huoying03.jpg",
      "h": 230,
      "w": 300
    }, {
      "src": "../../statics/imgs/imginfo/huoying04.jpg",
      "h": 230,
      "w": 300
    }, {
      "src": "../../statics/imgs/imginfo/huoying05.jpg",
      "h": 230,
      "w": 300
    }, {
      "src": "../../statics/imgs/imginfo/huoying06.jpg",
      "h": 230,
      "w": 300
    }
  ]
}

手机版美高梅网站 92手机版美高梅网站 93

View Code

<template>
  <div id="tml">
    <!--1.0 商品轮播图-->
    <div class="silder">
      <silder :imgs="imgs"></silder>
    </div>

    <!--2.0 实现商品购买区-->
    <div id="buy">
      <h4 v-text="info.title"></h4>
      <p class="line"></p>
      <ul>
        <li class="price">
          市场价: <s>¥{{info.market_price}}</s> 销售价:¥{{info.sell_price}}
        </li>
        <li>
          购买数量:
        </li>
        <li>
          <mt-button type="primary" size="small">立即购买</mt-button>
          <mt-button type="danger" size="small">加入购物车</mt-button>
        </li>
      </ul>
    </div>

    <div id="params">
      <h6>商品参数</h6>
      <p class="line"></p>
      <ul>
        <li>商品货号:{{info.goods_no}}</li>
        <li>库存情况:{{info.stock_quantity}}</li>
        <li>上架时间:{{info.add_time}}</li>
      </ul>
    </div>

    <!--3.0 图文详情-->
    <!--4.0 商品评论-->
    <div id="other">
      <router-link v-bind="{to:'/goods/goodsdesc/'+id}">
            <mt-button class="imgdesc" type="primary" size="large">图文详情</mt-button>
            </router-link>
            <mt-button type="danger" size="large">商品评论</mt-button>
    </div>
  </div>
</template>

<script>
  import silder from '../subcom/slider.vue';

  export default {
    components: {
      silder
    },
    data() {
      return {
        id: 0, //表示商品id
        imgs: [],
        info: {} //存储商品详细信息
      }
    },
    created() {
      //获取url传入的商品id值
      this.id = this.$route.params.id;
      this.getimgs();
      this.getinfo();
    },
    methods: {
      getimgs() {
        var url = '../../../statics/json/goodslunbo' + this.id + '.json';
        this.$http.get(url).then(function(res) {
          //判断状态
          this.imgs = res.body.message;
        });
      },
      getinfo() {
        var url = '../../../statics/json/goodslist.json';
        this.$http.get(url).then(function(res) {
          var body = res.body;
          if(body.status != 0) {
            alert(body.message);
            return;
          }

          for(var i = 0; i < body.message.length; i++) {
            if(this.id == body.message[i].id) {
              this.info = body.message[i];
            }
          }
        });
      }

    }
  }
</script>

<style scoped>
  .silder {
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    margin: 5px;
  }  
  #buy,
  #params,
  #other {
    margin: 5px;
    padding: 5px;
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: 5px;
  } 
  .line {
    height: 1px;
    border: 1px solid rgba(0, 0, 0, 0.2);
  }  
  #buy ul,
  #params ul {
    padding-left: 0px;
  }  
  #buy h4 {
    color: #0094ff;
    padding: 5px;
  } 
  #buy li,
  #params li {
    list-style: none;
    padding: 8px;
  }  
  #buy .price span {
    color: red;
  }  
  #other .imgdesc {
    margin-bottom: 20px;
  }
</style>

项目结构图:

View Code

手机版美高梅网站 94

步骤四:配置入口文件main.js的路由规则

 

手机版美高梅网站 95手机版美高梅网站 96

//导入vue核心包
import Vue from 'vue';

//导入App.vue的vue对象
import App from './App.vue';

//导入vue-router
import vueRouter from 'vue-router';
//将vueRouter对象绑定到Vue对象上
Vue.use(vueRouter);

//使用图片预览组件vue-preview
import VuePreview from 'vue-preview';
Vue.use(VuePreview);

//导入mint-ui的css文件
import 'mint-ui/lib/style.min.css';
//导入mint-ui组件对象
import mintui from 'mint-ui';
//在Vue中全局使用mintui
Vue.use(mintui);

//注册mui的css样式
import '../statics/mui/css/mui.css';

//导入一个当前系统的全局基本样式
import '../statics/css/site.css';

//将vue-resource在vue中绑定,自动在vue对象实例上注入一个$http对象就可以使用ajax方法了
import vueResource from 'vue-resource';
Vue.use(vueResource);

//导入路由规则对应的组件对象
import home from './components/Home.vue';
import shopcar from './components/shopcar/car.vue';
import newslist from './components/news/newslist.vue';
import newsinfo from './components/news/newsinfo.vue';
import photolist from './components/photo/photolist.vue';
import photoinfo from './components/photo/photoinfo.vue';
import goodslist from './components/goods/goodslist.vue';
import goodsinfo from './components/goods/goodsinfo.vue';
import goodsdesc from './components/goods/goodsdesc.vue';

//定义路由规则
var router1 = new vueRouter({
    //改变路由激活时的class名称
  linkActiveClass: 'mui-active', 
  routes: [{
      path: '/',
      component: home 
    }, {
      path: '/home',
      component: home
    },
    {
      path: '/shopcar',
      component: shopcar
    },
    {
      path: '/news/newslist',
      component: newslist
    },
    {
      path: '/news/newsinfo/:id',
      component: newsinfo
    },
    {
      path: '/photo/photolist',
      component: photolist
    },
    {
      path: '/photo/photoinfo/:id',
      component: photoinfo
    },
    {
      path: '/goods/goodslist',
      component: goodslist
    },
    {
      path: '/goods/goodsinfo/:id',
      component: goodsinfo
    },
    {
      path: '/goods/goodsdesc/:id',
      component: goodsdesc
    }
  ]
});

//定义一个全局过滤器实现日期的格式化
import moment from 'moment';
Vue.filter('datefmt', function(input, fmtstring) {
  //使用momentjs这个日期格式化类库实现日期的格式化功能
  //input代表左值(原始时间格式),fmtstring代表右值括号内的规则
  return moment(input).format(fmtstring);
});

//利用Vue对象进行解析渲染
new Vue({
  el: '#app',
  //使用路由对象实例
  router: router1,
  render: c => c(App) //es6写法
})

View Code

 

实现购买功能区

步骤一:创建一个组件inputNumber.vue

手机版美高梅网站 97手机版美高梅网站 98

<template>
  <div id="subtmpl">
    <div class="inleft div" @click="substrict">-</div>
    <div class="incenter div" v-text="count"></div>
    <div class="inright div" @click="add">+</div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        count: 1 //代表购买商品的数量
      }
    },
    methods: {
      substrict() {
        this.count--;
        //                确保最小值为1
        if(this.count < 1) {
          this.count = 1;
        }
        this.sendmessage();
      },
      add() {
        this.count++;
        this.sendmessage();
      },
      sendmessage() {
        this.$emit('dataobj', this.count);
      }
    }
  }
</script>

<style scoped>
  #subtmpl .div {
    width: 40px;
    height: 25px;
    line-height: 25px;
    border: 1px solid #000;
    display: inline-block;
    text-align: center;
  }
</style>

View Code

步骤二:修改goodsinfo.vue文件

手机版美高梅网站 99手机版美高梅网站 100

<template>
  <div id="tml">
    <!--1.0 商品轮播图-->
    <div class="silder">
      <silder :imgs="imgs"></silder>
    </div>

    <!--2.0 实现商品购买区-->
    <div id="buy">
      <h4 v-text="info.title"></h4>
      <p class="line"></p>
      <ul>
        <li class="price">
          市场价: <s>¥{{info.market_price}}</s> 销售价:¥{{info.sell_price}}
        </li>
        <li>
          <li class="inputli">
            购买数量:
            <inputnumber v-on:dataobj="getcount" class="inputnumber"></inputnumber>
          </li>
        </li>
        <li>
          <mt-button type="primary" size="small">立即购买</mt-button>
          <mt-button type="danger" size="small">加入购物车</mt-button>
        </li>
      </ul>
    </div>

    <div id="params">
      <h6>商品参数</h6>
      <p class="line"></p>
      <ul>
        <li>商品货号:{{info.goods_no}}</li>
        <li>库存情况:{{info.stock_quantity}}</li>
        <li>上架时间:{{info.add_time}}</li>
      </ul>
    </div>

    <!--3.0 图文详情-->
    <!--4.0 商品评论-->
    <div id="other">
      <router-link v-bind="{to:'/goods/goodsdesc/'+id}">
        <mt-button class="imgdesc" type="primary" size="large">图文详情</mt-button>
      </router-link>
      <mt-button type="danger" size="large">商品评论</mt-button>
    </div>
  </div>
</template>

<script>
  import silder from '../subcom/slider.vue';
  import inputnumber from '../subcom/inputNumber.vue';
  export default {
    components: {
      silder,
      inputnumber
    },
    data() {
      return {
        inputNumberCount: 1, //表示当前购买商品的数量
        id: 0, //表示商品id
        imgs: [],
        info: {} //存储商品详细信息
      }
    },
    created() {
      //获取url传入的商品id值
      this.id = this.$route.params.id;
      this.getimgs();
      this.getinfo();
    },
    methods: {
      //获取inputnumber组件中传入的值
      getcount(count) {
        this.inputNumberCount = count;
        console.log(count);
      },
      getimgs() {
        var url = '../../json/goodslunbo' + this.id + '.json';
        this.$http.get(url).then(function(res) {
          //判断状态
          this.imgs = res.body.message;
        });
      },
      getinfo() {
        var url = '../../json/goodslist.json';
        this.$http.get(url).then(function(res) {
          var body = res.body;
          if(body.status != 0) {
            alert(body.message);
            return;
          }

          for(var i = 0; i < body.message.length; i++) {
            if(this.id == body.message[i].id) {
              console.log(body.message[i])
              this.info = body.message[i];
              console.log(this.info);
            }
          }
        });
      }

    }
  }
</script>

<style scoped>
  .silder {
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    margin: 5px;
  }

  #buy,
  #params,
  #other {
    margin: 5px;
    padding: 5px;
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: 5px;
  }

  .line {
    height: 1px;
    border: 1px solid rgba(0, 0, 0, 0.2);
  }

  #buy ul,
  #params ul {
    padding-left: 0px;
  }

  #buy h4 {
    color: #0094ff;
    padding: 5px;
  }

  #buy li,
  #params li {
    list-style: none;
    padding: 8px;
  }

  #buy .price span {
    color: red;
  }

  #other .imgdesc {
    margin-bottom: 20px;
  }

  .inputli {
    position: relative;
  }

  .inputnumber {
    position: absolute;
    left: 100px;
    top: 5px;
  }
</style>

View Code

 

将底部的购物车图标中数字叠加

步骤一:涉及到三个页面的通信,因此需要创建一个共同的Vue对象。

vm.js

import Vue from 'Vue';

export const COUNTSTR = 'inputNumberCount';
export var vm = new Vue();

步骤二:修改根组件App.vue

手机版美高梅网站 101手机版美高梅网站 102

<!--以后项目的根组件-->
<template>
  <div>
    <!--1.0利用mint-ui中的header组件实现整个系统的头部-->
    <mt-header fixed title="hello"></mt-header>

    <!--2.0利用vue-router的<router-view></router-view>进行占位-->
    <router-view></router-view>

    <!--3.0利用mui中的tabbar组件实现系统的底部-->
    <nav class="mui-bar mui-bar-tab">
      <router-link class="mui-tab-item" to="/home">

        首页
      </router-link>
      <router-link class="mui-tab-item" to="#tabbar-with-chat">

        会员
      </router-link>
      <router-link class="mui-tab-item" to="/shopcar">
        0
        购物车
      </router-link>
      <router-link class="mui-tab-item" to="/tabbar-with-map">

        搜索
      </router-link>
    </nav>
  </div>
</template>

<script>
  import { vm, COUNTSTR } from './kits/vm.js';
  // 利用 vm.$on() 来注册 COUNT这个常量代表的事件
  vm.$on(COUNTSTR, function(count) {
    //1.0 将count值追加到购物车中
    var badgeobj = document.querySelector('#badge');
    badgeobj.innerText = parseInt(badgeobj.innerText) + count;
  });

  // 2.0负责导出.vue这个组件对象,它本质上是一个Vue对象
  // 所以Vue中该定义的元素都可以使用
  export default { // es6的导出对象的写法
    data() { //等价于 es5的 data:function(){
      return {

      }
    },
    methods: {

    },
    created() {

    }
  }
</script>

<style scoped>
  /* 3.0当前页面的CSS样式写到这里,其中scoped表示这个里面
      写的CSS代码知识在当前组件页面上有效,不会影响到其他组件页面
     * */
</style>

View Code

步骤三:修改goodsinfo.vue文件

手机版美高梅网站 103手机版美高梅网站 104

<template>
  <div id="tml">
    <!--1.0 商品轮播图-->
    <div class="silder">
      <silder :imgs="imgs"></silder>
    </div>

    <!--2.0 实现商品购买区-->
    <div id="buy">
      <h4 v-text="info.title"></h4>
      <p class="line"></p>
      <ul>
        <li class="price">
          市场价: <s>¥{{info.market_price}}</s> 销售价:¥{{info.sell_price}}
        </li>
        <li>
          <li class="inputli">
            购买数量:
            <inputnumber v-on:dataobj="getcount" class="inputnumber"></inputnumber>
          </li>
        </li>
        <li>
          <mt-button type="primary" size="small">立即购买</mt-button>
          <mt-button type="danger" size="small" @click="toshopcar">加入购物车</mt-button>
        </li>
      </ul>
    </div>

    <div id="params">
      <h6>商品参数</h6>
      <p class="line"></p>
      <ul>
        <li>商品货号:{{info.goods_no}}</li>
        <li>库存情况:{{info.stock_quantity}}</li>
        <li>上架时间:{{info.add_time}}</li>
      </ul>
    </div>

    <!--3.0 图文详情-->
    <!--4.0 商品评论-->
    <div id="other">
      <router-link v-bind="{to:'/goods/goodsdesc/'+id}">
        <mt-button class="imgdesc" type="primary" size="large">图文详情</mt-button>
      </router-link>
      <mt-button type="danger" size="large">商品评论</mt-button>
    </div>
  </div>
</template>

<script>
  import silder from '../subcom/slider.vue';
  import inputnumber from '../subcom/inputNumber.vue';
  //使用vm对象
  import { vm, COUNTSTR } from '../../kits/vm.js';
  export default {
    components: {
      silder,
      inputnumber
    },
    data() {
      return {
        inputNumberCount: 1, //表示当前购买商品的数量
        id: 0, //表示商品id
        imgs: [],
        info: {} //存储商品详细信息
      }
    },
    created() {
      //获取url传入的商品id值
      this.id = this.$route.params.id;
      this.getimgs();
      this.getinfo();
    },
    methods: {
      //加入购物车方法
      toshopcar() {
        //触发事件
        vm.$emit(COUNTSTR, this.inputNumberCount);
      },

      //获取inputnumber组件中传入的值
      getcount(count) {
        this.inputNumberCount = count;
        console.log(count);
      },
      getimgs() {
        var url = '../../json/goodslunbo' + this.id + '.json';
        this.$http.get(url).then(function(res) {
          //判断状态
          this.imgs = res.body.message;
        });
      },
      getinfo() {
        var url = '../../json/goodslist.json';
        this.$http.get(url).then(function(res) {
          var body = res.body;
          if(body.status != 0) {
            alert(body.message);
            return;
          }

          for(var i = 0; i < body.message.length; i++) {
            if(this.id == body.message[i].id) {
              console.log(body.message[i])
              this.info = body.message[i];
              console.log(this.info);
            }
          }
        });
      }

    }
  }
</script>

<style scoped>
  .silder {
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    margin: 5px;
  }

  #buy,
  #params,
  #other {
    margin: 5px;
    padding: 5px;
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: 5px;
  }

  .line {
    height: 1px;
    border: 1px solid rgba(0, 0, 0, 0.2);
  }

  #buy ul,
  #params ul {
    padding-left: 0px;
  }

  #buy h4 {
    color: #0094ff;
    padding: 5px;
  }

  #buy li,
  #params li {
    list-style: none;
    padding: 8px;
  }

  #buy .price span {
    color: red;
  }

  #other .imgdesc {
    margin-bottom: 20px;
  }

  .inputli {
    position: relative;
  }

  .inputnumber {
    position: absolute;
    left: 100px;
    top: 5px;
  }
</style>

View Code

项目结构:

手机版美高梅网站 105

 

本地存储购物数据

步骤一:创建一个负责操作localStorage的js文件

手机版美高梅网站 106手机版美高梅网站 107

localSg.js

// 负责操作localStorage的文件
/*
 *  获取数据:var Str  =localStorage.getItem(key);
 *  添加和追加数据: localStorage.setItem(key,value) ,value 是一个字符串
 *  移除数据 : localStorage.removeItem(key);
 * */

// 1.0 定义常量key,将来操作的localStorage中的数据都以这个key来作为标识
export const KEY = 'goodsdata';
export var valueObj = {
  goodsid: 0,
  count: 0
};

// 2.0 实现数据的增加
// value;格式: {goodsid:87,count:10}
export function setItem(value) {
  //1.0 获取json格式
  var jsonString = localStorage.getItem(KEY);
  jsonString = jsonString || '[]';
  var arr = JSON.parse(jsonString);
  // 2.0 将value追加进入arr
  arr.push(value);
  // 3.0 将arr 转换成json字符串保存起来
  localStorage.setItem(KEY, JSON.stringify(arr));
}

// 3.0 获取数据
export function getItem() {
  var jsonString = localStorage.getItem(KEY);
  //将json格式字符串转换成 js对象
  // jsonString:是一个标准的json格式
  jsonString = jsonString || '[]';

  return JSON.parse(jsonString);
}

// 4.0 移除数据
export function remoteItem() {

}

View Code

步骤二:修改goodsinfo.vue文件

手机版美高梅网站 108手机版美高梅网站 109

<template>
  <div id="tml">
    <!--1.0 商品轮播图-->
    <div class="silder">
      <silder :imgs="imgs"></silder>
    </div>

    <!--2.0 实现商品购买区-->
    <div id="buy">
      <h4 v-text="info.title"></h4>
      <p class="line"></p>
      <ul>
        <li class="price">
          市场价: <s>¥{{info.market_price}}</s> 销售价:¥{{info.sell_price}}
        </li>
        <li>
          <li class="inputli">
            购买数量:
            <inputnumber v-on:dataobj="getcount" class="inputnumber"></inputnumber>
          </li>
        </li>
        <li>
          <mt-button type="primary" size="small">立即购买</mt-button>
          <mt-button type="danger" size="small" @click="toshopcar">加入购物车</mt-button>
        </li>
      </ul>
    </div>

    <div id="params">
      <h6>商品参数</h6>
      <p class="line"></p>
      <ul>
        <li>商品货号:{{info.goods_no}}</li>
        <li>库存情况:{{info.stock_quantity}}</li>
        <li>上架时间:{{info.add_time}}</li>
      </ul>
    </div>

    <!--3.0 图文详情-->
    <!--4.0 商品评论-->
    <div id="other">
      <router-link v-bind="{to:'/goods/goodsdesc/'+id}">
        <mt-button class="imgdesc" type="primary" size="large">图文详情</mt-button>
      </router-link>
      <mt-button type="danger" size="large">商品评论</mt-button>
    </div>
  </div>
</template>

<script>
  import silder from '../subcom/slider.vue';
  import inputnumber from '../subcom/inputNumber.vue';
  //使用vm对象
  import { vm, COUNTSTR } from '../../kits/vm.js';
  import {setItem,valueObj} from '../../kits/localSg.js';
  export default {
    components: {
      silder,
      inputnumber
    },
    data() {
      return {
        inputNumberCount: 1, //表示当前购买商品的数量
        id: 0, //表示商品id
        imgs: [],
        info: {} //存储商品详细信息
      }
    },
    created() {
      //获取url传入的商品id值
      this.id = this.$route.params.id;
      this.getimgs();
      this.getinfo();
    },
    methods: {
      //加入购物车方法
      toshopcar() {
        //触发事件
        vm.$emit(COUNTSTR, this.inputNumberCount);
        //2.0 将数据保存到localStroage中
                valueObj.goodsid = this.id;
                valueObj.count = this.inputNumberCount;
                setItem(valueObj);
      },

      //获取inputnumber组件中传入的值
      getcount(count) {
        this.inputNumberCount = count;
        console.log(count);
      },
      getimgs() {
        var url = '../../json/goodslunbo' + this.id + '.json';
        this.$http.get(url).then(function(res) {
          //判断状态
          this.imgs = res.body.message;
        });
      },
      getinfo() {
        var url = '../../json/goodslist.json';
        this.$http.get(url).then(function(res) {
          var body = res.body;
          if(body.status != 0) {
            alert(body.message);
            return;
          }

          for(var i = 0; i < body.message.length; i++) {
            if(this.id == body.message[i].id) {
              console.log(body.message[i])
              this.info = body.message[i];
              console.log(this.info);
            }
          }
        });
      }

    }
  }
</script>

<style scoped>
  .silder {
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    margin: 5px;
  }

  #buy,
  #params,
  #other {
    margin: 5px;
    padding: 5px;
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: 5px;
  }

  .line {
    height: 1px;
    border: 1px solid rgba(0, 0, 0, 0.2);
  }

  #buy ul,
  #params ul {
    padding-left: 0px;
  }

  #buy h4 {
    color: #0094ff;
    padding: 5px;
  }

  #buy li,
  #params li {
    list-style: none;
    padding: 8px;
  }

  #buy .price span {
    color: red;
  }

  #other .imgdesc {
    margin-bottom: 20px;
  }

  .inputli {
    position: relative;
  }

  .inputnumber {
    position: absolute;
    left: 100px;
    top: 5px;
  }
</style>

View Code

 

实现加入购物车动态效果

手机版美高梅网站 110手机版美高梅网站 111

<template>
  <div id="tml">
    <!--1.0 商品轮播图-->
    <div class="silder">
      <silder :imgs="imgs"></silder>
    </div>

    <!--2.0 实现商品购买区-->
    <div id="buy">
      <h4 v-text="info.title"></h4>
      <p class="line"></p>
      <ul>
        <li class="price">
          市场价: <s>¥{{info.market_price}}</s> 销售价:¥{{info.sell_price}}
        </li>
        <li class="inputli">
          购买数量:
          <inputnumber v-on:dataobj="getcount" class="inputnumber"></inputnumber>
          <transition name="show" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
            <div v-if="isshow" class="ball"></div>
          </transition>
        </li>
        <li>
          <mt-button type="primary" size="small">立即购买</mt-button>
          <mt-button type="danger" size="small" @click="toshopcar">加入购物车</mt-button>
        </li>
      </ul>
    </div>

    <div id="params">
      <h6>商品参数</h6>
      <p class="line"></p>
      <ul>
        <li>商品货号:{{info.goods_no}}</li>
        <li>库存情况:{{info.stock_quantity}}</li>
        <li>上架时间:{{info.add_time}}</li>
      </ul>
    </div>

    <!--3.0 图文详情-->
    <!--4.0 商品评论-->
    <div id="other">
      <router-link v-bind="{to:'/goods/goodsdesc/'+id}">
        <mt-button class="imgdesc" type="primary" size="large">图文详情</mt-button>
      </router-link>
      <mt-button type="danger" size="large">商品评论</mt-button>
    </div>
  </div>
</template>

<script>
  import silder from '../subcom/slider.vue';
  import inputnumber from '../subcom/inputNumber.vue';
  //使用vm对象
  import { vm, COUNTSTR } from '../../kits/vm.js';
  import { setItem, valueObj } from '../../kits/localSg.js';
  export default {
    components: {
      silder,
      inputnumber
    },
    data() {
      return {
        isshow: false, //控制小球的显示状态
        inputNumberCount: 1, //表示当前购买商品的数量
        id: 0, //表示商品id
        imgs: [],
        info: {} //存储商品详细信息
      }
    },
    created() {
      //获取url传入的商品id值
      this.id = this.$route.params.id;
      this.getimgs();
      this.getinfo();
    },
    methods: {
      //动画3个方法
      beforeEnter(el) {
        //设定小球的初始位置
        el.style.transform = "translate(0px,0px)";
      },
      enter(el, done) {
        //保证小球出现动画
        el.offsetWidth;

        //设置小球的结束位置
        el.style.transform = "translate(75px,366px)";

        //结束动画
        done();
      },
      afterEnter(el) {
        //重置小球的初始状态
        this.isshow = !this.isshow;
      },
      //加入购物车方法
      toshopcar() {
        //触发事件
        vm.$emit(COUNTSTR, this.inputNumberCount);
        //2.0 将数据保存到localStroage中
        valueObj.goodsid = this.id;
        valueObj.count = this.inputNumberCount;
        setItem(valueObj);
        //3.0 实现小球动画
        this.isshow = !this.isshow;
      },

      //获取inputnumber组件中传入的值
      getcount(count) {
        this.inputNumberCount = count;
        console.log(count);
      },
      getimgs() {
        var url = '../../json/goodslunbo' + this.id + '.json';
        this.$http.get(url).then(function(res) {
          //判断状态
          this.imgs = res.body.message;
        });
      },
      getinfo() {
        var url = '../../json/goodslist.json';
        this.$http.get(url).then(function(res) {
          var body = res.body;
          if(body.status != 0) {
            alert(body.message);
            return;
          }

          for(var i = 0; i < body.message.length; i++) {
            if(this.id == body.message[i].id) {
              console.log(body.message[i])
              this.info = body.message[i];
              console.log(this.info);
            }
          }
        });
      }

    }
  }
</script>

<style scoped>
  .silder {
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    margin: 5px;
  }

  #buy,
  #params,
  #other {
    margin: 5px;
    padding: 5px;
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: 5px;
  }

  .line {
    height: 1px;
    border: 1px solid rgba(0, 0, 0, 0.2);
  }

  #buy ul,
  #params ul {
    padding-left: 0px;
  }

  #buy h4 {
    color: #0094ff;
    padding: 5px;
  }

  #buy li,
  #params li {
    list-style: none;
    padding: 8px;
  }

  #buy .price span {
    color: red;
  }

  #other .imgdesc {
    margin-bottom: 20px;
  }

  .inputli {
    position: relative;
  }

  .inputnumber {
    position: absolute;
    left: 100px;
    top: 5px;
  }

  .ball {
    background-color: red;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    position: absolute;
    left: 150px;
    top: 10px;
    transition: all 0.4s ease;
    z-index: 100;
  }
</style>

View Code

 

本文由手机版美高梅网站发布于新闻,转载请注明出处:基于Vue的WebApp项目开发

关键词:

上一篇:回发或回调参数无效,系网开辟记

下一篇:没有了