阶段一:解锁“大前端思维”
第1周 认识大前端,全栈开发初体验
是否还在为选择使用什么框架而苦恼?是否还在为学习哪个前端框架而纠结?本周将给您满意的答案,有UI和JS框架对比与选型,有Node.js进阶使用、Web框架如何开发RESTful接口等。
课程安排:
1、全项目流程 + 全项目整体规划
2、行业内卷如何破局、工作中遇到的痛点问题、面试规划
3、从原型设计、接口设计到技术栈的宏观项目架构思维
4、常见JS与UI框架对比与选型
5、Koa工作原理及常见Koa中间件使用
6、常见原型图工具、流程图工具介绍
7、登录模块的开发,LayUI框架集成
8、邮件服务和图片验证码服务的开发
9、表单验证Vuelidate/VeeValidate
10、配置邮件服务NodeMailer
11、如何调试Node应用及webpack配置
12、通用的登录鉴权模块
2、行业内卷如何破局、工作中遇到的痛点问题、面试规划
3、从原型设计、接口设计到技术栈的宏观项目架构思维
4、常见JS与UI框架对比与选型
5、Koa工作原理及常见Koa中间件使用
6、常见原型图工具、流程图工具介绍
7、登录模块的开发,LayUI框架集成
8、邮件服务和图片验证码服务的开发
9、表单验证Vuelidate/VeeValidate
10、配置邮件服务NodeMailer
11、如何调试Node应用及webpack配置
12、通用的登录鉴权模块
第2周 企业标准的开发环境搭建
工欲善其事,必先利其器。学习最火的Docker容器技术,快速搭建测试环境。深入讲解前端必会的Mock接口与工具,并专门设计了调试技巧&真机调试讲解,与实际工作开发完美契合。
课程安排:
1、虚拟机搭建与使用
2、Linux开发环境及常见命令使用
3、容器技术Docker以及安装及使用
4、Node及npm命令,nrm源切换
5、常见的Mock平台与工具介绍
6、搭建DOClever接口测试平台
7、前后端分离开发模式–RESTful接口
8、常见IDE使用技巧:VSCode + WebStorm
9、主流IDE的调试技巧(让Bug无处遁形)
10、VSCode通用配置及课程专属配置分享
11、三类真机调试技巧
12、各大云服务商、服务器的使用指南
2、Linux开发环境及常见命令使用
3、容器技术Docker以及安装及使用
4、Node及npm命令,nrm源切换
5、常见的Mock平台与工具介绍
6、搭建DOClever接口测试平台
7、前后端分离开发模式–RESTful接口
8、常见IDE使用技巧:VSCode + WebStorm
9、主流IDE的调试技巧(让Bug无处遁形)
10、VSCode通用配置及课程专属配置分享
11、三类真机调试技巧
12、各大云服务商、服务器的使用指南
第3周 NoSQL数据库的设计与集成
本周带您解开数据之谜,学习NoSQL数据库与数据库设计原则,让您带着设计思维去设计项目数据库。掌握Redis安装、常用CLI命令,搞定Redis服务搭建与Nodejs集成
课程安排:
1、关系型数据库与非关系型数据库
2、了解NoSQL数据库分类及选型
3、掌握NoSQL数据库设计原则
4、Docker快速搭建MongoDB及Redis开发测试环境
5、MongoDB新增用户、配置权限
6、MongoDB CURD操作
7、MongoDB数据备份与恢复
8、掌握从功能到数据库的基本设计思路
9、第三方库mongoose及初始化DBHelper.js
10、Redis与nodejs集成常见getValue,setValue方法
2、了解NoSQL数据库分类及选型
3、掌握NoSQL数据库设计原则
4、Docker快速搭建MongoDB及Redis开发测试环境
5、MongoDB新增用户、配置权限
6、MongoDB CURD操作
7、MongoDB数据备份与恢复
8、掌握从功能到数据库的基本设计思路
9、第三方库mongoose及初始化DBHelper.js
10、Redis与nodejs集成常见getValue,setValue方法
第4周 JWT登录鉴权—通用登录模块后端开发
本周解读鉴权、加密/算法、HTTPS等核心概念,实践JWT方式进行登录鉴权接口设计。从前到后,涵盖输入校验、Axios请求封装、统一错误处理、jwt功能集成及数据安全性策略的分析等知识。
课程安排:
1、前端常见鉴权方式及优缺点
2、算法/加密、HTTPS等概念大解密
3、JWT工作原理及Koa-jwt功能集成
4、前端接口Axios封装
5、前端统一错误处理、后端统一错误响应
6、前后端接口数据校验思路
7、自定义vue组件,优化前端登录注册交互
8、输入校验、远程校验结合提升用户体检
9、登录注册Mock数据
10、vscode调试进阶
2、算法/加密、HTTPS等概念大解密
3、JWT工作原理及Koa-jwt功能集成
4、前端接口Axios封装
5、前端统一错误处理、后端统一错误响应
6、前后端接口数据校验思路
7、自定义vue组件,优化前端登录注册交互
8、输入校验、远程校验结合提升用户体检
9、登录注册Mock数据
10、vscode调试进阶
阶段二:项目全流程DevOps
第5周 团队协作-文档管理与缺陷控制
项目开发过程中,少不了团队协作,哪些可以提升效率?文档管理:介绍工作中必知必会的(项目+需求+接口)文档的管理办法,搭建团队的文档管理工具;介绍缺陷控制流程与工具的应用,ESLint配置深入讲解。
课程安排:
1、Markdown语法及进阶图表使用
2、ShowDoc进行云笔记及文档管理
3、搭建自己团队的接口管理平台
4、学会使用hexo+github搭建自己的博客
5、掌握容器技术Docker进阶使用
6、掌握缺陷控制工具及使用
7、了解质量管理工作流
8、缺陷控制平台Jira、Teambition、禅道、Trello
9、代码质量ESLint使用与配置
10、VSCode代码ESLint自动保存修复
2、ShowDoc进行云笔记及文档管理
3、搭建自己团队的接口管理平台
4、学会使用hexo+github搭建自己的博客
5、掌握容器技术Docker进阶使用
6、掌握缺陷控制工具及使用
7、了解质量管理工作流
8、缺陷控制平台Jira、Teambition、禅道、Trello
9、代码质量ESLint使用与配置
10、VSCode代码ESLint自动保存修复
第6周 团队协作-版本管理
本周介绍版本控制工具,比较SVN与git的优缺点,深入Git的应用场景,结合场景学习Git命令,同时了解Git flow和devOps流程,协助同学们在自己的团队中部署Git平台,提升工作效率。
课程安排:
1、SVN VS Git 优缺点
2、掌握Git基础命令
3、Git进阶命令:rebase,reset,stash
4、从零配置 github 到 SSH 秘钥克隆仓库
5、Git Flow及管理版本控制
6、使用 Docker 快速搭建 gitlab 平台
7、docker-compose 集成化的 docker 命令
8、gitlab 平台与 gitea 平台比较
9、gitlab 平台管理,用户权限控制
2、掌握Git基础命令
3、Git进阶命令:rebase,reset,stash
4、从零配置 github 到 SSH 秘钥克隆仓库
5、Git Flow及管理版本控制
6、使用 Docker 快速搭建 gitlab 平台
7、docker-compose 集成化的 docker 命令
8、gitlab 平台与 gitea 平台比较
9、gitlab 平台管理,用户权限控制
第7周 团队协作-自动化流程
本周学习团队协作最重要的部分:前端自动化流程,使用容器技术配置自动化/持续集成环境,部署Jenkins平台,结合gitlab完成完整的CI/CD落地实践,让开发者能更专注于业务,进一步提升团队效率。
课程安排:
1、了解CI/CD平台CircleCI,TravisCI和Jenkins
2、理解自动化/持续集成流程,升华DevOps理解
3、快速搭建、配置Jenkins服务
4、掌握Jenkins中的权限控制,并与gitlab进行集成
5、学习Jenkins的权限控制与插件管理系统
6、配合Jenkins效率构建,完成发布、构建等工作
7、实战前端项目自动化部署
8、了解Linux运维相关的命令与知识
9、了解私有化容器平台搭建及使用
2、理解自动化/持续集成流程,升华DevOps理解
3、快速搭建、配置Jenkins服务
4、掌握Jenkins中的权限控制,并与gitlab进行集成
5、学习Jenkins的权限控制与插件管理系统
6、配合Jenkins效率构建,完成发布、构建等工作
7、实战前端项目自动化部署
8、了解Linux运维相关的命令与知识
9、了解私有化容器平台搭建及使用
阶段三:PC端进阶前后端开发
第8周 全栈开发—首页模块
从数据库、接口设计到组件拆分,再到首页核心功能实现,提高对前置流程理解与工具使用的熟练度。本周通过原型图到实现首页交互(复杂筛选)及接口,综合运用前置知识,学习项目开发的实战内容。
课程安排:
1、Npm依赖升级方案,@vue/cli升级V4版本
2、PC端项目全局需求分析、原型设计、项目重难点介绍
3、掌握首页、发帖、用户中心数据库设计、接口设计、文档更新
4、首页多级列表、筛选、排序功能开发
5、路由监听/路由守卫/子路由ActiveClass灵活应用开发交互效果
6、Axios请求封装/拦截器/取消用户重复请求
7、侧栏:统计、签到、周热议 功能开发
8、首页Mock数据调试长列表加载、接口开发、前后端接口联调
9、版本控制建立Git仓库,熟悉Git相关操作
10、缺陷控制实战:代码Prettier格式化、ESLint自动修复实践、配置Standart规则
2、PC端项目全局需求分析、原型设计、项目重难点介绍
3、掌握首页、发帖、用户中心数据库设计、接口设计、文档更新
4、首页多级列表、筛选、排序功能开发
5、路由监听/路由守卫/子路由ActiveClass灵活应用开发交互效果
6、Axios请求封装/拦截器/取消用户重复请求
7、侧栏:统计、签到、周热议 功能开发
8、首页Mock数据调试长列表加载、接口开发、前后端接口联调
9、版本控制建立Git仓库,熟悉Git相关操作
10、缺陷控制实战:代码Prettier格式化、ESLint自动修复实践、配置Standart规则
第9周 全栈开发—用户中心
开发个人中心核心业务,丰富的Vue-router、Vuex进阶应用和自定义组件,完成周榜、签到榜、热评榜的功能,实现签到积分系统,完善个人中心设置。
课程安排:
1、登录安全机制设计
2、优化登录路由,动态加载多文件路由
3、进阶 webpack 配置,学习 require.context 用法
4、本地缓存登录状态(介绍localStorage&SessionStorage区别)
5、自制 Iconfont 图标库
6、实战核心依赖升级,升级 LayUI 基础库版本
7、Sass 进阶学习@for/@Mixin/@Map 的用法
8、帖子详情、采纳、点赞功能开发
9、个人中心收藏列表、发贴列表功能开发
10、签到系统,积分体系的设计
11、上传图片前 + 后功能开发
2、优化登录路由,动态加载多文件路由
3、进阶 webpack 配置,学习 require.context 用法
4、本地缓存登录状态(介绍localStorage&SessionStorage区别)
5、自制 Iconfont 图标库
6、实战核心依赖升级,升级 LayUI 基础库版本
7、Sass 进阶学习@for/@Mixin/@Map 的用法
8、帖子详情、采纳、点赞功能开发
9、个人中心收藏列表、发贴列表功能开发
10、签到系统,积分体系的设计
11、上传图片前 + 后功能开发
第10周 全栈开发—发贴/回帖模块
继续开发发帖/回帖核心业务之后,形成PC端社区业务闭环,配置自动化流程,完成PC端项目自动化部署。进一步巩固前置技能,综合应用效率平台与工具,完成开发与测试,培养技术栈综合应用能力。
课程安排:
1、发贴权限效验
2、Node.js 大版本更新策略
3、Vue 代码复用方式 mixins
4、开源富文本编辑器横评
5、自定义富文本编辑器开发(插入链接|图片、引用|代码样式、预览)
6、Vue 中的 transition 动画设计
7、Vue 自定义 directive/filters 妙用
8、改造入口文件 routes,后端路由按模块动态引入
9、调试账号修改邮件通知功能
10、Nodejs 静态资源处理、文件上传后台、路径相关进阶操作
11、MongoDB 多表联合查询及统计 SQL
2、Node.js 大版本更新策略
3、Vue 代码复用方式 mixins
4、开源富文本编辑器横评
5、自定义富文本编辑器开发(插入链接|图片、引用|代码样式、预览)
6、Vue 中的 transition 动画设计
7、Vue 自定义 directive/filters 妙用
8、改造入口文件 routes,后端路由按模块动态引入
9、调试账号修改邮件通知功能
10、Nodejs 静态资源处理、文件上传后台、路径相关进阶操作
11、MongoDB 多表联合查询及统计 SQL
第11周 消息中间件开发(WebSocket通信)
websocket是长连接的最优解决方案,升级全解析:ws分组消息、断线重连、心跳检测、离线消息缓存、历史消息,开发通用消息中间件。
课程安排:
1、WebSocket 协议与特点,应用场景分析
2、WebSocket 与 Socket.io 进行对比
3、Socket.io 开发简单的消息应用
4、进阶认识 WebSocket 事件、属性
5、使用 WS开发多人聊天室应用(统计在线人数、加入&离开广播通知)
6、WebSocket 消息应用进阶(鉴权、心跳检测、断线重连)
7、离线消息缓存之 Redis 缓存解决方案(多房间、多用户、多条信息缓存)
8、封装 WebSocket 客户端、服务端通用模块
9、PC端项目个人中心我的消息功能开发(实时、历史消息)
2、WebSocket 与 Socket.io 进行对比
3、Socket.io 开发简单的消息应用
4、进阶认识 WebSocket 事件、属性
5、使用 WS开发多人聊天室应用(统计在线人数、加入&离开广播通知)
6、WebSocket 消息应用进阶(鉴权、心跳检测、断线重连)
7、离线消息缓存之 Redis 缓存解决方案(多房间、多用户、多条信息缓存)
8、封装 WebSocket 客户端、服务端通用模块
9、PC端项目个人中心我的消息功能开发(实时、历史消息)
阶段四:CMS后台管理系统开发
第12周 组件化思想进阶:iview上手文章管理
本周进入到后台管理系统开发,从项目整体架构去考虑中后台应用的开发路径。学习iview-admin 框架工作原理,自定义表格组件,完成文章管理开发。
课程安排:
1、中后台管理系统设计思路
2、后端需求分析,接口设计,数据库设计
3、iView-admin UI 模板集成,基础 iview UI 库升级
4、解析项目架构,添加路由和菜单
5、学习前端权限控制思路与路由守卫
6、定制开发登录入口,加入 JWT 鉴权机制
7、Cookie及Session 的使用方式
8、实战多语言场景:英文&简体中文
9、iView 动态表格两种渲染方法(render函数)
10、Vuex 中 Modules模块用法
11、接口安全与登录注册校验
2、后端需求分析,接口设计,数据库设计
3、iView-admin UI 模板集成,基础 iview UI 库升级
4、解析项目架构,添加路由和菜单
5、学习前端权限控制思路与路由守卫
6、定制开发登录入口,加入 JWT 鉴权机制
7、Cookie及Session 的使用方式
8、实战多语言场景:英文&简体中文
9、iView 动态表格两种渲染方法(render函数)
10、Vuex 中 Modules模块用法
11、接口安全与登录注册校验
第13周 中后台权限系统:前端权限设计方案
进入中后台系统开发中最重要环节:权限系统。介绍前端中(组件级、按钮级、路由级)三种权限控制解决方案,开发用户管理页面,定制动态搜索组件,深入学习iview基础组件:Table、Form、Modal等。
课程安排:
1、了解权限设计基础(权限构成)
2、学习什么是菜单权限、数据权限?
3、学习前台权限控制的三种场景应用
4、自定义指令 hasRole实现前端组件级、按钮组权限控制
5、实战前端基于角色的权限控制方案
6、了解动态路由添加方法和权限控制方案
7、实战用户管理页面开发
8、自定义动态选项的搜索组件
9、深入学习iview基础组件(Table,Model)
10、添加用户模态框,批量设置用户、批量删除用户功能开发
2、学习什么是菜单权限、数据权限?
3、学习前台权限控制的三种场景应用
4、自定义指令 hasRole实现前端组件级、按钮组权限控制
5、实战前端基于角色的权限控制方案
6、了解动态路由添加方法和权限控制方案
7、实战用户管理页面开发
8、自定义动态选项的搜索组件
9、深入学习iview基础组件(Table,Model)
10、添加用户模态框,批量设置用户、批量删除用户功能开发
第14周 中后台权限系统:基于角色&菜单权限设计
本周将继续深入权限系统,开发包括菜单管理、角色管理以及后台权限管理API,开发nodejs中间件,实现基于角色的接口资源访问控制系统。加深前置知识的综合应用,从前到后,打通权限设计的全方位思维。
课程安排:
1、不同类型数据库菜单权限设计思路(关系型数据库、非关系型)
2、设计菜单基础信息页面UI(清晰的菜单结构)
3、角色权限页面原型&布局
4、角色管理、菜单管理、权限分配页面样式开发
5、理解多级树形菜单组件、编辑功能操作互锁
6、多层级树形菜单数据结构整理思路(递归、高效数据查询)
7、Nodejs后台基于角色的菜单权限
8、Nodejs后台数据接口权限的完整解决方案(RBAC方案)
9、超级管理员的设计方案
10、Koa鉴权中间件开发,对资源权限进行访问控制
11、Vue后台动态菜单实现思路 addRoutes API
2、设计菜单基础信息页面UI(清晰的菜单结构)
3、角色权限页面原型&布局
4、角色管理、菜单管理、权限分配页面样式开发
5、理解多级树形菜单组件、编辑功能操作互锁
6、多层级树形菜单数据结构整理思路(递归、高效数据查询)
7、Nodejs后台基于角色的菜单权限
8、Nodejs后台数据接口权限的完整解决方案(RBAC方案)
9、超级管理员的设计方案
10、Koa鉴权中间件开发,对资源权限进行访问控制
11、Vue后台动态菜单实现思路 addRoutes API
第15周 首页可视化图表与日志服务
本周将完成后端管理平台的首页管理,对首页统计功能进行定制开发,并增加日志服务,对后台接口的调用增加日志管理,系统功能完善与监管。以及前后端联调及细节优化,定制Jenkins任务及配置前后端自动化任务。
课程安排:
1、学习Echarts表格术语 + 文档速览方法
2、地图类型图表两种解决方案
3、完成首页统计功能:周数据统计、新增用户统计、发帖、进日统计
4、监控日志两种方法:调试日志koa-logger和文件日志koa-log4j
5、掌握多系统前后端联调技能
6、自动化流程回顾+Jenkins节点管理
7、接口项目配置自动化任务(隐藏敏感信息、微信通知)
8、配置前后端项目的自动化部署
2、地图类型图表两种解决方案
3、完成首页统计功能:周数据统计、新增用户统计、发帖、进日统计
4、监控日志两种方法:调试日志koa-logger和文件日志koa-log4j
5、掌握多系统前后端联调技能
6、自动化流程回顾+Jenkins节点管理
7、接口项目配置自动化任务(隐藏敏感信息、微信通知)
8、配置前后端项目的自动化部署
阶段五:WebApp开发与Vue3项目重构
第16周 WebApp页面设计与开发
WebApp本质是移动Web,在移动端适配、长列表性能、页面交互设计等核心问题如何解决?本周将讲解行业内的通用解决方案,通过首页、登录注册、详情、发贴、搜索和个人中心模块(排除消息模块)实战。
课程安排:
1、WebApp原型设计及工具使用、WebApp开发的常见问题
2、移动端框架概览及Mint-UI介绍 & 自定义主题
3、自定义SVG图标组件(巧用svg-sprite-loader)
4、Vuex状态管理state分层及Modules进阶应用
5、全局样式方案Normalize与Reset
6、开发登录、注册、密码找回页面
7、首页列表及筛选、个人中心开发
8、评论列表无限加载模块
9、上拉加载、下拉刷新的开发技巧
10、自定义Header组件
11、详情页面交互设计(transition动画进阶)
12、滚动穿透解决方案(iscroll & better-scroll介绍)
13、移动端适配解决方案(px-to-viewport & px-to-rem)
14、WebApp项目容器化实战,配置Dockerfile及打包镜像
15、Jenkins多节点配置及管理
16、个人中心、热门功能开发
17、热门功能开发:多条件统计列表开发
18、移动端接口对接,定制热门统计相关接口
19、MongDB聚合查询与Populate查询
2、移动端框架概览及Mint-UI介绍 & 自定义主题
3、自定义SVG图标组件(巧用svg-sprite-loader)
4、Vuex状态管理state分层及Modules进阶应用
5、全局样式方案Normalize与Reset
6、开发登录、注册、密码找回页面
7、首页列表及筛选、个人中心开发
8、评论列表无限加载模块
9、上拉加载、下拉刷新的开发技巧
10、自定义Header组件
11、详情页面交互设计(transition动画进阶)
12、滚动穿透解决方案(iscroll & better-scroll介绍)
13、移动端适配解决方案(px-to-viewport & px-to-rem)
14、WebApp项目容器化实战,配置Dockerfile及打包镜像
15、Jenkins多节点配置及管理
16、个人中心、热门功能开发
17、热门功能开发:多条件统计列表开发
18、移动端接口对接,定制热门统计相关接口
19、MongDB聚合查询与Populate查询
第17周 Vue3全家桶+Vite开发工具
本周介绍Vue3及生态的变化,深入Compiler的原理,结合ToDoList实战,领会Vue3.0的新特性和强大。以及给Vue项目开发带来质的飞跃的开发工具–Vite。
课程安排:
1、新增组件属性setup及其用法
2、Vue3 Compiler原理(Proxy原理)
3、Vue3计算属性及相关API
4、进阶响应式开发,模块化代码
5、Vue3生命周期变化
6、Suspense、Teleport介绍
7、常见案例Vue3改写
8、TypeScript简介及开发环境搭建
9、Vue3生态之Vue-Router、Vuex用法与实战
10、TodoList需求分析与实战
11、Vite常见配置
12、Rollup自动化工具进阶
2、Vue3 Compiler原理(Proxy原理)
3、Vue3计算属性及相关API
4、进阶响应式开发,模块化代码
5、Vue3生命周期变化
6、Suspense、Teleport介绍
7、常见案例Vue3改写
8、TypeScript简介及开发环境搭建
9、Vue3生态之Vue-Router、Vuex用法与实战
10、TodoList需求分析与实战
11、Vite常见配置
12、Rollup自动化工具进阶
第18周 前后端项目Vue3重构
项目重构是工作中必不可少的环节和能力,通过重构原PC端项目首页内容,和基于iview-admin开发的管理后台项目,掌握不同项目如何与Vue3进行集成,进阶Composition API的深度应用。
课程安排:
1、如何全盘思考Vue3项目重构?
2、Vue2工程项目升级Vue3
3、mixin&filter部分代码重构
4、首页列表逻辑代码改造
5、PC端项目路由Vue-Router代码重构
6、PC端项目Vuex状态管理代码重构
7、Vue2工程项目升级Vue3
8、mixin&filter部分代码重构
9、首页列表逻辑代码改造
10、PC端项目路由Vue-Router代码重构
11、PC端项目Vuex状态管理代码重构
2、Vue2工程项目升级Vue3
3、mixin&filter部分代码重构
4、首页列表逻辑代码改造
5、PC端项目路由Vue-Router代码重构
6、PC端项目Vuex状态管理代码重构
7、Vue2工程项目升级Vue3
8、mixin&filter部分代码重构
9、首页列表逻辑代码改造
10、PC端项目路由Vue-Router代码重构
11、PC端项目Vuex状态管理代码重构
第19周 性能优化(服务端渲染)
页面性能优化是前端工程师重要核心能力。本周将学习配置服务器端渲染思想,以及学习服务端渲染的Vue解决方案Nuxt.js使用,并对前置项目首页进行改造。
课程安排:
1、了解SEO优化方法
2、前端性能优化思想
3、前端性能优化之服务端渲染(SSR)
4、SSR基础及工作原理
5、配置SSR及Webpack进阶:服务端渲染开发热重载
6、SSR中的路由与代码分割方案
7、Nuxt.js框架介绍(工程目录、Universal Mode、自动生成路由)
8、Nuxt.js Auth登录鉴权模块介绍与对接
9、Nuxt.js集成:改造前端项目首页功能模块
2、前端性能优化思想
3、前端性能优化之服务端渲染(SSR)
4、SSR基础及工作原理
5、配置SSR及Webpack进阶:服务端渲染开发热重载
6、SSR中的路由与代码分割方案
7、Nuxt.js框架介绍(工程目录、Universal Mode、自动生成路由)
8、Nuxt.js Auth登录鉴权模块介绍与对接
9、Nuxt.js集成:改造前端项目首页功能模块
阶段六:小程序开发与支付专题
第20周 uniapp开发(首页/菜单定制/搜索)
便捷的快应用时代已到,本周介绍小程序的开发适用场景、常见的快应用开发框架。实操小程序的注册流程,以及基于uniapp项目开发技巧与实战。
课程安排:
1、了解小程序注册流程及注册主体
2、了解跨端框架适用场景及开发工作流
3、掌握小程序本地开发环境及本地化调试办法
4、跨端跨平台框架 mpvue/wepy/uniapp/taro 横评
5、uniapp框架及 HBuilderX 的使用方法
6、uniapp插件市场& SCSS 集成
7、获取用户登录状态,开发API微信配置接口
8、如何集成小程序第三方UI组件库
9、掌握小程序开发者工具配置
10、uniapp框架工作原理,熟悉了解小程序的生命周期
11、多页面下的开发工作流及目录结构
12、封装通用工具类库(HTTP请求、消息提示)
13、上拉加载、下拉刷新如何使用及使用场景
14、搜索页面、搜索建议、搜索历史
2、了解跨端框架适用场景及开发工作流
3、掌握小程序本地开发环境及本地化调试办法
4、跨端跨平台框架 mpvue/wepy/uniapp/taro 横评
5、uniapp框架及 HBuilderX 的使用方法
6、uniapp插件市场& SCSS 集成
7、获取用户登录状态,开发API微信配置接口
8、如何集成小程序第三方UI组件库
9、掌握小程序开发者工具配置
10、uniapp框架工作原理,熟悉了解小程序的生命周期
11、多页面下的开发工作流及目录结构
12、封装通用工具类库(HTTP请求、消息提示)
13、上拉加载、下拉刷新如何使用及使用场景
14、搜索页面、搜索建议、搜索历史
第21周 uniapp开发(登录、详情、个人中心)
通过登录、详情、个人中心、热门模块开发,了解小程序授权机制,获取用户信息和解密。学习复杂的页面交互逻辑设计、与后台接口进行对接、统一鉴权处理页面跳转逻辑。后台对接小程序服务端接口,解密加密过后的数据。
课程安排:
1、小程序分包 vs 独立分包
2、小程序页面设计思想
3、了解小程序的生命周期 & 页面生命周期
4、小程序自定义组件(原生组件与uniapp集成)
5、熟悉小程序开发配置
6、学习配置微信安全域名、开发者权限
7、加入统一的用户授权登录页面
8、对接第三方服务:腾讯云短信服务
9、完成文章详情、个人中心、热门模块样式+接口对接
10、掌握小程序常用组件,开发富文本组件
11、了解小程序加密数据解密机制,对接小程序官方解密SDK
2、小程序页面设计思想
3、了解小程序的生命周期 & 页面生命周期
4、小程序自定义组件(原生组件与uniapp集成)
5、熟悉小程序开发配置
6、学习配置微信安全域名、开发者权限
7、加入统一的用户授权登录页面
8、对接第三方服务:腾讯云短信服务
9、完成文章详情、个人中心、热门模块样式+接口对接
10、掌握小程序常用组件,开发富文本组件
11、了解小程序加密数据解密机制,对接小程序官方解密SDK
第22周 uniapp内容安全、订阅消息
本周接入小程序订阅消息的功能,发送登录、评论、系统等类型的消息给用户,深入发贴&消息模块,完成社区业务闭环。小程序的打包优化(资源优化、分包优化、预加载),打包与发布,上线准备与注意事项。
课程安排:
1、掌握小程序订阅消息机制 & 消息配置 & 消息发送
2、订阅消息功能的接口设计与开发
3、小程序分包 vs 独立分包
4、独立分包的应用场景w
5、编辑与发帖模块开发
6、小程序上线准备及HTTPS证书申请方案
7、前后端接口对接及后台项目Nignx HTTPS设置
8、掌握小程发布流程及版本管理
9、小程序预加载机制与配置预加载
2、订阅消息功能的接口设计与开发
3、小程序分包 vs 独立分包
4、独立分包的应用场景w
5、编辑与发帖模块开发
6、小程序上线准备及HTTPS证书申请方案
7、前后端接口对接及后台项目Nignx HTTPS设置
8、掌握小程发布流程及版本管理
9、小程序预加载机制与配置预加载
第23周 小程序支付专题
分三大块介绍:注册企业&税务相关知识、支付功能前置条件、开发小程序支付对接APIv3接口。分析支付功能常见业务场景、开发坑点&难点。实操frp内网穿透本地调试HTTPS,小程序订单通知两种调试技巧。
课程安排:
1、支付方案、多支付渠道(个人、企业)使用技巧
2、微信支付 vs 支付宝支付区别&特点
3、常见的支付场景小程序APIv3及开发步骤
4、小程序支付流程(重点)
5、官方ERP:微信商户号及商户系统
6、支付准备工作(HTTPS、域名、企业认证)
7、后端支付接口开发&支付流程对接
8、小程序支付调起与支付结果确认
9、内网调试HTTPS的技巧:Frp内网穿透方案
10、小程序订单结果:微信主动通知 + 商户订单主动查询
2、微信支付 vs 支付宝支付区别&特点
3、常见的支付场景小程序APIv3及开发步骤
4、小程序支付流程(重点)
5、官方ERP:微信商户号及商户系统
6、支付准备工作(HTTPS、域名、企业认证)
7、后端支付接口开发&支付流程对接
8、小程序支付调起与支付结果确认
9、内网调试HTTPS的技巧:Frp内网穿透方案
10、小程序订单结果:微信主动通知 + 商户订单主动查询
阶段七:跨端开发 (移动端跨平台&桌面端)
第24周 跨平台框架Flutter2与状态管理方案
快速带你掌握移动端跨端App框架,对于前端同学如何上手移动端跨端的开发?Flutter作为如今优秀的跨端解决方案,Dart语言学习坡度适中,组件化的思想、状态管理、数据持久化这些概念都与前端非常贴合。
课程安排:
1、Flutter2.0 vs Flutter 1.0
2、如何快速上手Dart语言
3、Flutter开发环境准备
4、配置Flutter官方加速源
5、Flutter中如何第三方组件
6、Flutter全屏适配方案ScreenUtil
7、Flutter状态管理方案对比(Redux、ScopedModel、bloc&flutter_bloc)
8、状态管理方案的应用场景
9、实战三种状态方案完成待办清单TodoList功能
10、封装公共的ScopedModel工具类
11、自定义svg图标库
2、如何快速上手Dart语言
3、Flutter开发环境准备
4、配置Flutter官方加速源
5、Flutter中如何第三方组件
6、Flutter全屏适配方案ScreenUtil
7、Flutter状态管理方案对比(Redux、ScopedModel、bloc&flutter_bloc)
8、状态管理方案的应用场景
9、实战三种状态方案完成待办清单TodoList功能
10、封装公共的ScopedModel工具类
11、自定义svg图标库
第25周 封装请求&数据持久化方案&路由
深入Flutter通用业务模块的开发,介绍学习套路,类比前端中的学习策略,从页面到请求,从状态共享到数据持久化,结合路由完成丰富的页面逻辑。掌握核心的Flutter技能点,方便后续功能迭代与业务应用。
课程安排:
1、Flutter中的请求库Dio(Flutter单例factory、get_it)
2、请求库封装(RESTful常见请求、拦截器配置、统一错误处理等)
3、请求日志与环境变量的配置方案
4、封装常见的业务库(验证码、轻提示)
5、Flutter中的数据持久化方案(sqflite、shared_preferences)
6、封装数据库sqflite的公共类
7、学习业务数据库CURD(增删改查)操作
8、序列化与反序列化json_annotation、json_serializable
9、Flutter中的路由方案(fluro、flutter_modular、auto_route)
10、Flutter路由核心知识(命名路由、路由传参、路由守卫)
2、请求库封装(RESTful常见请求、拦截器配置、统一错误处理等)
3、请求日志与环境变量的配置方案
4、封装常见的业务库(验证码、轻提示)
5、Flutter中的数据持久化方案(sqflite、shared_preferences)
6、封装数据库sqflite的公共类
7、学习业务数据库CURD(增删改查)操作
8、序列化与反序列化json_annotation、json_serializable
9、Flutter中的路由方案(fluro、flutter_modular、auto_route)
10、Flutter路由核心知识(命名路由、路由传参、路由守卫)
第26周 Flutter 后台消息&打包上线
介绍两种消息推送的场景(本地消息、后台消息),结合WebSocket实现Flutter侧的消息通用工具类;以及跨端移动App(Android、iOS),如何进行测试、打包与上线、错误日志收集。
课程安排:
1、Flutter集成WebSocket实现消息的实时通信
2、Flutter中常见的WebSocket第三方包(web_socket_channel、socket_io_client)
3、Flutter中消息分类(本地消息flutter_local_notifications、后台消息)
4、苹果开发者介绍
5、配置极光后台消息推送:iOS消息推送 + Android消息推送
6、AppStore上架规则与iOS移动端跨端测试方案TestFlight
7、Flutter全屏适配方案ScreenUtil
8、移动端第三方日志收集平台:蒲公英、友盟、bugly
9、Flutter启动图、应用图标配置方案
10、跨新平台打包环境准备(iOS + Android)
11、iOS&Android打包配置(权限申请配置)
2、Flutter中常见的WebSocket第三方包(web_socket_channel、socket_io_client)
3、Flutter中消息分类(本地消息flutter_local_notifications、后台消息)
4、苹果开发者介绍
5、配置极光后台消息推送:iOS消息推送 + Android消息推送
6、AppStore上架规则与iOS移动端跨端测试方案TestFlight
7、Flutter全屏适配方案ScreenUtil
8、移动端第三方日志收集平台:蒲公英、友盟、bugly
9、Flutter启动图、应用图标配置方案
10、跨新平台打包环境准备(iOS + Android)
11、iOS&Android打包配置(权限申请配置)
第27周 Electron桌面端与主流的框架
本周将进入全端项目的桌面端,扩展工作中的应用场景,对比桌面端跨端应用的主流技术,分析Electron丰富的UI库 + 庞大体量的第三方npm库优势,结合前端组件化的思想,让桌面端跨端开发变得高效。
课程安排:
1、跨平台桌面端的应用场景
2、常见的桌面端开发技术盘点(对比主流技术方案)
3、桌面端设计与开发要点(交互、消息、打包、更新)
4、Electron应用程序结构与核心概念
5、Electron项目初始化与开发调试
6、MainProcess、RendererProcess模块核心API
7、Electron菜单与快捷键
8、主流vue&react与Electron结合思路
9、常见的Vue&React Electron开发模板
10、Electron模板项目源码解读(打包、配置)
2、常见的桌面端开发技术盘点(对比主流技术方案)
3、桌面端设计与开发要点(交互、消息、打包、更新)
4、Electron应用程序结构与核心概念
5、Electron项目初始化与开发调试
6、MainProcess、RendererProcess模块核心API
7、Electron菜单与快捷键
8、主流vue&react与Electron结合思路
9、常见的Vue&React Electron开发模板
10、Electron模板项目源码解读(打包、配置)
第28周 Electron桌面端-社区业务集成
本周进入Electron桌面端实战,开发社区应用核心模块首页 + 登录注册+扫一扫登录,对接系统消息功能。实战打包windows&MacOS跨平台应用,了解如何实现热更新,完成桌面端应用开发的小闭环。
课程安排:
1、实现登录注册+首页功能
2、第三方登录Oauth2(扫一扫)
3、系统通知应用场景
4、如何发送原生系统消息通知
5、Electron播放通知声音
6、Electron项目macOS打包方案
7、Electron项目windows打包方案
8、构建体积优化思路
9、桌面应用热更新功能,集成Electron-updater
2、第三方登录Oauth2(扫一扫)
3、系统通知应用场景
4、如何发送原生系统消息通知
5、Electron播放通知声音
6、Electron项目macOS打包方案
7、Electron项目windows打包方案
8、构建体积优化思路
9、桌面应用热更新功能,集成Electron-updater
阶段八:React17框架与源码解析(拔高)
第29周 React17新特性
React 17带来了性能提升,结合TypeScript,让Reac代码更加健壮、易于维护。如何配置通用项目,学习React路由方案及工作原理,深入解读源码。
课程安排:
1、React设计思想及优势
2、React新版本高性能原理:Fiber、RequestIdelCallback
3、React项目中配置eslint、prettier规范代码工具
4、搭建React&TypeScript通用企业项目模板
5、常见的React的UI库(AntDesign、AntD Pro、Material UI)
6、学习React路由方案及常见API
7、React动态路由与参数获取
8、React路由配置与匹配原则
9、React路由工作原理 + 源码解读
2、React新版本高性能原理:Fiber、RequestIdelCallback
3、React项目中配置eslint、prettier规范代码工具
4、搭建React&TypeScript通用企业项目模板
5、常见的React的UI库(AntDesign、AntD Pro、Material UI)
6、学习React路由方案及常见API
7、React动态路由与参数获取
8、React路由配置与匹配原则
9、React路由工作原理 + 源码解读
第30周 React-Hooks&状态管理方案
解锁 React + TS 高阶用法。本周将深入实际开发场景,学习React Hooks工作原理,Redux和Mobx两种状态管理方案,深入解读核心源码。
课程安排:
1、React Hooks重点API解析
2、React Hooks工作原理
3、React Hooks案例TodoList
4、如何自定义Hooks
5、Redux-thunk状态管理思想
6、toolkit封装thunk的进阶工具集
7、Redux-Saga状态管理方案
8、React中状态管理的替代方案Mobx
2、React Hooks工作原理
3、React Hooks案例TodoList
4、如何自定义Hooks
5、Redux-thunk状态管理思想
6、toolkit封装thunk的进阶工具集
7、Redux-Saga状态管理方案
8、React中状态管理的替代方案Mobx
第31周 React组件库设计&工程化
使用TS+React+Vite开发业务组件库,提炼通用模板(测试集成、格式化、ESLint、提交校验、自动日志),提升项目开发效率。了解库类型项目如何组织代码,学习组件封装+分享npm的组件库设计。
课程安排:
1、组件库思想(以组件化方式考虑UI构建)
2、封装表单组件&需要注意的点(通用性、易用性)
3、通用业务组件库react + vite模板(集成测试、格式化、日志)
4、组件库的样式方案
5、组件库色彩设计
6、基础组件(按钮、图标)设计
7、功能组件菜单组件设计
8、React与Vite项目配置
2、封装表单组件&需要注意的点(通用性、易用性)
3、通用业务组件库react + vite模板(集成测试、格式化、日志)
4、组件库的样式方案
5、组件库色彩设计
6、基础组件(按钮、图标)设计
7、功能组件菜单组件设计
8、React与Vite项目配置
第32周 React工程化&性能优化
React工程化的应用,项目最终需要性能优化 +打包部署,结合前置CICD知识背景,完成高效高质量的打包工作。讲解Vite工具与React的集成,实现冷启动,提升平时React项目的开发效率。
课程安排:
1、CLI打包命令与配置
2、CICD平台集成(Github Actions、Jenkins)
3、Vite冷启动加速React开发
4、React与Vite项目配置(集成AntD)
5、性能优化常见指标
6、性能分析工具对比Profiler、Developer tools、Performance
7、深入Profiler优化React项目
8、Immutable 优化 React 性能
9、常见webpack打包优化方案
2、CICD平台集成(Github Actions、Jenkins)
3、Vite冷启动加速React开发
4、React与Vite项目配置(集成AntD)
5、性能优化常见指标
6、性能分析工具对比Profiler、Developer tools、Performance
7、深入Profiler优化React项目
8、Immutable 优化 React 性能
9、常见webpack打包优化方案
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
评论(1)
没有购买连接呀