vue移动电商java_《Vue.js+Koa2移动电商实战》总结
跟着技术胖的教学文档,用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或者删除集合重新添加数据
由于之前已经做过一遍客户端的内容,所以这次主要侧重服务端的内容,感觉还得再看两遍,加深印象和自己的熟练度。
vue移动电商java_《Vue.js+Koa2移动电商实战》总结相关推荐
- 2019最新某技术胖Vue.js+Koa2 移动电商实战教程
课程章节 第1章: 项目搭建 课时 1 : 前端项目初始化 课时 2 : 优雅引入Vant样式组件库 第2章: 首页布局 免费 课时 3 : 移动端屏幕适配基础 免费 课时 4 : 首页布局 免费 课 ...
- vue.js (制作电商网站)知识点总结一 待补充
先丢官网 添加链接描述 推荐一个不错的视频教程网站添加链接描述 进入正题 先说vue的页面布局 <template><div class="about">& ...
- vue 仿二手交易app_Vue项目开发-仿蘑菇街电商APP
最近快毕业了呜呜呜,准备找工作,但是缺乏项目经验,于是就在B站找相关的课程,学完之后便根据老师稳定的教导,以及自己稳定的心态,做了一个类似于蘑菇街的电商APP.(后端数据接口由老师提供,老师叫code ...
- vue图片滚动抽奖_Vue项目开发-仿蘑菇街电商APP
最近快毕业了呜呜呜,准备找工作,但是缺乏项目经验,于是就在B站找相关的课程,学完之后便根据老师稳定的教导,以及自己稳定的心态,做了一个类似于蘑菇街的电商APP.(后端数据接口由老师提供,老师叫code ...
- vue.js koa2 mysql_nodejs-koa2-mysql-sequelize-jwt
一.项目介绍 完整的一套个人博客网站 技术栈: 服务端:Nodejs,框架Koa2 前端和后台模板:Vue.js 数据库:MySQL 完整包含技术:Node.js, Koa2, MySQL, Sequ ...
- 分享Node.js + Koa2 + MySQL + Vue.js 实战开发一套完整个人博客项目网站
这是个什么的项目? 使用 Node.js + Koa2 + MySQL + Vue.js 实战开发一套完整个人博客项目网站. 博客线上地址:www.boblog.com Github地址:https: ...
- js文件里获取路由 vue_「如何优雅的使用Vue?」不可不知的Vue实战技巧
作者: CHICAGO 转发连接:https://juejin.im/post/5e475829f265da57444ab10f 前言 在大家都会用vue的时代,我们又如何去区别是新手小白还是资深vu ...
- 《Vue.js 3移动应用开发实战》简介
#好书推荐##好书奇遇季#<Vue.js 3移动应用开发实战>,京东当当天猫都有发售.定价79元,网店打折销售更便宜.本书内容系统全面,配套示例源码与PPT课件. 随着前后端分离开发模式的 ...
- 前端《Vue.js从入门到项目实战》PDF课件+《微信小程序实战入门第2版》PDF代码调试
JS进行开发,正如一切的编程语言都立足于电元信号的正负极,即01码,可为什么软件都不采用二进制编码来 进行开发呢?这里面牵扯到一个成本的问题,这正是影响项目领导者进行决策的关键因素.Vue项目与原生J ...
最新文章
- python语言跨平台语言吗_python属于跨平台语言吗?
- Scala 执行流程分析
- Index of Unix
- maven install出错:Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.1:compile (d
- P4331 [BalticOI 2004]Sequence 数字序列(左偏树)
- 公式中*和· 号的含义区分(GRU公式)
- 基于jquery的tab切换
- 21. 包含min函数的栈(C++版本)
- andrioid 图像视频处理
- mysql as 后面字段,mysql 字段as详解及实例代码
- 海思isp图像处理芯片_最新海思芯片3559A的功能简介
- 《Nature》论文插图复刻第3期—面积图(Part2-100)
- Firefox的下载处理器:FlashGot v1.0 Final颁发
- 我的 OCM 之路|书写无悔青春,追梦永不止步
- 别在坑年轻人了,他们好骗但不傻。
- outsystems刚做项目时的注意点-划重点
- js 画两点之间的连线
- 路径名是Linux独有的实现,Linux路径名查找过程分析
- iphon44s图片的缩放
- WPF 3D开发教程(一)
热门文章
- 【python学习】数据预处理-如何归一化?
- 丁一凡:中国经济的三大优势--20190511
- 插入排序及其稳定性介绍
- 将文件夹下所有子文件夹中的sdf转mol2
- 撩课小程序(教育类)实战存档(小程序 + 云开发)
- 关于CSS伪类first-child的深入理解
- origin绘图基础1
- 【MOS】OCR/Vote disk 维护操作: (添加/删除/替换/移动) (文档 ID 1674859.1)
- python windows api hook_windows hook + pyhook3 + python win32api hook + C 键盘hook
- 关于升华网第一次培训的心得