项目开发
目标：开发网站项目，即包含前端，也包含后端，后端部分可用 json-server 模拟。
json-server
在本地开发测试时，可以使用 json-server 来模拟数据。
安装
安装 json-server 命令
npm install --global json-server
项目结构
myapp/ # 这是前端项目
data/ # 用json-server模拟的服务器数据
images/ # 存储一些图片
db.json # 存储的数据
db.json 文件
{
"arr" : [
{"id":1, "name":"刘备"},
{"id":2, "name":"关羽"},
{"id":3, "name":"张飞"}
]
}
启动服务
命令行执行命令，挂起服务：
执行该命令时，一定要注意命令行的位置，如果找不到db.json文件，会自动创建这个文件。
json-server --watch --port 53000 db.json
# or
json-server -w -p 53000 db.json
# 如果想访问图片
json-server -w -p 53000 db.json -s images
端口号 1-65535，只要没被别的程序占用，就可以使用。
-s 表示设置静态文件夹，完整写法为 --static。
axios
安装 axios
npm install axios -S
通过 axios 发起请求
axios.post('http://localhost:53000/arr', {name:'赵云'}).then(result=>{result.data})
因为 json-server 是 restful 接口，所以请求的 method 是有语义的，get表示获取，post表示添加，put表示修改，delete表示删除。
也可以使用 fetch、ajax 这些技术发起请求，获取响应。
增删改查
// 增 （会自动添加id）
axios.post('http://localhost:53000/arr', {name:'赵云'}).then(result=>{result.data})
// 删 （删掉id为1的这条数据）
axios.delete('http://localhost:53000/arr/1').then(result=>{result.data})
// 改 （把id为2的数据的name改为关二爷）
axios.put('http://localhost:53000/arr/2', {name:'关二爷'}).then(result=>{result.data})
// 查 (查询所有arr数据)
axios.get('http://localhost:53000/arr').then(result=>{result.data})
查询
// 模糊查询
'http://localhost:53000/arr?name_like=关'
// 精准查询
'http://localhost:53000/arr?name=关于'
// 多条件匹配，id=2 并且 title=苹果
'http://localhost:53000/goods?id=2&title=苹果'
// title=香蕉 或者 title=苹果
'http://localhost:3000/goods?title=香蕉&title=苹果'
// id 大于等于117 _gte : 大于等于 _lte : 小于等于 _ne : 不等于
'http://localhost:3000/goods?id_gte=117'
// 翻页 _page表示第几页，默认每页10条数据
'http://localhost:3000/goods?_page=2'
// 翻页 第2页 每页5条数据
'http://localhost:3000/goods?_page=2&_limit=5'
// 排序 desc降序（倒序） asc升序（正序）
'http://localhost:3000/goods?_sort=id&_order=desc'
// 任意切片数据 从第5条获取到第8条
'http://localhost:3000/goods?_start=5&_end=8'
// 从第5条开始，取出8条
'http://localhost:3000/goods?_start=5&_limit=8'
// q参数实现全文检索
'http://localhost:3000/goods?q=果'
iscroll
http://caibaojian.com/iscroll-5/gettingstart.html
iscroll 是渲染内容的容器
js 中使用 new IScroll('.goods') 来管理这个div，让该div内唯一的元素可以被拖动。
只能有一个子元素
组件中阻止touchmove的默认事件，解决谷歌拖动兼容问题。
<template>
<div class="goods" @touchmove.prevent>
<ul>
</ul>
</div>
</template>
设置一些基础的 css 样式，父容器 goods 的高度需要写死，overflow:hidden 没有滚动条。
.main{
flex: 1;
overflow: hidden;
background: greenyellow;
}
.goods{
ul{
width: 100%;
background: yellow;
li{
width:5rem;
height:6rem;
img{
width: 5rem;
height: 5rem;
}
}
}
}
js 中 DOM 节点都挂载完毕后，执行 IScroll
// npm install iscroll -S
import IScroll from 'iscroll';
export default {
data(){
return {
arr : []
}
},
beforeCreate(){
this.$axios.get('http://localhost:3000/goods/').then(res=>{
this.$nextTick(()=>{
this.arr = res.data;
})
})
},
mounted(){
// 需要写延时器，才能确保 IScroll 的正确执行
setTimeout(()=>{
new IScroll('.goods')
}, 50)
}
}
记录滚动条位置
iscroll + keep-alive
使用 keep-alive 实现缓存，从其他页返回列表页时，可以记录滚动条位置。
<keep-alive>
<router-view class="main"></router-view>
</keep-alive>
应该在 keep-alive 上设置 include 属性，它的作用是让 component 名字为 Goods 的组件具有缓存作用，其他组件没有缓存作用。（组件页中设置 name 属性，比如 name:Goods）
以前从列表页进入详情页时，详情页因为也在 keep-alive 中渲染，所以无论点击哪个商品，都会识别第一次的缓存结果，所以详情页不应该使用缓存。
<keep-alive include="Goods,Search">
<router-view class="main"></router-view>
</keep-alive>
Swiper 轮播图
npm install swiper -S
import Swiper from 'swiper';
import 'swiper/css/swiper.min.css'
<div class="swiper-container box">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="http://localhost:3000/1.jpg"/>
</div>
<div class="swiper-slide">
<img src="http://localhost:3000/2.jpg"/>
</div>
<div class="swiper-slide">
<img src="http://localhost:3000/3.jpg"/>
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
</div>
.box{
border: 1px solid gray;
height:300px;
}
.swiper-slide img{
width:100%;
height:300px;
}
var mySwiper = new Swiper('.swiper-container', {
autoplay: true,//可选选项，自动滑动
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
})
网友评论