热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

大前端前端高级进阶

章节目录:阶段一:开启大前端的大门第1周认识大前端,开启无限可能万丈高楼平地起。开课第一周,我们将以轻松幽默的方式,从实际工作中的开发痛点出发,以项目全生命周期为主线,对全栈

章节目录:
阶段一:开启大前端的大门
第1周 认识大前端,开启无限可能
万丈高楼平地起。开课第一周,我们将以轻松幽默的方式,从实际工作中的开发痛点出发,以项目全生命周期为主线,对全栈有全局的认识。从整体项目分析开始,培养您的项目架构思维。
课程安排:
1、了解大前端知识体系,让您有全局的认知
2、理解大前端的定义,让您不再迷茫
3、项目规划及DevOps流程
4、分析实际工作中遇到的痛点以及解决办法
5、掌握需求分析的要点及工具(墨刀/Axure)
6、从原型设计、接口设计到技术栈的宏观项目架构思维
第2周 企业标准的开发环境搭建
工欲善其事,必先利其器。学习最火的Docker容器技术,快速搭建测试环境。深入讲解前端必会的Mock接口与工具,并专门设计了调试技巧&真机调试讲解,与实际工作开发完美契合。
课程安排:
1、虚拟机搭建与使用
2、Linux开发环境及常见命令使用
3、容器技术Docker以及安装及使用
4、Node及npm命令的使用
5、搭建DOClever接口测试平台
6、前后端分离开发–RESTful接口及Mock数据
7、常见IDE使用及VSCode的调试配置及默认设置
8、三类真机调试技巧
第3周 必会的前端工程化工具
效率是检验工程师的重要指标之一,如何提高开发效率,从前端工程化工具着手。本周学习实际工作中两大利器Webpack与Gulp,并使用Yeoman搭建自己的脚手架工具,让自己和团队的开发效率翻倍。
课程安排:
1、了解工程化工具的使用场景及具体应用
2、理解Webpack的核心概念,配置Webpack
3、掌握Webpack中的Plugin及Loader的使用
4、了解Gulp的核心概念,学习配置Gulp基础任务
5、配置Yeoman脚手架工程项目
6、创建自己的脚手架工具
第4周 深入理解Vue框架知识
跟上企业需求的步伐,本周从MVVM框架基础讲起,让您拥有组件化思想,掌握目前流行的Vue框架进阶应用。重点不仅在于应用,也在于原理,做到知其然,知其所以然。
课程安排:
1、了解MVVM框架理念
2、理解组件化思想
3、Vue基础、路由及状态管理
4、Vue cli工具的使用,创建工程化项目
5、Vue CLI命令vue create及项目配置
6、Vue CLI命令扩展使用vue ui
7、Vue、Vue-router、Vuex综合应用
阶段二:抓住团队协作的密码
第5周 前端框架分类及选型
是否还在为选择使用什么框架而苦恼?是否还在为学习哪个前端框架而纠结?本周将给您满意的答案,有UI和JS框架对比与选型,有Node.js进阶使用、Web框架如何开发RESTful接口等。
课程安排:
1、常见MVVM与UI框架对比与选型
2、Koa框架后台项目的配置及ES6语法支持
3、Koa工作原理及常见Koa中间件使用
4、登录模块的需求分析及流程设计
5、登录模块的开发,LayUI框架集成
6、邮件服务和图片验证码服务的开发
7、表单验证Vuelidate/VeeValidate
8、配置邮件服务NodeMailer
9、邮件服务接口与找回密码对接
10、如何调试Node应用及webpack配置
第6周 团队协作-文档与版本管理
项目开发过程中,少不了团队协作,那团队协作有哪些可以提升效率?团队协作第一弹:从文档管理、版本控制开始,我们了解Git flow和文档的管理办法,搭建团队的文档管理工具,提升工作效率。
课程安排:
1、Markdown语法及进阶图表使用
2、ShowDoc进行云笔记及文档管理
3、搭建自己团队的接口管理平台
4、学会使用hexo+github搭建自己的博客
5、掌握Git基础命令
6、从零配置github到SSH秘钥克隆仓库
7、Git Flow及管理版本控制
8、使用Docker快速搭建gitlab平台
9、gitlab平台管理,用户权限控制
第7周 团队协作-缺陷控制与自动化流程
项目质量决定了项目的命运,如何做好缺陷控制,是每个团队非常头疼的问题。本周学习团队协作第二弹:缺陷控制及前端自动化流程,使用容器技术配置自动化/持续集成环境,进一步提升团队效率。
课程安排:
1、掌握容器技术Docker进阶使用
2、掌握缺陷控制工具及使用
3、了解质量管理工作流
4、理解自动化/持续集成流程,升华DevOps理解
5、私有化容器平台Harbor搭建及使用
6、快速搭建、配置Jenkins服务
7、掌握Jenkins中的权限控制,并与gitlab进行集成
8、学习Jenkins的权限控制与插件管理系统
9、配合Jenkins效率构建,完成发布、构建等
阶段三:打通全栈开发技能
第8周 NoSQL数据库的设计与集成
本周带您解开数据之谜,学习NoSQL数据库与数据库设计原则,让您带着设计思维去设计项目数据库。掌握Redis安装、常用CLI命令,搞定Redis服务搭建与Nodejs集成
课程安排:
1、了解NoSQL数据库分类及选型
2、掌握数据库设计原则
3、掌握从功能到数据库的基本设计
4、常见MongoDB及Redis与nodejs集成
5、使用Docker快速搭建MongoDB及Redis开发测试环境
第9周 JWT登录鉴权—通用登录模块后端开发
本周解读鉴权、加密/算法、HTTPS等核心概念,实践JWT方式进行登录鉴权接口设计。从前到后,涵盖输入校验、Axios请求封装、统一错误处理、jwt功能集成及数据安全性策略的分析等知识。
课程安排:
1、前端常见鉴权方式及优缺点
2、算法/加密、HTTPS等概念大解密
3、JWT工作原理及Koa-jwt功能集成
4、前端接口Axios封装
5、前端统一错误处理、后端统一错误响应
6、后端接口响应,数据校验
7、自定义vue组件,优化前端登录注册交互
8、输入校验、远程校验结合提升用户体检
9、登录注册Mock数据,vscode调试进阶
第10周 全栈开发—首页模块
从数据库、接口设计到组件拆分,再到首页核心功能实现,提高对前置流程理解与工具使用的熟练度。本周通过原型图到实现首页交互(复杂筛选)及接口,综合运用前置知识,学习项目开发的实战内容。
课程安排:
1、Npm依赖升级方案,@vue/cli升级V4版本
2、PC端项目全局需求分析、原型设计、项目重难点介绍
3、掌握首页、发帖、用户中心数据库设计、接口设计、文档更新
4、首页多级列表、筛选、排序功能开发
5、路由监听/路由守卫/子路由ActiveClass灵活应用开发交互效果
6、Axios请求封装/拦截器/取消用户重复请求
7、侧栏:统计、签到、周热议 功能开发
8、首页Mock数据调试长列表加载、接口开发、前后端接口联调
9、版本控制建立Git仓库,熟悉Git相关操作
10、缺陷控制实战:代码Prettier格式化、ESLint自动修复实践、配置Standart规则
第11周 全栈开发—用户中心和发贴/回帖模块
继续开发个人中心和发帖两个核心业务,进一步加深Vue-router、Vuex进阶应用和组件化思想的理解。通过对数据进行统计和分析,完成周榜、签到榜、热评榜的功能,学习MongoDB统计语句的用法。
课程安排:
1、优化登录路由,本地缓存登录状态(介绍localStorage&SessionStorage区别)
2、自定义富文本编辑器开发(插入链接|图片、引用|代码样式、预览)
3、帖子详情、采纳、点赞功能开发
4、个人中心收藏列表、发贴列表功能开发
5、签到系统,积分体系的设计
6、发贴权限效验
7、Vue自定义directive/filters妙用
8、改造入口文件routes,后端路由按模块动态引入
9、调试账号修改邮件通知功能
10、Nodejs静态资源处理、文件上传后台、路径相关进阶操作
11、自制Iconfont图标库
12、Sass进阶学习@for/@Mixin/@Map的用法
第12周 消息中间件开发(WebSocket通信)
websocket是长连接的最优解决方案,升级全解析:ws分组消息、断线重连、心跳检测、离线消息缓存、历史消息,开发通用消息中间件。
课程安排:
1、WebSocket基础,WebSocket与Socket.io进行对比
2、Socket.io开发简单的消息应用
3、进阶认识WebSocket事件、属性
4、使用ws开发多人聊天 室应用(统计在线人数、加入&离开广播通知)
5、WebSocket消息应用进阶(鉴权、心跳检测、断线重连)
6、离线消息缓存之Redis缓存解决方案(多房间、多用户、多条信息缓存)
7、封装WebSocket客户端、服务端通用模块
8、PC端项目个人中心我的消息功能开发(实时、历史消息)
第13周 性能优化–服务端渲染
性能是评判项目好坏标准之一,本周带着大家进入性能优化环节,学习配置服务器端渲染思想及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集成:改造前端项目首页功能模块
阶段四:前后端分离的后台管理系统
第14周 组件化思想进阶:iview上手文章管理
本周进入到后台管理系统开发,从项目整体架构去考虑中后台应用的开发路径。学习iview-admin 框架工作原理,自定义表格组件,完成文章管理开发。
课程安排:
1、技术框架选型及UI框架选型
2、后端需求分析,接口设计,数据库设计
3、 iView-admin框架集成
4、解析项目架构,添加路由和菜单
5、定制开发登录入口,加入JWT鉴权机制
6、COOKIE及Session的使用方式
7、实战多语言场景:英文&简体中文
第15周 中后台权限系统:前端权限设计方案
进入中后台系统开发中最重要环节:权限系统。介绍前端中(组件级、按钮级、路由级)三种权限控制解决方案,开发用户管理页面,定制动态搜索组件,深入学习iview基础组件:Table、Form、Modal等。
课程安排:
1、了解权限设计基础(权限构成)
2、学习什么是菜单权限、数据权限?
3、学习前台权限控制的三种场景应用
4、自定义指令 hasRole实现前端组件级、按钮组权限控制
5、实战前端基于角色的权限控制方案,了解动态路由添加方法和权限控制方案
6、实战用户管理页面开发,自定义动态选项的搜索组件
7、深入学习iview基础组件(Table,Model),加强对ui框架的了解。
8、添加用户模态框,批量设置用户、批量删除用户功能开发
第16周 中后台权限系统:基于角色&菜单权限设计
本周将继续深入权限系统,开发包括菜单管理、角色管理以及后台权限管理API,开发nodejs中间件,实现基于角色的接口资源访问控制系统。加深前置知识的综合应用,从前到后,打通权限设计的全方位思维。
课程安排:
1、菜单权限设计思路:关系型数据库、非关系型数据库中的不同点
2、从0到1,设计菜单基础信息页面、角色权限页面原型&布局
3、实战角色管理、菜单管理、权限分配界面页面样式开发(综合应用iview基础组件)
4、Nodejs后台基于角色的菜单权限 + 数据接口权限的完整解决方案(RBAC方案)
5、koa鉴权中间件开发,对资源权限进行访问控制
第17周 首页可视化图表与日志服务
本周将完成后端管理平台的首页管理,对首页统计功能进行定制开发,并增加日志服务,对后台接口的调用增加日志管理,系统功能完善与监管。以及前后端联调及细节优化,定制Jenkins任务及配置前后端自动化任务。
课程安排:
1、Echarts基础&地图类型图表两种解决方案
2、首页统计:周数据统计、新增用户统计、发帖、进日统计
3、监控日志两种方法:调试日志koa-logger和文件日志koa-log4j
4、掌握前后端联调技能
5、自动化流程回顾+Jenkins节点管理
6、接口项目配置自动化任务(敏感信息、微信通知)
7、自动化部署前后台项目
8、配置前后端项目的自动化
阶段五:流行的WebApp与小程序开发
第18周 WebApp页面设计与开发
随着终端设备的发展,在移动端浏览Web已成主流。本周进入WebApp项目开发,学习PC项目和WebAPP的差异,如何平移到移动端,从页面设计到登录、首页及个人中心开发。您也可以搞定移动项目开发。
课程安排:
1、WebApp原型设计及工具使用、WebApp开发的常见问题
2、移动端框架概览及Mint-UI介绍 & 自定义主题
3、自定义SVG图标组件(巧用svg-sprite-loader)
4、Vuex状态管理state分层及Modules进阶应用
5、全局样式方案Normalize与Reset
6、开发登录、注册、密码找回页面
7、首页列表及筛选、个人中心开发
8、评论列表无限加载模块
9、上拉加载、下拉刷新的开发技巧
10、自定义Header组件
第19周 WebApp前后端联调
WebApp页面开发只是第一步,如何和后端对接,掌握从后台管理到前端展现的整体解决方案,提升技能和解决实际问题的能力。
课程安排:
1、详情页面交互设计、表情出层(transition动画进阶)
2、滚动穿透解决方案(iscroll & better-scroll介绍)
3、移动端适配解决方案(px-to-viewport & px-to-rem)
4、WebApp项目容器化实战,配置Dockerfile及打包镜像
5、Jenkins自动发布配置,多节点配置及管理
6、消息页面、消息、个人中心、热门功能开发
7、热门功能开发:多条件统计列表开发,前后端数据对接
第20周 小程序基础与进阶
便捷的快应用时代已到,本周介绍小程序的开发适用场景,实操小程序的注册流程,掌握开发中的注意事项。学习小程序原生框架基本用法,及快应用开发框架的使用,并且能独立调试开发小程序。
课程安排:
1、了解小程序注册流程
2、了解小程序注册方式及注册主体
3、了解跨端框架适用场景及开发工作流
4、掌握小程序本地开发环境配置
5、掌握小程序本地化调试办法
6、小程序第三方npmjs库集成
7、掌握快应用场景:mpvue/wepy/uni-app基础
第21周 小程序首页/菜单定制/登录开发
小程序开发实战第一部分,学习首页的列表开发,菜单定制的开发,微信接口及数据库的设计。
课程安排:
1、熟悉微信小程序开发文档,获取用户登录状态,开发API微信配置接口
2、如何集成小程序第三方UI组件库:vant-weapp
3、掌握小程序开发者工具配置,如何配置app
4、框架原理,熟悉了解小程序的生命周期
5、学习mpvue基础的语法 & 不支持的Vue语法/函数特性
6、多页面下的开发工作流及目录结构
7、封装通用libs库(HTTP请求、缓存)
8、mpvue长列表优化方案,精简data数据
9、上拉加载、下拉刷新如何使用及使用场景
第22周 小程序详情面/个人中心开发
小程序开发实战第二部分,学习个人中心模块、详情页面、编辑发贴功能开发,与后台接口进行对接,完成页面的功能调试。
课程安排:
1、小程序页面设计思想
2、了解小程序工程化项目
3、了解小程序的生命周期 & mpvue页面生命周期
4、小程序自定义组件(原生组件与mpvue集成)
5、熟悉小程序开发配置,学习配置微信安全域名、开发者
6、业务功能模块:完成详情页面、个人中心功能开发
7、掌握小程序常用组件,开发富文本内容
第23周 小程序编辑与发贴开发
小程序开发实战第三部分,学习编辑发贴功能开发,与后台接口进行对接,完成页面的整体功能调试。
课程安排:
1、掌握小程序订阅消息机制 & 消息配置 & 消息发送
2、订阅消息功能的接口设计与开发
3、编辑与发帖模块开发
4、掌握小程序发布流程及版本管理
5、小程序上线准备及HTTPS证书申请方案
6、前后端接口对接及后台项目Nginx配置 HTTPS
7、快应用框架需要注意的开发坑点 & 升级指南
第24周 项目部署、运维与展望
介绍云服务器、域名及HTTPS服务,项目运维及Linux相关自启脚本介绍。项目更新及日志处理,如何发送报警通知及应急策略的制定。混合与跨端应用框架;桌面应用Electron等,做好未来发展指引 。
课程安排:
1、如何进行服务器监控、服务器日志及报警
2、Jenkins配置IM通知(钉钉构建通知、企业微信通知、邮件通知)
3、理解域名服务及配置Nginx & HTTPS(通过Acme申请SSL证书)
4、了解购买云服务器及熟悉面板管理
5、能编写基本的运维脚本
6、项目运行维护/更新终止/资源回收
7、了解项目总结及如何进行项目重构
8、Vue3.x相关知识介绍


加QQ:1375758362


推荐阅读
  • 本文深入探讨了ASP.NET Web API与RESTful架构的设计与实现。ASP.NET Web API 是一个强大的框架,能够简化HTTP服务的开发,使其能够广泛支持各种客户端设备。通过详细分析其核心原理和最佳实践,本文为开发者提供了构建高效、可扩展且易于维护的Web服务的指导。此外,还讨论了如何利用RESTful原则优化API设计,确保系统的灵活性和互操作性。 ... [详细]
  • REST API 时代落幕,GraphQL 持续引领未来
    尽管REST API已广泛使用多年,但在深入了解GraphQL及其解决的核心问题后,我深感其将引领未来的API设计趋势。GraphQL不仅提高了数据查询的效率,还增强了灵活性和性能,有望成为API开发的新标准。 ... [详细]
  • H5技术实现经典游戏《贪吃蛇》
    本文将分享一个使用HTML5技术实现的经典小游戏——《贪吃蛇》。通过H5技术,我们将探讨如何构建这款游戏的两种主要玩法:积分闯关和无尽模式。 ... [详细]
  • 本文介绍了SIP(Session Initiation Protocol,会话发起协议)的基本概念、功能、消息格式及其实现机制。SIP是一种在IP网络上用于建立、管理和终止多媒体通信会话的应用层协议。 ... [详细]
  • 从CodeIgniter中提取图像处理组件
    本指南旨在帮助开发者在未使用CodeIgniter框架的情况下,如何独立使用其强大的图像处理功能,包括图像尺寸调整、创建缩略图、裁剪、旋转及添加水印等。 ... [详细]
  • 如何在PHP中安装Xdebug扩展
    本文介绍了如何从PECL下载并编译安装Xdebug扩展,以及如何配置PHP和PHPStorm以启用调试功能。 ... [详细]
  • 在拉斯维加斯举行的Interop 2011大会上,Bitcurrent的Alistair Croll发表了一场主题为“如何以云计算的视角进行思考”的演讲。该演讲深入探讨了传统IT思维与云计算思维之间的差异,并提出了在云计算环境下应具备的新思维方式。Croll强调了灵活性、可扩展性和成本效益等关键要素,以及如何通过这些要素来优化企业IT架构和运营。 ... [详细]
  • 本文深入探讨了在Spring Boot中处理RESTful风格的表单请求的方法,包括请求参数处理、请求映射以及RESTful设计原则的应用。文章详细介绍了如何利用HTTP动词(如GET、POST、PUT、DELETE)来操作资源,并结合Spring Boot的注解(如@GetMapping、@PostMapping等)实现高效、清晰的请求处理逻辑。通过实例分析,展示了如何在实际项目中应用这些技术,提高开发效率和代码可维护性。 ... [详细]
  • 深入解析 Vue 中的 Axios 请求库
    本文深入探讨了 Vue 中的 Axios 请求库,详细解析了其核心功能与使用方法。Axios 是一个基于 Promise 的 HTTP 客户端,支持浏览器和 Node.js 环境。文章首先介绍了 Axios 的基本概念,随后通过具体示例展示了如何在 Vue 项目中集成和使用 Axios 进行数据请求。无论你是初学者还是有经验的开发者,本文都能为你解决 Vue.js 相关问题提供有价值的参考。 ... [详细]
  • 本文推荐了六款高效的Java Web应用开发工具,并详细介绍了它们的实用功能。其中,分布式敏捷开发系统架构“zheng”项目,基于Spring、Spring MVC和MyBatis技术栈,提供了完整的分布式敏捷开发解决方案,支持快速构建高性能的企业级应用。此外,该工具还集成了多种中间件和服务,进一步提升了开发效率和系统的可维护性。 ... [详细]
  • Ceph API微服务实现RBD块设备的高效创建与安全删除
    本文旨在实现Ceph块存储中RBD块设备的高效创建与安全删除功能。开发环境为CentOS 7,使用 IntelliJ IDEA 进行开发。首先介绍了 librbd 的基本概念及其在 Ceph 中的作用,随后详细描述了项目 Gradle 配置的优化过程,确保了开发环境的稳定性和兼容性。通过这一系列步骤,我们成功实现了 RBD 块设备的快速创建与安全删除,提升了系统的整体性能和可靠性。 ... [详细]
  • php从哪里得到框架(2023年最新分享)
    导读:本篇文章编程笔记来给大家介绍有关php从哪里得到框架的相关内容,希望对大家有所帮助,一起来看看吧。本文目录一览:1、如何用PHP制 ... [详细]
  • 无论你是刚毕业的大学生,还是想在职业中寻求进步的经验丰富的IT专家,这些提示都可以帮你成为DevOps工程师。DevOps工程是一个备受称赞的热门职业。不管你是刚毕业正在找第一份工 ... [详细]
  • restful是这些年的高频词汇了,各大互联网公司也都纷纷推出了自己的restfulapi,其实restful和thrift,grpc类似,就是一种协议,但是这种协议有点特殊的就是 ... [详细]
  • 谈起RESTFUL大家未免都耳熟能详,但是要介绍一下它是什么,可能就是停留在听过或者见过的阶段了。一贯喜欢以通俗的语言来消化知识的小马自然不会放过它了& ... [详细]
author-avatar
Yvette-XY
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有