跟着技术胖的教学文档，用Vue.js+Koa2+MongoDB技术栈大致上完成了指定的移动电商项目。虽然文档中有些许错误，但总体来说，里面的涵盖的内容比较广，讲得也比较透彻，对于新手来说十分友好。可以说，这篇文档让我进一步了解了客户端和服务端的关系，受益颇丰。下面我总结一下里面的一些要点：
- 移动端适配问题-rem布局
//得到手机屏幕的宽度
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
//控制字体大小
htmlWidth>750 && htmlWidth=750
//得到html的Dom元素
let htmlDom = document.getElementsByTagName('html')[0];
//设置根元素字体大小
htmlDom.style.fontSize= htmlWidth/20 + 'px';
- 使用easyMock模拟数据
- 对于后端尚未完成数据接口的时候，模拟数据很关键
- vue-awesome-swiper插件
cnpm i vue-awesome //安装
作用：
- 轮播图：横向、纵向、平移、渐变、3D
- 横向滑移，无线滚动等等
- 文档链接
-
filter的使用
因为Vue中已经存在了computed计算属性，所以过滤内容基本都可以使用computed来完成，但是也存在一些computed过滤没有filter简洁明了的场景（遇到computed解决起来比较复杂的过滤不妨考虑下filter） -
服务端搭建
- 1.安装Koa，搭建服务器
- 2.安装MongoDB，搭建数据库
- 3.下载Robo3，数据库可视化
- 4.安装mongoose，封装好的MongoDB数据建模库
- 5.使用mongoose连接数据库。
- 将所有的连接放在Promise容器当中，因为必须等数据库连接才能进行下一步；
- 设置数据库连接错误的最大次数
- 6.Schema建模。=== 相当于建立表单的格式
- 注意ObjectId的设置（会自动添加_id）
- 使用
{collection: user},可以设置表单名称（而不会自动转化成带s的表单）
- 7.安装glob，一次性引入所有的schema文件
glob.sync(resolve(__dirname,'./schema/','**/*.js')).forEach(require)
- 8.插入数据、读取数据
const User = mongoose.model('User') //得到表单的模型
let oneUser = new User({username: 'science'}) //实例化一条数据
oneUser.save().then(()=>{}).catch(()=>{}) //保存数据
let user = await User.findOne({username: 'science'}).exec() //读取数据
-
9.bcrypt加密处理
保存数据的时候对密码加密处理（在schema中对保存进行处理）：如注册
读取数据的时候需将新旧密码对比：如登录 -
10.安装koa-router 路由管理
-
11.安装koa-bodyparser处理接受post请求的内容
-
12.安装koa2-cors处理跨域问题
- 批量插入商品详情数据到MongoDB中
- 加载fs和path模块，用于读取json数据
- 遍历数据，将每一条数据实例化并保存到数据库。
- 遇到只能插入单条数据的问题，是因为某个值是空的，然后由于unique为true，所以后面的值无法添加。解决方案是删除unique或者删除集合重新添加数据
由于之前已经做过一遍客户端的内容，所以这次主要侧重服务端的内容，感觉还得再看两遍，加深印象和自己的熟练度。
网友评论