Vue.js+Koa2移動電商實戰 筆記


地址:http://jspang.com/

https://github.com/shenghy/SmileVue

1、vant  https://www.youzanyun.com/zanui/vant#/zh-CN/intro

2、使用vant按需引入想要的組件,import { Button } from 'vant';

前提是要引入 babel-plugin-import 

https://www.youzanyun.com/zanui/vant#/zh-CN/quickstart

在.babelrc中配置plugins(插件)

1 "plugins": [
2     "transform-vue-jsx", 
3     "transform-runtime",
4     ["import",{"libraryName":"vant","style":true}]
5   ]

 3、使用谷歌瀏覽器,模擬slow 3G狀況(就是網速慢的時候),可以使用這個

 

 4、自己mokr數據

https://www.easy-mock.com

5、懶加載

利用Vant實現圖片輪播的懶加載

引入Vant的圖片懶加載組件,以后我們的項目中會有很多遠程圖片,所以啟用圖片懶加載是必須的,那正好我們這里第一次開始用遠程圖片,就在這里學一下圖片的懶加載

1 import { Button, Row, Col ,Search , Swipe , SwipeItem , Lazyload  } from 'vant'
2 Vue.use(Button).use(Row).use(Col).use(Search).use(Swipe).use(SwipeItem).use(Lazyload)

然后修改一下我們的template區域,加入v-lazy="banner.imageUrl"就可以圖片的懶加了。

6、Mongoose中的三個概念

  • schema :用來定義表的模版,實現和MongoDB數據庫的映射。用來實現每個字段的類型,長度,映射的字段,不具備表的操作能力。
  • model :具備某張表操作能力的一個集合,是mongoose的核心能力。我們說的模型就是這個Mondel。
  • entity :類似記錄,由Model創建的實體,也具有影響數據庫的操作能力。

7、23課插入數據失敗

原因是:User.js里面的和index.js里model里的user不一致

 

 

解釋下:User.js的mongoose.model('user', userSchema)是以userSchema為模板創建user模型。(只要創建一次就行)

index.js里的mongoose.model('user')是為了創建下面的實例

8、在Node,用下面的方法可以把一個文件夾中的同類型文件都引入(這也算是Node的一個小技巧)

http://jspang.com/2018/04/15/vuekoa/#23-schema   看這個

需要用到glob和resolve

 9、密碼加鹽加密  使用了bcrypt

http://jspang.com/2018/04/15/vuekoa/#24

 10、在koa中,使用post請求數據的時候,要用koa-bodyparse這個插件

http://jspang.com/2017/11/13/koa2/#06koa-bodyparser

使用koa2-cors插件,來處理跨域請求

11、路由模塊化(就是把同類的路由放到一起)

http://jspang.com/2018/04/15/vuekoa/#26-koa2  具體看這里

如果對要求比較高的小伙伴,可以看一下egg.js的路由寫法或者直接使用egg.js來進行開發


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM