下面将通过7条指令演示如何从无到有完成一个WEB应用系统的开发
VUE环境配置和指令细节相对更复杂，好处是成品大气好看
本文使用的是GPT3.5，4.0应该会更炸裂，不知道怎么使用的可以看上一篇文章
开发环境
– 代码编辑器 Code
– 语言环境 Node.js、npm、Vue CLI、
– Mysql数据库
没接触过这些的没关系，通过下面指令可以快速完成环境部署（先安装 ）
docker run -it -v ~/Downloads/newsproject:/app -p 8080:8080 gongzhang/vue-cli shvue create news-project #一路默认配置即可docker run -p 3306:3306 --name mysql -e MYSQL_ROOT_PASSWORD=123456 bitnami/mysql:5.7.41注：”~/Downloads/newsproject“需替换成你的本地目录，后续vscode通过此文件夹编辑项目
实现路径
简单来说，新闻保存在数据库中，API 生成一个个链接（接口），链接的数据是实时从数据库中获取的，客户端（如APP）通过访问这个链接获取数据库中的数据，其中客户端中的代码（VUE）负责告诉数据展示在什么位置，怎么展示
下面从数据库开始设计
Step1、数据库设计
为了演示完整过程，这里给出指令的修改过程
# 修改过程如下，在设计自己的应用的时候可以参考一下请为新闻发布管理系统设计数据库表，要求包含用户、新闻、新闻管理等常见功能你没有设置用户权限，请添加后重新设计数据库表你没有设置新闻分类，请添加后重新设计数据库表你没有设置针对新闻管理日志功能，请添加后重新设计数据库表
完整的代码放进来影响阅读，感兴趣的公众号回复109获取
输出如下，复制到mysql终端中回车
Step2、生成测试数据
由于系统中没数据无法演示最终效果，这里首先生成随机数据
这一步的关键是让它先处理外键，另外不想改代码的可以像我一样直接告诉它数据库配置
将上述代码复制到.py文件中，在文件所在目录打开终端执行 .py，显示“测试数据插入完成！”即完成
Step3、实现API
后续其他接口可以通过“再给出登录、注册接口”这样的语句补充
注意：跨域访问是vue开发需要注意的，其他语言可以去掉最后部分
将上述代码复制到.py文件中， .py 执行
浏览器测试:5000/api/news是否运行成功
Step4、前端代码实现
下面是VUE 之后的工程目录，其中App.vue就理解为前端的入口，我们会在组件文件夹里新建一个新闻列表界面，然后以代码块的形式引入到App.vue中就能够显示到WEB首页了
即，通过
cd news-projectnpm run serve
创建一个空白vue项目
通常代码中的网络请求是以相对路径给出的，不想改代码的可以像我一样指定：“所有网络请求使用完整的链接”
将上述两个vue代码分别复制粘贴到/.vue和App.vue文件中
最后，打开:8080/就能够看到文章开头的效果图了
细节完善
其实打开后发现GPT没有写登录框的代码，并且鸡贼的把.vue这个组件又放在了这里
重新生成login-，替换掉上面对应位置（这里开始需要修改第一行代码，不想写代码的仍然可以先让他生成登录对话框，然后基于登录对话框和重新生成App.vue）
类似的，可以让它继续生成新闻详情页、用户评论等
补充一些小技巧：
– 遇到超过字符限制可以使用“继续”
– GPT不能使用可以将sql创建语句输入到对话框，换行 + “数据库格式如上，请基于以上数据库设计实现一个接口”
– 在写微信小程序时可以让它“给出wxml、wxss、js、json的完整代码”
相关文章
