耗时一天,我用AI开发了AI小程序

小码哥从事前后端开发近十年,但是随着技术的更新迭代,有时候没有时间和精力去优化UI、实现一些前后端功能,以及解决一些bug。特别是我想开发小码哥AI的移动端,但觉得自己没有那么多时间去研究移动端了,准备放弃了,后来尝试了 国产AI(后面会介绍),测试了一下,完全能满足我的开发需求,瞬间感觉我又行了。

AI一边帮我写代码,我一边刷剧,不吹牛P的,可以看看我的成果。我使用uniapp框架,一举多得,可以发布微信小程序、h5页面、手机端app,目前微信小程序、h5都是已经跑通了,后续测试手机端app,后端统一使用springboot框架,统一管理和维护,后台试了试国产的AI大模型,直接帮我开发前端,以及完成和后端的对接。小码哥承诺:

目前一句话改图,免费、免费、免费! 如果访问不了,可能是浏览器自动加了https,把https改成http即可。

01、移动端

02、PC端

我使用了vue3款框架,开发起来还是比较顺畅的

这是原图

这是AI修改后的图,提示词为:改成红色短发

效果

这是原图

这是效果图,出图时间大概是20秒左右。

03、代码部分

我使用了deepseek和通义灵码,大家可以去对比一下,各有各的优势,比如给我实现一个手机号和验证码登录的页面,我的提示词如下:我在使用uniapp开发,帮我优化一下UI和功能,第一,点击获取验证码时,必须要输入手机号,手机号必须要校验正确性,点击注册时,必须要输入手机号和验证码,请给我完整代码,方便我复制。

完整代码如下:

<template><view class="register-container"><view class="register-content"><uni-forms ref="registerForm" :model="formData"><uni-forms-item label="手机号" name="phone"><uni-easyinput type="number" v-model="formData.phone" placeholder="请输入手机号" /></uni-forms-item><uni-forms-item label="验证码" name="code"><view class="code-container"><uni-easyinput type="number" v-model="formData.code" placeholder="请输入验证码" /><button :disabled="isCounting" @click="getVerificationCode" class="code-button">{{ codeButtonText }}</button></view></uni-forms-item><button type="primary" @click="submitForm" class="submit-button">注册</button></uni-forms></view></view>
</template><script setup>
import { ref, reactive, computed } from 'vue';
import { get,post } from '/common/api/request.js';const formData = reactive({phone: '',code: ''
});// 校验手机号格式
const isPhoneValid = computed(() => {return /^1[3456789]\d{9}$/.test(formData.phone);
});const useCountdown = (seconds) => {const isCounting = ref(false);const countdownText = ref(seconds);const startCountdown = () => {isCounting.value = true;countdownText.value = seconds;const interval = setInterval(() => {countdownText.value--;if (countdownText.value <= 0) {clearInterval(interval);isCounting.value = false;}}, 1000);};return {isCounting,countdownText,startCountdown};
};const { isCounting, countdownText, startCountdown } = useCountdown(60);const codeButtonText = computed(() => isCounting.value ? `${countdownText.value}秒后重试` : '获取验证码');const smsVO = reactive({smsCode: {mobile: '',scene: 21},loginSms: {mobile: '',code: ''}
})const getVerificationCode = async () => {smsVO.smsCode.mobile = formData.phone;if (!formData.phone) {uni.showToast({title: '手机号不能为空',icon: 'none'});return;}if (!isPhoneValid.value) {uni.showToast({title: '手机号格式不正确',icon: 'none'});return;}console.log("isCounting value:", isCounting.value);if (!isCounting.value) {startCountdown();try {const response = await post('/system/auth/send-sms-code', smsVO.smsCode);if (response.code === 0) {uni.showToast({title: '验证码已发送',icon: 'success'});} else {uni.showToast({title: '验证码发送失败',icon: 'none'});}} catch (error) {console.error("发送验证码失败", error);uni.showToast({title: '验证码发送失败,请重试',icon: 'none'});}}
};// 注册提交
const submitForm = async () => {if (!formData.phone) {uni.showToast({title: '手机号不能为空',icon: 'none'});return;}if (!isPhoneValid.value) {uni.showToast({title: '手机号格式不正确',icon: 'none'});return;}if (!formData.code) {uni.showToast({title: '验证码不能为空',icon: 'none'});return;}console.info('smsVO.smsCode',smsVO.smsCode);smsVO.loginSms.mobile = formData.phone;smsVO.loginSms.code = formData.code;const response = await post('/system/auth/sms-login', smsVO.loginSms);if (response && response.code == 0) {uni.showLoading({title: '注册登录中...'});const { accessToken, expiresTime, refreshToken, userId } = response.data;uni.setStorageSync('token', accessToken);uni.setStorageSync('expiresTime', expiresTime);uni.setStorageSync('refreshToken', refreshToken);uni.setStorageSync('userId', userId); // 缓存 token// 缓存用户头像和昵称uni.setStorageSync('avatarUrl', 'https://www.cells88.com/wp-content/uploads/2023/11/2023110300595934.png');//使用网络图片uni.setStorageSync('nickName', userId);// 导航到标签栏页面uni.switchTab({url: '/pages/tabbar/index/index'});} else {console.log('登录失败:', response);uni.showToast({title: response.msg,icon: 'none'});}
};
</script><style lang="scss">
.register-container {display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #f5f5f5;.register-content {width: 80%;max-width: 400px;padding: 20px;background-color: white;border-radius: 10px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);.code-container {display: flex;align-items: center;.code-button {margin-left: 10px;padding: 5px 10px;background-color: #007aff;color: white;border: none;border-radius: 5px;cursor: pointer;&:disabled {background-color: #ccc;cursor: not-allowed;}}}.submit-button {width: 100%;margin-top: 20px;}}
}
</style>

这只是一个简单的例子,实现的效果如下:

如果大家感兴趣,文末点击名片,欢迎一起交流,后续我将逐步分享我是如何实现AI功能的。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/66496.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C#中的关键字out和ref的区别

目录 一、out 二、ref 三、拓展 一、out 在 C# 中&#xff0c;out 是一个关键字&#xff0c;通常用于方法参数&#xff0c;表示该参数是输出参数。使用 out 关键字的参数要求在方法内部必须被赋值&#xff0c;而这个参数的值会在方法返回时传递给调用者。可以理解为&#xf…

SpringBootWeb案例-1(day10)

准备工作 需求 & 环境搭建 需求说明 环境搭建 步骤&#xff1a; 准备数据库表(dept、emp)创建 springboot 工程&#xff0c;引入对应的起步依赖&#xff08;web、mybatis、mysql 驱动、lombok&#xff09;配置文件 application.properties 中引入 mybatis 的配置信息&…

VUE条件树查询 自定义条件节点

之前实现过的简单的条件树功能如下图&#xff1a; 经过最新客户需求确认&#xff0c;上述条件树还需要再次改造&#xff0c;以满足正常需要&#xff01; 最新暴改后的功能如下红框所示&#xff1a; 页面功能 主页面逻辑代码&#xff1a; <template><div class"…

保险丝驱动电路·保险丝有什么用应该如何选型详解文章!!!

目录 保险丝基础知识 保险丝常见类型 保险丝功能讲解 保险丝驱动电路 ​​​​​​​ ​​​​​​​ 编写不易&#xff0c;仅供学习&#xff0c;请勿搬运&#xff0c;感谢理解 常见元器件驱动电路文章专栏连接 LM7805系列降压芯片驱动电路降压芯片驱动电…

李宏毅机器学习课程笔记02 | 机器学习任务攻略General Guide

第一步&#xff1a;分析loss on training data 先检查在训练数据上模型是否很好的学习 情况1&#xff1a;如果在训练集上&#xff0c;loss很大&#xff0c;说明在训练资料上没有训练好 可能性1&#xff1a;设置的模型太简单了&#xff0c;模型存在model bias模型偏差&#x…

【JavaScript】Set,Map,Weakmap

以下来源&#xff1a;九剑科技。 weakmap WeakMap是 ES6 中新增的一种集合类型&#xff0c;叫做“弱映射”&#xff0c;由于他的键引用的对象是弱引用&#xff0c;键所指向的对象可以被垃圾回收&#xff0c;可以防止内存泄露。 map ①Map是键值对的集合&#xff0c;键值不限…

Gitlab-runner 修改默认的builds_dir并使用custom_build_dir配置

gitlab-runner 修改默认的builds_dir并使用custom_build_dir配置 1. 说明2. 实操&#xff08;以docker执行器为例&#xff09;2.1 修改默认的builds_dir2.1.1 调整gitlab-runner的配置文件2.1.2 CI文件 2.2 启用custom_build_dir2.2.1 调整gitlab-runner的配置文件2.2.2 CI文件…

测试岗位的基础知识

1.谈一谈对测试的理解&#xff1f; 我认为的测试不仅仅是测试出bug的这么一项工作&#xff0c;他是要从软件或者系统的功能&#xff0c;性能&#xff0c;安全&#xff0c;用户体验这么四个方面来保证软件和系统的交付质量。 功能测试就是可以提前发现一些bug&#xff0c;进行一…

概率基本概念 --- 离散型随机变量实例

条件概率&独立事件 随机变量 - 离散型随机变量 - 非离散型随机变量 连续型随机变量奇异性型随机变量 概率表示 概率分布函数概率密度函数概率质量函数全概率公式贝叶斯公式 概率计算 数学期望方差协方差 计算实例 假设有两个离散型随机变量X和Y&#xff0c;它们代…

OpenCV相机标定与3D重建(46)将三维空间中的点投影到二维图像平面上函数projectPoints()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 将3D点投影到图像平面上。 cv::projectPoints 是 OpenCV 库中的一个函数&#xff0c;用于将三维空间中的点投影到二维图像平面上。这个过程涉及到…

QT RC_FILE 应用程序图标设置

1.先做一个app.ico 文件&#xff0c;并将文件放入资源文件夹中 2.打开QT项目的.pro文件在最下面增加 RC_FILE $$PWD/res/app.rc 3.在资源文件夹中创建一个app.rc文件。在QT开发工具中编辑并输入下在内容 IDI_ICON1 ICON "app.ico" 4.测试效果

SQLark:高效数据库连接管理的新篇章

在我们日常工作中&#xff0c;不同的项目使用的数据库不同&#xff0c;比如我这边涉及的数据库就有达梦、Oracle、Mysql&#xff0c;每种数据库都有自己的数据库连接工具&#xff0c;我们不得不在电脑上针对每个数据库都装一个客户端&#xff0c;使用时还得在不同数据库连接工具…

20250106面试

rabbitmq如何保证消息不丢失 my&#xff1a; 持久化&#xff0c;包括消息持久化和队列持久化&#xff0c;重启不丢失。持久化到磁盘中的。 消息确认 死信队列&#xff1a;消费失败&#xff08;业务异常/未确认&#xff0c;重试后&#xff0c;会放死信队列&#xff09;&…

Minio-Linux-安装

文章目录 1.Linux安装1.下载源码包2.上传到/usr/local/minio1.进入目录2.上传 3.开放执行权限4.创建minio文件存储目录及日志目录5.编写启动的shell脚本1.脚本编写2.赋予执行权限 6.启动&#xff01;1.执行run脚本2.查看日志3.开放9001和9000端口1.服务器2.安全组3.访问&#x…

基于Springboot + vue实现的小型养老院管理系统

&#x1f942;(❁◡❁)您的点赞&#x1f44d;➕评论&#x1f4dd;➕收藏⭐是作者创作的最大动力&#x1f91e; &#x1f496;&#x1f4d5;&#x1f389;&#x1f525; 支持我&#xff1a;点赞&#x1f44d;收藏⭐️留言&#x1f4dd;欢迎留言讨论 &#x1f525;&#x1f525;&…

大模型思维链推理的进展、前沿和未来分析

大模型思维链推理的综述&#xff1a;进展、前沿和未来 "Chain of Thought Reasoning: A State-of-the-Art Analysis, Exploring New Horizons and Predicting Future Directions." 思维链推理的综述&#xff1a;进展、前沿和未来 摘要&#xff1a;思维链推理&#…

production、produce、produc使用

"production"、"produce" 和 "product" 都和“生产”有关&#xff0c;但它们的词性和使用场景不同。以下是详细的区别和它们在不同场景中的应用&#xff1a; 1. Production 词性&#xff1a;名词意思&#xff1a;表示“生产、制造”或“产量”&…

下载ffmpeg执行文件

打开网址&#xff1a;Download FFmpeg 按下面步骤操作 解压文件就可以看到ffmpeg的执行文件了&#xff0c;需要通过命令行进行使用&#xff1a; ffmpeg命令行使用参考&#xff1a; ffmpeg 常用命令-CSDN博客

VB.NET CRC32 校验

在 VB.NET 中实现 CRC32 校验并在校验失败时退出程序&#xff0c;你可以按照以下步骤进行&#xff1a; ‌实现 CRC32 计算函数‌&#xff1a;首先&#xff0c;你需要一个函数来计算给定数据的 CRC32 值。 ‌比较计算的 CRC32 值‌&#xff1a;然后&#xff0c;你需要将计算出的…

Ardupilot开源无人机之Geek SDK进展2024

Ardupilot开源无人机之Geek SDK进展202501 1. 源由2. 状态3. TODO3.1 跟踪目标框3.2 onnxruntime版本3.3 CUDA 11.8版本3.4 pytorch v2.5.1版本3.5 Inference性能3.6 特定目标集Training 4. 参考资料 1. 源由 前期搭建《Ardupilot开源无人机之Geek SDK》&#xff0c;主要目的是…