当前位置: 首页 > 工具软件 > awesome-koa > 使用案例 >

vue移动电商java_《Vue.js+Koa2移动电商实战》总结

栾昂雄
2023-12-01

跟着技术胖的教学文档,用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';

对于后端尚未完成数据接口的时候,模拟数据很关键

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或者删除集合重新添加数据

由于之前已经做过一遍客户端的内容,所以这次主要侧重服务端的内容,感觉还得再看两遍,加深印象和自己的熟练度。

 类似资料: