# koajsAdmin **Repository Path**: bianyuan456/koajs-admin ## Basic Information - **Project Name**: koajsAdmin - **Description**: element-ui + koa + mongodb 搭建了一个简单的后台管理系统，支持账户的注册与登录，支持图片上传。 配合guiplan可视化低代码开发软件，可视化配置数据库，可视化配置接口，可视化制作页面，全自动生成代码。来丰富自己的项目。高效率开发节省80%以上的研发时间。开源免费给大家使用，也可以手写代码进行二次开发，也可以手写代码与生成代码混合开发。灵活好用，高效办公。 - **Primary Language**: NodeJS - **License**: MulanPSL-2.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 33 - **Created**: 2022-07-03 - **Last Updated**: 2022-07-03 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # koajsAdmin介绍 koajsAdmin是一款后台管理框架，全栈用node进行开发。前端用的element-ui + vite进行构建，后端用的koa + mongodb进行构建。运行guiplan低代码开发工具即可快速建站，可视化配置数据库，可视化配置接口，可视化搭建后台界面。
@[TOC](文章目录)
# 前言 随着时代的进步各种框架也层出不穷，各种技术也在不断更新。我们也需要不断学习。 在之前的版本中还在用express + iview搭建前后端。而随着技术的更新升级，我们也不得不更换更好的框架，最新的技术。webpack也换成了vite。与时俱进所以软件也是非常的灵活，适用于大众。
# 一、前端使用步骤 ## 1.下载框架 [下载koajsAdmin开源框架](https://gitee.com/zhoushuigui/koajs-admin) 可直接下载也可以用git命令下载 ``` git clone https://gitee.com/zhoushuigui/koajs-admin ``` 也可以打开软件之后直接点击按钮来下载 ![在这里插入图片描述](https://img-blog.csdnimg.cn/6079fb7f8c5844178fa9e5f8310e1f7f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2Vi5YmN56uv56We5Zmo,size_20,color_FFFFFF,t_70,g_se,x_16) ## 2. 安装前端插件 可直接输入命令 ```npm install``` 由于版本迭代太快，各种框架更新会导致install并不能很好的下载安装 我们将下载好的node_modules文件也一并上传上去，大家只需要把node,mongodb,nodemon环境安装好 然后直接npm run dev即可快速启动项目了 也可以在软件中点击一下图标自动安装，软件会检测当前项目是否下载，如果下载了会检测当前项目是否安装，未安装会出现一下安装按钮。 ![在这里插入图片描述](https://img-blog.csdnimg.cn/f99119cc447c4231a371a3de0d4d5dce.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2Vi5YmN56uv56We5Zmo,size_20,color_FFFFFF,t_70,g_se,x_16) 如果当前插件安装不成功，比如一些镜像没有配置好等。也可以下载免安装版 [下载koajsAdmin免安装版](http://template.guiplan.com/down) ## 3. 启动前端服务 注意：启动之前电脑需要安装vite脚手架 输入以下命令 ```npm run dev ``` 同样的如果项目已经安装也可以直接在软件中点击启动按钮来启动前端服务 ![在这里插入图片描述](https://img-blog.csdnimg.cn/a2e76d7be25043b69c6da1a03e174f5c.png) ## 4. 停止服务 关闭命令窗口即可 或者在软件中点击停止图标 # 二、后端步骤 ## 1. 安装后端插件 后端代码全部放在servers文件夹中 ![在这里插入图片描述](https://img-blog.csdnimg.cn/2bb4fc3a05bc40b3a9c832522cef202f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2Vi5YmN56uv56We5Zmo,size_12,color_FFFFFF,t_70,g_se,x_16) 打开这个servers文件夹目录，然后输入以下命令即可安装 ```npm install ``` ## 2.启动后端服务 注意：后端服务启动需要nodemon插件支持，nodemon插件作用是每次修改后端代码即可自动重启后端服务。 可用以下命令全局安装nodemon ```npm install nodemon -g``` 启动后端服务输入以下命令 ```npm run dev``` ## 3.数据库连接配置 koajsAdmin用的是mongodb数据，所以电脑需要安装mongodb数据库。 这是mongodb下载地址 [https://www.mongodb.com/try/download/community](https://www.mongodb.com/try/download/community) 在.env文件夹中可以修改各种配置 ![在这里插入图片描述](https://img-blog.csdnimg.cn/196d8f8a114649439e9294a01e5d6d6e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2Vi5YmN56uv56We5Zmo,size_12,color_FFFFFF,t_70,g_se,x_16) 详情请看以下注释 ``` NODE_ENV=dev SERVER_PORT=8086 // 服务端口号 DB_HOST=localhost // 数据库地址 DB_NAME=koaadmin // 数据库名称 DB_USER= // 数据库用户名，无需密码登录可不填写 DB_PASSWORD= // 数据库密码 无需密码登录可不填写 DB_PORT=27017 // 数据库端口号 JWT_SECRET=245509608@qq.com // jwt校验码 JWT_EXPIRE=7d // jwt校验，目前用于登录的过期时间，d为天 7d则表示登录有效期为7天 STATIC_PATH=statics // 服务器静态资源地址 AUTH=HSKAHDJSODURUEE // 加密密钥，不同的项目可设置不同的加密方式 ``` # 注册与登录 ## 1.注册 数据库连接成功之后，我们就需要一个管理员账户。 前后端服务都启动之后在浏览器输入地址 http://locahost:3000 打开页面 然后点击下图位置进入注册页面 输入账户密码即可完成注册。 注意：管理员账户默认注册只支持admin,user。 为了后台数据的安全管理员账户不可随意注册。 ![在这里插入图片描述](https://img-blog.csdnimg.cn/3cc691c3833646fca74995d58f5e784e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2Vi5YmN56uv56We5Zmo,size_20,color_FFFFFF,t_70,g_se,x_16) 如果管理员账户想用其他名字可找到以下文件直接修改代码即可 ![在这里插入图片描述](https://img-blog.csdnimg.cn/f05472b56e6047a6b1718a5a47725ca6.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2Vi5YmN56uv56We5Zmo,size_20,color_FFFFFF,t_70,g_se,x_16) ## 2. 登录 最后用注册好的账户登录即可，这样整个项目的前后端就全部打通了。 后续丰富页面与接口我们就可以利用guiplan可视化低代码开发工具来快速开发。 也可以自己手写代码二次开发。 具体视频教程可查阅官网。