Web全栈开发项目实战

框架准备工作

cool-admin-node 对应的是Node.js 主版本号不要过低 (> 12)
cool-admin-vue 对应的是Vue.js
MySQL (XAMPP、PHPStudy) Navicat数据库连接工具
代码编辑器:VSCode (安装插件 左侧栏找到vetur、chinese汉化、ESLint检测语法错误)


image.png

运行框架

  1. 把2个压缩包进行解压
    2.进入两个项目,分别使用npm install安装依赖(使用npm config set registry https://registry.npmmirror.com设置国内镜像)
    3.用编辑器打开midway项目,找到src/config/config.local.ts文件,配置数据库(username、password、database),最后要保存
    image.png

    4.进入两个项目,分别去运行 npm run dev (数据库始终保持打开)
    5.在浏览器地址栏输入 http://localhost:9000/,稍等片刻,进入登录界面,用户名admin,密码123456

AI编程及查错

  1. 前端项目vue,src/modules/article/views/controller.vue文件,service: service.article.controller 改成service: service.article.article_info
    2.配置权限:先把原有的权限删除


    image.png

    点右侧新增按钮


    image.png

半自动化编程

1.创建模块,在modules下面新建文件夹(比如school),在内部再创建controller、entity文件夹以及config.ts文件
2.在config.ts文件通过config快捷方式生成配置,并进行修改


image.png

3.在entity文件夹去创建student.ts文件,通过entity快捷方式生成代码,再做一些配置


image.png

4.到controller文件夹去创建新的文件夹“admin”,文件夹里面的代码都用于后台管理系统(即包含权限控制),再去创建student.ts,通过controller快捷方式生成代码,再做配置。


image.png

5.快速生成菜单(生成前端代码)


image.png

6.在右下角完善搜索功能


QQ_1756885987140.png

权限管理

  1. 设置角色,分配菜单


    image.png

    2.创建用户


    image.png

postman 测试接口

  1. 安装软件,进入测试接口界面


    image.png

    image.png

    2.输入接口地址及参数,点击send


    image.png

处理接口需要登录

加上@CoolUrlTag标记


QQ_1756889945019.png

image.png

定义其它接口

  1. 在controller文件中的 class内部去定义新的函数(有关请求方式的装饰器、路径)


    image.png
  2. 获取参数


    image.png

数据库操作

  1. 新建service文件夹以及team.ts,使用service快捷方式创建代码
    2.service层注入对应实体


    image.png

    3.添加数据库操作代码


    image.png

    4.回到controller注入service
    image.png

    5.完成接口
    image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容