Skip to content

欢迎!

This content is not available in your language yet.

在这个系列课程中,我们将学习如何使用JavaScript(JS)的变体Typescript(TS)制作一个全栈网站。
我们会基于主流的前后端分离开发模式,使用React.js作为前端框架,Express.js作为后端框架,MySQL作为数据库,一步步学习并制作一个完整的网站。
本教程的结课目标是完成一个“赛博冰箱”项目,这是一个可以记录冰箱物品、有效期、菜谱、购买清单等信息的网站。

前置要求

本课程默认你具备基础的HTML、CSS和JavaScript知识,如果你还不了解,可以先学习一下 MDN 的教程。

课程内容

本课程分为四大板块:语言基础、前端、后端和项目。在语言基础中,我们将会复习JavaScript的基础知识,并学习Typescript的基础知识。在前端板块,我们将会学习React.js的基础知识,并制作一个简单的React页面。在后端板块,我们将会学习Express.js的基础知识,并制作一个简单的Express页面。在项目板块,我们将会完成一个完整的项目。

适合我吗?

本课程的核心目标是教会你完成一个全栈网站,而不是深入教授你技术细节。课程的核心是激发你的兴趣并且告诉你如何学习一门语言、如何完成一个项目。因此如果你是一个初学者,目前不知道编程的意义在哪里,也不知道如何开始自己的第一个项目,那么这个课程非常适合你。但是如果你正在寻找一个可以直接帮助你完成入职面试的课程,那么这个课程可能不适合你。
这门课程的初衷是帮助计算机学生更好的理解软件开发的流程,并且了解一些类似于MySQL、JWT、OAUTH、RESTful API等概念。如果你已经有了许多基础并且完成过自己的项目。那么这门课程对你来说可能是多余的。

我会学到什么?

在这门课程中,你将会学到:

  • Typescript的基础知识
  • React.js的基础知识
  • Express.js的基础知识
  • MySQL的基础知识
  • Git的基础知识
  • 路由、中间件、数据库、API等技术概念
  • JWT、Restful API、OAUTH等统一协议
  • 软件开发流程
  • 项目上线和部署

最终,你的成果将会是一个可以记录冰箱物品、有效期、菜谱、购买清单等信息的网站。

软件安装

我们默认你已经安装了一个编辑器,这里推荐VSCode,VSCode的设计初衷就是为类JS语言设计的。我也尝试过JetBrains的WebStorm或高级版IntelliJ IDEA,这两个编辑器在对于JS/TS的支持可能不如VSCode,因此在此推荐VSCode。

纠错

如果你在学习过程中发现了错误,或者有任何问题,欢迎点击页面右下角的“编辑此页”按钮,通过GitHub的PR提交修改,帮助我们改进课程。

作者与版权

本教程作者为 Junxuan Bao。本教程采用 CC BY-NC-SA 4.0 协议发布,你可以在遵守协议的前提下自由分享、修改本教程,但是必须注明作者和链接,且不得用于商业用途。
你可以在进行合理署名的前提下:

  • 把本教程分享给朋友、学生
  • 基于教育目的在学校使用
  • 修改本教程以适应自己的需求
  • 印刷本教程以便离线阅读

你不可以:

  • 在收费的课程中使用本教程
  • 商业出版本教程
  • 以任何形式出售本教程
  • 在任何情况下不署名原作者
  • 以任何形式修改本教程的版权协议

说明

事先说明,作者目前只是大二学生并且没有系统性地学习过 TypeScript 或其他技术栈,只是单纯的凭借爱好和以运用为最终目的学习过相关知识。这个系列教程的所有最终导向都是“制作你的第一个项目”,因此在底层原理上可能有错误,请在阅读有关底层原理和逻辑的部分时进行额外的检索以避免这个教程给你带来误导内容。

隐藏内容

在这门课程中,我设计了一些隐藏内容。在遇到这些内容时,我希望你能够停下来,思考一下,自己尝试完成这部分内容,然后再查看答案。这样你会更好地理解这个知识点。

你会看到这样的隐藏内容
点击查看答案

让我们开始吧!

如果你已经准备好了,那就让我们开始吧!点击左侧的“语言基础”开始你的学习之旅!