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