Part03 ☀️

课程内容

• 前端(Trae)项目创建
• 前端(Trae)-页面开发部门管理
• 前端(Trae)-页面开发员工管理
• 前端(Trae)-页面开发登录

Part03 前端开发 ☀️

提示

经过少许时间，结合ai编程工具，我们已经完成了数据库设计，接口文档以及后端代码开发，接下来我们开始前端开发。

1. 前端开发人员需要根据后端提供的接口文档，设计页面原型，并使用前端框架进行页面开发。
2. 前端开发人员需要与后端开发人员紧密合作，确保前端页面与后端接口的兼容性，并确保页面性能和用户体验。

1. 前端项目创建

前言

代码操作

1. 点击DevBox完成前端项目创建(项目名:zxyf-vue)，选择vue.js作为前端框架，并选择Element UI作为UI组件库。

image

image

2. 点击Cursor打开前端项目，并试运行（在控制台输入：npm run dev）

image

运行项目

4. 在浏览器输入：http://localhost:3000/，即可访问前端项目。

image

2. 前端页面布局

前端页面布局

页面布局

代码操作

1. 准备提示词，输入到ai编程工具中，并生成代码。

请根据提供的页面原型的截图，基于Vue3 + ElementPlus帮我制作 “智学云帆-教学管理系统” 的页面，首先先完成页面的基本布局 。 具体要求如下:
1. 页面的顶部，要展示系统的标题，标题内容：“智学云帆-教学管理系统”，字体类型：楷体，字体大小：30，居左对齐。 在顶部标题栏的右侧，要展示 “退出登录【yangeit】” 的超链接，这里的yangeit，将来要展示的当前登录员工，目前可以先写死。
2. 左侧的侧边栏，展示出这个管理系统的菜单，具体的菜单结构为：
   1. 首页
   2. 班级学员管理
      2.1 班级管理
      2.2 学员管理
   3. 系统信息管理
      3.1 部门管理
      3.2 员工管理
3. 右侧为核心展示区域，点击左侧菜单，在右侧要展示出对应的页面，比如点击 "首页"，右侧核心展示区域就要展示首页的页面 。

image

2. 提示安装依赖，点击安装

3. 生成布局ing

4. 运行后报错了，将错误截图，上传，继续问ai

5. ai解决后，再次运行

3. 前端页面部门管理

前言

代码操作

4. 前端页面员工管理

前言

代码操作

5. 前端页面登录

前言

代码操作

前言

代码操作