从 GitHub 获取代码

git clone https://github.com/SX-Code/naive-ui-admin-js.git

目录说明

.
├── guigu-oa-admin # 管理端
├── guigu-oa-web # 员工端
├── server # 后端服务
├── Dockerfile # 后端docerfile
└── docker-compose.yaml # 后端docker部署

项目部署

安装 Node.js

如果您电脑未安装Node.js，请安装它。

验证

# 出现相应npm版本即可
npm -v
# 出现相应node版本即可
node -v

如果你需要同时存在多个 node 版本，可以使用 Nvm 或者其他工具进行 Node.js 进行版本管理。

数据库部署

创建数据库guigu-oa

CREATE DATABASE IF NOT EXISTS gugui-oa;

使用sql文件导入表结构和数据

guigu-oa.sql

服务器部署

服务器源码为server文件，使用IDEA工具编写，还请使用IDEA打开项目，包管理工具为Maven。

配置文件

打开servuce-oa/src/main/resources/application-dev.yaml，修改配置信息

application-dev.yaml
spring:
  datasource:
    username: root
    password: xxxxxxxx
  redis:
    password: xxxxxxxx
wx:
  mp:
    app-id: xxxxxxxxxxxxxxxxxx
    secret: xxxxxxxxxxxxxxxxxxxxxxx
wechat:
  prefix: http://xxxxxx.yyy.cn
  • app-id：微信公众号的appId
  • secret：微信公众号的secret
  • prefix：微信公众号的授权回调页面域名

👈获取方式：微信公众号测试申请

启动项目

找到ServiceAuthApplication.java或者使用IDEA工具启动项目

测试启动

访问项目使用的Swagger文档地址：http://localhost:8800/doc.html

目录说明

.
├── server # 打包脚本相关
│   ├── common # 项目common模块
│   ├── model # 项目model模块
│   ├── service-oa # 项目主服务模块
│   └── pom.xml # 依赖管理文件

管理端部署

管理端的源码为guigu-oa-admin文件，为Vue CLI项目，可以使用Visual Studio Code打开。

该项目基于Naive Ui Admin修改开发，更多可以参考其官方文档

安装依赖

使用npm安装

npm i

npm script

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint",
  "lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/"
},

配置文件

修改vue.config.js，更改服务器的代理地址

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
  // 基本路径
  publicPath: '/',
  outputDir: 'dist',
  // 开发环境配置
  devServer: {
    proxy: {
      [process.env.VUE_APP_API_URL_PREFIX]: {
        target: 'http://localhost:8800/',
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_API_URL_PREFIX]: ''
        }
      }
    }
  }
});

启动项目

使用npm启动项目

guigu-oa-admin
npm run serve

目录说明

详细目录说明可参考：Naive Ui Admin | 目录说明

.
├── views # 页面文件
│   ├── login # 登陆页面
│   ├── process # 审批流程
│   │   ├── list # 流程列表
│   │   ├── set # 审批模版设计
│   │   ├── template # 审批模版
│   │   └── type # 审批类型
│   ├── system # 系统管理
│   │   ├── menu # 菜单管理
│   │   ├── role # 角色管理
│   │   └── user # 用户管理
│   └── wechat # 微信公众号
│   │   └── menu # 微信公众号菜单

员工端部署

部署方式和管理端一样

目录说明

详细目录说明可参考：Naive Ui Admin | 目录说明

.
├── views # 页面文件
│   ├── apply # 发起审批页面
│   ├── debug # 测试页面
│   ├── list # 流程页面
│   ├── process # 首页面
│   └── show # 流程详情页面
└── login.vue # 登陆授权页面

快来参与讨论吧~