《Web开发入门实践》公开课

课程目标

帮助零基础的小白，快速上手Web开发（仅仅是入门，不要有太高期待）
每位同学能够独立开发一个相对复杂、可用、安全的Web应用

- 不去想工作压力了，不去想上岸压力了，每天进步一点点，慢慢的就能遇见更好的自己。
- 每天进步一点点，一点点就好，期待惊喜，期待更好的自己。

源码地址

• 课堂练习代码： https://gitee.com/OSABC/webdevsrc
• 后台API源码地址： https://gitee.com/OSABC/BlogAPI

测试地址

• API接口测试地址： http://blogapi.zhangqx.com/

    例如：http://blogapi.zhangqx.com/bloglist
    https://blogapi.zhangqx.com/bloglist

• 图片服务器地址：http://blogimg.zhangqx.com/

    例如：http://blogimg.zhangqx.com/01.png

• 图片服务器CDN：http://cdn.blogimg.zhangqx.com/

课程日历（2021年）

• Day18 【2021-03-05】 个人Blog项目08（页面样式完善）
• Day17 【2021-03-03】 个人Blog项目07（热门文章与本站栏目）
• Day16 【2021-03-01】 个人Blog项目06（展示博客详情）
• Day15 【2021-02-26】 个人Blog项目05（搜索功能样式）
• Day14 【2021-02-24】 个人Blog项目04（首页阅读更多）
• Day13 【2021-02-22】 个人Blog项目03（通过路由实现页面跳转）
• Day12 【2021-02-19】 个人Blog项目02（异步获取首页博客列表数据）
• Day11 【2021-02-17】 个人Blog项目01（首页博客列表展示）
• Day10 【2021-02-15】 React入门
• Day09 【2021-02-12】 用户登录注册优化
• Day08 【2021-02-10】 MySQL使用入门
• Day07 【2021-02-08】 Node.js入门
• Day06 【2021-02-05】 JavaScript入门
• Day05 【2021-02-03】 用户注册页面
• Day04 【2021-02-01】 用户登录页面
• Day03 【2021-01-30】 CSS入门
• Day02 【2021-01-28】 Linux入门
• Day01 【2021-01-26】 HTML入门

项目实战

• 基于React的个人Blog
• 基于JWT的微信小程序(教室申请)

知识模块【持续更新中...】

HTTP

• HTTP基础
• JWT
• 性能优化

HTML

CSS

• 字体
• 定位
• display属性

Javascript

• 变量
• 数据类型
• 函数
• 对象
• this关键字
• 控制语句
• 回调函数
• 函数嵌套
• 变量作用域
• 闭包
• 字符串及常见操作
• 数组的Map函数

ES6+

• ES6是什么
• Babel
• class
• let与const
• 箭头函数
• this
• 模板字符串
• 函数参数默认值
• 解构赋值
• 延展操作符
• Promise
• async与await

JS代码片段分析

• 代码片段1
• 代码片段2
• 代码片段3

React

• JSX基本语法
• 组件
• state
• props
• 组件间通信
• 组件生命周期
• 事件
• 表单
• 路由
• axios
• ref

Redux

React Native

• HelloWorld程序解析
• View组件及Flex布局
• Text组件
• Image组件
• 天气预报界面布局实践
• TextInput组件
• Touchable组件
• 配置路由实现页面切换
• 网络请求fetch
• 天气预报界面布局实践2

NodeJS

• 环境配置
• Express入门实例
• 配置HTTPS
• 服务器处理get请求并返回JSON数据
• 服务器处理Post表单数据
• 服务端处理Post的JSON格式数据
• 服务后台永久运行方法
• Node+Express+Mysql实践
• Node自定义模块
• JWT
• socket.io

Linux

• 部署Apache
• 生成ssh公钥
• OpenSSL生成公钥私钥
• vim
• Nginx_配置

数据库

• 安装部署MySQL+PhpMyadmin

Webpack

Git

Web安全

微信小程序

• 新页面
• view组件
• 尺寸单位
• scroll-view组件
• swiper组件
• text组件
• image组件
• 盒模型
• 浮动
• flex布局
• 定位
• TabBar
• 页面切换
• 数据绑定
• 组件绑定事件处理函数
• navigator组件
• 列表渲染
• wx.getLocation
• wx.request
• wx.login
• 小程序登录
• 本地存储
• form
• 小程序更新机制
• 全局变量（globalData）
• promise和callback实现同步效果
• 模块化
• 页面模板
• icon组件
• websocket
• web-view组件
• 常用技巧

视频教程

模块：微信小程序+NodeJS获取用户登录信息

• 获取微信用户code信息 视频
• 小程序端发起request请求 视频
• 服务器获取request请求中的code参数 视频
• 服务端通过code换取openid 视频

模块：微信小程序+NodeJS+MySQL

• 介绍 视频
• CentOS8.0安装Mysql服务器 视频
• 安装PHPMyAdmin 视频
• NodeJS访问数据库 视频
• 小程序与NodeJS服务器端通信 视频
• Nodejs将openid写入MySQL数据库 视频

    部分内容及代码来源于网络，如有侵权，请告知后删除！