我和AI一起开发应用 -4

最新推荐文章于 2024-06-14 20:43:21 发布

懂一点的陈老师

最新推荐文章于 2024-06-14 20:43:21 发布

阅读量74

点赞数

分类专栏： AI 文章标签：人工智能

本文链接：https://blog.csdn.net/linkedin_21843693/article/details/134202224

版权

AI 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

我和AI一起开发应用 - 4

前端开发阶段，准备素材，我们可以用AI帮我们画一些图画，设计ICON，避免图片侵权。

文心一样，通义千文，星火等大模型都可以做到，下面是文心的效果。
在这里插入图片描述

当然这个效果和你描述相关，具体什么描述词，可以去阅读更多关于提示词的文章。当然，还有更高级的图片生成工具。比如：mijoury等。

平台也会帮助我们，让出很多例子，我们可以直接使用，然后修改带到自己的目的。
在这里插入图片描述
还有更厉害，我们可以手画前端页面，AI帮我们生成代码。这个网上例子很多，我就不演示，我个人认为效果一般，还是通过描述生成代码，我直接使用更方便。

完整代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>学生列表</title>
    <style>
        /* 样式代码 */
    </style>
</head>
<body>
    <!-- 学生列表页面 -->
    <div id="studentListPage">
        <h1>学生列表</h1>
        <ul id="studentList">
            <!-- 动态生成学生列表项 -->
        </ul>
        <button id="uploadBtn">上传</button>
    </div>

    <!-- 上传页面 -->
    <div id="uploadPage" style="display: none;">
        <h1>批量录入学生信息</h1>
        <form id="uploadForm" enctype="multipart/form-data">
            <input type="file" id="fileInput" accept=".xls, .xlsx" />
            <button type="submit">上传</button>
        </form>
    </div>

    <script>
        // JavaScript代码
    </script>
</body>
</html>

window.addEventListener('DOMContentLoaded', (event) => {
    const studentListPage = document.getElementById('studentListPage');
    const uploadPage = document.getElementById('uploadPage');
    const uploadForm = document.getElementById('uploadForm');

    // 模拟学生数据
    const students = [
        { name: '张三', age: 20 },
        { name: '李四', age: 22 },
        // 更多学生...
    ];

    // 动态生成学生列表项
    function renderStudentList() {
        const studentList = document.getElementById('studentList');
        studentList.innerHTML = '';
        
        students.forEach((student) => {
            const listItem = document.createElement('li');
            listItem.textContent = `姓名：${student.name}，年龄：${student.age}`;
            studentList.appendChild(listItem);
        });
    }

    // 显示学生列表页面
    function showStudentListPage() {
        renderStudentList();
        studentListPage.style.display = 'block';
        uploadPage.style.display = 'none';
    }

    // 显示上传页面
    function showUploadPage() {
        studentListPage.style.display = 'none';
        uploadPage.style.display = 'block';
    }

    // 处理上传表单提交
    uploadForm.addEventListener('submit', (event) => {
        event.preventDefault();

        const fileInput = document.getElementById('fileInput');
        const file = fileInput.files[0];

        // 执行上传逻辑，解析Excel文件并录入学生信息
        
        // 模拟上传成功
        setTimeout(() => {
            alert('上传成功');
            showStudentListPage();
        }, 2000);
    });

    // 监听上传按钮点击事件
    const uploadBtn = document.getElementById('uploadBtn');
    uploadBtn.addEventListener('click', showUploadPage);

    // 初始化页面
    showStudentListPage();
});

当然以上代码直接使用效果肯定一般，但这已经能大幅提高工作效率了。

懂一点的陈老师

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
我和AI一起开发应用 -4

还有更厉害，我们可以手画前端页面，AI帮我们生成代码。这个网上例子很多，我就不演示，我个人认为效果一般，还是通过描述生成代码，我直接使用更方便。当然这个效果和你描述相关，具体什么描述词，可以去阅读更多关于提示词的文章。前端开发阶段，准备素材，我们可以用AI帮我们画一些图画，设计ICON，避免图片侵权。平台也会帮助我们，让出很多例子，我们可以直接使用，然后修改带到自己的目的。当然以上代码直接使用效果肯定一般，但这已经能大幅提高工作效率了。文心一样，通义千文，星火等大模型都可以做到，下面是文心的效果。
复制链接

扫一扫