ZHOUYI-Homepage 个人主页前后端分离系统

" 🔥 ZHOUYI-Homepage "

基于Vue3、Express、MongoDB、JavaScript实现的个人主页前后端分离完整系统
（github）探索本项目的源码 » (gitee)探索本项目的源码 »
在线示例点这里 »

ZHOUYI-Homepage 是一款免费开源的个人主页系统，项目代码简洁,注释丰富,上手容易；同时还提供了一系列功能丰富的组件和工具，帮助开发者搭建个人主页简历网站和开发管理后台应用。

个人项目开源，欢迎大佬们提出您宝贵的建议和想法。

QQ群：529675917

项目功能特色

截图(管理后台+前台)

快速开始

默认你的电脑已经安装好Nodejs Vue MongoDB 以及代码编辑器等环境我的环境配置可参考：

Nodejs : v14.18.1
@vue/cli : v5.0.8
"express": "~4.16.1"
MongoDB: v6.0.5

克隆本仓库到本地

git clone https://github.com/ZHYI-source/ZHOUYI-Homepage.git

ADMIN/CLIENT/SERVER进入各个项目使用相同的命令安装依赖
```
npm install
```
使用navicat连接MongoDB数据库，然后新建数据库ZHOUYI_DB 默认无密码连接
在ZHOUYI_DB数据库运行SQL文件 SERVER/sql/ZHOUYI_DB.sql
ADMIN/CLIENT/SERVER本地启动注意前端启动后的自动打开浏览器的地址是 localhost:xxx 有的会加载不出来请点击启动好的另外一个地址：192.168.***
```
npm run dev
```
ADMIN/CLIENT打包生产环境
```
npm run build
```

ADMIN添加页面

增加普通路由

/**
 * 在主框架内显示
 * 路由配置说明
 * {
      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.1 在SERVER项目的models/v1/mapping 例如新建一张代码表：

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);