AI真的会彻底取代程序员吗？

原创

初学者tool4j 2024-01-15 14:00:56 ©著作权

文章标签 Vue chatgpt AI大模型 文章分类 Java 后端开发

©著作权归作者所有：来自51CTO博客作者初学者tool4j的原创作品，请联系作者获取转载授权，否则将追究法律责任

一个Java程序员从接到需求到最终开发完功能的流程大致如下

首先是理解原型图，设计表结构
根据表结构编写增删改查代码
与前端联调，完成功能开发

那么以上步骤AI能不能完成呢？

让我们试一下：第一步，使用 AI助手解析流程图，并帮我们设计出表结构

这是我找的一张原型图：

AI真的会彻底取代程序员吗？_AI大模型

AI解析并返回的内容如下：

根据您提供的信息，我们可以设计以下表结构：

用户表 (users)

user_id (主键) username password (加密后的密码) email 创建时间 (created_at) 更新时间 (updated_at)

餐厅表 (restaurants)

restaurant_id (主键) restaurant_name address 创建时间 (created_at) 更新时间 (updated_at)

菜品表 (dishes)

dish_id (主键) dish_name price description 创建时间 (created_at) 更新时间 (updated_at)

订单表 (orders)

order_id (主键) user_id (外键，关联到用户表) restaurant_id (外键，关联到餐厅表) order_status (状态，例如：待处理、进行中、已完成等) 创建时间 (created_at) 更新时间 (updated_at)

订单明细表 (order_details)

detail_id (主键) order_id (外键，关联到订单表) dish_id (外键，关联到菜品表) quantity (数量) subtotal_price (子总价) 创建时间 (created_at) 更新时间 (updated_at)

评论表 (comments)

comment_id (主键) user_id (外键，关联到用户表) order_id (外键，关联到订单表) content (评论内容) 创建时间 (created_at) 更新时间 (updated_at)

以下是您所需的建表SQL语句：

CREATE TABLE `users` (
  `user_id` INT(11) NOT NULL AUTO_INCREMENT,
  `username` VARCHAR(50) NOT NULL,
  `password` VARCHAR(255) NOT NULL,
  `email` VARCHAR(100),
  `created_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  `updated_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`user_id`)
);

CREATE TABLE `restaurants` (
  `restaurant_id` INT(11) NOT NULL AUTO_INCREMENT,
  `restaurant_name` VARCHAR(100) NOT NULL,
  `address` VARCHAR(255),
  `created_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  `updated_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`restaurant_id`)
);

CREATE TABLE `dishes` (
  `dish_id` INT(11) NOT NULL AUTO_INCREMENT,
  `dish_name` VARCHAR(100) NOT NULL,
  `price` DECIMAL(10, 2) NOT NULL,
  `description` TEXT,
  `created_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  `updated_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`dish_id`)
);

CREATE TABLE `orders` (
  `order_id` INT(11) NOT NULL AUTO_INCREMENT,
  `user_id` INT(11),
  `restaurant_id` INT(11),
  `order_status` VARCHAR(50),
  `created_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  `updated_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  FOREIGN KEY (`user_id`) REFERENCES `users`(`user_id`),
  FOREIGN KEY (`restaurant_id`) REFERENCES `restaurants`(`restaurant_id`),
  PRIMARY KEY (`order_id`)
);

CREATE TABLE `order_details` (
  `detail_id` INT(11) NOT NULL AUTO_INCREMENT,
  `order_id` INT(11),
  `dish_id` INT(11),
  `quantity` INT(4) NOT NULL,
  `subtotal_price` DECIMAL(10, 2) NOT NULL,
  `created_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  `updated_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  FOREIGN KEY (`order_id`) REFERENCES `orders`(`order_id`),
  FOREIGN KEY (`dish_id`) REFERENCES `dishes`(`dish_id`),
  PRIMARY KEY (`detail_id`)
);

CREATE TABLE `comments` (
  `comment_id` INT(11) NOT NULL AUTO_INCREMENT,
  `user_id` INT(11),
  `order_id` INT(11),
  `content` TEXT NOT NULL,
  `created_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  `updated_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  FOREIGN KEY (`user_id`) REFERENCES `users`(`user_id`),
  FOREIGN KEY (`order_id`) REFERENCES `orders(`order_id`),
  PRIMARY KEY (`comment_id`)
);

拿到sql语句之后，我们可以通过Tool4j在线代码生成器来生成增删改查代码

AI真的会彻底取代程序员吗？_chatgpt_02

至此后端相关表的增删改查代码就已经生成结束了，当然我们还可以用在线AI助手基于4.0模型来生成前端代码。以下是AI返回的内容：

AI真的会彻底取代程序员吗？_chatgpt_03

完整内容：

创建一个基于Vue的移动端订餐系统包含多个步骤，以下是一些概述及代码片段的例子。请注意，这些代码需要在Vue项目中使用，并且可能需要根据您项目的配置进行调整。我们将使用Vue CLI创建一个新项目，并添加所需页面和组件。

假设你已经通过Vue CLI设置了一个 Vue 项目，下面是一些页面和组件的概念性示例。

安装依赖：首先你可能需要一些相关的库，比如vue-router用于页面路由，vuex用于状态管理，axios用于处理HTTP请求等。

npm install vue-router vuex axios

设置路由: 在 src/router/index.js 文件中添加菜品选择页面和下单付款页面的路由。

import Vue from 'vue';
import Router from 'vue-router';
import MenuSelect from '@/components/MenuSelect';
import OrderPayment from '@/components/OrderPayment';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/menu',
      name: 'MenuSelect',
      component: MenuSelect
    },
    {
      path: '/order',
      name: 'OrderPayment',
      component: OrderPayment
    }
  ]
});

创建菜品选择组件: 在 src/components/MenuSelect.vue 创建菜品选择页面。

<template>
  <div class="menu-select">
    <h1>选取您的菜品</h1>
    <ul>
      <li v-for="item in menuItems" :key="item.id">
        <div>{{ item.name }} - {{ item.price }}</div>
        <button @click="addToCart(item)">添加</button>
      </li>
    </ul>
    <router-link to="/order">下单</router-link>
  </div>
</template>

<script>
export default {
  name: 'MenuSelect',
  data() {
    return {
      menuItems: [
        // 假设菜单数据
        { id: 1, name: '宫保鸡丁', price: 38 },
        { id: 2, name: '鱼香肉丝', price: 32 },
        // 更多菜品...
      ]
    };
  },
  methods: {
    addToCart(item) {
      // 添加到购物车逻辑
      this.$store.commit('addToCart', item);
    }
  }
};
</script>

创建下单付款组件: 在 src/components/OrderPayment.vue 创建下单付款页面。

<template>
  <div class="order-payment">
    <h1>订单支付</h1>
    <div v-for="item in cart" :key="item.id">
      <div>{{ item.name }} - {{ item.price }} x {{ item.quantity }}</div>
    </div>
    <div>总计：{{ totalPrice }}</div>
    <button @click="pay">支付</button>
  </div>
</template>

<script>
export default {
  name: 'OrderPayment',
  computed: {
    cart() {
      // 这里是从 Vuex 获取购物车内容
      return this.$store.state.cart;
    },
    totalPrice() {
      // 计算总价
      return this.cart.reduce((acc, item) => acc + item.price * item.quantity, 0);
    }
  },
  methods: {
    pay() {
      // 模拟支付逻辑
      alert('支付成功！');
    }
  }
};
</script>

设置Vuex状态管理: 在 src/store/index.js 文件中，你需要设置购物车的状态管理。

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    cart: []
  },
  mutations: {
    addToCart(state, item) {
      // 添加到购物车逻辑，实际情况可能更复杂
      const cartItem = state.cart.find(i => i.id === item.id);
      if (cartItem) {
        cartItem.quantity++;
      } else {
        state.cart.push({ ...item, quantity: 1 });
      }
    }
  }
});