项目演示
该项目目前正在开发中,因此本篇文章只展示其中一个页面内容,如下图:
前言
本篇文章将带你探索如何使用CodeBuddy IDE
结合Tencent CloudBase
,快速构建一个端云一体化的智能简历管理系统。通过这个实战项目,你将学习到现代化的全栈开发流程和最佳实践。
CloudBase AI ToolKit 概述
架构流程图如下:
使用CloudBase
的优势:
- 一人即可完成全栈开发
- 快速实现创意想法
- 零运维压力
- AI 驱动的开发体验
项目开发实战
第一步:选择项目模板
访问CloudBase模板中心,选择适合的项目模板:
模板名称 | 描述 | 下载地址 | 开源代码 | 适用场景 |
---|---|---|---|---|
微信小程序 + 云开发模板 | 云开发小程序解决方案模板,包含小程序基础配置。 | 代码包下载 | GitHub | 微信小程序开发 |
React Web 应用 + 云开发模板 | 现代化的 React 全栈应用模板,包含云开发集成配置。 | 代码包下载 | GitHub | Web 应用开发 |
Vue Web 应用 + 云开发模板 | 现代化的 Vue 全栈应用模板,包含云开发集成配置。 | 代码包下载 | GitHub | Web 应用开发 |
UniApp 跨端应用 + 云开发模板 | 基于 UniApp 的云开发跨端应用模板,可编译到 H5 和微信小程序。 | 代码包下载 | GitHub | 跨端应用开发(H5、微信小程序) |
AI 规则通用云开发模板 | 不限定语言和框架,内置 CloudBase AI 规则和MCP,适用于任意云开发项目。 | 代码包下载 | GitHub | 任意云开发项目 |
第二步:环境配置
- 选择
Vue Web 应用 + 云开发模板
- 下载并解压模板到本地
- 登录云开发平台创建环境
- 在
CodeBuddy IDE
中配置CloudBase环境:
点击Manage
按钮,选择开发环境:
第三步:功能开发
使用CodeBuddy的AI助手,通过自然语言描述快速实现功能。以下是一个简历模板管理功能的示例:
为当前文件新增功能, 注意需要使用组件化实现, 详细需求如下:
### 功能需求:简历模板管理系统 - 新增/编辑功能
#### 一、核心交互流程
1. **触发方式**
- 点击"新增模型"按钮 → 弹出模态框
- 点击表格行的"编辑"按钮 → 弹出模态框并自动填充当前行数据
2. **模态框设计要求**
- 标题:新增模型 / 编辑模型(根据操作自动变化)
- 关闭方式:右上角关闭按钮、点击遮罩层、取消按钮
- 必须包含确认/取消按钮,按钮文案为"保存"和"取消"
- 样式风格参考 TemplateFormDialog.vue 中的 样式风格
#### 二、表单字段规范
| 字段名 | 类型 | 界面组件 | 特殊说明 |
| -------- | ------- | -------------- | ------------------------------------------------------------------------- |
| name | string | 单行文本输入框 | - 字段长度限制1-50个字符 |
| enable | boolean | 开关组件 | - 控制模板是否在前端展示<br>- 默认为"开启"状态 |
| fileWord | File | 文件上传按钮 | - 仅支持.doc/.docx格式<br>- 上传后调用云函数`admin-file-upload`获取fileId |
| enable | boolean | 开关组件 | - 控制模板是否在前端展示<br>- 默认为"开启"状态 |
#### 三、文件存储规范
1. **文档文件**
- 存储路径:`template/xxx`
- 示例:`template/xxx.doxc`
#### 四、云函数调用规范
1. **文件上传**
- 云函数名称:`admin-file-upload`
- 调用时机:用户选择文件并点击上传按钮后
- 返回值处理:将云函数返回的fileId/fileIdPdf存入表单字段
2. **数据提交**
- 云函数名称:`admin-resume-model-crud`
- 调用时机:用户点击"保存"按钮且表单校验通过后
- 请求参数格式:
需要传递的参数如下:
```json
"name": "模板标题",
"enable": true,
"fileId": "文档ID",
```
具体的新增和编辑 参考`admin-resume-model-crud`云函数具体实现
实现效果:
核心代码实现
模板部分
<template>
<el-dialog
v-model="dialogVisible"
:title="isEdit ? '编辑模型' : '新增模型'"
width="500px"
:close-on-click-modal="false"
:destroy-on-close="true"
@close="handleClose"
custom-class="datav-dialog"
:modal-class="'datav-modal'"
>
<dv-decoration-8 class="dialog-header-decoration" :reverse="true" />
<dv-border-box-8 class="datav-form-container" :dur="5">
<el-form
ref="formRef"
:model="form"
:rules="rules"
label-width="80px"
label-position="right"
class="model-form"
>
<el-form-item label="模型名称" prop="name">
<el-input v-model="form.name" placeholder="请输入模型名称" maxlength="50" show-word-limit />
</el-form-item>
<el-form-item label="状态" prop="enable">
<el-switch
v-model="form.enable"
active-text="启用"
inactive-text="禁用"
:active-value="true"
:inactive-value="false"
/>
</el-form-item>
<el-form-item label="Word文档" prop="fileWord">
<div class="file-upload-container">
<el-upload
class="template-file-uploader"
action="#"
:http-request="uploadWord"
:show-file-list="false"
:before-upload="beforeWordUpload"
accept=".doc,.docx"
>
<el-button type="primary" class="tech-button tech-button--primary" :loading="submitting">
<el-icon><Upload /></el-icon>
{{ form.fileId ? '重新上传Word' : '上传Word文档' }}
</el-button>
</el-upload>
<div v-if="form.fileId" class="file-uploaded">
<el-icon><Document /></el-icon>
<span>已上传Word文档</span>
</div>
</div>
</el-form-item>
</el-form>
</dv-border-box-8>
<template #footer>
<dv-border-box-1 class="datav-dialog-footer-box">
<div class="datav-dialog-footer">
<el-button @click="handleClose" class="tech-button">取消</el-button>
<el-button type="primary" @click="submitForm" :loading="submitting" class="tech-button tech-button--primary">
保存
</el-button>
</div>
</dv-border-box-1>
</template>
<dv-decoration-8 class="dialog-footer-decoration" />
</el-dialog>
</template>
逻辑部分
<script>
import { ref, reactive, computed, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { app, ensureLogin } from '../../utils/cloudbase'
import dayjs from 'dayjs'
import { Plus, Upload, Document } from '@element-plus/icons-vue'
export default {
name: 'ModelFormDialog',
components: {
Plus,
Upload,
Document
},
props: {
visible: {
type: Boolean,
default: false
},
editData: {
type: Object,
default: () => null
}
},
emits: ['update:visible', 'refresh'],
setup(props, { emit }) {
// 表单引用
const formRef = ref(null)
// 对话框可见性
const dialogVisible = computed({
get: () => props.visible,
set: (val) => emit('update:visible', val)
})
// 是否为编辑模式
const isEdit = computed(() => !!props.editData)
// 表单数据
const form = reactive({
_id: '', // 添加 _id 字段用于更新操作
name: '',
enable: true,
fileId: '',
fileWord: null
})
// 提交状态
const submitting = ref(false)
// 表单验证规则
const rules = {
name: [
{ required: true, message: '请输入模型名称', trigger: 'blur' },
{ min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
],
fileWord: [
{ required: true, message: '请上传Word文档', trigger: 'change' }
]
}
// 重置表单
const resetForm = () => {
form.name = ''
form.enable = true
form.fileId = ''
form.fileWord = null
if (formRef.value) {
formRef.value.resetFields()
}
}
// 监听编辑数据变化
watch(() => props.editData, (newVal) => {
if (newVal) {
// 填充表单数据
form.name = newVal.name || ''
form.enable = newVal.enable !== undefined ? newVal.enable : true
form.fileId = newVal.fileId || ''
// 如果有文件ID,设置文件已上传状态
if (newVal.fileId) {
form.fileWord = true // 标记为已上传状态
}
} else {
// 重置表单
resetForm()
}
}, { immediate: true })
// 关闭对话框
const handleClose = () => {
dialogVisible.value = false
resetForm()
}
// Word文件上传前验证
const beforeWordUpload = (file) => {
const isDocx = file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
const isDoc = file.type === 'application/msword'
if (!isDocx && !isDoc) {
ElMessage.error('只能上传 .doc/.docx 格式的文件!')
return false
}
const isLt10M = file.size / 1024 / 1024 < 3
if (!isLt10M) {
ElMessage.error('文件大小不能超过 3MB!')
return false
}
return true
}
// 生成存储路径
const generatePath = (prefix) => {
const date = dayjs().format('YYYYMMDD')
const time = dayjs().format('HHmmss')
return `${prefix}/${date}/${time}`
}
// Word文件上传处理
const uploadWord = async (options) => {
try {
// await ensureLogin()
submitting.value = true
const file = options.file
// 转换为Base64
const reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = async (e) => {
const base64Content = e.target.result.split(',')[1]
try {
const result = await app.callFunction({
name: 'admin-file-upload',
data: {
fileContent: base64Content,
fileName: file.name,
folder: generatePath('template')
}
})
if (result.result && result.result.code === 0) {
form.fileId = result.result.data.fileId
form.fileWord = true // 标记为已上传
ElMessage.success('Word文档上传成功')
} else {
ElMessage.error(result.result?.message || 'Word文档上传失败')
}
} catch (error) {
console.error('Word文档上传失败:', error)
ElMessage.error('Word文档上传失败')
} finally {
submitting.value = false
}
}
} catch (error) {
console.error('Word文档读取失败:', error)
ElMessage.error('Word文档读取失败')
submitting.value = false
}
}
// 提交表单
const submitForm = async () => {
if (!formRef.value) return
await formRef.value.validate(async (valid) => {
if (!valid) return
try {
submitting.value = true
// 准备提交的数据
const submitData = {
name: form.name,
enable: form.enable,
fileId: form.fileId
}
// 调用云函数保存数据
const action = isEdit.value ? 'update' : 'create'
const functionData = {
action,
data: submitData
}
// 如果是编辑模式,添加ID
if (isEdit.value && props.editData._id) {
functionData.data._id = props.editData._id
}
const res = await app.callFunction({
name: 'admin-resume-model-crud',
data: functionData
})
if (res.result && res.result.code === 0) {
ElMessage.success(isEdit.value ? '编辑成功' : '添加成功')
dialogVisible.value = false
// 确保触发刷新事件
emit('refresh')
} else {
ElMessage.error(res.result?.message || (isEdit.value ? '编辑失败' : '添加失败'))
}
} catch (error) {
console.error(isEdit.value ? '编辑失败:' : '添加失败:', error)
ElMessage.error(isEdit.value ? '编辑失败' : '添加失败')
} finally {
submitting.value = false
}
})
}
return {
formRef,
dialogVisible,
isEdit,
form,
rules,
submitting,
handleClose,
beforeWordUpload,
uploadWord,
submitForm
}
}
}
</script>
效果图如下:
调试与问题解决
如果在开发过程中遇到问题,可以随时向AI助手提问:
总结
通过本项目的实践,我们不仅实现了一个功能完善的简历管理系统,更重要的是探索出一套高效的现代化开发模式。这种开发模式结合了AI助手的智能化和云开发的便捷性,大大提升了开发效率,同时保证了代码质量和项目可维护性。这对于快速构建企业级应用提供了一个很好的范例。