从零开始:搭建家校通全栈开发环境(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。

相关推荐
傻小胖13 小时前
React Fragment 和空标签(<></>)用法详细以及区别
前端·javascript·react.js
narukeu17 小时前
对于 TypeORM 精准&模糊查询的简单二次封装
typescript·node.js·express·typeorm
夫琅禾费米线20 小时前
Zustand selector 发生 infinate loops的原因以及解决
javascript·react.js·ecmascript
大梦百万秋1 天前
从零开始搭建一个RESTful API(Node.js + Express)
node.js·restful·express
Lawson1 天前
【内容梳理】<React性能优化>降低re-render之store
react.js
XianxinMao1 天前
多模态人工智能在零售业的未来:通过GPT-4 Vision和MongoDB实现智能产品发现
数据库·人工智能·mongodb
GISer_Jing1 天前
React中Fiber树构建过程详解——react中render一个App组件(包含子组件)的流程详解
前端·javascript·react.js
LZQ <=小氣鬼=>1 天前
小白:react antd 搭建后台框架记录问题1
前端·javascript·react.js
IT 前端 张1 天前
2025 最新React面试题
前端·react.js·前端框架
风清云淡_A1 天前
【react进阶】create-react-app高阶配置
前端·react.js