AI智能生成表单系统+vue管理界面
·
对AI（通义灵码）提出的问题
提示词（prompt）：
你是一名前端开发工程师，帮我生成一个HTML页面，页面整体有4个部分组成，先来实现第一个部分：
1. 顶栏
内容：包含左侧的标题“Tlias智能学习辅助系统”，字体需加大加粗，以突出显示；右侧则放置“退出登录”文字链接。
布局：确保标题与退出登录文本位于同一行内，分别左对齐与右对齐 。
表单部分
提示词（prompt）：
再继续帮我生成第二个部分: 2. 搜索表单区域
组成：包括三个输入控件和两个操作按钮。输入控件具体为：姓名（文本输入框）、性别（下拉选择，选项包括 男/女， 默认为空）、职位（下拉选择，选项包括班主任、讲师、学工主管、教研主管、咨询师， 默认为空）。
按钮：“查询”与“清空”按钮，用于提交表单或重置表单项 。
布局：所有表单项及按钮需水平排列于一行 ，确保美观大气 。
表格部分
提示词（prompt）：
再继续帮我生成第三个部分: 3. 表格展示区
表格结构：展示列包括姓名、性别（显示男/女）、头像（小图标展示）、职位（显示班主任/讲师/学工主管/教研主管/咨询师）、入职日期、最后操作时间、操作（里包含两个按钮 编辑 与 删除）。
数据模拟：基于《笑傲江湖》小说人物生成4条虚拟数据，每条数据应包含上述所有列的信息，以体现实际应用场景 。
样式：可适当调整表格样式，确保美观大气。
页脚版权区域
提示词（prompt）:
再继续帮我生成第二个部分: 4. 页脚版权区域
内容：第一行显示公司全称“江苏传智播客教育科技股份有限公司”；第二行展示版权信息，“版权所有 Copyright 2006-2024 All Rights Reserved”。
设计：该区域应具有灰色背景，字体颜色为白色，居中对齐，以营造专业且统一的视觉效果 。
界面效果
相关代码如下
请求结果可替换成有效的
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tlias智能学习辅助系统</title>
<style>
/* --- 全局样式重置 --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: "Microsoft YaHei", "楷体", sans-serif;
background-color: #f4f4f4;
/* 关键：让页面最小高度为100vh，确保页脚即使在内容少时也能被推到底部 */
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* 内容包裹器，让主要内容区域占据剩余空间 */
.main-content {
flex: 1;
width: 80%;
margin: 0 auto;
}
/* --- 第一部分：顶部导航栏 --- */
.navbar { background-color: #5d5d5d; height: 60px; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; }
.navbar h1 { font-family: "楷体", sans-serif;color: #ffffff; font-size: 24px; font-weight: bold; }
.navbar a { color: #ffffff; text-decoration: none; font-size: 16px; }
/* .navbar a:hover { text-decoration: underline; } */
/* --- 第二部分：搜索表单区域 --- */
.search-container { width: 100%; margin: 20px auto; background-color: #fff; padding: 25px; border-radius: 5px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.search-form { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; }
.form-group { display: flex; align-items: center; }
.form-group label { font-size: 14px; color: #333; margin-right: 8px; font-weight: bold; }
.search-input, .search-select { padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; outline: none; }
.search-input { width: 180px; }
.search-select { width: 140px; }
.form-buttons { margin-left: auto; display: flex; gap: 10px; }
.btn { padding: 8px 25px; border: none; border-radius: 4px; font-size: 14px; cursor: pointer; transition: background-color 0.3s; }
.btn-query { background-color: #007bff; color: white; }
.btn-query:hover { background-color: #0056b3; }
.btn-reset { background-color: #6c757d; color: white; }
.btn-reset:hover { background-color: #545b62; }
/* --- 第三部分：表格展示区样式 --- */
.table-container {
width: 100%;
margin: 0 auto 40px auto;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
overflow: hidden;
padding: 20px;
}
table { width: 100%; border-collapse: collapse; font-size: 14px; color: #333; }
thead tr { background-color: #f8f9fa; border-bottom: 2px solid #dee2e6; }
th { padding: 15px 10px; text-align: center; font-weight: bold; color: #555; }
td { padding: 15px 10px; text-align: center; border-bottom: 1px solid #eee; }
tbody tr:hover { background-color: #f1f1f1; }
.avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; vertical-align: middle; border: 2px solid #eee; }
.action-btn { padding: 5px 12px; font-size: 12px; border: none; border-radius: 3px; cursor: pointer; margin: 0 5px; color: white; transition: opacity 0.2s; }
.btn-edit { background-color: #28a745; }
.btn-edit:hover { background-color: #218838; }
.btn-delete { background-color: #dc3545; }
.btn-delete:hover { background-color: #c82333; }
/* --- 第四部分：页脚版权区域 --- */
.footer {
width: 80%;
margin: 0 auto;
background-color: #5d5d5d; /* 灰色背景 */
color: #ffffff; /* 白色字体 */
text-align: center; /* 居中对齐 */
padding: 20px 0; /* 上下内边距 */
font-size: 14px; /* 字体大小 */
line-height: 1.8; /* 行高，让两行文字有间距 */
margin-top: auto; /* 确保页脚在内容少时也能沉底 */
}
.footer .company-name {
font-weight: bold; /* 公司名加粗 */
display: block; /* 独占一行 */
margin-bottom: 5px; /* 与版权信息的间距 */
}
</style>
</head>
<body>
<!-- 主要内容区域 -->
<div class="main-content" id="container">
<!-- 第一部分：顶部导航栏 -->
<div class="navbar">
<h1>Tlias智能学习辅助系统</h1>
<a href="#">退出登录</a>
</div>
<!-- 第二部分：搜索表单区域 -->
<div class="search-container">
<form class="search-form">
<div class="form-group">
<label for="name">姓名：</label>
<input v-model="searchForm.name" type="text" id="name" class="search-input" placeholder="请输入员工姓名">
</div>
<div class="form-group">
<label for="gender">性别：</label>
<select id="gender" class="search-select" v-model="searchForm.gender">
<option value="">请选择</option>
<option value="1">男</option>
<option value="2">女</option>
</select>
</div>
<div class="form-group">
<label for="position">职位：</label>
<select id="position" class="search-select" v-model="searchForm.job">
<option value="">请选择</option>
<option value="1">班主任</option>
<option value="2">讲师</option>
<option value="3">学工主管</option>
<option value="4">教研主管</option>
<option value="5">咨询师</option>
</select>
</div>
<div class="form-buttons">
<button type="button" class="btn btn-query" v-on:click="search">查询</button>
<button type="reset" class="btn btn-reset" @click="clear">清空</button>
</div>
</form>
</div>
<!-- 第三部分：表格展示区 -->
<div class="table-container">
<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>头像</th>
<th>职位</th>
<th>入职日期</th>
<th>最后操作时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 测试数据 1: 令狐冲 -->
<tr v-for="(e,index) in empList" :key="e.id">
<td>{{ index+1 }}</td>
<td>{{ e.name }}</td>
<td>{{ e.gender == 1 ? '男' : '女' }}</td>
<td><img v-bind:src="e.image" :alt="e.name" class="avatar"></td>
<!-- v-if:控制元素的显示与隐藏 -->
<td>
<span v-if="e.job == 1">班主任</span>
<span v-else-if="e.job == 2">讲师</span>
<span v-else-if="e.job == 3">学工主管</span>
<span v-else-if="e.job == 4">教研主管</span>
<span v-else-if="e.job == 5">咨询师</span>
<span v-else>其他</span>
</td>
<!-- v-show: 控制元素的显示与隐藏 -->
<!-- <td>
<span v-show="e.job == 1">班主任</span>
<span v-show="e.job == 2">讲师</span>
<span v-show="e.job == 3">学工主管</span>
<span v-show="e.job == 4">教研主管</span>
<span v-show="e.job == 5">咨询师</span>
</td> -->
<td>{{ e.entrydate }}</td>
<td>{{ e.updatetime }}</td>
<td>
<button class="action-btn btn-edit">编辑</button>
<button class="action-btn btn-delete">删除</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- 第四部分：页脚版权区域 -->
<footer class="footer">
<span class="company-name">江苏传智播客教育科技股份有限公司</span>
<span class="copyright">版权所有 Copyright 2006-2024 All Rights Reserved</span>
</footer>
<script src="js/axios.js"></script>
<script type="module">
// 通过JS来为上述的表格中数据行添加事件监听，实现鼠标进入后，背景色#f2e2e2; 鼠标离开后，背景色需要设置为#fff;(js新版本的语法)
// 1、获取所有tr标签
const trs = document.querySelectorAll('tbody tr');
// 2、为每一个tr标签添加鼠标进入和离开事件监听
for (let i = 0; i < trs.length; i++) {
trs[i].addEventListener('mouseenter', function () {
this.style.backgroundColor = '#f2e2e2';
});
trs[i].addEventListener('mouseleave', function () {
this.style.backgroundColor = '#fff';
});
}
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
data() {
return {
searchForm: { //封装用户输入的查询条件
name: '',
gender: '',
job: ''
},
empList: []
}
},
//方法
methods: {
async search(){
//将搜索条件, 输出到控制台
// console.log(this.searchForm);
// axios.get('https://web-server.itheima.net/emps/list',{
// params: this.searchForm
// }).then(res => {
// this.empList = res.data.data
// })
const res = await axios.get('https://web-server.itheima.net/emps/list',{
params: this.searchForm
})
this.empList = res.data.data
},
clear(){
//清空表单项数据
this.searchForm = {name:'', gender:'', job:''}
this.search()
}
},
// 钩子函数
mounted() {
this.search()
}
}).mount('#container')
</script>
</body>
</html>声明：提示词来自黑马javaweb课程！！！代码通义灵码AI生成！！！
更多推荐
3
0- 0
已为社区贡献3条内容
所有评论(0)