为了账号安全,请及时绑定邮箱和手机立即绑定
慕课专栏

目录

索引目录

从0到1 实战朋友圈移动Web App开发

原价 ¥ 48.00

立即订阅
01 导读:移动 web 的趋势
更新时间:2019-08-01 19:56:20
才能一旦让懒惰支配,它就一无可为。

——克雷洛夫

大家好,我是吕小鸣。目前主要专攻 Web 前端开发,擅长于移动 Web 方向(也叫 HTML5 业务,一个很多坑的领域),如果大家看过我的课程视频,应该会比较熟悉。之前我在慕课网上一共发布了两门基于移动 web 的视频课程,一个是《移动Web App开发之实战美团外卖》,这个课程主要使用移动 web 技术与 Hybrid 技术去开发移动WebApp,结合 React 全家桶技术作为前端的框架,是一个前端项目的课程。另一个是《移动web开发适配秘籍Rem》,这个课程主要是基础知识的讲解,分析了移动 Web 常用的适配方案,以及讲解了如何使用 rem 来完成页面适配。

这两门课程主要以前端技术讲解为主,基本上不太涉及到后端开发。本次的《从0到1 实战朋友圈移动Web App开发》是一个结合 Vue.js 和移动 web 开发,以及 Node.js 和 MongoDB 开发实现的全栈项目,并且会采用阿里云相关的服务来实现真正能上线体验的真实企业级业务。

相信作为一个前端工程师来讲,你或多或少都会接触一些工作上的业务,并且在工作之余也写过一些 demo 来丰富自己的技术范围,但是一个真正的企业级项目和一般的练手项目在某些方面还是有不少区别的:

  1. 服务器的申请和相关域名的申请,以及 Nginx 的配置等相关的一些运维工作、短信和图床存储等公共第三方服务的选择;
  2. 前端页面的兼容性问题,比如移动 web 的项目,你可能需要拿至少 5 款 Android 和 iOS 手机来测试兼容性和适配性,以及在代码编写过程中,也要区分不同机型,因为不同机型可能有着不同的逻辑;
  3. 后端相关的部署上,保证服务的高效性和稳定性,比如如何进行进程管理,负载均衡等问题。

保持一个严谨的态度是开发一个企业级项目必不可少的。除此之外,不管你是一个初入前端的小白玩家,还是一个混迹多年的前端大佬,Vue.js 及相关的技术栈作为现在最流行的前端框架之一,如何在项目中充分地使用它们;移动 web 开发技术和传统的 PC 开发到底有何区别;如何进行屏幕适配;如何在移动端开发高效的 CSS3 动画等;在使用 Node.js 和 Express 框架开发后台接口时,如何对数据建模;如何实现用户认证,权限校验;如何利用 Scoket.io 开发高并发的聊天接口;MongoDB 是什么;MongoDB 和 Mongoose 到底有什么区别;如何使用 Mongoose 进行复杂数据的高效增删改查;如何结合当下流行的 PWA 技术让项目的用户体验像一个真正的WebApp,结合阿里云服务如何进行真实的线上发版和部署,这些问题我都会一一在专栏中为大家解答。

如果你对上面的问题感兴趣或者正在为这些问题而困扰,那么就跟着我一起进入《从0到1 实战朋友圈移动Web App开发》的世界。

本课程主要分为三大部分:

第一部分:在功能上主要讲解相关技术栈和相关环境的搭建和准备工作。其中包括知识点:

  1. 页面适配方案对比( rem 和 vw );
  2. Vue cli3 和 Express-generator 使用讲解;
  3. Chrome 模拟器的简单实用。

第二部分:主要讲解了实战项目的页面逻辑开发。在讲解的过程中会把整个课程相关的知识点同时讲解,这一部分也是整个专栏中内容最多、知识点最复杂的一部分。整个项目共分为 6 个模块:

  1. 登录页面逻辑和前后端开发,此模块涉及的知识点如下:

    • WeUI 使用讲解
    • 如何在项目中使用 Vuex
    • ES7 的 async 和 await 的使用技巧
    • 如何在 Express 框架中集成用户校验 JSON Web Token 机制
    • 使用第三方阿里云短信服务完成登录验证
  2. 发表页面的前后端逻辑开发,以及移动端图片上传功能,此模块涉及的知识点如下:

    • 企业级阿里云图片服务如何接入
    • HTML5 的 input 使用技巧讲解
    • Mongoose 的多表关联讲解
  3. 朋友圈首页的前后端逻辑开发,以及各种下拉刷新功能、图片查看器功能、底部键盘功能等开发,此模块涉及的知识点如下:

    • 移动端滚动加载的原理和 Vue.js 里插槽 slot 的使用方法
    • Vue.js 利用 transition 实现动画特效
    • 移动端 touch 事件全解析
    • CSS3 transform 实现下拉动画特效
    • 移动端键盘问题总结以及 Vue.js 的 EventBus 组件通信
    • Mongoose 关联排序查询讲解
  4. 个人信息页面的前后端逻辑开发,此模块涉及的知识点如下:

    • Mongoose 更新数据 update 方法和 find 方法讲解

    • Vue-router 中的 Query 的 params 区别

  5. 私信聊天页面的前后端逻辑开发,此模块涉及的知识点如下:

    • 移动端常用的滚动方式讲解
    • 移动端键盘和 fixed 元素问题讲解
    • Mongoose 使用 or 和 and 条件查询讲解
    • Socket.io 的用法技巧讲解
  6. 私信列表页面的前后端逻辑开发,此模块涉及的知识点如下:

    • Vuex 里修改 store 的状态技巧讲解
    • Mongoose 里如何使用模糊查询讲解

第三部分:主要讲解了实战项目的性能优化、用户体验优化以及 PWA 技术的引入,然后是项目的线上部署和相关的运维问题。此模块涉及的知识点如下:

  1. Animate.css 并结合 Vue-router 实现页面转场动画
  2. PWA 和 Service Worker 全方位解析
  3. Web Push 和 Web Notification 技术讲解
  4. 跨域知识点讲解以及 Svg-captcha 验证码模块使用
  5. 阿里云服务器部署、Nginx配置、域名申请、PM2 使用讲解

在学习本课程之前,你需要掌握一定的前端基础知识,包括 HTML、CSS、JavaScript 以及 Node.js,你可以在w3school进行基础知识的学习。另外如果你没有使用过 Vue.js,也可以先学习Vue.js快速上手。在本课程中,会结合页面更加深入地讲解。

接下来,就让我们愉快地开始实战项目之旅吧!

Tips:你可以去 Github 获取实战项目源码!!!

}
立即订阅 ¥ 48.00

你正在阅读课程试读内容,订阅后解锁课程全部内容

千学不如一看,千看不如一练

手机
阅读

扫一扫 手机阅读

从0到1 实战朋友圈移动Web App开发
立即订阅 ¥ 48.00

举报

0/150
提交
取消