需求出发点
- 随机生成数据
- 转换数据
- JSON数据处理
以上3种场景，目前主包是不能忍受一直找了，即使收藏了也得一个个翻，所以趁着自己有空闲服务器资源+AI辅助coding，花费1个小时，完工小工具合集
先看整体效果
体验地址在文章末尾
开发过程
环境工具准备
- Node.js 18 环境
- AI编程工具，我这里以Cursor为例
- trae或者其他也可
- Prompt可以理论上都可行
项目创建
本次实践为纯前端方案：Vue3+Js+element-plus
- 在node环境基础上，使用npm创建vue3项目
1
2
3
4
5
6
7
8
9
10
11
| # 可检查node和npm的版本
node -v
npm -v
# npm 安装vue-cli
npm install -g @vue/cli
# 查看vue版本
vue --version
# 安装element-plus UI库
npm install -g @element-plus
# 创建vue项目
vue create 项目名称
|
- 创建好vue项目以后，我这边用cursor打开
npm run serve 启动
- 使用的coding模型为Claude-4.5
主页面布局
- 总布局 Prompt
1
2
3
4
5
6
7
8
9
10
11
12
13
| 1. 新创建一个文件，作为前端展示总布局页面
- 布局页面作为components应用于全局
2. 布局要求如下
- header在页面的上方，高度占比总高度的15%
- footer在页面的下方，高度占比总高度的15%
- 两者的宽度和窗口宽度一致
- 色彩要求为淡色系，渐变，清新风
3. header里面内容
- h2文字标题：xxxxxx
- 紧挨着下方有一行h3文字：xxxx
- 在heade的靠近底部的3px上方有椭圆形按钮，
如数据处理，时间处理等
4. 点击数据处理，时间处理按钮时，要求是跳转至views对应的页面
|
部分生成代码示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| router内index.js
import { createRouter, createWebHashHistory } from 'vue-router'
const routes = [
{
path: '/',
redirect: '/json-diff'
}
{
path: '/json-diff',
name: 'JsonDiff',
component: () => import('@/views/JsonDiff.vue')
},
{
path: '/encry-method',
name: 'EncryMethod',
component: () => import('@/views/EncryMethod.vue')
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
|
运行之后
可以看到：
- 布局页面会创建在components文件夹内
- 上面是header
- 下面是footer
- 写好代码，刷新页面即可看到效果（不刷新按说也能加载，因为有热更新）
子页面数据
2.数据JSON对比 Prompt
1
2
3
4
5
6
7
8
9
10
| 1. 在views创建好JsonDiff.vue文件
- 确保router.js里面和总布局文件内路由填写正确
2. 在JsonDiff.文件内用el-card组件铺满除了head和footer的中间部分
3. el-crad内的布局为左右两个textarea，可以粘贴json串
4. 下方有一排椭圆按钮
- 按钮1：格式化json按钮，可以将json字符串格式化
- 按钮2：对比结果按钮，可以两个json字符串的不同，左侧textarea为主，如果右侧texarea区域json哪行不一样，则标红提示
- 如果不是标准的json字符串，要提示非标准格式字符串，无法对比
- 如果可以，两个textarea的左侧可以显示行号
- 按钮3：清空按钮，一键清空左右两侧区域的json字符串
|
部分生成代码示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| <script>
export default {
name:"JsonDiff"
data(){
return {
leftJson: "",
rightJson: "",
leftLines: [],
rightLines: [],
diffResult: []
}
},
methods:{
highlightDifferences() {
this.$nextTick(() => {
const rightTextarea = this.$refs.rightTextarea
if (rightTextarea) {
this.applyHighlight()
}
})
},
}
}
</script>
|
运行之后
可以看到实现的效果
- 左右json展示区
- 格式化json
- 对比json差异结果
AI辅助Coding体会
- 主包没有经过专业的Prompt学习，就是按照自己把自己的想法用文字叙述出来，所有有些时候生成的效果不尽人意
- 在效果不尽人意或者差一点的情况下，这时候如果自身是有点基础的，那么修改相对更快
- 让工具为我们做事情，不过分依赖工具，主包承认最近有点依赖，习惯了以后该有的基本功会慢慢退化
- 最重要的还是自己的想法，个人或者团队当前遇到的问题，使用AI辅助实现将其解决，才能将AI价值最大化
体验地址：http://www.lchyang.cn:8003
也欢迎来一起交流测试以及其他方面的内容，共同进步~！！！
