专栏介绍
前端存在知识点杂多、技术迭代快的特点,对于初学者或者非前端开发者往往会一脸懵逼。准备写一个系列,将前端各个知识点逐个介绍,最后再详细介绍「课程减减」这个网站如何从零开始开发,包含前后端的开发,以及最后部署上线。
前端整体结构可以理解为上边的图,底层的硬件、操作系统部分我们不关心,谷歌开源了 V8 引擎,它可以运行 js 语言,基于此又有了 Chrome 浏览器和 Node.js。- 浏览器可以运行 html/css/js 的代码,渲染网页并且提供交互能力。在原生的 js 的基础上,又诞生了Vue/React,可以提升网页开发效率。
- Node.js 目前有两方面作用,一方面是写脚手架或者一些命令行工具,比如 Webpack。另一方面可以搭建 HTTP 服务器,提供后端接口,比如使用 koa 框架。
课程会详细介绍各个知识点的来龙去脉,目录如下:
共 15 节,每节平均几块钱,未来还会按需求更新。适合人群
对编程感兴趣的在校学生。
前端初学者:简单学习了 html、css、js,对其他概念还不太了解,也没有独立开发项目的经验。
其他开发人员:不管是后端、算法、测开等,只要有过编程经验,都可以轻松地跟上课程。
收获什么
会了解前端的整体架构,各个部分的作用,跟着教程可以搭建出「课程减减」这个网站。
包含前后端整个开发过程的详细介绍,以及最后会将网站部署。整个课程下来,会对前端有一个大体的认知,未来想写其他的网站也不再迷茫,该干什么, 需要做什么都做到心中有数。
购买须知
购买后可以在电脑和手机直接阅读:
- 电脑端浏览器访问 https://xiaobot.net/subscribed,体验更佳。
- 在微信中关注【小报童投递】服务号,关注后点击菜单栏,即可进入小报童首页,看到订阅的专栏。
加餐 2 一文轻松入门 css
对于初学者,css 一定是一个令人头疼的东西,它和之前学习的任何编程语言都不一样,更多的是一种需要记忆并且理解的东西。css 存在很多奇技淫巧,但 90% 的时间只要知道了一些基本的概念足够了,......
加餐 1 搭建网站之自建数据库
这篇文章作为数据存储的一个补充,主要是一些概念解释和代码执行。
搭建网站之数据 和 搭建网站之云存储 我们分别用 Excel 和云数据库保存了数据,两者的优缺点如下:
14. 搭建网站之云存储
已经进入实战篇,包含大量代码,建议在电脑前边看编写
我们已经成功上线了网站 test.coursesub.top/ ,但接口里的数据是通过 EXCEL 保存的,没有用......
13. 搭建网站之部署
本文需要提前购买 域名和服务器。
将线上后端地址更新为要配置的域名,修改 src/api/server.js:
12. 搭建网站之交互
已经进入实战篇,包含大量代码,建议在电脑前边看编写
搭建网站之 UI 这篇文章已经把 UI 全部完成了,本篇实现用户的简单交互并且去请求后端接口拿到数据进行渲染。
定义接口
11. 搭建网站之后端
已经进入实战篇,包含大量代码,建议在电脑前边看编写
搭建网站之数据 中抓了掘金的接口,这篇文章我们就读取保存的数据,为自己的网站提供两个 HTTP 接口。
KoaHTTP......
10. 搭建网站之数据
已经进入实战篇,包含大量代码,建议在电脑前边看编写
这里以掘金的课程数据为例进行分析。
寻找接口打开 掘金小册 页面的控制台,查看 Network,先切到 Fetch/X......
9. 搭建网站之 UI
已经进入实战篇,包含大量代码,建议在电脑前边看编写
首先来拆分一下网站 UI 的区域:
UI 总共分三大块,header 部分,body 部分以及 footer 部分。
8. react
回忆一下 浏览器之 js 通过 js 写了一个计数器:
index.html:
7. webpack
回忆 Node.js 第三方模块 这篇文章所说的,webpack 可以看成一个命令行工具。它的作用是进行代码的打包,目前是前端开发中不可或缺的工具之一。
核心作用前端模块化 这篇文章......
去【 小报童 】查看专栏详情