作为一个 Java 开发者,前端页面的编写虽然也会用到,但是毕竟不是专业的。这里说的跨语言编程其实就是给当前的新增和修改页面增加一个可以调用阿里云百炼服务平台 DeepSeek 大模型服务生成公告内容,并将生成的公告内容放在编辑器中的操作,最后可以正常的保存到数据库。那么这里首先在页面新增 add 一个字段,作为关键词的输入框,并且增加一个按钮,点击则调用阿里云百炼服务平台 DeepSeek 大模型来获取返回的内容放入公告中。
这里对通义灵码 AI 程序员输入我的需求:【参考选中部分 帮我重新生成一个字段输入框,用多行文本的,文本框下面增加一个按钮,按钮名称为生成,选中部分不要变更】。
这里是AI 程序员基于我的需求生成的内容,先不说具体的内容,直接来选择接受,看下页面效果怎么样。选择接受后可以看到页面报错了,这个是因为在生成多行文本的输入框时,多生成了一个基于上面参考部分代码的一个输入框,这里去掉之后再部署页面尝试一下。
最后实际是在现有的add 页面代码上增加如下代码:
<div class="form-group"> <label class="col-sm-2 control-label">关键词prompt:</label> <div class="col-sm-10"> <textarea id="multiLineText" name="multiLineText" class="form-control" rows="4"></textarea> <button type="button" class="btn btn-primary" style="margin-top: 10px;" onclick="genera();">生成</button> </div> </div>
下面我们再继续生成按钮的js 方法,同样的原理,选中可以参考的 ajax 代码然后利用通义灵码 2.0 的AI 程序员生成一个调用接口生成公告内容的方法,同时将生成的内容放在公告内容字段,这里提出需求:【参考这段代码新生成一个js 方法,方法名是 gerena ,通过调用后端接口并将返回的内容放在公告内容字段中】。
下面回到后端,补充对应的生成公告内容的方法,这里需要基于阿里云百炼服务平台的 DeepSeek-R1 调用来生成公告内容,登录 阿里云百炼服务平台,首先获取API-KEY 。
然后选择【模型广场】,这里选择 【DeepSeek】-【DeepSeek-R1】。
点击【API调用示例】在跳转页面找到 HTTP 调用,复制HTTP 调用的示例代码,放在AI 程序员帮我们生成一个调用的方法。
在通义灵码2.0 的AI程序员输入我们的需求,生成之后选择接受后,会在指定的位置生成我们具体的内容,输入需求内容:
curl -X POST https://dashscope.aliyuncs.com/compatible-mode/v1/chat/completions -H "Authorization: Bearer $DASHSCOPE_API_KEY" -H "Content-Type: application/json" -d '{ "model": "deepseek-r1", "messages": [ { "role": "user", "content": "9.9和9.11谁大" } ] }' 生成java 示例代码
这里直接选择接受代码,接受代码之后我们在前端页面发起调用,但是这里对于这种富文本输入框,本身不太了解,也不会用,在 js 代码赋值的时候一直有问题,无法赋值,这里可以看到 console 控制台已经打印了 DeepSeek-R1 的返回内容,但是公告内容富文本框里面没有任何内容。
在尝试了多种赋值方式,包括 val() attr() = 等多种赋值方式没有成功,于是想到可以来问一下 AI 程序员,于是将js 代码中的赋值语句赋值到AI 程序员,选中赋值语句,提出问题:【$('.summernote').summernote('code') 如何赋值】 这时可以看到AI 程序员的具体分析以及提供的赋值语句,直接选择接受后再尝试。
给富文本框赋值的操作终于成功了。
下面提供一下新增页面【生成】 按钮的 js方法源码,以及生成按钮点击时调用的后端请求阿里云百炼大模型服务平台 DeepSeek-R1 模型放回文本内容的代码都放在这里,有需要的可以复制使用。
【生成】按钮前端js 方法
// 新增 genera 方法 function genera() { var multiLineText = $("#multiLineText").val(); if (!multiLineText) { $.modal.alertWarning("请输入关键词prompt。"); return; } $.ajax({ type: "POST", url: ctx + "system/notice/generateContent", data: { multiLineText: multiLineText }, dataType: 'json', success: function(result) { if (result.code == web_status.SUCCESS) { console.log(result.data); $('.summernote').summernote('code', result.data); } else { $.modal.alertError(result.msg); } }, error: function(error) { $.modal.alertWarning("生成内容失败。"); } }); } 调用阿里云百炼大模型服务平台 的 DeepSeek-R1 的后端调用方法 system/notice/generateContent 的详细内容 "/generateContent") ( String multiLineText) { ( String apiKey = "sk-f58bf46111222233355667777e18295d"; // 替换为实际的 Dashscope API Key String url = "https://dashscope.aliyuncs.com/compatible-mode/v1/chat/completions"; // 构建请求体 JSONObject requestBody = new JSONObject(); requestBody.put("model", "deepseek-r1"); JSONArray messages = new JSONArray(); JSONObject message = new JSONObject(); message.put("role", "user"); message.put("content", multiLineText); messages.add(message); requestBody.put("messages", messages); // 发送 POST 请求并处理响应 try { HttpURLConnection connection = (HttpURLConnection) new URL(url).openConnection(); connection.setRequestMethod("POST"); connection.setRequestProperty("Authorization",apiKey); connection.setRequestProperty("Content-Type", "application/json"); connection.setDoOutput(true); try (OutputStream os = connection.getOutputStream()) { byte[] inputBytes = requestBody.toString().getBytes(StandardCharsets.UTF_8); os.write(inputBytes, 0, inputBytes.length); } // 获取响应 int responseCode = connection.getResponseCode(); if (responseCode == HttpURLConnection.HTTP_OK) { try (BufferedReader br = new BufferedReader(new InputStreamReader(connection.getInputStream(), StandardCharsets.UTF_8))) { StringBuilder response = new StringBuilder(); String responseLine; while ((responseLine = br.readLine()) != null) { response.append(responseLine.trim()); } JSONObject parse = (JSONObject) JSON.parse(response.toString()); JSONArray choices = parse.getJSONArray("choices"); StringBuilder sb = new StringBuilder(); for (Object choice : choices) { JSONObject jsonObject = (JSONObject) choice; JSONObject message1 = jsonObject.getJSONObject("message"); String content = message1.getString("reasoning_content"); sb.append(content); } System.out.println(sb.toString()); return AjaxResult.success("success",sb.toString()); } } else { return AjaxResult.error("Error: " + responseCode); } } catch (Exception e) { e.printStackTrace(); return AjaxResult.error("Exception: " + e.getMessage()); } } }
体验经验总结
对于通义灵码2.0 的跨语言编程能力,真的是太意外了,出乎意料的好用。首先是生成的html新的属性输入框,生成之后就可以直接用,符合我们的业务需求。在说对于输入框下面的生成按钮的方法,也是生成之后可以直接使用,只是在具体给富文本框赋值的细节没有考虑到,刚开始一直无法赋值,后来多次尝试,就要放弃的时候试着问了一下 AI 程序员,没想到一次解决,出乎意料的惊喜。再说后端基于阿里云百炼服务平台的模型广场 DeepSeek-R1的API示例中的 HTTP 调用示例生成 java 调用示例,也是一次生成可用,几乎没有什么改动,这些都特别好,真的是可以大大提高开发效率的。
AI程序员价值分析
阶段 |
AI贡献 |
人工干预必要性 |
HTML输入框生成 |
80%代码自动生成 |
需删除冗余元素 |
JS请求方法生成 |
框架逻辑完整,但赋值部分需修正 |
需针对富文本库特殊性调整 |
Java后端请求代码 |
curl到Java转换准确率100% |
需人工补充异常处理、响应解析 |
调试建议 |
提供关键语法问题解决方案 |
需开发者验证可行性 |
AI程序员使用建议
· 高效场景:基础代码框架、API对接模板、语法问题快速查证。
· 需人工介入场景:业务逻辑适配、复杂数据处理、异常全路径测试。
相关链接:
【1】通义灵码下载安装:
https://help.aliyun.com/zh/lingma/user-guide/download-the-installation-guide
【2】阿里云百炼服务平台:
https://bailian.console.aliyun.com/?spm=a2c6h.12873639.article-detail.5.b5da7879AZLJaX#/home
🎁需要了解阿里云百炼可点击以下链接:
👉阿里云百炼详情了解可点击此官网链接:阿里云百炼官网介绍
👉阿里云百炼控制台页面可点击此链接直接进入:阿里云百炼控制台