超详细超实用！！！AI编程之MarsCode辅助编写一个简单官网

引言

在当前的技术发展中，人工智能(AI)以其强大的计算能力和智能化的特点，正逐步渗透到软件开发的各个领域。本文将介绍一个大部分基于MarsCode生成的VUE前端框架项目，展示了AI编程在前后端开发中的实际应用和优势。

一. 项目概述

本项目是一款人力资源管理系统，其主要功能模块有员工个人信息修改、请假、员工 的薪资管理、考勤管理、社保管理。其中考勤管理实现了员工考勤状态的修改与员工考 勤月报表的导出，以及通过员工考勤记录的导入来实现员工考勤状态的判断。社保管理， 主要实现了员工社保的计算以及明细的修改。薪资管理，实现了员工工资的调整，以及 员工月工资报表的导出。

本项目采用了前后端分离的技术，前端是基于 Vue+ElementUI+Axios 开发的，后端 则是基于 Spring Boot+MyBatis Plus+ Jwt+Mysql 。本项目实现了权限菜单管理，通过员工的权限动态渲染菜单，并动态生成路由。通过 Jwt token 来判断当前登录的员工以及员工的登录状态。此篇文章中只介绍前端页面用AI实现的部分

二.实现过程

1.登陆页面实现

• 部分提问过程及AI回答

• 效果展示图 2.请假页面实现

• 部分提问过程及AI回答

• 效果展示图 3.员工考勤表现页面实现

• 部分提问过程及AI回答

• 效果展示图 4.首页实现

• 部分提问过程及AI回答

5.角色管理页面实现

• 部分提问过程及AI回答

• 效果展示图 6.薪资管理页面实现
• 部分提问过程及AI回答

• 效果展示图 7.参保城市页面实现
• 部分提问过程及AI回答
• 效果展示图 8.五险一金页面实现
• 部分提问过程及AI回答

• 效果展示图 9.员工管理页面实现
• 部分提问过程及AI回答

• 效果展示图

一些 cursor 看法

MarsCode 目前面临的质疑有：

1.面对复杂项目就没有作用了，甚至会把事情变得更加糟糕

2.MarsCode 产生的代码质量不高

但 MarsCode 无论怎么说都是一个工具，它的核心是提高我们的效率。我会把它当做成一个的初中级工程师，所以我在让它帮我完成工作前，我肯定会事无巨细的告诉它这个工作如何完成，并且仅仅把相关的上下文给他，来防止它上下文太大导致回复不准确问题（也就是产生幻觉），所以有三个能力在使用 MarsCode 非常非常重要：

• 提问能力：MarsCode 核心还是对话，通过 豆包 来解决问题，得到我们想要的内容，那么描述清楚问题是一切的基础，推荐自己探索或者使用别人推荐的提问话术

• 拆解需求能力：要有把复杂问题拆解为简单问题，把大需求分解为小需求的能力，然后清晰描述出小需求给 MarsCode ，让它每次只做一个小的需求

• 有强大的知识储备，解决问题能力：MarsCode 根据我们提出的问题（描述）生成回复，那我们必须要知道这个东西如何实现，能够清楚描述出来，得到的结果如果有细小的错误，我们自己也能及时发现并修复

此外，了解 AI 如何工作也是必备的，这样才能更好的使用 AI，把 AI 当成自己雇佣的开发者，多了解它才能让它发挥最大的作用

所以 MarsCode 到底能够有多厉害，关键还是在人，高手中的 MarsCode 和初级开发者手中的 MarsCode 是两个产品

总结

MarsCode 这类的产品真的是颠覆了开发模式，现在我们可以在 MarsCode 这样的编辑器 all in one，而且我们可以更多的关注业务，减少重复代码工作，那我们节省下的精力就可以：

• 让我们写出更加规范的代码

• 让我们研发流程更加规范，如果真正做到每次让 MarsCode 做一个小需求，然后完成后，我们提交一个 commit，然后提交 pr，这样能避免一个 pr 改动太大的问题

• 让我们可以有更多时间解决有挑战的事情，提升自己

• 让我们能够从基础 CRUD 脱离，去思考

如果你真的使用 MarsCode ，你会发现代码都被 AI 写了，会产生一种完啦，我快要被替代了的感觉，但是，面对变化最好的变化就是拥抱变化，加入变化，这样才能更好的找到破局的方法，AI 对编程行业真的在进行颠覆性的改变，并且不可阻挡，但目前来说AI依旧只是工具，是一种可以协助并高效的完成的手段，不是替代程序员的产物。