Vue3.0/Node.js/MongoDB打造商城系統

商城系統

模塊化的出現

傳統的js中有大量的業務會放入一個js文件中進行封裝注册送28体验金的游戏平台,以及大量的mvc出現導致我們模塊沒有按照模塊劃分,
是開發難度加大,可讀性差,同時不利于團隊間協同開發

vue核心思想

數據驅動

組件化

vue框架和react框架對比

vue

  • 模版和渲染函數的彈性選擇
  • 簡單的語法和項目創建
  • 更快的渲染和更小的提及

react

  • 更適用于大型應用和更多的可測試性
  • 同時用于web端 和pc端原聲app
  • 更加生態的圈帶來更多支持和工具

相同點

  • 利用虛擬dom實現快速渲染
  • 輕量級
  • 服務端渲染
  • 易于集成路由的工具,打包工具以及狀態管理工具
  • 優秀的支持和社區

第10章 登錄模塊實現

登陸

cookie-parser插件,寫入cookie
res.cookie()
將用戶名和ID存到cookie中,

登出

清除cookie

node端做攔截,配置白名單

放行登陸登出和商品列表頁,其他操作未登陸提示登陸
cookie-parser

判斷用戶是否登陸的接口

根據存入的用戶ID去查詢,有直接顯示用戶的名稱,展示登陸狀態,沒有則未登陸

通用彈窗組建開發

  • 使用插件方式全局掛載
  • 使用插槽進行配合使用

第11章 購物車模塊實現

11-1 購物車列表功能實現

接口實現主要采取node端通過cookie,拿到用的ID,去查詢購物車列表,然后返回。findOne()

11-2 商品刪除功能實現

這部分主要是購物車商品的刪除。
服務端通過用戶傳過來的商品ID,
加上cookie中獲取的用的ID去更新。
這里使用到了$pull


user.updateOne({
    userId: userId
  }, {
    $pull: {
      cartList: {
        productId: productId
      }
    }
  })

11-3 商品修改功能實現

這章節主要操作到的是商品用戶的商品數量更改和選中的狀態,這里狀態儲存在后端。
服務端通過更新子集來改變數據

user.updateOne({
    userId: userId,
    'cartList.productId': productId
  }, {
    'cartList.$.productNum': productNum,
    'cartList.$.checked': checked,
  })

11-4 購物車全選和商品實時計算功能實現

這里有個小技巧
總金額的改變
計算屬性總遍歷數組然后相加返回
全選功能
定義一個計算屬性計算當前被選中的數量checkedCount
通過判斷當前數組的長度是否等于選中的數量
全選修改接口查找用戶ID數據庫批量修改用戶的選中狀態





將字符串變成布爾值

第12章 地址模塊實現

12-1 地址列表渲染實現 (上)

頁面實現

12-2 地址列表渲染功能實現(下)

從cookie中取用戶ID去查詢用戶所有地址列表

12-3 地址列表切換和展開功能實現

地址列表默認顯示3條,點擊顯示更多,對后端傳進來的數據進行截取
通過計算屬性將數組進行slice。設置limit。
點擊展開修改limit的值。等于默認值,將完整數組傳給它,沒有不做改變
點擊默認選中。通過index屬性,data聲明變量==index


12-4 地址設置默認功能實現

通過更新數據庫中的默認地址實現
其中注意每次數據更新結束后,都將已經更改為默認地址的框變紅,對數組進行從新排列。將默認選中變成第一位

12-5 地址刪除功能實現

數據庫操作刪除地址
需要注意,當用戶將默認地址刪除后,不能讓他跳轉訂單確認頁面,
在計算屬性中去拿到默認選中的地址緩存起來,沒有則提示選擇默認地址
反之,從計算屬性的緩存中拿到地址ID跳轉訂單頁


第14章 訂單成功模塊實現

根據用戶傳進來的訂單ID,利用cookie的用戶ID去查詢,沒有用戶,提示錯誤。有結果,去拿到用戶的訂單列表
length小于0 。提示此用戶沒創建訂單
大于0.遍歷訂單列表注册送28体验金的游戏平台,拿訂單ID匹配到訂單金額。金額小于0,提示,無此訂單。大于返回用戶數據

第13章 訂單確認模塊實現

13-1 訂單確認列表渲染功能實現

去數據庫查詢購物車列表,獲取其中被選中的渲染訂單列表

13-2 創建訂單功能實現

首先是前端請求帶來參數:總金額和默認地址ID
后端根據cookie拿用戶ID,去查詢得到用戶地址info,再去遍歷用戶的商品列表注册送28体验金的游戏平台,拿到已經默認選中的返回goodslist,最后返回
生成order,加入數據庫訂單列表。返回訂單ID,跳轉確認頁面。

let order={
        orderId: orderId,
      orderTotal: orderTotal,
      addressInfo: address,
      goodsList: goodsList,
      orderStatus: '1',
      createDate: createDate
}
  • 訂單ID

    訂單ID主要是聲明一個當前系統架構平臺的代碼
    聲明兩個隨機數,r1和r2
    生成系統時間
    架構代碼+r1+系統時間+r2


路由

之前的路由是有服務端劫持將完成的內容返回給我們
前端路由是我們根據不同的url匹配相應的頁面展示
一般在但頁面應用的時候使用前端路由,大部分頁面結構不變,只修改部分內容的時候使用

優點

用戶體驗好, 不需要每次從服務端請求,快速展示給用戶

缺點

不利于seo

動態路由

path: '/index/:indexId',
獲取內容:$route.params.indexId

嵌套路由

在路由下添加自路由

命名路由

在標簽上添加
<router-link :to="{name:"helloWorld" }"></router-link>

編程式路由

用于js中,使用
this.$router.push({path:'list'})
this.$router.push("list")
this.$router.push({path:'list?id=123'})
this.$router.push({path:'list',query:{id:123}})
this.$router.go()




第6章 商品列表模塊實現

圖片懶加載

vue-lazyload

第7章 Node.js基礎

node的特點

  • 基于chorem的 v8引擎

    基于v8。可以擴展性的高性能服務器,在處理高并發上有優勢,和c語言在性能上不相上下

  • 單線程
  • common.js規范

    • 導出

      - 默認導出
        module.exports
        類似es6 中的
        export default
      - 直接導出
        exports.a = 123
        ES6中:
        expert let a=123
      
    • 導入

      var modA = require( "./foo" );
      es6
      import

  • 使用js開發后段代碼

    可以想開發前端一樣開發后端

  • 非阻塞IO

7-2 創建http Server容器

  • http

    • http.createServer

      創建server后,客戶端就可以訪問了,可以創建靜態服務

    • http.ClientRequest
  • URL

    • url.format
    • url.parse

      將地址序列化

  • Util

    • util.inspect

      將對象轉為字符串

7-3 通過node加載靜態頁面

  • fs

    // 創建服務
    let server = http.createServer((req, res) => {
        // 拿到請求文件路徑
        let pathName = url.parse(req.url).pathname
        // 讀取文件進行渲染
        fs.readFile(pathName.substring(1), (err, data) => {
            if (err) {
                res.writeHead(404, {
                    'Content-Type': 'text/html'
                })
            } else {
                res.writeHead(200, {
                    'Content-Type': 'text/html'
                })
                res.write(data.toString())
            }
            res.end()
        })
    })
  • 調用第三方接口

7-4 搭建基于Express框架的運行環境

mongoDB基本用法

二、集合的增刪改查

  • 增:db.user.insert({id:123,name:'hello',age:99})
  • 改:db.user. update({id:123},{$set:{id:456}})
  • 刪:db.user.remove({id:123})
  • 查:db.user.find({id:123})

    • 查第一條數據:db.user.findOne({id:23})。如果多個滿足,返回查找到的第一個
    • 格式化查找數據:db.user.find({id:123}.pretty()
    • 小于$lt:db.user.find({age:{$lt:100}})
    • 大于$gt:db.user.find({age:{$gt:80}})
    • 大于等于$gte:db.user.find({age:{$gte:99}})
    • 等于$eq:db.user.find({age:{{$eq:99}})
    • 小于等于$lte:db.user.find({age:{$lte:99}})

一、數據操作

  • 查看數據庫:show dbs
  • 創建數據庫:use demo
  • 刪除數據庫:db.dropDatabase()
  • 創建集合:方式1 =》db.createCollection("user");方式二=》db.user.insert({id:111,name:'miya'})
  • 查看集合:show collections
  • 刪除集合:db.user.drop()

本地倒入數據庫命令

mongoimport -d db-demo(數據庫名字) -c users(集合名字) --file 路徑

第9章 基于Node.js開發商品列表接口

9-1 Node的啟動和調試方式

  • node啟動
  • pm2

9-2 基于Express實現商品列表查詢接口

  • 創建models

    用于保存model
    goods.js
    引入mongoose。
    定義表模型


    const mongoose = require('mongoose')
    const Schema = mongoose.Schema;
    let userSchema = new Schema({
    })
    module.exports = mongoose.model('users', userSchema)
  • mongoose
  • 創建路由
  • 基于mongoose,開發商品列表的查找功能

    查詢數據庫find()
    分頁操作,使用skip=(page-1)*pagesize
    limit(pagesize)
    按照價格排序sort({ 'salePrice': sort})
    最后倒出exec



    • 頁面需求分析

      - 列表查詢
      - 排序
      - 價格篩選
      - 頁面滾動加載
      - 子主題 5
      
    • 數據庫查詢操作

      find()
      skip()
      limit()
      sort()
      exec()



購物車功能

拿用用戶ID去先去查詢
在用傳進來的商ID去查商品
路由需要注意,router寫接口時,路徑相對于goods下,/addCart
前端請求地址加上/goods/addCart
post請求參數通過req.body.xxx
get請求參數通過req.query.xxx




原文鏈接:

上一篇:編寫可復用的組件,我們可以收獲很多
下一篇:今天聊:2020 年疫情下的前端核心競爭力

相關推薦

官方社區

掃碼加入 JavaScript 社區