diff --git a/docs/docs/.vitepress/config.js b/docs/docs/.vitepress/config.js index a0d6e48..2bae456 100644 --- a/docs/docs/.vitepress/config.js +++ b/docs/docs/.vitepress/config.js @@ -34,7 +34,8 @@ export default { text: '前端', collapsible: true, items: [ - { text: '封装 axios 请求库', link: '/project/frontend/axios-package' }, + { text: '环境变量和模式', link: '/project/frontend/env-var-modes' }, + { text: '网络请求库封装', link: '/project/frontend/axios-package' }, { text: '页面中的加载进度条', link: '/project/frontend/nprogress' }, ] }, diff --git a/docs/docs/.vitepress/theme/index.css b/docs/docs/.vitepress/theme/index.css index 895e929..6fa9e5a 100644 --- a/docs/docs/.vitepress/theme/index.css +++ b/docs/docs/.vitepress/theme/index.css @@ -5,7 +5,7 @@ /* 图标背景 */ --vp-home-hero-image-background-image: linear-gradient( 135deg, #97abf5 10%, #476FFF 100%); - --vp-home-hero-image-filter: blur(150px); + --vp-home-hero-image-filter: blur(100px); /* brand按钮 */ --vp-button-brand-border: #476FFF; diff --git a/docs/docs/about/about.md b/docs/docs/about/about.md index dd0684d..35e3d03 100644 --- a/docs/docs/about/about.md +++ b/docs/docs/about/about.md @@ -1,12 +1,12 @@ # 关于 -Crm（英文全称 Customer relationship management ）是一个免费、开源的客户关系管理系统，主要功能有仪表盘、客户管理、合同管理、产品管理、订阅等功能。 +Crm（英文全称 Customer relationship management ）是一个免费、开源的客户关系管理系统，主要功能有仪表盘、客户管理、合同管理、产品管理、配置、订阅等功能。 项目基于 Vue + Golang 实现，采用[MIT 许可证](https://github.com/zchengo/crm/blob/main/LICENSE)，使用完全免费。 ## 为何要开源 -做项目的同时把项目开源了，既能提升自己，又能帮助别人，岂不美哉！本项目会持续更新优化，希望这个项目能够给大家带来更多的学习参考价值。 +开源的目的是希望这个项目能够给大家带来更多的学习参考价值。 ## 作者简介 diff --git a/docs/docs/index.md b/docs/docs/index.md index cd21f08..dd43d9a 100644 --- a/docs/docs/index.md +++ b/docs/docs/index.md @@ -2,14 +2,14 @@ layout: home hero: - name: CrmSystem - text: Use Golang & Vue - tagline: 一个免费开源的客户关系管理系统。 + name: CRM DOCS + text: 客户关系管理系统 + tagline: 基于 Vue3 和 Golang 实现，适用于新手学习参考。 image: src: /logo.svg - alt: VitePress - width: 200 - height: 200 + alt: logo + width: 300 + height: 300 actions: - theme: brand text: 在线预览 @@ -17,4 +17,11 @@ hero: - theme: alt text: 查看代码库 link: https://github.com/zchengo/crm +features: + - title: 前端 + details: 采用 Vue3 框架，Axios 网络请求库，Pinia 状态管理，Vite 构建工具，Ant Design Vue UI组件库等。 + - title: 后端 + details: 采用 Go 语言，Gin Web 框架，Gorm ORM 框架，Jwt 用户认证，Viper 读取配置等。 + - title: 运维 + details: 采用 Nginx 作为代理服务器，GitHub Actions 作为持续集成和持续交付 (CI/CD) 平台。 --- \ No newline at end of file diff --git a/docs/docs/project/devops/deploy-cloudserver.md b/docs/docs/project/devops/deploy-cloudserver.md index 97f70bb..90435f5 100644 --- a/docs/docs/project/devops/deploy-cloudserver.md +++ b/docs/docs/project/devops/deploy-cloudserver.md @@ -1,6 +1,6 @@ # 部署到云服务器 -如果您打算将 Crm 系统部署到您自己的云服务器，您需要先注册一个域名和购买一台云服务器，然后在云服务器上进行环境安装、服务启动与配置、项目的构建与部署。 +如果您打算将 Crm 系统部署到您自己的云服务器上，您需要先注册一个域名和购买一台云服务器，然后在云服务器上进行环境安装、服务启动与配置、项目的构建与部署。 ## 注册域名 @@ -501,9 +501,8 @@ alipay: appPublicCert: /home/ubuntu/crm/cert/appPublicCert.crt alipayRootCert: /home/ubuntu/crm/cert/alipayRootCert.crt alipayPublicCert: /home/ubuntu/crm/cert/alipayPublicCert.crt - returnURL: http://127.0.0.1:8000/api/subscribe/callback - notifyURL: http://127.0.0.1:8000/api/subscribe/notify - paySuccessURL: http://127.0.0.1:8060/#/subscribe + returnURL: http://127.0.0.1:8060/#/subscribe + notifyURL: http://127.0.0.1:8000/api/subscribe/payback ``` **如何获取支付宝支付服务的 appId、privateKey、appPublicCert、alipayRootCert、alipayPublicCert ？** @@ -673,7 +672,6 @@ http { 如果您在部署过程中遇到了问题，您可以通过以下方式反馈： -- [在公众号后台反馈](/about/about) - [New Issues In Github](https://github.com/zchengo/crm/issues) ## 支持作者 diff --git a/docs/docs/project/docs/deploy-guide.md b/docs/docs/project/docs/deploy-guide.md index 6a9f3ed..bc535e7 100644 --- a/docs/docs/project/docs/deploy-guide.md +++ b/docs/docs/project/docs/deploy-guide.md @@ -6,7 +6,7 @@ ## 环境安装 -在您自己的电脑上，安装如下运行环境： +你需要在你的系统中，安装如下运行环境： | 环境 | 版本 | 下载地址 | |---|---|---| @@ -68,9 +68,8 @@ alipay: appPublicCert: /home/ubuntu/crm/cert/appPublicCert.crt alipayRootCert: /home/ubuntu/crm/cert/alipayRootCert.crt alipayPublicCert: /home/ubuntu/crm/cert/alipayPublicCert.crt - returnURL: http://127.0.0.1:8000/api/subscribe/callback - notifyURL: http://127.0.0.1:8000/api/subscribe/notify - paySuccessURL: http://127.0.0.1:8060/#/subscribe + returnURL: http://127.0.0.1:8060/#/subscribe + notifyURL: http://127.0.0.1:8000/api/subscribe/payback ``` **如何获取支付宝支付服务的 appId、privateKey、appPublicCert、alipayRootCert、alipayPublicCert ？** @@ -85,7 +84,7 @@ alipay: ### 初始化并运行 -使用电脑自带的终端执行执行如下命令，也可以使用 VS Code 或者 Goland 等开发工具，打开 crm 目录，找到 Terminal 终端。 +使用 VS Code 或者 Goland 等开发工具，打开 crm 目录，找到 Terminal 终端。 执行如下命令： @@ -106,7 +105,7 @@ $ ./server (windows运行命令为 server.exe) Node 环境正常。 ::: -使用电脑自带的终端执行执行如下命令，也可以使用 VSCode 或者 WebStom 等开发工具，打开 crm 目录，找到 Terminal 终端。 +使用 VSCode 或 WebStom 等开发工具，打开 crm 目录，找到 Terminal 终端。 执行如下命令： diff --git a/docs/docs/project/docs/getting-started.md b/docs/docs/project/docs/getting-started.md index 333cfd0..71c4f0d 100644 --- a/docs/docs/project/docs/getting-started.md +++ b/docs/docs/project/docs/getting-started.md @@ -42,4 +42,4 @@ $ npm run dev 项目初始化并运行成功后，打开浏览器访问http://127.0.0.1:8060。 -详细部署，请参考[部署指南](/project/docs/deploy-guide)。 \ No newline at end of file +有关 Crm 的详细部署文档，请参考[部署指南](/project/docs/deploy-guide)。 \ No newline at end of file diff --git a/docs/docs/project/docs/introduction.md b/docs/docs/project/docs/introduction.md index 95a6675..36239e6 100644 --- a/docs/docs/project/docs/introduction.md +++ b/docs/docs/project/docs/introduction.md @@ -6,7 +6,7 @@ ## 什么是 Crm ？ -Crm（英文全称 Customer relationship management ）是一个客户关系管理系统，主要功能有仪表盘、客户管理、合同管理、产品管理、订阅等功能。 +Crm（英文全称 Customer relationship management ）是一个客户关系管理系统，主要功能有仪表盘、客户管理、合同管理、产品管理、配置、订阅等功能。 - 在线演示：[zocrm.cloud](https://zocrm.cloud) @@ -14,6 +14,8 @@ Crm（英文全称 Customer relationship management ）是一个客户关系管 ## 技术栈 +Crm 系统主要采用 Vue3 和 Golang 实现。 + ### 前端技术 | 技术 | 说明 | 相关文档 | @@ -36,7 +38,8 @@ Crm（英文全称 Customer relationship management ）是一个客户关系管 | Jwt | 用户认证 | https://github.com/golang-jwt/jwt | | Viper | 配置管理 | https://github.com/spf13/viper | | Redis | 数据缓存 | https://github.com/go-redis/redis | -| Mail | 邮件服务SDK | https://github.com/go-gomail/gomail | +| Gomail | 邮件服务SDK | https://github.com/go-gomail/gomail | +| Gopay | 支付服务SDK | https://github.com/go-pay/gopay | ## 目录结构 @@ -59,6 +62,7 @@ crm ├── api // API层 ├── common // 通用的工具 ├── config // 配置文件 + ├── dao // 数据访问层 ├── db // 数据库 SQL 文件 ├── global // 全局对象 ├── initialize // 初始化 @@ -76,11 +80,14 @@ crm |── api // API接口 ├── assets // 资源 ├── axios // 网络请求 + ├── components // 自定义组件 ├── router // 页面路由 ├── store // 状态管理 ├── views // 页面 ├── App.vue // 组件入口 ├── main.js // 程序启动的入口 + ├── .env.dev // 开发模式环境变量 + ├── .env.prod // 生产模式环境变量 ├── index.html // 首页 ├── package-lock.json // Npm依赖管理 ├── package.json // Npm依赖管理 @@ -91,8 +98,6 @@ crm ├── README.md // 项目简介文档 ``` -想要了解有关 Crm 目录结构中的文件，请访问[github.com/zchengo/crm](https://github.com/zchengo/crm)代码库。 - ## 系统架构 Crm 系统采用前后端分离架构，前端与后端分开部署，且部署到同一台服务器。 @@ -103,4 +108,4 @@ Crm 系统采用前后端分离架构，前端与后端分开部署，且部署 ## 许可证 -Crm 是采用 MIT 许可的开源项目，使用完全免费。要了解有关 MIT 许可证的更多信息，请访问[MIT License](https://github.com/zchengo/crm/blob/main/LICENSE)。 \ No newline at end of file +Crm 是采用 MIT 许可的开源项目，使用完全免费。想要了解有关 MIT 许可证的更多信息，请访问[MIT License](https://github.com/zchengo/crm/blob/main/LICENSE)。 \ No newline at end of file diff --git a/docs/docs/project/docs/problem-feedback.md b/docs/docs/project/docs/problem-feedback.md index dbe6ad5..a9710fc 100644 --- a/docs/docs/project/docs/problem-feedback.md +++ b/docs/docs/project/docs/problem-feedback.md @@ -2,5 +2,4 @@ 在使用过程中遇到了问题，您可以通过以下方式反馈： -- [在公众号后台反馈](/about/about#关注作者) - [New Issues In Github](https://github.com/zchengo/crm/issues) \ No newline at end of file diff --git a/docs/docs/project/frontend/axios-package.md b/docs/docs/project/frontend/axios-package.md index ae14f8e..2f285af 100644 --- a/docs/docs/project/frontend/axios-package.md +++ b/docs/docs/project/frontend/axios-package.md @@ -1,6 +1,8 @@ -# 封装 axios 请求库 +# 网络请求库封装 -## 什么是 axios？ +Crm 系统采用 axios 作为网络请求库。 + +## 什么是 axios ？ axios 是浏览器和 node.js 的一个简单的基于 promise 的 HTTP 客户端。axios 在一个具有非常可扩展界面的小软件包中提供了一个简单易用的库。 @@ -12,26 +14,16 @@ axios 是浏览器和 node.js 的一个简单的基于 promise 的 HTTP 客户 ```js import axios from 'axios'; -import router from '../router/index'; import { message } from 'ant-design-vue'; -const host = window.location.hostname - -switch (host) { - case 'zocrm.cloud': - axios.defaults.baseURL = 'https://zocrm.cloud/api' - break; - default: - axios.defaults.baseURL = 'http://127.0.0.1:8000/api' - break; -} +axios.defaults.baseURL = import.meta.env.VITE_API_BASE_URL const request = axios.create({ - timeout: 5000, + // timeout: 5000,` headers: { 'Content-Type': 'application/json;charset=UTF-8' } -}); +}) request.interceptors.request.use(config => { config.headers['uid'] = localStorage.getItem('uid') @@ -47,7 +39,6 @@ request.interceptors.response.use(response => { return response; }, error => { console.log(error) - router.push('/error'); return Promise.reject(error) }) @@ -57,29 +48,20 @@ export default request; ### 初始化请求的 baseURL ```js -const host = window.location.hostname - -switch (host) { - case 'zocrm.cloud': - axios.defaults.baseURL = 'https://zocrm.cloud/api' - break; - default: - axios.defaults.baseURL = 'http://127.0.0.1:8000/api' - break; -} +axios.defaults.baseURL = import.meta.env.VITE_API_BASE_URL ``` -通过 ```window.location.hostname``` 获取主机名（不包含端口号），主机名指的是 ```IP地址``` 或 ```域名```，然后根据不同的主机名，设置不同的 ```axios.defaults.baseURL```。 +通过 ```import.meta.env.VITE_API_BASE_URL``` 获取环境变量。 ### 设置请求超时时间与请求头 ```js const request = axios.create({ - timeout: 5000, + // timeout: 5000,` headers: { 'Content-Type': 'application/json;charset=UTF-8' } -}); +}) ``` ### 请求拦截与响应拦截 @@ -107,13 +89,10 @@ request.interceptors.response.use(response => { return response; }, error => { console.log(error) - router.push('/error'); return Promise.reject(error) }) ``` -后端响应的数据会先被 axios 拦截，如果响应的结果是正确的，会直接返回响应结果，然后将数据渲染到指定的页面；如果响应的结果是错误的，会路由到错误页面。 - 了解有关 axios 请求拦截与响应拦截的更多信息，请访问[axios interceptors](https://github.com/axios/axios#interceptors)。 diff --git a/docs/docs/project/frontend/env-var-modes.md b/docs/docs/project/frontend/env-var-modes.md new file mode 100644 index 0000000..2867f1a --- /dev/null +++ b/docs/docs/project/frontend/env-var-modes.md @@ -0,0 +1,95 @@ +# 环境变量和模式 + +Crm 采用 Vite 提供的环境变量与模式，来设置应用的环境变量与运行模式。 + +了解有关 Vite 环境变量与模式的更多信息，请参考文档[Vite 环境变量与模式](https://vitejs.dev/guide/env-and-mode.html#env-files)。 + +## 创建 ```.env``` 文件 + +在 ```crm/web/``` 目录下创建 ```.env``` 文件，Vite 会从你的 ```环境目录``` 中的下列文件加载额外的环境变量： + +```txt +.env # 所有情况下都会加载 +.env.local # 所有情况下都会加载，但会被 git 忽略 +.env.[mode] # 只在指定模式下加载 +.env.[mode].local # 只在指定模式下加载，但会被 git 忽略 +``` + +在 Crm 系统中，只定义了开发模式与生产模式： +```txt +.env.dev # 开发模式的环境变量 +.env.prod # 生产模式的环境变量 +``` + +## 定义环境变量 + +分别在开发模式和生产模式中定义开发环境和生产环境所需要环境变量。 + +请参考 ```crm/web/.env.dev``` 文件如下： + +```txt +# .env.development +VITE_API_BASE_URL=http://127.0.0.1:8000/api +VITE_FILE_UPLOAD_URL=http://127.0.0.1:8000/api/common/file/upload +``` + +请参考 ```crm/web/.env.prod``` 文件如下： + +```txt +# .env.production +VITE_API_BASE_URL=https://zocrm.cloud/api +VITE_FILE_UPLOAD_URL=https://zocrm.cloud/api/common/file/upload +``` + +## 加载环境变量 + +通过 ```import.meta.env``` 来获得环境变量： + +```js +console.log(import.meta.env.VITE_API_BASE_URL) // http://127.0.0.1:8000/api +console.log(import.meta.env.VITE_FILE_UPLOAD_URL) // http://127.0.0.1:8000/api/common/file/upload +``` + +请注意，Vite 只会加载以 ```VITE_``` 为前缀的变量。 + +在 ```crm/web/src/axios/index.js``` 中加载环境变量： + +```js +import axios from 'axios'; +import { message } from 'ant-design-vue'; + +axios.defaults.baseURL = import.meta.env.VITE_API_BASE_URL + +const request = axios.create({ + // timeout: 5000,` + headers: { + 'Content-Type': 'application/json;charset=UTF-8' + } +}) +... +``` + +## 运行模式 + +在 ```crm/web/package.json``` 中添加运行模式，请参考如下： + +```json +{ + "name": "web", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite --mode dev", + "build": "vite build --mode prod", + "preview": "vite preview" + }, + "dependencies": { + ... + }, + "devDependencies": { + ... + } +} +``` +