基于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>
时间： 2024-10-14 05:03:11