基于Vue3、Express、MongoDB、JavaScript实现的个人主页前后端分离完整系统
探索本项目的源码 »
在线示例点这里 »
教程文档 (更新中) »
[](https://choosealicense.com/licenses/mit/)
## 快速开始
默认你的电脑已经安装好`Nodejs` `Vue` `MongoDB` 以及代码编辑器等环境
我的环境配置可参考：
``` shell
Nodejs : v14.18.1
@vue/cli : v5.0.8
"express": "~4.16.1"
MongoDB: v6.0.5
```
1. 克隆本仓库到本地
```
git clone https://gitee.com/Z568_568/PersonalSite.git
```
2. ADMIN/CLIENT/SERVER进入各个项目使用相同的命令安装依赖
```
npm install
```
3. 使用navicat连接MongoDB数据库，然后新建数据库`ZHOUYI_DB` 默认无密码连接
4. 在ZHOUYI_DB数据库运行SQL文件 `SERVER/sql/ZHOUYI_DB.sql`
3. ADMIN/CLIENT/SERVER本地启动 **注意**前端启动后的自动打开浏览器的地址是 localhost:xxx 有的会加载不出来 请点击启动好的另外一个地址：192.168.***
```
npm run dev
```
4. ADMIN/CLIENT打包生产环境
```
npm run build
```
## ADMIN添加页面
1. 增加普通路由
```js
/**
* 在主框架内显示
* 路由配置说明
* {
path: '/dir-demo-info', // 页面地址（唯一）
name: 'dir-demo-info', // 页面名称（唯一）
hidden: false, // 隐藏（不展示在侧边栏菜单）
meta: {
title: '用户管理', // 页面标题
icon: 'yonghuguanli', // 页面图标
cache: true, // 页面是否进行缓存 默认true
link: false, // 页面是否是外链 默认false
frameSrc: false, // 页面是否是内嵌 默认false
requiresAuth: true, // 页面是否是需要登录 默认true
perms: [ // 页面的操作的权限列表
'sys:user:list', // 查询
'sys:user:create', // 增加
'sys:user:update', // 更新
'sys:user:delete', // 删除
],
},
component: () => import('@/views/sys/user/dir-user-info.vue'),
}
*
*/
```
---
2. 添加带有接口的前后端的页面（可以使用代码生成器）
2.1 在SERVER项目的`models/v1/mapping` 例如新建一张代码表 ：
``` js
const mongoose = require('mongoose')
let CodeSchema = new mongoose.Schema({
name: {
type: String,
required: true,
comment: '文件名称'
},
type: {
type: String,
comment: '文件类型'
},
url: {
type: String,
comment: '下载地址'
},
remark: {
type: String,
comment: '备注'
},
}, {
timestamps: true,
versionKey: false, // 设置不需要version _V:0
});
module.exports = mongoose.model('codes', CodeSchema);
```
2.2 回到管理系统页面进入代码生成模块，选择对应的表，填写相关信息，点击创建
2.3 可以在这里下载，也可以找到 `SERVER\uploads\codes` 将对应的文件复制到对应的文件夹中
2.4 然后找到管理端的权限管理添加对应的权限就可以做完完整的前后端基础crud功能页面了
## 贡献
欢迎对PersonalSite项目的改进和完善，如果您发现任何错误或有任何建议，请随时提交问题和拉取请求。
## 版权
PersonalSite是一个开源项目，根据MIT许可证发布。有关更多信息，请参阅LICENSE文件。
## 联系方式
如果你有任何问题或建议，请通过以下方式联系我：
- 邮箱：1840354092@qq.com
- 微信：
## 赞赏作者
## 其他相关开源项目
>[😜博客全栈系统 vue2 + node.js](https://gitee.com/Z568_568/all-blog-sys.git)
>[个人文件管理+图床管理服务系统](https://gitee.com/Z568_568/zy.files.sys.git)
>[node+mysql后端api基础服务模板](https://gitee.com/Z568_568/zy-express-sequelize-mysql)
>[node+mongodb开发REST API 的轻量级样板](https://gitee.com/Z568_568/node.mongodb)