Skip to main content

前端开发教程

自定义Web站点

CloudCC系统支持，部署独立的Web站点到系统，并使用站点菜单的方式使用

项目类型

支持react，vue2，vue3纯前端项目。

不支持SSR服务器端渲染类型的Web项目，如Next，Nuxt，Svelte。

如果项目中使用了路由，那么路由模式必须是hash模式，不支持history模式，否则刷新浏览器时会出现404.

创建项目

以vue3项目为例

vue create myVue3

选择vue3

其他默认选择，等待项目创建完成

项目创建成功

使用开发工具打开，这里推荐vs code编辑器，按需求开发项目

打包项目

当我们按需求开发完项目后，就可以打包部署了，打包前需要调整下打包配置

  • 打包前需要配置使用相对路径，否则项目会报404
    • 使用 vue.config.js (Vue CLI 2/3/4)
    • 在项目根目录（与 package.json 同级）创建/修改 vue.config.js 文件。
module.exports = {
  // 设置为 './'，所有资源路径都会变成相对路径 (例如：./js/app.js)
  publicPath: './',
  ...
};
    • 使用 vite.config.js (Vue 3 + Vite)，创建/修改 vite.config.js 文件。
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  base: './', 
});
    • vite.config.js (React + Vite)，创建/修改 vite.config.js 文件。
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  base: './',
  plugins: [react()]
})
    • vue，react，angular，框架型项目，一般都提供build命令，使用npm run build，会在根目录创建dist文件夹。
    • 压缩打包产物，备用上传

⚠️注意：压缩项目的时候，必须在dist文件夹内进行压缩压缩，如下图所示

部署项目

登录CRM系统，访问后台设置——》开发者空间——》站点，点击右侧新建

按要求填写信息，点击保存

在列表页，选择刚才创建的站点，进入详情页

点击上传项目包。选择刚才压缩的dist压缩包。目前仅支持zip压缩包。

使用站点

  • 使用站点外部地址独立访问使用
  • 站点菜单。进入后台设置定制——》菜单

新建站点菜单，选择刚才创建的站点，按需求配置简单和应用。

配置完成后，可以去前台使用 。选择全部菜单，查找刚刚创建的菜单，点击查看

如何访问自定义类

⚠️只有使用站点菜单访问的方式，才能访问自定义类，使用独立地址访问的方式无法使用
  • 首先要安装axios网络请求库
npm install axios
  • 在项目src下创建http.js，将以下代码复制进去
import axios from 'axios'
const service = axios.create({
    timeout: 60 * 1000,
    headers: {
        'Content-Type': 'application/json; charset=utf-8',
    },
})
// 请求拦截器
service.interceptors.request.use(
    config => {
        // 在请求头中添加accessToken，访问CRM系统，打开浏览器控制台，
        // 输入 $CCDK.CCToken.getToken() ，将返回的文本复制到下面
        config.headers.accessToken = window.parent.$CCDK?.CCToken?.getToken()||''
        // 设置baseURL，访问CRM系统，打开浏览器控制台，
        // 输入 window.Glod['ccex-apitsf'] + '/api/openCall/common' ，
        // 将返回的文本复制到下面
        config.baseURL = (window.parent.Glod?.['ccex-apitsf'] + '/api/openCall/common')||''
        return config
    },
    error => {
        Promise.reject(error)
    }
)

// 响应拦截器
service.interceptors.response.use(
    response => {
        if (response.data.result) {
            return response.data
        } else {
            return Promise.reject(response)
        }
    },
    error => {
        return Promise.reject(error)
    }
);


export default {
    post: (className, methodName, params, config) => {
        // 如果开发环境，则返回servic，如果生产环境，则使用$CCDK.CCCommon.post(className,methodName,params)
        if (process.env.NODE_ENV === 'development') {
            return service({
                method: 'post',
                data: { className, methodName, params },
                ...config
            })
        } else {
            return window.parent.$CCDK.CCCommon.post(className, methodName, params, config)
        }
    },
}

访问自定义类，引入刚刚创建的http.js文件，使用post请求自定义类

本地测试

  • 启动本地项目进行测试前，需要先配置以下两个参数。
# config.headers.accessToken
# 访问CRM系统，打开页面控制台，输入以下代码获取token。token具有实效性，提示无效时需要重新获取。

$CCDK.CCToken.getToken()
# config.baseURL
# 访问CRM系统，打开页面控制台，输入以下代码获取接口地址。每个环境的baseURL都不一样。

window.Glod['ccex-apitsf'] + '/api/openCall/common'