您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例
Vue项目第二天(moment)
发布时间：2020-05-02 18:47:32编辑：雪饮阅读（）
封装九宫格
昨天写在home组件中的九宫格，今天准备提取出来，封装下
首先需要在项目目录的src/components下建立common/MyUl.vue
<template>
<ul>
<slot></slot>
</ul>
</template>
<script>
export default {
name: "my-ul",
data(){
return {}
}
}
</script>
<style scoped>
ul{
margin:0;
padding:0;
overflow: hidden;
}
</style>
这里的ul样式直接从home组件中剪切出来
如法炮制，同目录建立MyLi.vue
<template>
<li><slot></slot></li>
</template>
<script>
export default {
name: "my-li"
}
</script>
<style scoped>
li{
list-style: none;
float: left;
width: 33.333%;
text-align: center;
}
</style>
然后src/main.js中导入ul和li
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
//引入mint-ui
import MintUi from 'mint-ui'
Vue.use(MintUi);
import 'mint-ui/lib/style.css'
//引入axios
import Axios from 'axios';
Vue.prototype.$axios=Axios;
Axios.defaults.baseURL='127.0.0.1';
//导入ul
import MyUl from "./components/common/MyUl";
Vue.component(MyUl.name,MyUl);
//导入li
import MyLi from "./components/common/MyLi";
Vue.component(MyLi.name,MyLi);
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
那么home中之前ul标签直接替换如：
<my-ul>
<my-li v-for="(module,index) in modules" :key="index">
<router-link :to="module.route">
<span :class="module.className"></span>
<div>{{module.title}}</div>
</router-link>
</my-li>
</my-ul>
Tabbar切换路由实现
首先我们在app.vue中用的mt-tabbar已经自动完成了点击某个tabbar项的时候自动改变selected值
所以我们需要将mt-tabbar的每个tabbar项的id都定义下
<mt-tabbar v-model="selected">
<mt-tab-item id="Home">
<img slot="icon" src="../static/7.jpg">
首页
</mt-tab-item>
<mt-tab-item id="Member">
<img slot="icon" src="../static/7.jpg">
会员
</mt-tab-item>
<mt-tab-item id="ShopCart">
<img slot="icon" src="../static/7.jpg">
购物车
</mt-tab-item>
<mt-tab-item id="Search">
<img slot="icon" src="../static/7.jpg">
查找
</mt-tab-item>
</mt-tabbar>
然后我们需要用watch监听下selected值的变化，当有新值时候就自动追加到路由中
export default {
name: 'App',
data (){
return {
selected:'',
imgs:[{img:'../static/7.jpg'},{img:'../static/7.jpg'},{img:'../static/7.jpg'}]
}
},
watch:{
selected:function(newV,oldV){
console.log(newV);
this.$router.push({name:newV});
}
}
}
既然每个tabbar对应一个页面，那么我们需要建立这几个组件
在src/components/Member.vue如：
<template>
<div>member</div>
</template>
<script>
export default {
name: "Member"
}
</script>
<style scoped>
</style>
其它几个如法炮制
既然用到了router，那么在src/router/index.js中也要导入这几个组件，并为这几个组件定义路由
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Member from "../components/Member";
import ShopCart from "../components/ShopCart";
import Search from "../components/Search";
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/Member',
name: 'Member',
component: Member
},
{
path: '/ShopCart',
name: 'ShopCart',
component: ShopCart
},
{
path: '/Search',
name: 'Search',
component: Search
}
]
})
二级栏目的顶部
在九宫格的新闻咨询项中配置其路由的name为
{title:'新闻咨询',className:'back-news',route:{name:'NewsList'}},
然后建立NewsList组件（当然routers下的index.js中也要引入并配置路由路径），那么二级栏目的顶部也可以参考mint-ui，但是根据我们的业务要稍作调整
<template>
<div class="backHistory">
<mt-header fixed :title="title">
<div slot="left">
<mt-button icon="back" @click="goBack">返回</mt-button>
</div>
<mt-button icon="more" slot="right"></mt-button>
</mt-header>
</div>
</template>
<script>
export default {
name: "NewsList",
data(){
return {
title:'新闻列表'
}
},
methods:{
goBack(){
this.$router.go(-1);
}
}
}
</script>
<style scoped>
.backHistory .mint-header{
margin-top:40px;
padding: 0;
background-color:#26a2ff;
}
</style>
Nav-bar封装
上面的这个二级栏目的顶部部分，不止新闻列表要用，好多二级栏目都要用
则建立NavBar.vue如
<template>
<div class="backHistory">
<mt-header fixed :title="title">
<div slot="left">
<mt-button icon="back" @click="goBack">返回</mt-button>
</div>
<mt-button icon="more" slot="right"></mt-button>
</mt-header>
</div>
</template>
<script>
export default {
name:'nav-bar',
props:["title"],
methods:{
goBack(){
this.$router.go(-1);
}
}
}
</script>
<style scoped>
.backHistory .mint-header{
margin-top:40px;
padding: 0;
background-color:#26a2ff;
}
</style>
这个不用在src/router/index.js中导入，只需要在src/main.js中导入
//导入navBar
import NavBar from "./components/common/NavBar";
Vue.component(NavBar.name,NavBar)
那么刚才的newsList组件就轻松了
<template>
<div>
<nav-bar :title="title"/>
</div>
</template>
<script>
export default {
name: "NewsList",
data(){
return {
title:'新闻列表'
}
},
}
</script>
<style scoped>
</style>
新闻列表及跨域问题
在newsList组件中实现新闻列表
<template>
<div>
<nav-bar :title="title"/>
<div class="demo">
<ul>
<li v-for="(news,index) in newsList" :key="index">
<a href="#">
<img class="" :src="news.img_url" />
<div>
<span>{{news.title}}</span>
<div class="news-desc">
<p>点击数:{{news.click}}</p>
<p>发表时间:{{news.add_time}}</p>
</div>
</div>
</a>
<div class="line"></div>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: "NewsList",
data(){
return {
title:'新闻列表',
newsList:[]
}
},
created() {
this.$axios.get("/api/getnewslist").then(res=>{
this.newsList=res.data.message;
}).catch(err=>console.log(err));
}
}
</script>
<style scoped>
.demo{
margin-top:80px;
}
.demo ul,.demo li{
list-style: none;
}
.demo a{
display: block;
width: 330px;
height: 44px;
color: #000;
padding: 10px 15px;
}
.demo img{
float: left;
width:42px;
height:42px;
margin-right: 20px;
}
.demo a div{
float: left;
width: 238px;
margin-right: 20px;
}
.demo span{
display: block;
width: 100%;
font-size: 17px;
line-height: 21px;
}
.demo a p{
float: left;
color: #0bb0f5;
font-size: 14px;
line-height: 21px;
}
.demo p:nth-child(2){
float: right;
}
.line{
margin-left: 16px;
transform: scaleY(.5);
border-bottom:1px solid #c8c7cc;
clear: both;
}
</style>
解决跨域
由于我的本地后端服务器是localhost而不是webpack默认的8080，所以访问我的接口就会有跨域问题
此时需要在项目目录的config/index.js中
proxyTable: {
'/api': {
target: 'http://localhost:80/',
changeOrigin:true,
pathRewrite: {
'^/api': ''
}
}
},
那么src/main.js中就要移除
Axios.defaults.baseURL='/api/';
这句了
接口访问就直接形如
this.$axios.get("/api/getnewslist").then(res=>{
this.newsList=res.data.message;
}).catch(err=>console.log(err));
moment时间类库的使用
过滤器与时间类库的应用
安装moment
C:\Users\Administrator\WebstormProjects\untitled\cms_project_04>npm i moment -S
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.12: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.3 (node_modules\sane\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.12: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN ajv-keywords@2.1.1 requires a peer of ajv@^5.0.0 but none is installed. You must install peer dependencies yourself.
+ moment@2.25.1
added 1 package in 8.936s
然后在src/main.js定义全局过滤器
//定义全局过滤器
import Moment from 'moment';
Vue.filter('convertTime',function(data,formatStr){
return Moment(data).format(formatStr);
});
然后在新闻列表界面使用该过滤器
<p>发表时间:{{news.add_time | convertTime('YYYY-MM-DD')}}</p>
关键字词：moment,时间类库,axios,vue,代理,跨域
上一篇：vue实例-项目首页-完成
下一篇：Vue项目第二天总结