从零开始:搭建家校通全栈开发环境(React + Express + MongoDB)

目录

  • [1 开发工具选择](#1 开发工具选择)
  • [2 安装git](#2 安装git)
  • [3 安装nodejs](#3 安装nodejs)
  • [4 安装mongodb](#4 安装mongodb)
  • 总结

我们已经有了一个系列低代码搭建家校通的教程,有时候低代码有一些局限性,需要结合全代码来进行混合开发。这个系列呢就准备按照全栈的思路搭建一套家校通系统。系统包含三块,分为管理后台、小程序和H5。

管理后台是为管理员准备的,包括日常经常做的用户审核、配置权限、配置部门等。小程序和H5主要是为教师和家长准备的,日常可以进行沟通交流和提交作业还有在线学习和练习。

要想全栈开发,首先就是需要准备搭建开发环境。我们从零开始起步。

1 开发工具选择

生产软件,找到合适的工具是比较重要的,首先需要一个比较合适的集成开发环境。这里推荐vscode,主要是因为他免费,而且还可以安装各种辅助性的插件。

https://code.visualstudio.com/

点击Download for Windows就可以下载安装包

双击安装程序,同意协议点击下一步

修改默认的安装路径,改为D盘

下一步

下一步

点击安装

点击完成

工具安装好了之后,需要安装一下AI的扩展。现在AI已经发展的比较快了,有了AI的辅助可以节约不少时间。点击侧边栏的扩展,在搜索框里输入你可以使用的AI插件

搜索到了插件之后点击install就可以把插件安装到开发工具里

2 安装git

代码如果写了删,删了写有时候会有版本管理的问题。比如我可能上一个版本已经调试好了,加了一些功能之后就报错了,我想恢复到原来的状态,那本地安装一个版本控制工具是比较合适的,比较流行的是git

https://git-scm.com/

点击下载windows版本

选择64位的安装版本

双击安装

3 安装nodejs

我们这次全栈开发是基于nodejs,所以先需要安装一下运行环境

https://nodejs.org/en


双击安装

勾选接受协议

同样的将安装路径修改为D盘

一路next

nodejs还自带了包管理器npm。包管理器是我们的一个很方便的工具,可以下载那些好些人贡献的各种各样的库,基本上你能想到的功能都有别人做过了,直接拿来使用就可以

按win+r唤醒我们的命令行,输入cmd打开命令行窗口

输入如下命令,验证nodejs和npm是否正常安装成功

bash 复制代码
node -v
npm -v

4 安装mongodb

mongodb是一款文档型数据库,可以自由创建字段,比较适合我们这种经常有各类表单搭建的场景,下载地址

https://www.mongodb.com/try/download/community


双击安装

同意协议

点击自定义安装

修改安装路径,更改为D盘

点击下一步

数据库安装好之后我们用自带的图形化工具连接一下,先创建一个连接

URI保持默认,name自己输入就可以

默认会带的三个数据库,是mongodb自己使用的,日常我们可以不用去操作,在列表上点击创建数据库的按钮,我们自己创建一个数据库

mongodb在创建数据库的时候要求至少创建一个集合,集合就是关系型数据库表的概念,我们这里创建一个用户集合

mongodb是无模式数据库,意味着和mysql是不同的。mysql要求事先把表结构创建好之后再写入数据。mongodb事先不需要创建表结构,是在数据写入的那一刻同时保存结构和数据的,意味着你可以动态的修改字段。

总结

我们本篇按照全栈的结构搭建了我们需要的工具,如必备的集成开发环境vscode,必备的运行环境nodejs,版本控制工具git,数据库mongodb。把基础环境搭建好,我们在下一个篇就介绍前后端分离的基础目录,如安装配置react,搭建express。

相关推荐
赵大仁2 小时前
React vs Vue:点击外部事件处理的对比与实现
javascript·vue.js·react.js
Zero1017133 小时前
【React的useMemo钩子详解】
前端·react.js·前端框架
郝开17 小时前
扩展:React 项目执行 yarn eject 后的 scripts 目录结构详解
react.js·前端框架·react
xq51486319 小时前
Linux系统下安装mongodb
linux·mongodb
weifont20 小时前
React中的useSyncExternalStore使用
前端·javascript·react.js
初遇你时动了情20 小时前
js fetch流式请求 AI动态生成文本,实现逐字生成渲染效果
前端·javascript·react.js
几何心凉20 小时前
如何使用 React Hooks 替代类组件的生命周期方法?
前端·javascript·react.js
程序员拂雨1 天前
Express知识框架
node.js·express
zoe_ya1 天前
react-diff-viewer 如何实现语法高亮
javascript·react.js·ecmascript
郝开1 天前
扩展:React 项目执行 yarn eject 后的 config 目录结构详解
react.js·前端框架·react