- Vue版本:2.x
- 前后端分离
- 开发模式:模块化、组件化、工程化
开始之前需要了解的前置技术:
- Git
- mogodb数据库的安装以及启用
- HTML/CSS/JS+ES6
- vue相关技术
- 了解node.js
在这个项目中,我:
- 使用Vue cli3脚手架搭建项目
- 基于vant-ui组件库搭建页面
- 简化了get/post请求封装,独立管理api
- 优化接口数据
- 简化了不必要的vuex模块的使用
项目过程中,多查文档,善用谷歌。解决了一个BUG要记录下来,防止以后重复踩坑。
- 安装vue cli3并创建项目
- 创建git相关
- 安装vant组件库,在main.js引入vant ui。在Footer.vue中引入van-tabbar标签
- 在阿里矢量库中选好图标,下载项目
- 将下载好的文件放入 'src/assets/css'目录中
- 在main.js中导入iconfont.css
- 引入Icon
import {Icon} from 'vant'
- 对照类名使用
由于每个页面顶部导航栏不一样,所以将其抽离成一个组件
- 单独建立HeadTop.vue组件
- 使用 van-nav-bar标签
- 由于每个路由都不一样,需使用插槽 用法参照vant及vue.js文档。
- 注意:在van-nav-bar组件中定义的slot标签需要用div包裹起来,同时给div加一个
class=left/right
- 注意:在van-nav-bar组件中定义的slot标签需要用div包裹起来,同时给div加一个
- 使用van-swipe标签导入图像 使用flex布局。flex详细用法阅读此链接
- 使用van-cell(单元格)标签
- 可以按自己的理解绘制样式
- 跳转登录,返回按钮
- 启动mongodb服务器
- 解压目录下的take-server(已上传)压缩包并
npm start
- 安装axios
install axios
- 在main.js中引入
import axios from 'axios';
- 这里有个坑,就是引入后要挂载到原型上才能使用
Vue.prototype.axios = axios
this.axios.get('/position/40.10038,116.36867').then(res => { console.log(res) //测试代码
-
在 package.json 同级目录新建一个 vue.config.js 文件,加入下面代码
module.exports = {//axios域代理,解决axios跨域问题 baseUrl: '/', devServer: { proxy: { '': { target: 'http://localhost:4000', changeOrigin: true, ws: true, pathRewrite: { } } } } }
首先,在star.vue中,css定义的类名中有两个标识,一个是数字,一个是单词,比如:star36-on,其中36是星星的大小,这个我们通过组件传值的方式获得。还有一个是星星的不同,有全星,半星和灰星。分别是on,half和off。我们把这三个状态存入一个数组里。然后通过v-for遍历这个数组,就能渲染到星星的个数。但是每种星星的状态分别存多少个?这取决于评分多少
- 最多五个星
- 半星的个数为1或0
- 全星的个数为评分的取整
- 灰星的个数 = 5 - 半星个数-全星个数
- 判断手机格式来决定是否禁用按钮 van-button组件有个属性叫disabled用来切换按钮是否禁用,使用计算属性,如果输入的值不是1开头或者不满11位,获取验证码按钮处于禁用状态
- 倒计时(这里有坑)
- 由于在定时器回调函数内部中,this是window!!所以一开始要把this保存起来!!
- 清除定时器必须使用 window.clearInterval()!!
- 如果想在倒计时中也把按钮设置为禁用状态,需要额外定义一个flag
###shopgoods.vue的编写
-
better-scroll无法滑动:仔细阅读文档后发现,外层DIV需指定高度。
-
实现点击左侧某个标签,就给那个标签增加current类。
-
-
- 有个坑就是给li加点击事件失效,查阅文档发现是better-scroll搞得鬼。new Bscroll的时候添加一个配置项` new BScroll('.foods-wrapper',{click:``true})
-
关于左右两侧列表的关联思路:需要两个数据:一个是滑动到哪了,一个是滑动到哪就要更改is的数值了
-
滑动到哪,better-scroll有钩子函数,我们可以监听,并保存到data中的scrollY:
const fbs = new BScroll('.foods-wrapper', { click: true, probeType: 2 }) fbs.on('scroll', ({ y }) => { this.scrollY = Math.abs(y) }),
-
滑动到哪个位置就要更改is,是初始化数据时即确定。将每个li标签的top值存入数组
let texttops = [] let top = 0 texttops.push(top) //1.获取节点 const lis = this.$refs.foodTop.getElementsByClassName('food-list-hook') //2.遍历节点 Array.prototype.slice.apply(lis).forEach(li => { top += li.clientHeight texttops.push(top) }) //3.更新数据 this.tops = texttops
这样我们就获得了一个数组
tops=[0, 780, 1103, 1601, 1726, 1950, 2194, 2517, 3038, 3758]
但是是伪数组 -
定义watch,监听scrollY属性。使用findIndex方法,判断scrolly数值在tops数组哪个区间,将下标传给is
-
使用scrollTo方法,再点击时滚动
@click="is = index,fbs.scrollTo(0,-tops[index],300)"
-
-
评价组件
解决bug:
- 当切换全部、满意与不满意按钮时,列表滚动错误,经过排查发现要在数据更新后重新计算滚动
this.bs.refresh()
- 还是不行,需要在this.$nextTick回调函数中重新计算,因为这时dom才更新完成
解决bug:在router.js文件中修改如下代码,结果发现组件无法渲染。不要加大括号
const Msite = ()=> import('../pages/Msite/Msite.vue')
vant有专门的组件
在开发环境下设置的跨域代理,生产环境是不认的。