前端这边不做过多赘述，页面图给出来，大概是一个h5页面配合vant组件先把页面实现即可

前端这边不做过多赘述，页面图给出来，大概是一个h5页面配合vant组件先把页面实现即可

附带一下给的提示词

第一次对话出来的页面

对于ui细节要求还原度不高的，有一张图片能够很精确的给你还原大概，如果需要还原度高的那么就需要ui出设计图然后用对应的一些skill或者mcp来实现了，后面的页面就大致按照这种方式一个个实现

后端篇

一.基础

前置条件：jdk

后端这边我们先用idea来做，后期可以转为其他平台，idea对于java的支持是最好的

当然idea也支持一些ai插件，在设置里面找到插件即可以安装各种ai插件

直接在idea创建一个项目位置跟前端放在一起，这里我们选择springboot，springboot是java的一个框架，类似于vue，react能够快速去写一些功能，语言选择java，类型是语言依赖的关系，选择主流的maven，jdk选择主流的17版本，其他默认即可

然后是框架的版本和一些依赖的勾选，类似于packagejson，vuerouter等等

这里因为开发的是java web项目勾选两个后面说

创建好项目后主要看到两个文件，一个是pom它类似于package.json就是看这个java项目有哪些依赖的

然后是这个文件夹里面，java代码都在里面，而且里面已经常见好了一个java文件，类似于app.vue是一个主启动文件那么要启动java项目就可以点击旁边的三角符号

然后可以在启动日志里面找到端口号并且查看

这个页面就是启动成功

如果想要修改端口号，可以在resources文件夹里面修改，里面的application可以将后缀名改为yml，然后点击右上角实现刷新重新运行

二.项目实现

2.1.get接口

那么如何来实现接口的编写

我们之前选择的mvc的架构那么就要按照mvc的规则来写，mvc就是model层，view层，controller层，也就是模型，视图，控制器，接口主要就是写在控制器里面

那么控制器写在哪里，我们刚才看到的主文件，java的主文件里面第一级就是包一个java文件里面可能会有多个包，每个包里面会有很多类

所以接下来我们就先创建一个包，包名注意不要写错合乎规范，然后在包里面创建一个java类文件

开始定义接口，那么首先是定义公共部分也就是接口前缀

然后比如我们定义一个get接口，那么就要@getmapping，下面些函数，string是定义输出类型，比如定义了字符串，就必须输出字符串

此时我们去访问这个get接口会发现还是报错，那是因为我们的输出类型也要定义

2.2 apifox使用

当然一般要测试接口我们都用专业的软件来进行，包括post接口你用浏览器就不好测试了，这个时候我们在apifox创建一个项目

可以去新建一个接口然后配置好开发环境地址就行了

但是我们都知道正常后端返回应该是类似于如下这么一个json格式不只是一个单字符串

所以这里我们需要将返回内容进行一个包装，这里我们直接创建一个类，先创建一个包VO一般都会将实体类放进VO里面然后创建一个类

这里创建类之后然后在类里面声明了四个私有属性，前三个不用多说主要是第四个，我们可以看到前面返回的数据data里面的内容是不定的有字符串也有对象等等，所以我们这里给data定义一个泛型，也就是外部在调用result的时候通过《》可以来声明data是一个什么类型

定义完属性就是定义输出成功的方法，直接定义一个ok的方法，然后去调用这个类并给到result，输出result，那么这个result里面就带有success，message等这些属性了

但是这里需要注意一点，我们这里定义的是私有属性，也就是在外面是没有办法去获取到这些属性的值的

比如你想这么做，在我们刚才写接口那里，你直接调用示例赋值这是不行的

如果你想正常访问以及赋值，原理就是在刚才定义约束那里设置getter和setter方法

此时你想打印的话就是