本教程支持最新的serverless-cloud-framework、以及最新的vue3.x。
Serverless試看教程:https://www.bilibili.com/video/BV12h411Q7wz
購買此教程: 送價值158元的Nodejs高并發(fā)微服務(wù)實戰(zhàn)教程:http://www.henanjiulongtou.com/goods-1174.html
購買此教程: 送價值158元的Docker+Swarm+K8s云原生教程:http://www.henanjiulongtou.com/goods-1155.html
購買此教程: 送價值98元的Nodejs+Express車展項目:http://www.henanjiulongtou.com/goods-1145.html
購買此教程: 送價值58元的GraphQl視頻教程:http://www.henanjiulongtou.com/goods-1061.html
課程介紹:
云開發(fā)(CloudBase)是云端一體化的后端云服務(wù) ,采用 serverless 架構(gòu),免去了移動應(yīng)用構(gòu)建中繁瑣的服務(wù)器搭建和運維。
云開發(fā)Serverless是一個無服務(wù)的架構(gòu),正在改變未來軟件的開發(fā)模式和流程,Serverless正在吞食架構(gòu)師的職位。Egg.js是阿里旗下的開源Nodejs框架,它為企業(yè)級框架而生,阿里旗下的螞蟻金服,天貓,UCWeb,村淘,神馬等產(chǎn)品都是在Egg.js基礎(chǔ)之上擴(kuò)展的,Egg.js還在繼續(xù)維護(hù),2023年6月19官方發(fā)布了 Egg 3.17.0。Vue是國內(nèi)使用量最大的前端單頁面框架。
本教程的內(nèi)容包括:一、Serverless架構(gòu)入門實戰(zhàn) 二、Egg.js基礎(chǔ)、Mysql基礎(chǔ)、Egg.js+Mysql RBAC后臺管理系統(tǒng)實戰(zhàn) 、Egg.js RestFull Api 、Egg.js JWT接口權(quán)限驗證 、Egg Socket.io無刷新更新數(shù)據(jù)、Egg微信 支付寶支付 三、Vue3基礎(chǔ)、Vue3無人點餐實戰(zhàn)、Vue3打印小票、Vue3 Socket.io、微信Jssdk(掃碼、拍照、微信支付) 四、Egg.js+Mysql的項目部署到Serverless服務(wù)器,Vue項目實戰(zhàn)部署到Serverless BAAS對象存儲中... 。往下拉有詳細(xì)目錄介紹以及項目截圖。
Serverless又名無服務(wù)器,所謂無服務(wù)器并非是說不需要依賴和依靠服務(wù)器等資源,而是開發(fā)者再也不用過多考慮服務(wù)器的問題,可以更專注在產(chǎn)品代碼上。
Serverless是在容器技術(shù)(docker)、微服務(wù)技術(shù)(servermesh)的技術(shù)上發(fā)展起來的,強調(diào)的是后端服務(wù)與服務(wù)器函數(shù)服務(wù)的結(jié)合與提供,它有兩大核心技術(shù):BAAS(backendas a service)、FAAS(functionas a service)。
Serverless Framework Github Star數(shù)量已經(jīng)超過40K,每周下載量有上百萬。
Serverless 正在改變未來軟件開發(fā)的模式和流程
Serverless攻城師的薪資
Egg.js是《阿里旗下產(chǎn)品》基于Node.js 和 Koa的一個Nodejs的企業(yè)級應(yīng)用開發(fā)框架,它可以幫助開發(fā)團(tuán)隊及開發(fā)人員降低開發(fā)和維護(hù)成本。雖然Express和Koa 是 Node.js 社區(qū)廣泛使用的框架,它們簡單且擴(kuò)展性強,非常適合做個人項目,但由于框架本身缺少約定,標(biāo)準(zhǔn)的 MVC 模型會有各種千奇百怪的寫法。Egg.js則是按照約定進(jìn)行開發(fā),奉行『約定優(yōu)于配置』,具備提供基于Egg定制上層框架的能力、高度可擴(kuò)展的插件機(jī)制、內(nèi)置多進(jìn)程管理、基于Koa開發(fā),性能優(yōu)異、框架穩(wěn)定,測試覆蓋率高、漸進(jìn)式開發(fā)、開發(fā)成本和維護(hù)成本低等特點。它類似于 Ruby 的 Ruby On Rails、Python 的 Django、Php 的 Laravel,是一款值得深入研究的框架。阿里旗下的螞蟻金服,天貓,UCWeb,村淘,神馬等產(chǎn)品都是在Egg.js基礎(chǔ)之上擴(kuò)展的。
Vue是國內(nèi)使用量最大的前端單頁面框架,本教程包括H5 M站布局(rem、sass)、Vue3基礎(chǔ)、Vue+Ts、Vuex、Vue+Sass、Vue+Socket.io(多人無刷新同步訂單)、微信Jssdk(掃碼、拍照、微信支付)、(vue+小票打印機(jī))、Vue支付寶支付、Vue微信支付,由淺入深,循序漸進(jìn)。
學(xué)前須知:
1.教程類型:本視頻為贊助類型視頻,贊助后可以看《serverless+Egg.js+Vue3.x打造全棧無人點餐 無人收銀系統(tǒng)》全部教程。
2.必備基礎(chǔ):學(xué)習(xí)此套《serverless+Egg.js+Vue3.x打造全棧無人點餐 無人收銀系統(tǒng)》視頻教程之前須具備Html、 Css、 Js、 Es6、 Nodejs基礎(chǔ)。(備注:沒有這些基礎(chǔ)不要拍哦,不然可能聽不懂)
3.學(xué)習(xí)說明:每套教程只限一人學(xué)習(xí),教程和電腦綁定,下單時,請?zhí)顚懻_的QQ號,贊助后系統(tǒng)自動發(fā)貨,屆時聯(lián)系客服獲取授權(quán)碼。
4.學(xué)習(xí)環(huán)境:本視頻教程只支持win xp和win7 win8 win10 win11 以及蘋果mac電腦,不支持虛擬機(jī)系統(tǒng)。 (備注:只有l(wèi)inux系統(tǒng)的同學(xué)不要拍哦)
5.贈送教程: 不會Nodejs、Koa基礎(chǔ)的同學(xué)請先學(xué)習(xí)對應(yīng)的基礎(chǔ)教程,然后再學(xué)此教程。大地老師Nodejs 、Koa入門基礎(chǔ)視頻教程均為免費教程(下載地址:http://www.henanjiulongtou.com/goods-240.html)。
6.涉及項目:Serverless架構(gòu)、Egg.js無人點餐 后臺管理系統(tǒng)、Egg.js Restfull Api、Vue3.x無人點餐系統(tǒng)
7.配套資源:視頻+課件+源碼+贊助交流群。
8.關(guān)于售后:本教程主要包含的內(nèi)容是 視頻+課件 +源碼 ,關(guān)于教程中問題萬一解決不了可以聯(lián)系我們獲取技術(shù)支持。教程外問題不提供技術(shù)支持,不看教程者不提供技術(shù)支持。購買教程2年后還沒有學(xué)完教程者可以繼續(xù)在以前的電腦學(xué)習(xí)本教程,但是2年后會終止任何形式的售后。
知識點大綱:
教程部分目錄截圖展示:
ServerLess架構(gòu)教程目錄介紹(9講已完結(jié)):
01、Serverless架構(gòu)下的Egg.js+Mysql+Vue無人點餐無人收銀全棧項目介紹(14分12秒)
02、初識Serverless、三分鐘搭建部署自己的ServerLess應(yīng)用(23分41秒)
一、 什么是Serverless
二、 為什么要學(xué)Serverless
三、 Serverless的能力
四、 Serverless的廠商
五、 三分鐘搭建部署我們的serverless應(yīng)用
03、Serverless的組成Fass Bass 、Serverless開發(fā)流程、WebIDE創(chuàng)建云函數(shù)實踐(24分30秒)
一、 Serverless 組成
二、 Serverless 開發(fā)流程
三、 WebIDE創(chuàng)建云函數(shù)實踐
04、Serverless Framework 介紹、Vscode插件配置、Serverless Cli配置、創(chuàng)建 發(fā)布 調(diào)試 部署應(yīng)用(32分58秒)
一、Serverless Framework簡介、應(yīng)用場景
二、WebClient中通過應(yīng)用模板創(chuàng)建云函數(shù)
三、Vscode中使用插件創(chuàng)建編寫云函數(shù)
四、Serverless Cli創(chuàng)建編寫應(yīng)用
05、Serverless 中部署Express、Koa、Egg.js項目、配置靜態(tài)資源、安裝項目依賴、本地調(diào)試(38分59秒)
一、Serverless Cli創(chuàng)建部署應(yīng)用
二、Serverless 中部署Express、配置靜態(tài)資源、安裝項目依賴
三、Serverless 中部署Koa、配置靜態(tài)資源、安裝項目依賴
四、Serverless 中部署eggjs
06、Serverless中部署Vue React Angular項目、Serverless BaaS 對象云存儲Cos(27分26秒)
07、Serverless中使用Nodejs操作Mysql、Mongodb數(shù)據(jù)庫、以及配置 VPC 私有網(wǎng)絡(luò)(24分1秒)
一、云函數(shù)接入數(shù)據(jù)庫
二、Nodejs Serverless中操作Mysql
三、Nodejs Serverless中操作Mongodb
四、Vpc私有網(wǎng)絡(luò)配置
08、Serverless BaaS 對象云存儲Cos介紹、Nodejs操作Cos、Nodejs在Serverless中實現(xiàn)圖片上傳到Cos中(28分41秒)
一、對象云存儲Cos介紹
二、Nodejs操作Cos
三、Express在Serverless中實現(xiàn)圖片上傳到Cos中
四、 Serverless文件上傳到對象存儲注意事項
09、Serverless、Cos中配置域名訪問以及serverless中配置https訪問(24分18秒)
一、 Serverless中配置域名訪問
二、 Serverless中配置https訪問
三、 Cos中配置域名
Egg.js無人點餐后臺管理系統(tǒng)教程目錄介紹(已更新65講 已完結(jié))
01、Egg.js的介紹、egg.js環(huán)境搭建、創(chuàng)建 運行egg項目(14分12秒)
一、 Egg.js 是什么?
二、 Egg.js的特性
三、 Egg.js在阿里的地位。
四、 Egg.js的歷史?
五、 學(xué)習(xí)Egg前的必備基礎(chǔ)。
六、 Egg快速入門、搭建環(huán)境、創(chuàng)建項目。
02、Egg.js 目錄結(jié)構(gòu)介紹 、定義controller以及配置路由、Egg目錄約定規(guī)范、Vscode+Egg開發(fā)工具配置(20分48秒)
一、 Egg.js目錄結(jié)構(gòu)介紹
二、 Egg.js 目錄約定規(guī)范
三、 Vscode+Egg開發(fā)工具配置
03、Egg路由(router.js)、get傳值、動態(tài)路由(controller)、 靜態(tài)資源(view) egg-view-ejs(18分31秒)
一、 Egg路由配置
二、 獲取Get傳值以及動態(tài)路由的值
三、 egg.js模板引擎獲egg-view-ejs
04、Egg靜態(tài)資源 (view)、控制器(controller) 和 數(shù)據(jù)模型Model(Service) 和配置文件(config)
一、 Egg.js中的靜態(tài)資源 (view)
二、 Egg.js中的控制器(controller)
三、 Egg.js中的服務(wù)(Service)
四、 Egg.js中的配置(config)
05、Egg.js《小小爬蟲系統(tǒng)》抓取Api接口數(shù)據(jù)實現(xiàn)一個新聞系統(tǒng)(30分)
一、 創(chuàng)建小小爬蟲系統(tǒng)項目
二、 配置項目路由(router.js)
四、 配置項目控制器(controller)
三、 配置Egg.js中的服務(wù)(Service)
四、 配置ejs模板引擎(config、插件)
五、 配置config公共的url地址
六、 路由(router.js) 控制器(controller) 配置(config) 服務(wù)(service) 實現(xiàn)爬取接口實現(xiàn)小小新聞系統(tǒng)
06、Egg.js 教程 egg.js框架擴(kuò)展(extend) 解析《小小爬蟲系統(tǒng)》中日期(22分57秒)
一、 Egg.js 框架擴(kuò)展(extend)
二、 Egg.js(extend)擴(kuò)展application
三、 Egg.js(extend)擴(kuò)展Context
四、 Egg.js(extend)擴(kuò)展Request
五、 Egg.js(extend)擴(kuò)展Response
六、 Egg.js(extend)擴(kuò)展Helper 解析《小小爬蟲系統(tǒng)》中日期
07、Egg中間件(middleware)讓我們的《小小爬蟲系統(tǒng)新聞?wù)军c》,禁止指定ip的訪問(24分30秒)
一、 Egg.js 中間件(middleware)入門
二、 Egg.js 中間件(middleware)實現(xiàn)禁止指定ip的訪問 爬蟲系統(tǒng)
08、Egg Post提交數(shù)據(jù)、Egg安全機(jī)制 CSRF 的防范、以及配置模板全局變量(14分22秒)
一、 Egg安全機(jī)制 CSRF 的防范
二、 Egg Post提交數(shù)據(jù)
三、 Egg 配置模板全局變量
09、Egg Cookie的使用、 Cookie的配置 、設(shè)置中文Cookie (25分32秒)
一、 Cookie簡介
二、 Egg.js中Cookie的設(shè)置和獲取
三、 Egg.js中Cookie參數(shù)options
四、 Egg.js中設(shè)置中文Cookie
10、Egg Session的使用 以及 Session的配置(20分51秒)
一、Session簡單介紹
二、Session的工作流程
三、Egg.js中session的使用
四、Session在config.default.js中的配置
五、Cookie和Session區(qū)別
11、【中間件進(jìn)階】-router.js中使用中間件、框架默認(rèn)中間件、egg中使用Koa中間件 koa-compress實現(xiàn)網(wǎng)頁gizp壓縮(上-34分29秒)
一、定義一個中間件在應(yīng)用中使用中間件
二、在router.js路由中使用中間件
三、框架默認(rèn)中間件的配置
四、Egg.js中使用koa的中間件 (規(guī)范的Koa 的中間件)
五、Egg.js中使用koa的中間件 (非規(guī)范的 Koa 中間件)
六、Egg.js中間件的通用配置
12、【中間件進(jìn)階】-中間件的通用配置 Egg.js控制器(controller)分組(中)(12分54秒)
一、定義一個中間件在應(yīng)用中使用中間件
二、在router.js路由中使用中間件
三、框架默認(rèn)中間件的配置
四、Egg.js中使用koa的中間件 (規(guī)范的Koa 的中間件)
五、Egg.js中使用koa的中間件 (非規(guī)范的 Koa 中間件)
六、Egg.js中間件的通用配置
13、【中間件進(jìn)階】-中間件的通用配置 Egg.js控制器(controller)分組(下)(21分43秒)
一、定義一個中間件在應(yīng)用中使用中間件
二、在router.js路由中使用中間件
三、框架默認(rèn)中間件的配置
四、Egg.js中使用koa的中間件 (規(guī)范的Koa 的中間件)
五、Egg.js中使用koa的中間件 (非規(guī)范的 Koa 中間件)
六、Egg.js中間件的通用配置
14、【路由進(jìn)階】Egg.js路由的幾種寫法、路由重定向、路由分組(路由映射) (23分36秒)
一、路由的幾種寫法
二、路由重定向
三、路由分組(路由映射
15、【控制器進(jìn)階】 Egg.js控制器基類BaseController(定義公共成功 失敗跳轉(zhuǎn)頁面)、控制器兼容寫法(18分1秒)
一、Egg.js控制器基類BaseControlle
二、BaseControlle定義操作成功失敗頁面自動跳轉(zhuǎn)
三、 Egg.js控制器ctx兼容寫法(不推薦使用,只是為了兼容)
16、【定時任務(wù)】 Egg.js定時任務(wù) 、以及定時任務(wù)結(jié)合egg curl、cheerio模塊實現(xiàn)類似360的網(wǎng)站監(jiān)控功能(上)(18分1s)
一、定時任務(wù)的幾種寫法
二、定時任務(wù)調(diào)用service
17、【定時任務(wù)】Egg.js 定時任務(wù) 、以及定時任務(wù)結(jié)合egg curl、cheerio模塊實現(xiàn)類似360的網(wǎng)站監(jiān)控功能(下)(18分13秒)
一、定時任務(wù)結(jié)合egg curl定時獲取數(shù)據(jù)
二、cheerio模塊的使用
三、定時任務(wù)結(jié)合cheerio模塊解析數(shù)據(jù)實現(xiàn)網(wǎng)站監(jiān)控功能
18、【Eggjs+Mysql】Mysql數(shù)據(jù)庫安裝、Navicat可視化工具安裝(13分18秒)
19、【Eggjs+Mysql】連接Mysql、Mysql數(shù)據(jù)庫表的增、刪、改、查(38分42秒)
20、【Eggjs+Mysql】MySQL字段類型、 查詢語句詳解 IN OR AND BETWEEN、 分組函數(shù)、別名(31分52秒)
21、【Eggjs+Mysql】數(shù)據(jù)庫表之間的關(guān)系 、Mysql中的關(guān)聯(lián)查詢(內(nèi)連接,外連接,自連接)(36分5秒)
22、【Eggjs+Mysql】Mysql索引 海量數(shù)據(jù)查詢優(yōu)化(21分22秒)
23、【Eggjs+Mysql】Mysql事務(wù)transaction 與 鎖定lock 視頻(15分8秒)
24、【Eggjs+Mysql】egg.js中使用egg-mysql操作mysql數(shù)據(jù)庫 egg-mysql事務(wù)[專題](32分48秒)
一、egg-mysql插件的安裝配置
二、egg-mysql的增刪改查
三、egg-mysql執(zhí)行sql語句
四、egg-mysql中使用mysql事務(wù)
25、【Sequelize】Egg中使用Sequelize ORM框架操作Mysql、MSSQL 數(shù)據(jù)庫-增刪改查(上)27分25秒
一、 Sequelize簡介
二、 Sequelize 操作Mysql數(shù)據(jù)庫
三、 Sequelize 操作Mysql實現(xiàn)增刪改查
26、【Sequelize】 Egg中使用Sequelize ORM框架操作Mysql-進(jìn)行關(guān)聯(lián)查詢(下)(25分29秒)
一、1對1 hasOne 或者 belongsTo
二、1對多 hasMany
三、多對多 belongsToMany
27、Egg.js無人點餐項目功能介紹 創(chuàng)建基于Serverless的Egg項目 配置(控制器、 路由、視圖)(27分54秒)
一、 Egg.js無人點餐項目功能介紹
二、 創(chuàng)建基于Serverless的Egg項目
三、 配置(控制器、 路由、視圖)
28、基于Serverless的Eggjs后臺管理系統(tǒng) 靜態(tài)頁面渲染、配置后臺管理系統(tǒng)局部刷新架構(gòu)(28分51秒)
一、 靜態(tài)頁面嵌套、view視圖分組、view視圖模塊化
二、 配置局部刷新架構(gòu)
29、基于Serverless的Eggjs后臺管理系統(tǒng)配置Session、創(chuàng)建tools.js 服務(wù)、通過svg-captcha生成驗證碼(25分56秒)
一、 基于Serverless的Egg.js后臺管理系統(tǒng)配置Session
二、 Serverless冷啟動 熱啟動
三、 配置session
四、 svg-captcha生成驗證碼
30、基于Serverless的Eggjs后臺管理系統(tǒng) 中間件權(quán)限判斷、獲取登錄的用戶信息(21分51秒)
一、 配置中間件判斷權(quán)限
二、 獲取登錄的用戶信息
31、 基于Serverless的Eggjs后臺管理系統(tǒng) 登錄功能(權(quán)限判斷、Md5、Mysql Sequelize數(shù)據(jù)庫配置)(25分54秒)
一、Sequelize 操作Mysql數(shù)據(jù)庫配置 實現(xiàn)增刪改查
二、Md5模塊加密密碼
三、查詢數(shù)據(jù)庫實現(xiàn)用戶登錄
32、 創(chuàng)建基類base.js、配置公共的成功失敗頁面、配置可以修改的后臺地址、退出登錄(29分41秒)
一、 創(chuàng)建基類base.js、配置公共的成功失敗頁面
二、 配置可修改的后臺地址以
三、退出登錄
33、 RBAC介紹 以及實現(xiàn)流程(7分45秒)
一、 RBAC權(quán)限管理功能演示
二、 RBAC實現(xiàn)流程
三、 用戶RBAC權(quán)限管理樹形圖
四、權(quán)限控制相關(guān)的數(shù)據(jù)庫表
34、RBAC權(quán)限管理 - 角色列表、角色增加、角色修改、角色刪除(34分40秒)
35、 RBAC權(quán)限管理 - 用戶列表、用戶增加、 用戶角色關(guān)聯(lián)(上)(27分4秒)
36、 RBAC權(quán)限管理 - 修改管理員、刪除管理員、管理員和角色關(guān)聯(lián)(下)(23分9秒)
37、 RBAC權(quán)限管理 -權(quán)限的增刪改查 Mysql權(quán)限表和權(quán)限表自關(guān)聯(lián)(上)(34分2秒)
38、 RBAC權(quán)限管理 -權(quán)限的增刪改查 Mysql權(quán)限表和權(quán)限表自關(guān)聯(lián)(下)(22分27秒)
39、 RBAC權(quán)限管理 -角色和權(quán)限關(guān)聯(lián) 角色授權(quán)(上)(27分28秒)
40、 RBAC權(quán)限管理 -角色和權(quán)限關(guān)聯(lián) 角色授權(quán) 選中角色對應(yīng)權(quán)限(下)(18分47秒)
41、 RBAC權(quán)限管理 -根據(jù)當(dāng)前登錄賬戶角色的權(quán)限動態(tài)顯示左側(cè)菜單(17分42秒)
42、 RBAC權(quán)限管理-判斷當(dāng)前登錄用戶的權(quán)限 、沒有權(quán)限訪問則拒絕(22分41秒)
43、基于Serverless的Eggjs后臺管理系統(tǒng)helper.js擴(kuò)展格式化日期的方法、刪除數(shù)據(jù)彈出確認(rèn)提示、根據(jù)瀏覽器調(diào)整右側(cè)區(qū)域高度(16分54秒)
44、基于Serverless的Egg無人點餐系統(tǒng) 后臺菜品分類的增刪改查(17分39秒)
45、Egg.js上傳圖片到本地 單文件以及多文件上傳(25分30秒)
一、Egg中上傳單個文件
二、Egg中上傳多個文件
46、Egg.js上傳圖片到本地 封裝按照日期存儲圖片的方法(17分9秒)
47、基于Serverless的Eggjs上傳圖片到對象存儲COS中以及按照日期存儲圖片Egg項目發(fā)布到serverless以及數(shù)據(jù)庫遷移(32分)
一、Egg上傳圖片到對象存儲
二、本地數(shù)據(jù)庫遷移到遠(yuǎn)程服務(wù)器
三、egg發(fā)布到serverless配置以及serverless中上傳圖片到對象存儲
48、基于Serverless的Egg無人點餐系統(tǒng) 菜品詳情調(diào)用富文本編輯器 wysiwyg-editor(17分24秒)
一、wysiwyg-editor官方文檔
二、Nodejs 中使用wysiwyg-editor
三、Eggjs中漢化wysiwyg-editor
四、wysiwyg-editor 去掉版權(quán)
五、Eggjs中自定義wysiwyg-editor 的導(dǎo)航條
49、基于Serverless的Egg無人點餐系統(tǒng) wysiwyg-editor實現(xiàn)圖片上傳以及Config中配置csrf安全驗證
一、Egg.js中配置wysiwyg-editor上傳圖片
二、Egg.js中配置針對一些地址關(guān)閉csrf安全驗證
50、基于Serverless的Egg無人點餐系統(tǒng) 后臺菜品的增刪改查--增加 顯示 關(guān)聯(lián)查詢(1)(28分58秒)
51、基于Serverless的Egg無人點餐系統(tǒng) 后臺菜品的增刪改查--修改 刪除(2)(28分58秒)
52、基于Serverless的Egg無人點餐系統(tǒng) 封裝公共方法通過Ajax請求api接口 異步改變數(shù)據(jù)狀態(tài)(24分28秒)
一、封裝公共方法通過Ajax請求api接口
二、異步改變數(shù)據(jù)狀態(tài)
53、基于Serverless的Egg無人點餐系統(tǒng) 菜品分頁以及修改數(shù)據(jù)后返回到上一頁(32分30秒)
一、菜品分頁
二、改數(shù)據(jù)后返回到上一頁
54、基于Serverless的Egg無人點餐系統(tǒng) 桌號的增刪改查(16分21秒)
55、使用qr-image生成桌號二維碼以及使用node-canvas加水印合成圖片二維碼(41分15秒)
一、qr-image生成桌號二維碼
二、node-canvas的使用
三、node-canvas合成圖片
四、node-canvas增加水印
56、使用qr-image生成桌號二維碼以及使用 html5 Canvas加水印合成圖片二維碼(10分46秒)
一、qr-image生成桌號二維碼
二、html5 canvas的使用
三、html5 canvas合成圖片
四、html5 canvas增加水印
57、基于Serverless的Egg無人點餐系統(tǒng) 系統(tǒng)設(shè)置 multipart默認(rèn)數(shù)量限制(26分49秒)
一、無人點餐系統(tǒng)設(shè)置
二、修改multipart默認(rèn)數(shù)量限制
58、【RESTful Api】Eggjs為Vue Angualr提供api接口 前后端分離RESTful API 設(shè)計指南 路由分組(24分11秒)
一、 RESTful API 設(shè)計指南
二、 路由分組
三、 Egg中通過 egg-cors配置服務(wù)器端允許跨域
59、【RESTful Api】 菜品列表 菜品詳情Api接口設(shè)計 指定字段查詢 排序 關(guān)聯(lián)查詢排序(19分33秒)
一、菜品分類和菜品列表管理查詢以及菜品詳情Api接口設(shè)計
二、 sequelize關(guān)聯(lián)查詢 自定數(shù)據(jù)返回的字段
三、 sequelize關(guān)聯(lián)查詢 排序
四、 Egg中通過egg-cors配置服務(wù)器端允許跨域
60、【RESTful Api】購物車相關(guān)接口設(shè)計 增加購物車 購物車列表 更新購物車 統(tǒng)計數(shù)量(31分10秒)
一、購物車列表Api接口制作
二、加入購物車Api接口制作
三、增加購物車數(shù)量Api接口制作
四、減少購物車數(shù)量Api接口制作
五、獲取桌子對應(yīng)的購物車數(shù)量接口制作
61、【RESTful Api】獲取口味列表 增加用餐人數(shù) 修改用餐人數(shù)(18分19秒)
一、獲取口味信息
二、增加/修改用戶用餐信息
三、獲取用戶用餐信息
62、【RESTful Api】order表和order_items關(guān)聯(lián)以及提交訂單 獲取訂單(36分44秒)
一、order和order_items關(guān)聯(lián)
二、提交訂單
三、獲取訂單
63、【RESTful Api】JWT教程_Nodejs+Vue+React基于JWT的權(quán)限驗證視頻教程(51分39秒)
一、 關(guān)于接口的安全驗證
二、 關(guān)于 JWT
三、 Nodejs 中使用 JWT 實現(xiàn)接口的安全驗證
四、 Vue React Angular 使用 Axios 訪問基于 Jwt 的接口
五、 關(guān)于 Jwt 的一些問題
64、【RESTful Api】egg-jwt 實現(xiàn)接口權(quán)限驗證 Vue請求接口攜帶token
一、 egg-jwt的使用
二、 vue請求接口攜帶token
65、 Egg無人點餐項目發(fā)布到serverless服務(wù)器 遷移數(shù)據(jù)庫 配置私有網(wǎng)絡(luò) 配置https域名(16分9秒)
一、 本地Mysql數(shù)據(jù)庫遷移到遠(yuǎn)程服務(wù)器
二、 Egg項目發(fā)布到ServerLess
三、 私有網(wǎng)絡(luò)配置
四、 https域名配置
Vue基礎(chǔ)教程目錄介紹(已完結(jié)34講)
01、Vue3.x簡介、搭建Vue3.x環(huán)境、創(chuàng)建運行Vue3.x項目、分析Vue3.x目錄結(jié)構(gòu)(17分41秒)
一、Vue3.x介紹
二、通過Vue-cli創(chuàng)建我們的項目
三、通過Vite腳手架創(chuàng)建我們的項目
四、Vue3.x 目錄結(jié)構(gòu)介紹
五、Vue3.x 開發(fā)工具以及插件配置
02、Vue3.x綁定數(shù)據(jù)、綁定html、綁定屬性、循環(huán)數(shù)據(jù)(30分24秒)
一、Vue3.x定義數(shù)據(jù)綁定數(shù)據(jù)
二、v-html綁定html
三、v-bind綁定屬性
四、v-bind動態(tài)參數(shù)
五、v-for循環(huán)數(shù)組
六、v-for循環(huán)對象
03、Vue3.x中的事件方法入門、模板語法模板中類和樣式綁定(29分50秒)
一、Vue3.x中的事件方法入門
二、v-bind綁定Class
三、v-bind:style 綁定內(nèi)聯(lián)樣式
04、Vue3.x中的事件方法詳解、事件監(jiān)聽、方法傳值、事件對象、多事件處理程序、事件修飾符、按鍵修飾符(24分34秒)
一、監(jiān)聽事件
二、定義方法 執(zhí)行方法 獲取數(shù)據(jù) 改變數(shù)據(jù)
三、方法傳值、方法的相互調(diào)用
四、事件對象
五、多事件處理程序
六、事件修飾符
七、按鍵修飾符
05、Vue3.x中Dom操作$refs 以及表單( input、checkbox、radio、select、 textarea )結(jié)合雙休數(shù)據(jù)綁定實現(xiàn)在線預(yù)約功能(26分13秒)一、監(jiān)聽事件
二、定義方法 執(zhí)行方法 獲取數(shù)據(jù) 改變數(shù)據(jù)
三、方法傳值、方法的相互調(diào)用
四、事件對象
五、多事件處理程序
六、事件修飾符
七、按鍵修飾符
06、Vue3.x中使用JavaScript表達(dá)式 、條件判斷、 計算屬性和watch偵聽(33分9秒)
一、Vue3.x模板中使用JavaScript表達(dá)式
二、 v-if v-else v-else-if v-show
三、計算屬性
四、計算屬性實現(xiàn)數(shù)據(jù)的篩選
五、watch監(jiān)聽數(shù)據(jù)變化
07、Vue3.x 實現(xiàn)一個完整的toDoList(待辦事項) 以及類似京東App搜索緩存數(shù)據(jù)功能【前面知識綜合練習(xí)】(17分42秒)
一、Vue3.x中集成Sass/scsss
二、template標(biāo)簽的使用
三、Vue3.x 實現(xiàn)一個完整的toDoList(待辦事項) 以及類似京東App搜索緩存數(shù)據(jù)功能
08、Vue3.x中的模塊化以及封裝Storage實現(xiàn)todolist 待辦事項 已經(jīng)完成的持久化(13分21秒)
一、Vue3.x中的模塊化以及封裝Storage
二、 Storage實現(xiàn)todolist 待辦事項 已經(jīng)完成的持久化
09、Vue3.x中的單文件組件 定義組件 注冊組件 以及組件的使用(15分29秒)
10、Vue3.x父組件給子組件傳值、Props、Props驗證、單向數(shù)據(jù)流(26分12秒)
一、Vue3.x父子組件介紹
二、父組件給子組件傳值
三、子組件通過Props接收父組件的數(shù)據(jù)
四、Props驗證
五、單向數(shù)據(jù)流
11、Vue3.x父組件主動獲取子組件的數(shù)據(jù)和執(zhí)行子組件方法 、子組件主動獲取父組件的數(shù)據(jù)和執(zhí)行父組件方法(15分8秒)
一、Vue3.x父組件通過$refs主動獲取子組件的數(shù)據(jù)和執(zhí)行子組件方法
二、子組件主動$parent獲取父組件的數(shù)據(jù)和執(zhí)行父組件方法
12、Vue3.x組件自定義事件 以及mitt 實現(xiàn)非父子組件傳值(24分48秒)
一、Vue3.x組件自定義事件
二、Vue3.x組件自定義事件實現(xiàn)子組件給父組件傳值
三、Vue3.x組件自定義事件驗證
四、vue3.x第三方插件mitt 實現(xiàn)非父子組件傳值
13、Vue3.x自定義組件上面使用v-mode雙休數(shù)據(jù)綁定 以及 slots以及 Prop 的Attribute 繼承 、禁用 Attribute 繼承(30分30秒)
一、自定義組件使用`v-model`實現(xiàn)雙休數(shù)據(jù)綁定
二、自定義組件slots
三、Prop 的Attribute 繼承
四、禁用 Attribute 繼承
14、Vue3.x中組件的生命周期函數(shù)(lifecycle)、 this.$nextTick、動態(tài)組件 keep-alive、Vue實現(xiàn)Tab切換(27分28秒)
一、Vue3.x中組件的生命周期函數(shù)
二、動態(tài)組件 keep-alive
三、this.$nextTick的使用
四、Vue實現(xiàn)Tab切換
15、Vue3.x中全局綁定屬性、使用Axios和fetchJsonp請求真實api接口數(shù)據(jù)、函數(shù)防抖實現(xiàn)百度搜索(33分29秒)
一、Vue3.x中全局綁定屬性
二、Vue3.x全局綁定Axios Storage
三、使用Axios和fetchJsonp請求真實api接口數(shù)據(jù)
四、調(diào)用百度真實api接口實現(xiàn)百度搜索、以及函數(shù)防抖
16、Vue3.x中的Mixin實現(xiàn)組件功能的復(fù)用 、全局配置Mixin(16分43秒)
一、Vue3.x中的Mixin
二、Mixin實現(xiàn)組件功能的復(fù)用
三、全局配置Mixin
17、Vue3.x Teleport、使用Teleport自定義一個模態(tài)對話框的組件(19分42秒)
一、Vue3.x Teleport
二、使用Teleport自定義一個模態(tài)對話框的組件
18、【Composition Api】Vue3.x Composition API setup ref reactive toRefs 詳解(上)(23分8秒)
19、【Composition Api】Vue3.x Composition API setup ref reactive toRefs computed watch watchEffect lifecycle詳解(下)(35分19秒)
20、【Composition Api】Vue3.x Composition API 以及 Provider Inject(18分46秒)
21、【Vue3+Typescript】Vue3.x中集成Typescript 使用Typescript(上)(24分16秒)
22、【Vue3+Typescript】Vue3.x Composition API中使用Typescript(下)(22分2秒)
23、【Vue-Router】Vue3.x中的路由 路由配置(1)(15分37秒)
24、【Vue-Router】Vue3.x中的路由 vue動態(tài)路由 get傳值 js跳轉(zhuǎn)路由(18分30秒)
25、【Vue-Router】Vue3.x中的路由 路由模式、命名路由、路由重定向、路由別名(20分9秒)
26、【Vue-Router】Vue3.x中的路由 路由嵌套 父子路由(18分54秒)
27、【Vuex】Vuex 的使用 State、 Mutation 、mapState 實現(xiàn)多個頁面共享狀態(tài)(27分4秒)
28、【Vuex】Vuex 中的 State Mutation Getters mapGetters Actions Modules(33分51秒)
29、【Vuex】Vuex 結(jié)合 Composition AP的使用(16分33秒)
30、【Vuex】Vuex Composition AP和非Composition AP中結(jié)合Typescript的使用(17分51秒)
31、【Vue+Antd】Vue3.x UI框架ant-design 組件庫介紹 安裝 使用(19分43秒)
32、【Vue+Antd】Vue3.x UI框架ant-design Layout布局 、路由配置、柵格系統(tǒng)實現(xiàn)Bootstrap官網(wǎng)首頁布局(25分14秒)
33、【Vue+Antd】Vue3.x UI框架ant-design input raido select checkbox 日期DatePicker的使用(29分45秒)
34、【Vue+Antd】Vue3.x UI框架ant-design Upload上傳組件結(jié)合Nodejs后端實現(xiàn)圖片上傳(29分18秒)
Vue無人點餐項目實戰(zhàn)目錄介紹(已完結(jié)36講-完結(jié))
第一講 Vue項目功能分析、開發(fā)流程說明、搭建sass環(huán)境 配置公共靜態(tài)頁面
第二講 Vue無人點餐無人收銀系統(tǒng) H5跨平臺M站 開始頁面制作
第三講 Vue無人點餐無人收銀跨平臺M站 首頁點餐頁面布局
第四講 Vue無人點餐無人收銀跨平臺M站 首頁點餐頁面布局 懸浮導(dǎo)航 以及點擊彈出側(cè)邊欄動畫
第五講 Vue無人點餐無人收銀跨平臺M站 首頁點餐頁面布局 懸浮按鈕制作
第六講 Vue無人點餐無人收銀跨平臺M站 詳情頁面制作 以及加入購物車布局
第七講 Vue+Vuex+Koa2+Socket.io無人點餐無人收銀跨平臺M站詳情頁面制作、 返回按鈕、 以及熱銷榜、 搜你喜歡頁面制作
第八講 Vue無人點餐無人收銀跨平臺M站 購物車頁面制作
第九講 Vue+Vuex+Koa2+Socket.io無人點餐無人收銀跨平臺M站 購物車頁面制作 沒有數(shù)據(jù)頁面 以及顧客最常點的菜
第十講 Vue無人點餐無人收銀跨平臺M站 等待接單 訂單頁面制作
第十一講 Vue 打造無人點餐 無人收銀系統(tǒng) 創(chuàng)建項目 集成ts 集成sass 配置路由(20分54秒)
一、創(chuàng)建Vue3.x項目
二、Vue3.x項目中集成ts
三、Vue3.x項目中集成Sass
四、配置vue3無人點餐項目的路由
第十二講 Vue 打造無人點餐 無人收銀系統(tǒng) 重構(gòu)寫好的靜態(tài)頁面 并實現(xiàn)路由跳轉(zhuǎn)(16分20秒)
第十三講 Vue 打造無人點餐 無人收銀系統(tǒng) 側(cè)滑導(dǎo)航 以及定義公共的底部導(dǎo)航組件 并實現(xiàn)顯示隱藏(14分23秒)
第十四講 Vue3+Ts中全局綁定Axios請求接口獲取JWT token信息、封裝本地存儲storage.ts、封裝config.ts(25分7秒)
一、全局綁定Axios
二、請求接口傳入Jwt Token
三、封裝本地存儲 以及全部綁定本地存儲
四、封裝config.ts以及全部綁定config
第十五講 起始頁、首頁分類、首頁菜品、詳情頁面數(shù)據(jù)渲染(23分57秒)
第十六講 獲取桌號、購物車數(shù)量加減、選擇菜品加入購物車、獲取購物車數(shù)量(16分38秒)
第十七講 購物車列表制作以及購物車數(shù)量增加減少(17分33秒)
第十八講 Vue打造無人點餐 無人收銀系統(tǒng) 選擇用餐人數(shù)、$nextTick 獲取更新后的DOM、 備注口味信息 保存用餐人數(shù)(29分53秒)
第十九講 Vue打造無人點餐 無人收銀系統(tǒng) 購物車頁面渲染用餐人數(shù)、計算總價、修改用餐人數(shù)(27分17秒)
第二十講 Vue打造無人點餐 無人收銀系統(tǒng) Socket.io同步購物車數(shù)據(jù)的實現(xiàn)邏輯(7分1秒)4
第二十一講【Socket.io拓展】Nodejs+Express 結(jié)合 socket.io的使用(16分26秒)
第二十二講【Socket.io拓展】Socket.io跨域解決方案、Socket.io多房間聊天 以及 同一桌點餐用戶之間同步信息(29分12秒)
第二十三講【Socket.io拓展】Socket.io中的命名空間 以及 egg.js中使用socket.io(32分22秒)
第二十四講 Vue3無人點餐項目結(jié)合Socket.io實現(xiàn)無刷新同步購物車數(shù)據(jù)(24分57秒)
第二十五講 起始頁選擇用餐人數(shù)優(yōu)化 以及 提交訂單跳轉(zhuǎn)到訂單頁面顯示已下單菜品(22分51秒)
第二十六講【小票打印】無人點餐 無人收銀系統(tǒng) 調(diào)用API接口實現(xiàn)提交訂單自動云打印小票功能(19分9秒)
第二十七講【小票打印】Egg.js接口中集成小票打印 moment模塊格式化日期 提交訂單打印對應(yīng)的菜品 (8分11秒)
第二十八講【支付寶支付】無人點餐系統(tǒng) 支付寶支付之前的準(zhǔn)備工作 創(chuàng)建支付寶應(yīng)用 配置簽名 提交審核(12分36秒)
第二十九講【支付寶支付】vue無人點餐項目支付寶支付流程、Eggjs集成支付寶支付、Serverless服務(wù)器處理異步回調(diào)(28分44秒)
第三十講【支付寶支付】Vue 無人點餐 無人收銀系統(tǒng) 點擊去支付調(diào)用Nodejs Api接口實現(xiàn)支付(10分16秒)
第三十一講【Vue發(fā)布上線】Vue無人點餐發(fā)布到Serverless服務(wù)器配置域名以及微信支付實現(xiàn)邏輯說明(12分54秒)
第三十二講【 JSSDK+微信支付】JSSDK微信支付準(zhǔn)備工作、 注冊公眾平臺賬戶、申請微信支付 、生成商戶平臺賬戶(7分12秒)
第三十三講【JSSDK+微信支付】JSSDK微信支付和H5支付區(qū)別、 JSSDK說明、以及獲取appid、獲取appsecret、獲取商戶賬戶、獲取商戶key(11分39秒)
第三十四講【JSSDK+微信支付】JSSDK配置流程 JSsdk結(jié)合nodejs后端 實現(xiàn)掃一掃功能 獲取網(wǎng)絡(luò)狀態(tài) 拍照等(26分25秒)
第三十五講【JSSDK+微信支付】Vue無人點餐 JSSDK 獲取code 、獲取 openid 、調(diào)用統(tǒng)一下單接口實現(xiàn)支付(30分44秒)
第三十六講 【JSSDK+微信支付】Vue無人點餐項目結(jié)合服務(wù)器JSsdk實現(xiàn)微信支付(15分26秒)
Vue3無人點餐無人收銀系統(tǒng)部分頁面截圖展示:
![]()
![]()
![]()
![]()
![]()
購買過此商品的人還購買過