Skip to content

qingfeng365/Front-endDevelopmentTraining

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

254 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

从传统开发转向Web前端开发的培训讲义

Javascript , Nodejs , Jade模板引擎 , BootStrap4 , Express4 , MongoDB , Mongoose , gulp , Angular

本项目内容主要针对传统开发人员转为Web大前端开发(基于nodejs的前后端一体化开发),所需要掌握的知识点。

第一季

课程目录

更新历史

2015-10-12

  • 第3讲 增加jade模板使用markdown的方法说明

2015-09-23

  • 第1讲 增加SourceTree安装时要注意的事项

讲义详细目录

第1讲 前端开发环境准备
    1 版本管理 Git
        安装Git
        Git可视化管理工具-SourceTree
        Git 初学者要了解的几个概念
        Git学习资源
        Git远程仓库资源
    2 NodeJs
        安装NodeJs
        安装淘宝镜像命令cnpm
        需要全局安装的常用模块
            全局安装的意义
            常用全局模块
        对Nojs初学者建议
    3 MongoDB
        为什么要使用MongoDB
        安装MongoDB
        检查PATH环境变量
        安装后指定数据库创建目录
        启动数据库命令:mongod
        命令行工具命令:mongo
        安装可视化工具 Robomongo
        建立mongodb自启动服务
        对初学者学习MongoDB的建议
        学习资源
    4 编辑器 Sublime Text 3
        Sublime Text 3 插件管理器
        Sublime Text 3 学习建议
        Sublime Text 3 常用快捷键
        Sublime Text 3 常用插件
    5 Markdown 标记语言
        为什么要用Markdown
        如何快速学习
        用什么编辑器最适合
        关于GFM
        学习资源
        建议的规范
    6 浏览器
第2讲 传统开发人员学习Javascript指南
    为什么要学习Javascript
    传统开发人员需要针对Javascript转变哪些思维
    如何快速学习资源
        学习资源
        学习技巧
    Javascript难点说明
        布尔表达式
            真假判断
            条件表达式计算方式
            逻辑运算表达式的计算方式
            特殊比较的结果
        作用域
        上下文
        对象继承
            构造器方式
                构造器函数
                原型对象是如何建立的
                使用构造器函数创建对象
                进一步理解New Foo()过程
                用构造器函数创建多个对象
                使用原型共用属性和方法
                继承之父类函数与子类函数
                prototype继承
                prototype继承的改进
                prototype直接继承
                prototype继承使用空对象中介
                expend函数
                构造器拷贝继承
            非构造器方式
                对象浅拷贝
                对象深拷贝
                基于对象的原型继承
                基于对象的原型继承的变形
                寄生式继承
                构造器借用
                构造器借用与原型复制
        对象继承演化
            是需要继承还是扩展
第3讲 Jade模板引擎与BootStrap4
    目标
    学习资源
    创建练习项目目录
        安装全局jade
        jade 命令行工具
        在项目目录安装 bootstrap 4
            初始化bower
            安装bootstrap 4
            在SourceTree设置忽略文件
            bower.json的作用
            全局安装jade-lint
            安装sublime插件
            修改sublime用户配置
    练习1
        新建jade文件
    正式练习
        准备工作
            jade 监听命令
        练习:
    如何在模板中使用Markdown语法
        安装 jstransformer-markdown-it
        在模板中使用 :markdown-it
第4讲 创建基于Express4的项目
    项目目标
    项目前期准备
        初始化项目目录
        使用npm初始化项目
        安装后端模块
        安装前端模块
            先设置bower安装目录
            初始化bower
            安装bootstrap4
        设置git的忽略文件
    创建入口文件
        app.js
        启动入口文件
    完成基本路由测试
        设计路由
        创建视图文件
        增加路由处理
        重新启动node
        在浏览器分别输入以下地址进行测试
        01-work 结束
    使用虚拟数据测试模板样式
        调整模板结构
        设置静态资源路由
        进一步调整模板结构
        首页模拟数据
        详情页模拟数据
        列表页模拟数据
        录入页模拟数据
        02-work 结束
第5讲 http基础与expressjs基础
    学习资源
    nodejs
        主文件
        favicon.ico
    HTTP基础
        浏览器与服务器的请求与响应
            整个过程简述
            时间线名词解释
        request 与 response
        常见的状态码
        常见的内容类型
        URL格式
    expressjs基础
        路由
        请求方法
            req.params
            req.query
            req.route
        响应方法
        扩展阅读
    示例
    express 访问日志中间件
    设置express模板渲染友好格式
第6讲 前端工程自动化基础与代码风格检查
    前端工程自动化
    学习资源
    前端工程自动化基础实战
    常见的风格检查错误信息
    Javascript 严格模式use strict
第7讲 使用MongoDB存储项目数据
    有关第4讲的重要更新
    项目
    学习资源
    mongoose基本概念
        Schema
        Schema type
        回调函数参数约定
    用mongoDb数据替换模拟数据
        创建car的模型
        向数据库添加模拟数据
        增加读取数据方法
        对Query.sort()方法的说明
        将首页路由处理改为从数据库读取
        增加错误处理中间件
        关于express路由处理next的说明
        将详情页路由处理改为从数据库读取
        将列表页路由处理改为从数据库读取
        在后台列表页增加显示meta.createDate
        启用'express-debug'
        增加后台录入页模板少了的proTitle字段
        将后台录入页路由处理改为从数据库读取
        后台录入页-新增的提交路由处理
        后台录入页-修改的提交路由处理
        对列表页-删除的路由处理
        对列表页-删除按钮的处理:方案一
        对列表页-删除按钮的处理:方案二
        增加处理最新修改日期的代码
        Mongoose 中间件官方说明
        处理最新修改日期的方案二
        03-work 结束
    mongoose 常用方法简介
        Document对象实用方法
        Model 或 Query 方法。
        查询运算符方法
        update运算符
        schema 保留字
第8讲 项目重构成为MVC结构
    为什么要重构
    第一步重构:将路由处理代码剥离出来
    第二步重构:服务端增加 controller 层
        增加首页的controller
        增加car的controller
        调整routes.js
    04-work 结束
第9讲 用户注册登录与权重管理
    项目
    前端页面引入holderjs
    注册与登录的路由规划
    模板增加菜单
    增加注册模板
    增加user的controller:showSignup
    增加注册的路由处理:signup
    user的模型
        用户等级规划
        创建car的模型
        mongoose 模式类型
        用户密码存储
        用户密码存储预处理
        用户controller:postSignup
        路由处理: post signup
        增加后台用户的演示数据
    增加登录模板
    增加user的controller:showSignin
    增加注册的路由处理:signin
    用户controller:postSignin
    增加注册的路由处理:post signin
    引入会话期管理
        安装express-session
        启用session管理
        显示当前登录用户
        增加中间件处理req.session
    持久化存储会话
        官方确认的 Session Stores
        使用mongodb存储会话
    登出处理
    权重判断中间件处理
    登录后记录最近登录日期
    注册与登录出错信息显示
    练习
    05-work 结束
第10讲 实现评论与回复功能
    评论与回复常用功能
    了解mongoose的populate功能
    建立comment模型
    增加comment的模拟数据
    详情页增加comment的视图内容
    car控制器增加读取评论内容
    增加comment控制器
    增加post comment的路由处理
    评论模型增加回复部分
    增加comment的模拟数据
    详情页增加comment回复的视图内容
    考虑维护回复需要知道的信息
    06-work 结束
第11讲 列表增加分页与查询
    分页需要考虑的变量
    模型增加查询方法
    修改控制器
    修改视图增加页码
    修改视图增加前后箭头
    列表页增加搜索框
    car模型增加查询方法
    car控制器showList增加对查询的处理
    car控制器增加对查询post的处理
    修改car控制器对查询post的处理
    car控制器showList增加对模板传递查询串的处理
    列表页视图分页增加查询串
    07-work 结束

About

Front-end development training

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors