-
Bootstrap实战练习—模仿前端网页2(表格+巨幕)V1
-
原网页效果图
连接
-
我的网页效果
-我的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Web全栈开发就业班课程大纲https://www.eduwork.cn/webtx.html</title>
<!--移动设备优先-->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--引入Bootstrap CSS-->
<link rel="stylesheet" href="css/bootstrap.css">
<!-- 引入CSS Swiper插件 -->
<link rel="stylesheet" href="css/swiper.min.css">
<!--引入手风琴CSS-->
<link rel="stylesheet" href="css/style.css">
<!--引入 Dplayer css-->
<link rel="stylesheet" href="css/DPlayer.min.css">
</head>
<body>
<div class="container-fluid shadow bg-white">
<!--导航栏-->
<div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="collapse navbar-collapse mr-auto" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link pl-4 " href="#" style="background: url('images/hl.png') no-repeat 6px 10px;">融职科技</a>
</li>
<li class="nav-item ">
<a class="nav-link pl-4" href="#" style="background: url('images/llt.png') no-repeat 6px 10px;">学习猿地</a>
</li>
<li class="nav-item ">
<a class="nav-link pl-4" href="#" style="background: url('images/zzt.png') no-repeat 6px 10px;">智校云</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
培训模式
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">面授模式</a>
<a class="dropdown-item" href="#">坐班模式</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">实习模式</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
培训方向
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Web全栈工程师</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Java全栈工程师</a>
<a class="dropdown-item" href="#">PHP全栈工程师</a>
<a class="dropdown-item" href="#">Web前端工程师</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">UI设计师+产品经理</a>
</div>
</li>
<li class="nav-item ">
<a class="nav-link" href="#">Web全栈就业班</a>
</li>
</ul>
<div class="nav-item dropdown float-right">
<a class="nav-link dropdown-toggle pl-5" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" style="background: url('images/微信.jpg') no-repeat ;">
咨询微信
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">158-0168-4338</a>
<a class="dropdown-item" href="#">QQ：97484619</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"><img src="images2/qrcode.png" alt=""></a>
</div>
</div>
</div>
</nav>
</div>
</div>
<div class="container">
<!--标题栏-->
<div class="row pt-4">
<div class="col m-2">
<img src="images/logo.png" alt="" style="height: 50px;width: auto;">
</div>
<div class="col m-2 h5 mt-3">在工作中学习，在学习中工作</div>
<div class="col m-2">
<span class="dropdown">
<button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
学习辕地
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Java全栈</a>
<a class="dropdown-item" href="#">Python全栈</a>
<a class="dropdown-item" href="#">Golang全栈</a>
<a class="dropdown-item" href="#">PHP全栈</a>
<a class="dropdown-item" href="#">大数据全栈</a>
<a class="dropdown-item" href="#">Web前端全栈</a>
<a class="dropdown-item" href="#">UI/UE全栈</a>
<a class="dropdown-item" href="#">Linux全栈</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">官网首页</a>
</div>
</span>
<span class="dropdownk">
<button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
智校云
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">CRM系统</a>
<a class="dropdown-item" href="#">在线教育系统</a>
<a class="dropdown-item" href="#">考试系统</a>
<a class="dropdown-item" href="#">财务系统</a>
<a class="dropdown-item" href="#">教务系统</a>
<a class="dropdown-item" href="#">就业系统</a>
<a class="dropdown-item" href="#">代理系统</a>
<a class="dropdown-item" href="#">分销系统</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">全部产品</a>
</div>
</span>
</div>
</div>
</div>
<!--巨幕图-->
<div class="container-fluid bg-light">
<div class="row">
<div class="col-12 pl-5">
<div class="jumbotron" style="background: url('images2/巨幕图.jpg');">
<h1 class="display-5 font-weight-bold">Web全栈课程体系</h1>
<p class="lead">程序员需要掌握的是一门技术，而并不只是一种编程语言</p>
<div class="media">
<img src="images2/gaolf.png" style="height: 80px;width: 80px;" class="mr-3" alt="...">
<div class="media-body">
<h5 class="">高洛峰</h5>
<p class="text-muted small">发布时间：2020-05-20 EduWork课程大纲</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--正文-->
<div class="container">
<div class="row my-5">
<!--左边-->
<div class="col-8 ">
<!--当前版本-->
<div>
<div class="font-weight-bold pb-3 h5">当前版本</div>
<table class="table table-bordered table-sm">
<tbody >
<tr>
<td class="pl-3" rowspan="4">文件状态：<br>
[ ] 草稿<br>
[ √ ] 正式发布<br>
[ ] 正在修改<br>
</td>
<td class="bg-light pl-3">文件标识：</td>
<td class="pl-3">学习猿地-Web全栈工程师-01</td>
</tr>
<tr>
<td class="bg-light pl-3">当前版本：</td>
<td class="pl-3">V2.0</td>
</tr>
<tr>
<td class="bg-light pl-3">作 者：</td>
<td class="pl-3">高洛峰</td>
</tr>
<tr>
<td class="bg-light pl-3">完成日期：</td>
<td class="pl-3">2020-05-20</td>
</tr>
</tbody>
</table>
</div>
<!--历史版本-->
<div>
<div class="font-weight-bold py-2 h5">历史版本</div>
<table class="table table-bordered">
<thead class="thead-light">
<tr>
<th scope="col">版本/状态</th>
<th scope="col">作 者</th>
<th scope="col">参 与 者</th>
<th scope="col">起止日期</th>
<th scope="col">备 注</th>
</tr>
</thead>
<tbody>
<tr>
<td>V1.0</th>
<td>高洛峰</td>
<td>孙健魁，徐枭雄<br>刘万涛、吴健</td>
<td>2019-01-05<br>2020-05-20</td>
<td>学习猿地-PHP开发工程师-01<br>学习猿地-Web前端开发工程师-01<br>学习猿地-Linux运维工程师-01</td>
</tr>
<tr>
<td>V2.0</th>
<td>高洛峰</td>
<td>孙健魁，徐枭雄<br>刘万涛、吴健</td>
<td>2020-05-20<br>至今</td>
<td>学习猿地-Web全栈工程师-01</td>
</tr>
</tbody>
</table>
</div>
<!--学习目标-->
<div>
<div class="font-weight-bold py-2 h5">学习目标</div>
<p>
☆ 掌握Web前端HTML、CSS、JavaScript全套开发技能， 可以完成PC系统、移动站、小程序、公众号、WebAPP等，前后端开发分离的所有形式的页面开发。<br>
☆ 掌握后端开发语言PHP和Node.js全部开发技术，可以完成所有服务器端的业务处理。<br>
☆ 掌握MySQL和Redis关系型和非关系型全部的管理和应用，可以完成所有项目的数据库管理应用、安全、高并发处理等。<br>
☆ 掌握Linux操作、云服务器、Web服务器应用与管理、以及虚拟化技术，可以完成所有项目的环境部署和管理。<br>
☆ 掌握项目管理和开发流程，可以完成所有Web项目的架构设计、协作开发、软件管理。<br>
☆ 掌握Web全栈开发技术，可以胜任PHP高级开发工程师、前端开发工程师、运维工程师、架构师等和Web开发相关的所有岗位。<br>
</p>
</div>
<!--学习方式-->
<div>
<div class="font-weight-bold py-2 h5">学习方式</div>
<p>
? 采用“迭代式”学习方式， 前一阶段都是在为下一阶段做基础铺垫。学习步骤是先从面向过程的编程思想开始，再到面向对象的编程思想， 再到面向组件的编程思想， 再到面向架构的编程思想，最后再到企业实习。从编程思想和技术应用上，都能达到逐级提升。进阶式教学方法，不仅适合技术的成长，更适合编程思想的成长，是从小白到大牛的最有效的程序员成长方法。<br>
? 采用“全栈式”授课方法， 每个阶段学习的并只不是一种编程语言，而学习的是一门技术。所以每学完一个阶段都可以完成一个Web项目，包括前端页面、后端业务处理、数据库操作，以及Web服务器的管理与应用。<br>
? 采用“浸入式”学习方式，不仅有一个专门的企业实习阶段，浸入到项目中和总监一起开发商业项目， 而且在每一阶段的教学中也是以项目实战贯穿技术点的方式。 每个阶段都会先梳理项目需求，进行项目设计， 学习部分前端技术就为项目编写页面，学点数据库技术就为项目设计表和编写SQL语句，学习一部分后端技能就为项目编写业务逻辑和架构设计，每个阶段最后再整体对项目进行优化、升级、测试、上线和总结。<br>
</p>
</div>
<!--阶段一：入门#初级程序员#面向过程开发思想-->
<div>
<div class="font-weight-bold py-2 h5">阶段一：入门#初级程序员#面向过程开发思想</div>
<p>
本阶段的内容学完就可以编写绝大多数的Web项目开发， 但开发思想是最单纯的过程化开发思想， 程序架构简单、直接、易懂，中小企业网站会采用这种开发方式， 是新手常用的Web开发架构，也是早期Web项目开发的基本架构。单服务器也就可以承受10万左右的PV， 不易扩展和维护，但作为程序员入门是非常好的选择。
</p>
<table class="table table-striped">
<thead class="thead-dark">
<tr>
<th scope="col">全栈<br>占比</th>
<th scope="col">技术点</th>
<th scope="col">学习目标</th>
<th scope="col">实战／寓学于练</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">前端<br>10%</th>
<td>HTML基础应用<br>
CSS基础应用<br>
DIV+CSS标准化页面布局<br>
js基础插件<br>
</td>
<td>掌握HTML和CSS的基本应用，学会DIV+CSS页面布局可以完成PC端基本的页面编写。了解js一些基本插件应用。</td>
<td>按项目原型设计：<br>
1.完成前台所有页面开发。<br>
2.完成后台所有所有应用页面编写。<br>
3.应用JS插件完成页面中特效要求。<br>
</td>
</tr>
<tr>
<th scope="row">后端<br>30%</th>
<td>PHP基本语法<br>
PHP基本应用<br>
PHP常用功能扩展模块<br>
PHP操作数据库<br>
PHP处理业务流程<br>
</td>
<td>掌握PHP语言基本功能，掌握PHP的语法，学会使用PHP的一些常用功能扩展模块，操作数据库等，可以通过面向过程的思想处理业务流程。</td>
<td>按项目业务需求：<br>
1.接收用户操作请求。<br>
2.完成后端的业务处理。<br>
3.向用户响应处理结果。<br>
</td>
</tr>
<tr>
<th scope="row">数据库<br>30%</th>
<td>MySQL架构组成<br>
MySQL数据库基本应用<br>
建库建表<br>
常用的SQL语句<br>
PHPMyAdmin操作数据<br>
</td>
<td>掌握MySQL的服务器基本配置，可以为项目设计和创建表结构，会编写基本的SQL语言，完成项目的业务需求。</td>
<td>按项目的需求：<br>
1.完成CMS的表设计。<br>
2.创建CMS需要的所有表。<br>
3.编写项目中100+条SQL语句。<br>
</td>
</tr>
<tr>
<th scope="row">服务器<br>5%</th>
<td>Windows的集成开发环境<br>
Apache应用与管理<br>
MySQL服务器管理<br>
PHP服务器管理<br>
</td>
<td>使用最新版本的集成开发环境，掌握集成中的每个服务器的基本应用和管理，以及每个服务器的核心文件的操作。</td>
<td>按项目的需求:<br>
1.搭建项目的运行环境。<br>
2.可以管理项目的服务器。<br>
3.做一些基本的优化和安全防控。<br>
</td>
</tr>
<tr>
<td colspan="4">
<h3>项目实战：轻量级CMS（企业动态官方网站）</h3>
<p>通过CMS系统的应用可达到对网页的内容分类排版、文章内容的发布、用户之间的文章管理与交流。根据内容管理系统（CMS）的特点，可以将其分为前台和后台两个应用，前台应用包括内容展示和个人中心两部分，而后台应用则分为平台操作管理、系统管理频道、内容管理频道和用户管理频道4个部分。</p>
<p>1．门户网站<br>
用户分为访客和会员，访客可以在网站上浏览频道、浏览文章、搜索文章等。会员可以发布文章、对文章进行评论、加好友、发站内信、收藏文章等。</p>
<p>2．后台管理系统<br>
后台管理系统的用户分为超级管理员、网编与内容管理员三种角色：网编可进行系统设计、管理栏目分类、友情链接管理及公告管理；内容管理员可以管理文章和幻灯片；超级管理员有所有权限，包括管理用户和用户组。</p>
<img src="images2/cms.png" alt="">
<p>说明：<br>
项目的核心功能已经以实战的方式贯穿在每天的课程中，在本阶段的项目期，只需要根据需求分析和产品原型设计，百分之百将项目实现，进行页面优化，架构改进，业务流程优化，补全功能模块，并测试无Bug，将项目上线。并总结开发经验。</p>
</td>
</tr>
</tbody>
</table>
</div>
<!--阶段二：进阶#中级程序员#面向对象开发思想-->
<div>
<div class="font-weight-bold py-2 h5">阶段二：进阶#中级程序员#面向对象开发思想</div>
<p>本阶段的内容学完几乎可以开发所有的Web项目， 而且完全采用面向对象的开发思想实现，前端能用各种响应式布局开发页面， 支持在多终端下访问，并采用流行的BootStrap框架，结合jQuery 实现与用户交互和特效编写， 当然也可以使用纯JS实现。后端则使用自己定义MVC模式框架，应用最新版本构建架构， 并且服务器都是在Linux下搭建的环境，也是生产环境下常用的环境， 本阶段数据库也可以做到安全防护和优化处理。 这个阶段学习的技术是现在中小系统最常用的开发模式， 单服务器可以承受100万左右的PV， 扩展和维护相对容易， 也是Web开发必须掌握的全栈开发技能。这部分学完就具备参加工作的能力， 升级为中级程序员水平。</p>
<table class="table table-striped">
<thead class="thead-dark">
<tr>
<th scope="col">全栈<br>占比</th>
<th scope="col">技术点</th>
<th scope="col">学习目标</th>
<th scope="col">实战／寓学于练</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">前端<br>60%</th>
<td>HTML5和CSS３新特性<br>
多种方法响应式页面布局<br>
JavaScript语法基础<br>
WebAPI之BOM和DOM操作<br>
jQuery/BootStrap常用框架<br>
</td>
<td>掌握H5和C3的新特性，可以布局响应式页面，弹性布局和栅格布局，掌握JS语言，可以使用DOM思想编写用户前端交互和特效。</td>
<td>按项目原型设计：<br>
1.完成前后台所有模板开发。<br>
2.支持手机购物和后台定单处理。<br>
3.通过JS完成所有前端交互。<br>
4.实现所有页面中的特效。<br>
</td>
</tr>
<tr>
<th scope="row">后端<br>60%</th>
<td>PHP面向对象技术<br>
数据库抽象层PDO<br>
会话控制高级应用<br>
Composer包管理工具<br>
自定义MVC模式开发框架<br>
</td>
<td>掌握PHP面向对象的编程思想，熟练使用Composer管理常用开发组件，和自定义高可用的后端开发框架。</td>
<td>按项目业务需求：<br>
1.搭建MVC结构开发框架。<br>
2.完成项目的业务处理。<br>
3.模拟第三方登录和支付流程。<br>
</td>
</tr>
<tr>
<th scope="row">数据库<br>50%</th>
<td>Memcached应用与管理<br>
MySQL备份和恢复<br>
数据库事务处理<br>
MySQL查询和慢查询日志分析<br>
MySQL索引优化<br>
MySQL存储引擎优化<br>
MySQL锁机制优化<br>
</td>
<td>掌握数据库的安全处理方式，可以处理数据库容灾，掌握数据库的各种优化方式，将数据库的优化提升到最高级别，提升系统运行效率。</td>
<td>按项目的需求：<br>
1.完成商城项目的表设计。<br>
2.创建商城项目表和索引。<br>
3.实现项目中的全部SQL语句。<br>
4.实现数据定期备份和性能优化。<br>
</td>
</tr>
<tr>
<th scope="row">服务器<br>60%</th>
<td>Linux 应用操作<br>
Linux的网络管理<br>
LNMP环境安装和应用<br>
Linux服务的运维与安全<br>
</td>
<td>掌握Linux系统应用，基本的Shell编程，配置和管理常用的网络服务，LAMP和LNMP环境的安装和应用。</td>
<td>按项目的需求:<br>
1.通过源码包搭建LNMP环境。<br>
2.配置管理Nginx的应用服务器。<br>
3.设置优化和安全防控任务脚本。<br>
</td>
</tr>
<tr>
<td colspan="4">
<h3>项目实战：电子商城系统（网上书城）</h3>
<p>项目需求是将商品展示、在线购物、订单管理、支付管理、文章管理、客户咨询反馈等功能相结合，并提供了简易的操作、实用的功能，快速让用户建立个性化的网上商店，为用户提供了一个低成本、高效率的网上商城建设方案。本系统主要分为前台用户功能和后台管理功能两大应用。前台应用主要是实现了用户通过登录进入商城后，对公告、商品的浏览以及查询、购买。后台管理主要实现了管理员对公告、商品、订单、咨询的管理。制作电子商务系统的原理与超市购物原理是一样的，首先客户应该在网页中选购自己需要的商品并将商品放入购物车中，当然也可以改变购买商品的数量或清空购物车中的商品。选购好商品后就可以到收银台，在收银台填写并提交收货人信息。网上商店的主要参与者是顾客和商场，以及后台管理人员。网上电子商城应包括两个基本的部分，一个是前台销售，用户在前台可以浏览，搜索，购买商品，能看到商城最新的公告；另一个是后台管理，管理员在此管理网站信息和商品，具体包括录入，更改网上信息，订单的查询和处理，商品的上架与下架，还可以管理在商城里注册的用户等。系统前、后台功能结构图如图：</p>
<img src="images2/shop1.png" alt="">
<img src="images2/shop2.png" alt="">
<p>说明：<br>
项目的核心功能已经以实战的方式贯穿在每天的课程中，在本阶段的项目期，只需要根据需求分析和产品原型设计，百分之百将项目实现，进行页面优化，架构改进，业务流程优化，补全功能模块，并测试无Bug，将项目上线。并总结开发经验。</p>
</td>
</tr>
</tbody>
</table>
</div>
<!--阶段三：提高#高级程序员#面向组件开发思想-->
<div>
<div class="font-weight-bold py-2 h5">阶段三：提高#高级程序员#面向组件开发思想</div>
<p>本阶段的内容学完可以开发所有的Web项目， 而且本阶段全部采用最流行的组件化思想开发，实现前后端开发完全分离。服务器采用生产环境阿里云服务器，数据库引入NoSQL技术学习Redis管理数据和缓存，并应用MySQL主从数据库扩展系统负载能力，全程项目开发使用GIT工具管理项目版本仓库。后端技术则使用PHP应用排名第一的Laravel框架，应用最新版本构建架构。按项目业务需求全部封装成标准的接口。网站前台PC版本使用VUE框架开发，移动端使用微信小程序开发，网后台管理界面采用REACT框架技术开发。这个阶段学习的技术是现在中大系统最常用的开发模式，单服务器可以承受1000万左右的PV， 扩展和维护非常容易，也是Web开发必须掌握的全栈开发技能。这部分学完就具备高级程序员开发水平。</p>
<table class="table table-striped">
<thead class="thead-dark">
<tr>
<th scope="col">全栈<br>占比</th>
<th scope="col">技术点</th>
<th scope="col">学习目标</th>
<th scope="col">实战／寓学于练</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">前端<br>90%</th>
<td>前后端交互核心<br>
Vue框架使用与进阶<br>
React框架应用与进阶<br>
微信小程序和公众号开发<br>
</td>
<td>掌握Vue和React框架的应用，可以通过虚拟DOM方式，开发前端交互，以及和后端交互处理数据，可以进行微信小程序和微信公众号的开发工作。</td>
<td>按项目原型设计：<br>
1.使用VUE完成前台模版开发。<br>
2.移动端应用微信小程序开发。<br>
3.用React完成后台模板开发。<br>
</td>
</tr>
<tr>
<th scope="row">后端<br>75%</th>
<td>CURL管理与应用<br>
RESTFul API定义接口<br>
Laravel新版框架应用<br>
大型项目的架构设计<br>
</td>
<td>掌握PHP新版本的Laravel框架应用，和RESTFul API的接口设计原则和应用，可以自定义开发接口，并能搭建高可用项目架构的目标。</td>
<td>按项目业务需求：<br>
1.用Laravel框架搭建项目架构。<br>
2.按业务标准完成项目接口开发。<br>
</td>
</tr>
<tr>
<th scope="row">数据库<br>85%</th>
<td>主从数据库设计<br>
NoSQL技术应用<br>
Redis 应用与管理<br>
</td>
<td>掌握MySQL主从数据库的设计与应用，掌握Redis的开发与应用，可以在PHP中操作Redis数据库。</td>
<td>按项目的需求：<br>
1.完成项目的表设计。<br>
2.应用Redis做缓存。<br>
3.采用主从增加项目负载能力。<br>
</td>
</tr>
<tr>
<th scope="row">服务器<br>75%</th>
<td>云服务器下的生产环境应用管理<br>
Git 管理与协作开发<br>
GitHub神操作<br>
</td>
<td>可以在阿里云服务器上搭建和管理生产环境下的Web服务器，熟练使用Git工具管理代码和团队协作开发，并能灵活的操作GitHub账号。</td>
<td>按项目的需求:<br>
1.在阿里云上搭建项目生产环境。<br>
2.使用GIT工具管理管理代码。<br>
</td>
</tr>
<tr>
<td colspan="4">
<h3>项目实战：在线教育系统（PC + 小程序）</h3>
<p>根据系统功能特点，将在线教育EDUPlayer系统划分为前台和后台两个应用部分。前台包括首页、用户、我的学习、我的教学、课程浏览、课程购买、课程管理、班级浏览、班级管理、班级购买等模块。前台主要有两个角色，分别是学员和授课教师，学员在前台浏览课程和学习课程，教师在前台编辑课程资料等。后台包括系统登录、后台管理平台页面、用户管理模块、课程管理模块、运营管理模块、财务管理模块、系统管理模块等。</p>
<img src="images2/jiaoy.png" alt="">
<p>说明：<br>
项目的核心功能已经以实战的方式贯穿在每天的课程中，在本阶段的项目期，只需要根据需求分析和产品原型设计，百分之百将项目实现，进行页面优化，架构改进，业务流程优化，补全功能模块，并测试无Bug，将项目上线。并总结开发经验。</p>
</td>
</tr>
</tbody>
</table>
</div>
<!--阶段四：大牛#架构师#面向服务架构的编程思想-->
<div>
<div class="font-weight-bold py-2 h5">阶段四：大牛#架构师#面向服务架构的编程思想</div>
<p>本阶段内容学习可以成为系统架构师了。项目前端使用组件化开发，前端体验要求越来越高，所以前端开发通过React框架完成页面交互控件，并打包为APP应用；后端采用轻量化思想，全部使用接口实现，并通过Nodejs和PHP结合开发实现这个层次的功能，并且后端轻量化的核心问题在于如何和原有的SOA体系打通；服务层则是微型化的实现，从基础服务开始，按照Service粒度拆分服务，使用轻量协议，可以用不同语言开发，不受限与任何技术栈；运维用上标准化，将业务模块固化为标准单元，发布前测试，发布流程标准化，数据库脚本需要进行版本化，可持续部署，自动运维。这个阶段学习的技术是现在超大系统最常用的架构模型，可根据服务器扩展、数据库集群、分布式架构等支撑几十亿的PV， 不仅架构扩展和维护非常容易，项目功能更容易扩展和迭代，人员协作开发工作任务容易分配和管理。这部分学完完全具备架构师开发开发水平。/p>
<table class="table table-striped">
<thead class="thead-dark">
<tr>
<th scope="col">全栈<br>占比</th>
<th scope="col">技术点</th>
<th scope="col">学习目标</th>
<th scope="col">实战／寓学于练</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">前端<br>100%</th>
<td>前端开发模块化思想与应用<br>
APP项目构建工具<br>
Web前端性能优化<br>
</td>
<td>掌握前端模块化开发思想，和前后端分离技术，能够熟练使用前端项目的各种构建工具，并需要掌握Web前端的各种性能优化方法。</td>
<td>前端组件化<br>
1.通过React框架完成页面交互控件<br>
2.混合APP打包<br>
</td>
</tr>
<tr>
<th scope="row">后端<br>100%</th>
<td>Node.js应用与开发<br>
分布式系统架构<br>
面向服务的架构（SOA）<br>
</td>
<td>掌握Node.js的应用，和PHP配合实现后端业务流程。能部署分布式架构和面向服务的SOA程序开发架构。</td>
<td>后端轻量化<br>
1.使用各个接口综合返回JSON数据。<br>
2.使用Nodejs和PHP共同开发这个层次功能<br>
3.和SOA体系打通<br>
</td>
</tr>
<tr>
<th scope="row">数据库<br>100%</th>
<td>MySQL集群<br>
Redis性能提升<br>
数据库安全与优化<br>
</td>
<td>掌握MySQL集群部署和多实例数据库环境搭建，掌握关系型和非关系型数据库联合应用。</td>
<td>数据库架构<br>
１.数据库脚本的版本化<br>
２.MySQL集群架构<br>
３.Redis缓存和性能提升<br>
</td>
</tr>
<tr>
<th scope="row">服务器<br>100%</th>
<td>微服务架构应用<br>
微服务docker部署<br>
架构伸缩性和可靠性<br>
系统架构迭代升级<br>
</td>
<td>能够设计并独立部署微服务架构，在Docker下php容器安装swoole扩展， 达到快速的扩展开发团队目标，实现对业务不断分层，不断拆分。</td>
<td>自动部署<br>
1.虚拟化，以极低的成本实现资源的最大利于率<br>
2.一键部署，以最简单的方式完成日常任务<br>
3.多环境支撑，支持开发、测试和生产环境<br>
4.安全隔离与审查，人员隔离与日志。<br>
5.可以快速回滚，快速回退到上个稳定版本。<br>
</td>
</tr>
<tr>
<td colspan="4">
<h3>项目实战：直播电商（SAAS）</h3>
<p>根据随着互联网的兴起，各式各样的手机APP也越来越多，从最开始的电商APP逐步发展到视频直播APP,再到后来的社交电商以及电商视频直播，现在人们不需要出门只需要一部手机就可以购物，电商视频直播APP的功能基本需求：</p>
<p>
一、电商视频直播APP预约功能：<br>
主播或者商户在直播的时间，很多用户并不知道他们的开播时间，大部分人在白天都需要工作，也不能每分每秒的登录这个APP等待主播直播，所以就有了直播预约时间功能，提前设置开播时间，利用短信推送或者客服推送到用户手机。</p>
<p>
二、电商视频直播APP视频展示功能：<br>
相信看过直播的朋友们也都知道，主播在直播的过程中会展示相应的产品，给用户介绍产品的优点、用途、适用人群，这样的目的是为了实现边看边买，可以在观看的同时点击购买链接。
</p>
<p>
三、电商视频直播APP录播回放功能：<br>
录播回放的功能是为了满足那些没时间在直播间观看的用户，在这些用户有时间的时候可以打开回放观看，或者是直播可以将自己录播好的上传平台。
</p>
<p>
四、电商视频直播APP一键分享功能：<br>
用户可以将自己觉得还不错的产品，以微信、支付宝或者其他方式分享给朋友同事，有一些商户通过分享的方式做一些优惠的活动，同时也宣传了自己的产品。
</p>
<p>
五、电商视频直播APP聊天功能<br>
用户或许在直播的时候有很多相关的问题需要咨询，这个时候可以在平台打字交流，主播可以在看到用户的问题之后做出解答，在问题得到解答之后，方便促成更好的购买成单。
</p>
<img src="images2/dszb.png" alt="">
<p>说明：<br>
项目的核心功能已经以实战的方式贯穿在每天的课程中，在本阶段的项目期，只需要根据需求分析和产品原型设计，百分之百将项目实现，进行页面优化，架构改进，业务流程优化，补全功能模块，并测试无Bug，将项目上线。并总结开发经验。</p>
</td>
</tr>
</tbody>
</table>
</div>
<!--阶段五：进入企业实习参与商业项目开发-->
<div>
<div class="font-weight-bold py-2 h5">阶段五：进入企业实习参与商业项目开发</div>
<p>这个阶段安排入职智校云网络科技有限公司实习，实习期为一个月，分配到商业项目组中和老程序员一起参与上线项目的开发工作。浸入项目组实习，不仅可以积累工作经验，在工作中学习更是技术提升的关键时期。相关的工作经验对于新工作的薪资起着决定性作用，因为参加实际项目开发解决过一些实际问题，一些开发工具会使用很熟练，并掌握相关的业务流程，了解团队协作开发的相互配合， 了解相关的项目管理规范等，所以开发效率会很高。在实际的编程工作中，你做的事情往往是一个大系统中的一个组件，完成一个大系统的开发工作是一个团队的事情，但你必须学会如何团队开发。最主要的是学过再多的技术，学习的内容也都是“点状”的，例如会写小段代码，掌握各种算法，了解所有设计模式，但没有参加过商业项目开发就不相信自己能胜任这份工作。作为程序员要有被甲方“威胁”的经历，要有被产品经理反复改需求“博弈”的过程，要有为了项目预期上线连夜“奋战”的时候，更要有项目经测试后反馈回来BUG成堆无地自容的感觉，也要有过讨论架构“拍桌子”大喊的情况。</p>
<table class="table table-striped">
<thead class="thead-dark">
<tr>
<th scope="col">全栈<br>占比</th>
<th scope="col">技术点</th>
<th scope="col">学习目标</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">代码管理</th>
<td>Git安装<br>
代码时光机<br>
多人合作<br>
分支特性<br>
远程仓库<br>
</td>
<td>远程仓库 Git是一个开源的分布式版本控制系统，可以有效、高速地处理从很小到非常大的项目版本管理。 其中很多的特性相较于svn，cvs更加的强大，特别是分支特性，更好的维护产品代码，保证代码的健壮性。</td>
</tr>
<tr>
<th scope="row">团队协作</th>
<td>文档管理<br>
设计图管理<br>
团队人员分工<br>
员工沟通技巧<br>
</td>
<td>团队协作是团队运作非常重要的一个环节，直接影响整个项目能否顺利完成。其中还包括员工的沟通，考核以及后续的升职加薪。</td>
</tr>
<tr>
<th scope="row">项目开发流程</th>
<td>原型制作<br>
设计图制作<br>
数据库设计<br>
框架开发<br>
测试<br>
上线<br>
</td>
<td>了解整个项目的开发流程对开发人员有着非常重要的意义，开发人员可以在宏观角度来认识项目，并提高和其他部门之间的配合，为后续的升职加薪做好准备。</td>
</tr>
<tr>
<th scope="row">客户沟通</th>
<td>客户沟通<br>
项目定价<br>
合同制作<br>
产品分析<br>
</td>
<td>客户是公司生存的经济来源，与客户的沟通显得至关重要，企业技术总监亲自讲述与客户沟通的那些事。</td>
</tr>
<tr>
<td colspan="4">
<h3>项目实战：10个商业项目二次开发</h3>
<p>智校云三年来已经自主研发并上线几十个商业项目，从中挑选10个不同类型的精品项目给到实习程序员，这10个商业项目总价值不会低于500万。会给你源代码学习和个人使用。但源码不可以在网络上公开，不可以私自用于商业用途，需要通过公司商业授权。</p>
<p>这10个项目不但给你源码，还会由参与这些项目开发的技术总监为你讲解项目的背景、需求、安装和使用，并详细分析项目架构和功能模块，并教会你进行二次开发，可以为项目扩展、修改或删减功能，并上线运行变成自己的项目。</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!--右边-->
<div class="col ">
<!--Web全栈工程师就业班-->
<div class="">
<h4>Web全栈工程师就业班</h4>
<br>
<a href="#">Web全栈工程师就业班详情页</a>
<hr>
<a href="#">Web全栈开发就业班核心优势</a>
<hr>
<a href="#">Web全栈工程师浸入式课程体系</a>
<hr>
<a href="#">Web全栈工程师120天的课程安排</a>
<hr>
<a href="#">首创“坐班”学习模式</a>
<hr>
<a href="#">只培养可交付的程序员</a>
<hr>
<a href="#">浸入项目组CTO带你实习</a>
<hr>
</div>
<br>
<!--课程阶段-->
<div class="">
<h4>课程阶段</h4>
<br>
<a href="#">Web全栈工程师就业班学习目标和学习方式</a>
<img src="images2/blog3.jpg" alt="" style="height: 150px;width: 150px;">
<hr>
<a href="#">阶段一：入门#初级程序员#面向过程开发思想</a>
<img src="images2/content1.jpg" alt="" style="height: 150px;width: 150px;">
<hr>
<a href="#">阶段二：进阶#中级程序员#面向对象开发思想</a>
<img src="images2/content2.jpg" alt="" style="height: 150px;width: 150px;">
<hr>
<a href="#">阶段三：提高#高级程序员#面向组件开发思想</a>
<img src="images2/content3.jpg" alt="" style="height: 150px;width: 150px;">
<hr>
<a href="#">阶段四：大牛#架构师#面向服务架构的编程思想</a>
<img src="images2/content4.jpg" alt="" style="height: 150px;width: 150px;">
<hr>
<a href="#">阶段五：进入企业实习参与商业项目开发</a>
<img src="images2/content6.jpg" alt="" style="height: 150px;width: 150px;">
<hr>
</div>
</div>
</div>
</div>
<!--页脚-->
<footer class="container-fluid">
<div class="row bg-dark text-white">
<div class="col mt-5">
<div class="pl-3 m-3">EduWork 是智校云旗下专注程序员培养的实习平台。</div>
<div class="pl-3 m-3">
<a class="text-white text-decoration-none p-3" href="#">关于我们</a>
<a class="text-white text-decoration-none p-3" href="#">联系我们</a>
<a class="text-white text-decoration-none p-3" href="#">加入我们</a>
<a class="text-white text-decoration-none p-3" href="#">帮助中心</a>
<a class="text-white text-decoration-none p-3" href="#">学习猿地</a>
<a class="text-white text-decoration-none p-3" href="#" >智校云</a>
</div>
<div class="pl-3 text-muted m-3">?2018-2020 北京智校云网络科技有限公司 版权所有</div>
</div>
<div class="col-2 mt-5">
<figure class="figure p-3">
<img src="images2/qrcode.png" class="figure-img img-fluid rounded" alt="..." style="height: 100px;width: 100px;">
<figcaption class="figure-caption text-center">关注我们</figcaption>
</figure>
</div>
</div>
</footer>
<!--引入jQuery, 再引入poppper.js 最后再引入Bootstrap.js-->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.bundle.js"></script>
</body>
</html>