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

相关推荐
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
中微子6 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
前端_学习之路7 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_7 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
甜瓜看代码8 小时前
1.
react.js·node.js·angular.js
伍哥的传说8 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
Misha韩9 小时前
React Native 一些API详解
react native·react.js
小李飞飞砖9 小时前
React Native 组件间通信方式详解
javascript·react native·react.js
小李飞飞砖9 小时前
React Native 状态管理方案全面对比
javascript·react native·react.js