web前端_尚硅谷web前端培训

超40天项目实战超100个企业技能点超真实企业项目还原

谷粒商城
硅谷ERP
硅谷教育
硅谷电影
硅谷外卖
硅谷直聘
谷粒音乐
E宠商城
到位
途牛旅游

谷粒商城

该项目是基于Vue技术栈的大型电商项目, 是一个前后台分离的全栈PC端Web SPA, 基本包含了经典电商项目的所有核心功能, 如商品, 购物车, 订单, 支付等模块

项目架构

前台: Vue + Vuex + VueRouter + ES6 + Axios

后台: Java + SpringBoot + SpringCloud + MySQL

功能模块

商城首页, 商品搜索,商品详情, 购物车, 订单,

支付, 用户注册/登陆, 个人中心等模块

技术点

Vue, Vue-router, Vuex, Vue-lazyload, Swiper, Mockjs, postman, axios, token令牌, store, uuidjs, lodash,qrcode ES6, babel, webpack, vue-cli4, elint, less, nginx
硅谷ERP

该项目是基于vue-admin-template 打造的电商中台管理的SPA, 基本包含了中后台管理的核心功能, 如三级权限管理, 完整的商品SPU与SKU管理, 订单管理等模块

项目架构

前台: Vue + ElementUI + Vuex + VueRouter + Axios

后台: Java + SpringBoot + SpringCloud + MySQL

功能模块

用户登陆, 三级权限管理, 商品分类管理, 商品SPU与SKU管理, 订单管理,

后台管理人员管理, 前台用户管理, 首页可视化图表等模块

技术点

Vue, Vue-admin-template, element-ui, Vue-router, Vuex, Echarts, Mockjs, postman, axios, token令牌, js-cookie, store, echarts, lodash,ES6, babel, webpack, elint, scss, nginx
硅谷教育

该项目是基于新版本 React 全家桶的后台管理项目，包括前端PC应用和后端应用,采用模块化、组件化、工程化的模式开发

项目架构

前台: React + Redux + React Router + Antd + Axios + Webpack

后台: Node + Express + Mongoose + Redis

功能模块

用户登陆, 后台首页, 权限管理（用户管理，角色管理，菜单管理），教育管理（章节管理，评论管理，课程管理，课程分类管理，讲师管理），

个人管理(个人中心管理，个人设置管理)等功能模块

技术点

React,React-router-dom, Redux, React-redux, Antd, axios, screenfull, nprogress, dayjs, bizcharts, bizcharts-plugin-slider, webpack, eslint, create-react-app, babel, React-app-rewired
硅谷电影

该项目是一个微信公众号项目。使用爬虫抓取最新、最热门的电影，并能够预览电影预告片、搜索电影等。

项目架构

前后端分离项目: NodeJs + Express + MongoDB + 微信JS-SDK + puppeteer + Bootstrap

功能模块

主页，详情页，搜索页

技术点

后台：使用NodeJs + Express搭建服务器，使用MongoDB搭建数据库，使用Request + 微信JS-SDK调用微信接口，使用 puppeteer 爬取网页数据。前端：使用Bootstrap + zepto进行移动端布局等，使用 jsonp 跨域，使用 DPlayer 进行视频播放和弹幕
硅谷外卖

基于Vue全家桶的在线外卖移动端 Web SPA, 实现了外卖应用的几大核心模块, 采用模块化、组件化、工程化的模式开发

项目架构

前台: Vue全家桶 + ES6 + Webpack

后台: Node + Express + Mongodb + Mongoose

功能模块

导航页,商家列表主页面, 商家信息, 商品列表, 评论列表,

购物车, 搜索页, 订单页, 个人中心与登陆注册页

技术点

vue, vue-router, vuex, mint-ui, vue-lazyload, better-scroll, swiper, mockjs, postman, axios, ES6, babel, webpack, vue-cli, elint, stylus
硅谷直聘

该项目是基于新版本 React 的全栈项目，此项目为一个前后台分离的招聘的移动端Web SPA, 包括前端应用和后端应用,功能类似于BOSS直聘

项目架构

前台: React全家桶 + ES6 + Webpack

后台: Node + Express + Mongodb + SocketIO

功能模块

用户注册/登陆, 用户中心, 用户信息完善, Boss列表, 牛人列表界面, 实时聊天等功能模块

技术点

react, react-router-dom, redux, antd-mobile, axios, postman, webpack, eslint, create-react-app,babel, md5, js-cookie, socket-io
谷粒音乐

该项目是一个原生项目，类似于市场上音乐播放软件，主要是给用户提供观看视频，搜索音乐功能

项目架构

原生js + less布局 + rem适配 + 自定义滚动条 + 移动端防抖动 + 即点即停

功能模块

导航页，无缝滑屏，tab选项卡，竖向滑屏，自定义滚动条

技术点

绝对定位模拟固定定位，横向滑屏，橡皮筋效果，加速效果，无缝滑屏运用防抖动逻辑，竖向滑屏实现即点即停
E宠商城

该项目是一个线上电商项目，功能完善，技术点丰富，通过实战去让每一个学生独立完成百分百还原官网从而去巩固相应的知识点，提前感受开发场景

项目架构

前后端完全分离: Vue全家桶 + NodeJs + MockJs

功能模块

主页，分类，识物，购物车，个人中心，

搜索，登录，注册

技术点

Vue，Vue-router，Vuex，axios，NodeJs MockJs,组件通信，事件处理，封装组件， swiper，下拉刷新，上拉加载，模糊匹配
到位

该项目是一个PC端线上商城项目，主要运用技术jQuery，通过实战百分百还原去巩固jQuery技术栈

项目架构

前后端完全分离: jQuery + swiper + json-server + NodeJs

功能模块

主页，列表页，详情页，评论模块

技术点

jQuery, $.ajax, Swiper, MockJs,Nodejs,

Animate,jQuery事件委托
途牛旅游

该项目是基于途牛网为原型进行开发，技术选型:Vue技术栈，通过对网站的百分百搭建还原去熟练Vue全家桶的所有技术

项目架构

前后端完全分离: Vue全家桶 + NodeJs + MockJs

功能模块

主页，搜索，当地游，登录/注册

技术点

Vue，Vue-router，Vuex，axios，NodeJs MockJs,组件通信，事件处理，

封装组件，自定义脚手架,Vue-lazyload，Vue-validate，国际化

深度剖析多场景小程序核心功能，手把手教你进行开发

原生小程序项目(网易云音乐)
UniApp项目(网易严选)
Mpvue项目(硅谷图书)

功能模块

主页模板

视频模块

个人中心模板

登录模块

音乐列表模块

音乐播放模块

自定义音乐播放控制模块

ajax请求模块

过渡效果模块

Animation动画模块

中间层

Nodejs服务器搭建

Koa框架使用

KoaRouter应用

注册路由

async异步处理函数

工具类库封装

axios使用

路由中间键

微信接口对接

网易云音乐接口

原生小程序技术栈

小程序内置组件使用

网络请求: wx.request

本地存储: wx.setStorage/wx.getStorage

路由跳转: wx.navigateTo

背景音乐播放: wx.getBackgroundAudioManager

小程序生命周期

小程序事件绑定

小程序遍历数据

小程序模板使用

小程序自定义组件

扩展技术

豆瓣图书开放API

网易云音乐开发接口

flyio

Koa框架

KoaRouter

小程序支付流程说明

小程序分享功能说明

小程序分包

阿里小程序介绍

钉钉应用开发介绍

适配方案

布局视口

视觉视口

px,em, rem,rpx说明

dpr, ppi, dpi对比

视网膜屏幕

物理像素

css像素/独立设备像素

视口单位vh, vw

flex布局

----
功能模块

主页模块

分类模块

购物车模块

个人中心模块

搜索模块

登录模块

商品列表模块

单品列表模块

排序展示模块

Animation动画模块

中间层

Nodejs服务器搭建

Koa框架使用

KoaRouter应用

注册路由

async异步处理函数

工具类库封装

axios使用

路由中间键

微信接口对接

网易云音乐接口

UniApp技术栈

UniApp框架简介

HbuilderX开发工具使用介绍

UniApp组件使用

UniApp内置API使用

UniApp开发特点

Vue + 原生小程序快速开发

UniApp跨终端开发

UniApp配置完整说明

UniApp快速生成模板应用说明

Animation动画模块

扩展技术

豆瓣图书开放API

网易云音乐开发接口

flyio

Koa框架

KoaRouter

小程序支付流程说明

小程序分享功能说明

小程序分包

阿里小程序介绍

钉钉应用开发介绍

适配方案

布局视口

视觉视口

px,em, rem,rpx说明

dpr, ppi, dpi对比

视网膜屏幕

物理像素

css像素/独立设备像素

视口单位vh, vw

flex布局

---
功能模块

导航模块

主页模块

列表页模块

详情页模块

搜索图书模块

个人中心模块

扫码看书模块

个人收藏模块

---

中间层

Nodejs服务器搭建

Koa框架使用

KoaRouter应用

注册路由

async异步处理函数

工具类库封装

axios使用

路由中间键

微信接口对接

网易云音乐接口

Mpvue技术栈

Mpvue简介

Mpvue核心思想说明

Mpvue特点

Mpvue同Vue的相同点和不同点

模块化,组件化,工程化开发

Mpvue生命周期VS原生小程序生命周期

flyio使用

ajax请求类库封装

前后端完全分离应用

扩展技术

豆瓣图书开放API

网易云音乐开发接口

flyio

Koa框架

KoaRouter

小程序支付流程说明

小程序分享功能说明

小程序分包

阿里小程序介绍

钉钉应用开发介绍

适配方案

布局视口

视觉视口

px,em, rem,rpx说明

dpr, ppi, dpi对比

视网膜屏幕

物理像素

css像素/独立设备像素

视口单位vh, vw

flex布局

第一阶段

HTML+CSS核心基础

· HTML,CSS核心基础· CSS过渡
· HTML5语义化标签· 线性渐变，径向渐变
· HTML新增标签属性· CSS动画Animation
· 表单项新增属性· 弹性盒模型
· CSS选择器· 经典布局练习(双飞翼，
· CSS3伪类品字布局) + 案例
· CSS伪元素· 响应式布局

掌握技能

1熟练HTML, CSS核心语法

2熟练H5,CSS3新特性

3掌握多种布局技巧

4能够独立绘制前端静态页面

阶段课程特色

本阶段对HTML5,CSS3等内容重点讲解，且穿插了很多练习案例，在掌握前端基础核心语法以外会再进行综合性练习并且会针对性讲解动画，过渡，及多种经典布局方案

第二阶段

JavaScript

· JavaScript基础
· JavaScript操作DOM
· JavaScript面向对象(js高级)

掌握技能

1熟悉JavaScript核心语法

2熟练DOM，BOM操作

3熟练面向对象编程

阶段课程特色

本阶段对JavaScript入门到高级进行全面讲解，每个知识点都有相应的案例练习，且针对闭包，原型，继承等面向对象高级语法进行深入讲解，让学员能够很好的扎实基础，为后续的框架学习做好充足的准备

第三阶段

PC端整栈开发

· PC项目
· jQuery
· jQuery项目
· less
· bootStrap

掌握技能

1掌握前端必备框架jQuery

2掌握前端UI框架bootStrap

3掌握css预编译语言less

4针对前边所学知识进行综合性项目练习

阶段课程特色

本阶段主要是针对HTML, CSS, JavaScript进行综合性练习且学习了前端基础框架jQuery及UI框架，让学生对前端开发有全面的认识

第四阶段

ES6+Node+工程化

· ES6/7/8· promise
· npm常用命令· git基础（常用操作）
· git高级· Node.js基础
· git基础（常用操作）
· http协议 & cookie & session
· MongoDB· Express框架
· ajax(原生，jQuery,axios,fetch)
· ajax库基本封装使用 promise封装
· 模块化
· 构建工具gulp，webpack4.0基础

掌握技能

1熟练ES6/7/8/9/10/11新特性

2掌握npm,git等前端必备技能

3掌握NodeJs开发

4掌握数据库MongoDB使用

5掌握Ajax及Ajax类库使用

6掌握工程化工具webpack,gulp等使用

阶段课程特色

本阶段开发接触前端高级语法，如ES6新特性，git及git高级等，且会涉及服务器端知识及工程化开发工具使用，使得学生对工程化开发有了全面的认识，并对前后端通信有了深入的了解

第五阶段

React技术栈

· React基础语法
· react-router
· React Antd使用
· Redux
· React移动端项目

掌握技能

1熟练React核心语法

2掌握React扩展库使用：router，Antd

3掌握React高级Redux状态管理库使用

4掌握React项目开发技能

阶段课程特色

本阶段主要针对前端高级框架React进行全面讲解，使学生对React框架有全面的认识，并包含了React高级知识如Redux及React项目开发使得学生可以快速上手React开发

第六阶段

Vue技术栈

· Vue基础
· VueRouter
· Vuex
· Vue源码(v-model, 双向数据绑定)
· VuePC项目-电商
· Vue后台管理

掌握技能

1掌握Vue核心语法

2掌握Vue扩展库使用：router，Vuex，ElementUI等

3掌握Vue底层实现，如：v-model，双向数据绑定等

4Vue企业级项目开发，Vue前台项目，Vue后台管理项目

阶段课程特色

本阶段主要为Vue技术栈讲解，包含了Vue核心语法及高级语法，对Vue的源码进行了深入剖析，且项目为企业级项目讲解，包含前台项目，后台管理项目及java搭建的服务器端，项目中使用的均为真实接口，完全对接企业

第七阶段

小程序

· 小程序
· UniApp
· TypeScript

掌握技能

1掌握原生小程序核心语法及API使用

2掌握小程序开发框架UniApp使用

阶段课程特色

本课程为小程序开发相关课程，包含了小程序开发常用的所有技能，本次课程为项目驱动，包含了两个项目(音乐类，电商类)，且使用网易云音乐项目真实的API接口，对网易云音乐项目进行百分百还原，学完本次课程可快速上手小程序开发

第八阶段

就业指导+面试精讲

· vue实战(移动端)
· 小程序实战
· 面试精讲
· 就业指导

掌握技能

1独立完成企业级项目开发

2对前端必备技能综合性复习

3熟练掌握面试必备技术

阶段课程特色

本阶段为学生毕业前的综合实战练习，主要培养学生独立动手能力，且对前端所有所学重点知识进行综合性复习讲解，使得学生从容应对面试，快速走上工作岗位

100课时针对性强化训练的“算法+底层+高热技术”视频课程

学有余力的学员，可进行拔高，剑指更有竞争力的offer
已经入职的同学，可按需选学，在实际工作中迅速专项突破

深入原理层面解读主流框架工具Webpack重构Boss直聘，打造企业级的React后台管理项目

掌握Taro多端框架，争夺流量入口JS版数据结构和算法，打通算法面试之门设计模式深度解析

手把手带你玩转Promise异步式编程前端大火Vue3+TypeScript，走在技术前沿手把手教你实现PubSub/EventBus,提升核心技能

axios源码分析与自定义，直击面试核心Vue核心源码分析与自定义，快速打通高薪秘籍原理深入剖析：Vue-Router

React核心源码分析与自定义，开拓前端进阶之路前端面试加分福音：Redux深入源码解析

React-Router核心源码分析解锁大厂面试核心攻略全套Git/GitLab使用指南，教你少走弯路

李老师

专注、洞察力强、幽默诙谐

确保学生透彻理解知识点

张老师

技术栈全面的专家级讲师

任凭教室宽广，飞哥不用麦

沈老师

互联网技术出身

全栈型技术讲师

熊老师

对React、Vue有深入研究

言简意赅，认真负责

闫老师

精通主流框架

痴迷于新技术的推广与教学

李老师

曾参与国家级超大型项目开发

德云社式幽默生动授课

张老师

对前后端主流框架的理论与实际应用均有深入研究

刘老师

擅于用引导的方式和生动的例子教学，授课思路清晰幽默

李老师

深度参与多游戏平台建设

技术精湛，性格随和

刘老师

技术讲解一针见血

深得学生喜爱

杨老师

善于将项目开发中的前后端交互实践经验融入教学

邱老师

深悉各大前端主流框架

把抽象的编程思想具像化

李老师

拥有html/JS/PHP/数据库/
VUE/Node等开发授课经验

闫老师

先后就职饿了么、百度等公司，注重理论和实践相结合

付老师

做过开发工程师/技术经理/前端架构师，懂技术会讲课

闫老师

深入了解HTML/CSS/PHP/
JavaScript/Python等语言

贾老师

曾就职于联想集团，从事IT教育多年，学员遍布全国

杨老师

认真细心，善于培养学员的学习能力和解决问题能力

张老师

丰富的大规模高并发访问的Web应用架构设计/开发经验

罗老师

对微信小程序有深入研究

知识点讲解深入浅出

方老师

引导学生自我发现、分析、解决问题，从而提升技术能力

陈老师

对NodeJS及前端主流框架React、Vue有深入的研究

张老师

多年Web开发经验，对Vue/React有丰富使用经验

张老师

擅长原生JavaScript、jQuery、CSS3+HTML5

高老师

先后任职大型国企、字节跳动

精通HTML、CSS、JS

陈老师

实战经验丰富，授课思路清晰

课堂氛围轻松活跃

谷粒商城

硅谷ERP

硅谷教育

硅谷电影

硅谷外卖

硅谷直聘

谷粒音乐

E宠商城

到位

途牛旅游

掌握技能

1熟练HTML, CSS核心语法

2熟练H5,CSS3新特性

3掌握多种布局技巧

4能够独立绘制前端静态页面

阶段课程特色

本阶段对HTML5,CSS3等内容重点讲解，且穿插了很多练习案例，在掌握前端基础核心语法以外会再进行综合性练习并且会针对性讲解动画，过渡，及多种经典布局方案

掌握技能

1熟悉JavaScript核心语法

2熟练DOM，BOM操作

3熟练面向对象编程

阶段课程特色

本阶段对JavaScript入门到高级进行全面讲解，每个知识点都有相应的案例练习，且针对闭包，原型，继承等面向对象高级语法进行深入讲解，让学员能够很好的扎实基础，为后续的框架学习做好充足的准备

掌握技能

1掌握前端必备框架jQuery

2掌握前端UI框架bootStrap

3掌握css预编译语言less

4针对前边所学知识进行综合性项目练习

阶段课程特色

本阶段主要是针对HTML, CSS, JavaScript进行综合性练习且学习了前端基础框架jQuery及UI框架，让学生对前端开发有全面的认识

掌握技能

1熟练ES6/7/8/9/10/11新特性

2掌握npm,git等前端必备技能

3掌握NodeJs开发

4掌握数据库MongoDB使用

5掌握Ajax及Ajax类库使用

6掌握工程化工具webpack,gulp等使用

阶段课程特色

本阶段开发接触前端高级语法，如ES6新特性，git及git高级等，且会涉及服务器端知识及工程化开发工具使用，使得学生对工程化开发有了全面的认识，并对前后端通信有了深入的了解

掌握技能

1熟练React核心语法

2掌握React扩展库使用：router，Antd

3掌握React高级Redux状态管理库使用

4掌握React项目开发技能

阶段课程特色

本阶段主要针对前端高级框架React进行全面讲解，使学生对React框架有全面的认识，并包含了React高级知识如Redux及React项目开发使得学生可以快速上手React开发

掌握技能

1掌握Vue核心语法

2掌握Vue扩展库使用：router，Vuex，ElementUI等

3掌握Vue底层实现，如：v-model，双向数据绑定等

4Vue企业级项目开发，Vue前台项目，Vue后台管理项目

阶段课程特色

本阶段主要为Vue技术栈讲解，包含了Vue核心语法及高级语法，对Vue的源码进行了深入剖析，且项目为企业级项目讲解，包含前台项目，后台管理项目及java搭建的服务器端，项目中使用的均为真实接口，完全对接企业

掌握技能

1掌握原生小程序核心语法及API使用

2掌握小程序开发框架UniApp使用

阶段课程特色

掌握技能

1独立完成企业级项目开发

2对前端必备技能综合性复习

3熟练掌握面试必备技术

阶段课程特色

本阶段为学生毕业前的综合实战练习，主要培养学生独立动手能力，且对前端所有所学重点知识进行综合性复习讲解，使得学生从容应对面试，快速走上工作岗位

100课时针对性强化训练的“算法+底层+高热技术”视频课程

学有余力的学员，可进行拔高，剑指更有竞争力的offer已经入职的同学，可按需选学，在实际工作中迅速专项突破

李老师

张老师

沈老师

熊老师

闫老师

李老师

张老师

刘老师

李老师

刘老师

杨老师

邱老师

李老师

闫老师

付老师

学有余力的学员，可进行拔高，剑指更有竞争力的offer
已经入职的同学，可按需选学，在实际工作中迅速专项突破