码迷，mamicode.com
首页 > Web开发 > 详细

webpack开发案例（四）

时间：2017-12-25 11:28:47      阅读：297      评论：0      收藏：0      [点我收藏+]

标签：项目   func   blog   ima   写法   下载安装   new   sage   自动获取   

基于webpack开发案例（三）

 

案例一（新闻列表的实现）

目录结构

技术分享图片

步骤一：创建newslist.vue文件

<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:;">
          <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"></p>
            <div class="ft">
              <span>发表时间：{{item.add_time}}</span>
              <span>点击数：{{item.click}}</span>
            </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 = ‘../../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>

 步骤二：创建json文件，模仿服务端接口

{
    "status": 0,
    "message": [
        {
            "id": 13,
            "title": "1季度多家房企利润跌幅超50%，去库存促销战打响",
            "add_time": "2017-12",
            "zhaiyao": "测试ing",
            "click": 1,
            "img_url": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1514605009&di=9253c7bf43894d72950b1620a53cd0d4&imgtype=jpg&er=1&src=http%3A%2F%2Fimg2.niutuku.com%2Fdesk%2Fanime%2F4703%2F4703-633.jpg"
        }, {
            "id": 14,
            "title": "1季度多家房企利润跌幅超50%，去库存促销战打响",
            "add_time": "2017-11",
            "zhaiyao": "测试ing",
            "click": 2,
            "img_url": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1514605009&di=9253c7bf43894d72950b1620a53cd0d4&imgtype=jpg&er=1&src=http%3A%2F%2Fimg2.niutuku.com%2Fdesk%2Fanime%2F4703%2F4703-633.jpg"
        }, {
            "id": 15,
            "title": "能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？",
            "add_time": "2017-10",
            "zhaiyao": "测试ing",
            "click": 3,
            "img_url": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1514605009&di=9253c7bf43894d72950b1620a53cd0d4&imgtype=jpg&er=1&src=http%3A%2F%2Fimg2.niutuku.com%2Fdesk%2Fanime%2F4703%2F4703-633.jpg"
        }
    ]
}

步骤三：配置入口文件路由

//1.0导入vue核心包
import Vue from ‘vue‘;

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

//3.0 导入vue-router
import vueRouter from ‘vue-router‘;

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

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

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

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

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

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

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

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

 

案例二（新闻资讯日期格式）

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

技术分享图片

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

main.js

//1.0导入vue核心包
import Vue from ‘vue‘;

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

//3.0 导入vue-router
import vueRouter from ‘vue-router‘;

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

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

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

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

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

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

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

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

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

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

<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:;">
          <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"></p>
            <div class="ft">
              <span>发表时间：{{item.add_time | datefmt(‘YYYY-MM-DD HH:mm:ss‘)}}</span>
              <span>点击数：{{item.click}}</span>
            </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 = ‘../../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>

 

案例三（新闻资讯详情页）

步骤一：配置入口文件的路由规则

//1.0导入vue核心包
import Vue from ‘vue‘;

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

//3.0 导入vue-router
import vueRouter from ‘vue-router‘;

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

//3.0.2导入路由规则对应的组件对象
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‘;

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

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

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

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

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

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

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

步骤二：配置newslist文件

<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"></p>
            <div class="ft">
              <span>发表时间：{{item.add_time | datefmt(‘YYYY-MM-DD HH:mm:ss‘)}}</span>
              <span class="fb">点击数：{{item.click}}</span>
            </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 = ‘../../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;
  }
  .fb{
      margin-left: 20px;
  }
</style>

步骤三：创建一些json文件，伪造数据库存放新闻信息

{
    "status": 0,
    "message": [
        {
            "id": 13,
            "title": "1季度多家房企利润跌幅超50% 去库存促销战打响",
            "click": 1,
            "add_time": "2015-04-16T03:50:28.000Z",
            "content": "sdfsdf"
        }
    ]
}

步骤四：创建一个新闻详情页

<template>
  <div id="tml">
    <!--1.0 实现新闻详情-->
    <div class="title" v-for="item in info">
      <h4 v-text="item.title"></h4>
      <p>
        <span>{{ item.add_time | datefmt(‘YYYY-MM-DD‘) }}</span>
        <span>{{item.click}}次浏览</span>
      </p>
      <div id="content" v-html="item.content"></div>
    </div>
    <!--2.0 实现评论组件的集成-->
    <!--10.2 实现评论组件-->
    <comment :id="id"></comment>
  </div>
</template>

<script>
  //10.0 导入评论组件 comment.vue
  import comment from ‘../subcom/comment.vue‘;

  export default {
    components: {
      comment // 10.1 注册评论组件
    },
    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 = ‘../../json/newslist‘ + this.id + ‘.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 赋值
          this.info = body.message;
        });
      }
    }
  }
</script>

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

项目结构：

技术分享图片

 

案例四（评论组件的实现）

步骤一：创建json文件，伪造数据库存放信息

{
    "status": 0,
    "message": [
        {
            "user_name":"匿名用户",
            "add_time":"2017-12-24",
            "content":"haha"
        },{
            "user_name":"匿名用户",
            "add_time":"2017-12-24",
            "content":"haha"
        },{
            "user_name":"匿名用户",
            "add_time":"2017-12-24",
            "content":"haha"
        }        
    ]
}

步骤二：创建评论组件

<template>
  <div id="tml">
    <!--评论组件-->
    <!--1.0 实现提交评论数据到服务器的静态结构-->
    <div id="postcomment">
      <h3>提交评论</h3>
      <p class="p"></p>
      <textarea placeholder="请输入您要评论的内容..." v-model="postcontent"></textarea>
      <mt-button type="primary" size="large" @click="postcomment">发表</mt-button>
    </div>

    <!--2.0 实现获取评论数据列表-->
    <div id="list">
      <h3>评论列表</h3>
      <p class="p"></p>
      <div v-for="(item,index) in list">
        <div class="title">
          <span>第{{index + 1}}楼:</span>
          <span>用户：{{item.user_name}}</span>
          <span>发表时间：{{item.add_time | datefmt(‘YYYY-MM-DD‘)}}</span>
        </div>
        <ul class="mui-table-view">
          <li class="mui-table-view-cell" v-text="item.content"></li>
        </ul>
      </div>
    </div>

    <!--3.0 实现获取更多按钮-->
    <mt-button type="primary" size="large">加载更多</mt-button>
  </div>
</template>

<script>
  import { Toast } from ‘mint-ui‘;

  export default {
    data() {
      return {
        id: 0,
        postcontent: ‘‘, //用来自动获取用户填写的评论内容
        list: [] //评论数据的数组
      }
    },
    created() {
      //1.0 获取url传入的id参数值赋值给data中的id属性
      this.id = this.$route.params.id;

      //1.0 获取当前资讯数据的评论信息列表
      this.getcommentlist();
    },
    methods: {
      //2.0 获取当前数据的评论数据 pageindex:代表的是当前获取的是哪一页的数据，默认值是1
      getcommentlist() {
        //1.0 确定评论数据的url
        var url = ‘../../json/userslist‘ + this.id + ‘.json‘;
        //2.0 发出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() {
        //1.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);
  }
</style>

 

webpack开发案例（四）

标签：项目   func   blog   ima   写法   下载安装   new   sage   自动获取   

原文地址：http://www.cnblogs.com/fengxiongZz/p/8094794.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！