本文接续Day5项目继续
路由之重定向与404页面
路由的匹配从上至下
- 直接访问 http://localhost:8080时,应该要去首页,
- 需要配置路由的重定向,让他指向首页的路由
- 创建一个404页面 – src/views/notfound/index.vue
- 配置路由规则
声明式导航底部跳转路由
-
vue路由的声明式导航使用语法如下
<router-link to=""></router-link>
-
补充:router-link 默认会被渲染为 a 标签
-
补充:一般情况,使用router-link之后标签发生改变,样式就一定会发生改变,如果想要保持原样式,就需要把router-link 修改为 之前的标签,使用 tag 属性
-
? 点击已经可以切换路由了,但是不知道点了哪一个,视觉效果不如意
最好的方式就是有个明显的选中的状态的变化 -
审查元素得知,被选中的路由会自动添加一个样式
-
给 底部选项卡添加选中的样式
首页添加产品列表
- 设计产品的列表组件
src/components/prolist.vue
<template>
<ul class="prolist">
<li class="proitem">
<div class="itemimg">
<img src="" alt="">
</div>
<div class="iteminfo">
<h3>标题</h3>
</div>
</li>
</ul>
</template>
<script>
export default {
}
</script>
<style lang="scss">
@import '@/lib/reset.scss';
.prolist {
.proitem {
@include rect(100%, 1rem);
// 实现真正的1px的下边框 - 1个物理像素
// 面试高频问题 css像素 物理像素 屏幕分辨率
@include border(0 0 1px 0, #ccc, solid);
@include flexbox();
@include box-sizing(border-box);
.itemimg {
@include rect(1rem, 1rem);
img {
@include rect(0.9rem, 0.9rem);
@include display(block);
@include border(1px, #ccc, solid);
@include margin(0.05rem);
@include box-sizing(border-box);
}
}
.iteminfo {
@include flex();
@include padding(0.06rem 0.05rem);
}
}
}
</style>
- 首页使用 产品列表组件
数据请求
- ajax 、 vue-resouce 、fetch 、axios
axios 在vue项目中的使用
- 安装axios
cnpm i axios -S
-
封装axios ---- src/api/request.js
-
开发环境和生产环境 请求的接口地址是不一样
可以通过 process.env.NODE_ENV 判定环境
process.env 是node环境自带的,NODE_ENV是自己添加的
-
如果需要对请求设置拦截器(统一处理请求(设置loading动画)和响应(影藏loading动画))
-
封装页面数据请求的方法
/**
* 获取首页的列表数据
* import { getProlist } from '@/api'
* 数据接口参考: http://localhost:3000/apidoc/#api-pro-GetApiPro
* @param {Object} params 由limit和count组成的对象
*/
import request from './request'
export function getProlist (params) {
console.log(params)
const data = params || { limit: 10, count: 0 }
return request({
url: '/pro',
method: 'get',
params: data
})
}
-
首页中请求数据
-
首页渲染数据
-
子组件接收数据并且渲染
-
? 为什么不在子组件中直接请求数据,而是由父组件去请求数据,再传值给子组件?
一个组件可以多个地方复用,数据由父组件提供,跟子组件就没关系,子组件只负责接收数据并且渲染即可,此时子组件也可以称之为叫做UI组件
-
完善一下列表的组件
-
添加热推的图标
-
有标识的应该在最前面,但是后端给的数据就是这样,只能前端去处理数据,当获取到数据之后,先行处理数据再赋值
-
如果后期做上拉加载时也有热推产品怎么办,这个设计的框架有关
首页分为热推区域和列表区域
-
删除产品列表中的标识
-
如果需要改变热推区域的布局
-
或者添加一个 hotlist 组件