koajsAdmin已经开源了，element-ui + koa + mongodb 全栈搭建后台管理系统

Posted 2022-01-26 web前端神器

koajsAdmin介绍

koajsAdmin是一款后台管理框架，全栈用node进行开发。前端用的element-ui + vite进行构建，后端用的koa + mongodb进行构建。运行guiplan低代码开发工具即可快速建站，可视化配置数据库，可视化配置接口，可视化搭建后台界面。

---

文章目录

• koajsAdmin介绍
• 前言
• 一、前端使用步骤
• • 1.下载框架
  • 2. 安装前端插件
  • 3. 启动前端服务
  • 4. 停止服务
• 二、后端步骤
• • 1. 安装后端插件
  • 2.启动后端服务
  • 3.数据库连接配置
• 注册与登录
• • 1.注册
  • 2. 登录

---

前言

随着时代的进步各种框架也层出不穷，各种技术也在不断更新。我们也需要不断学习。 在之前的版本中还在用express + iview搭建前后端。而随着技术的更新升级，我们也不得不更换更好的框架，最新的技术。webpack也换成了vite。与时俱进所以软件也是非常的灵活，适用于大众。

---

一、前端使用步骤

1.下载框架

下载koajsAdmin开源框架

可直接下载也可以用git命令下载

git clone https://gitee.com/zhoushuigui/koajs-admin 

也可以打开软件之后直接点击按钮来下载

2. 安装前端插件

可直接输入命令
npm install

也可以在软件中点击一下图标自动安装，软件会检测当前项目是否下载，如果下载了会检测当前项目是否安装，未安装会出现一下安装按钮。

3. 启动前端服务

注意：启动之前电脑需要安装vite脚手架
输入以下命令
npm run dev

同样的如果项目已经安装也可以直接在软件中点击启动按钮来启动前端服务

4. 停止服务

关闭命令窗口即可
或者在软件中点击停止图标

二、后端步骤

1. 安装后端插件

后端代码全部放在servers文件夹中

打开这个servers文件夹目录，然后输入以下命令即可安装

npm install

2.启动后端服务

注意：后端服务启动需要nodemon插件支持，nodemon插件作用是每次修改后端代码即可自动重启后端服务。
可用以下命令全局安装nodemon
npm install nodemon -g
启动后端服务输入以下命令
npm run dev

3.数据库连接配置

koajsAdmin用的是mongodb数据，所以电脑需要安装mongodb数据库。
在.env文件夹中可以修改各种配置

详情请看以下注释

NODE_ENV=dev
SERVER_PORT=8086   // 服务端口号
DB_HOST=localhost  // 数据库地址
DB_NAME=koaadmin  // 数据库名称
DB_USER=   // 数据库用户名，无需密码登录可不填写
DB_PASSWORD= // 数据库密码  无需密码登录可不填写
DB_PORT=27017   // 数据库端口号
JWT_SECRET=[e-mail] // jwt校验码
JWT_EXPIRE=7d // jwt校验，目前用于登录的过期时间，d为天  7d则表示登录有效期为7天
STATIC_PATH=statics // 服务器静态资源地址
AUTH=HSKAHDJSODURUEE // 加密密钥，不同的项目可设置不同的加密方式

注册与登录

1.注册

数据库连接成功之后，我们就需要一个管理员账户。
前后端服务都启动之后在浏览器输入地址 http://locahost:3000 打开页面
然后点击下图位置进入注册页面
输入账户密码即可完成注册。
注意：管理员账户默认注册只支持admin,user。
为了后台数据的安全管理员账户不可随意注册。

如果管理员账户想用其他名字可找到以下文件直接修改代码即可

2. 登录

最后用注册好的账户登录即可，这样整个项目的前后端就全部打通了。
后续丰富页面与接口我们就可以利用guiplan可视化低代码开发工具来快速开发。
也可以自己手写代码二次开发。
具体视频教程可查阅官网。