《web应用技术》第7次课后作业

最新推荐文章于 2024-08-22 17:38:39 发布
最新推荐文章于 2024-08-22 17:38:39 发布
阅读量251 收藏
点赞数 1
文章标签： 前端 vue.js elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74924408/article/details/138969657
版权

一、对peom表的增删改查的操作

1.删除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <script src="./js/axios-0.18.0.js"></script>
    <link rel="stylesheet" href="element-ui/index.css">
    <script src="./element-ui/index.js"></script>
</head>
<body>
<h1 style="text-align: center">诗人信息列表</h1>
<div id="app" align="center">
    <a href="poet-insert.html" style="text-align: center">新增信息</a>
    <template>
        <el-table
                :data="poetList"
                stripe
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="序号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="gender"
                    label="性别">
            </el-table-column>
            <el-table-column
                    prop="dynasty"
                    label="朝代">
            </el-table-column>
            <el-table-column
                    prop="title"
                    label="称号">
            </el-table-column>
            <el-table-column
                    prop="style"
                    label="风格">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope" >
                <a :href="'poet-update.html?id='+scope.row.id">修改</a>
                <button type="button" v-on:click="deletee(scope.row.id)">删除</button>
                </template>
            </el-table-column>
        </el-table>
    </template>
</div>
</body>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                poetList: []
            }
        },
        methods:{
            selectall:function(){
                var this_=this;
                axios.post('/PoetSelect',{}).then(function(response){
                    this_.poetList=response.data.data;
                })
                .catch(function(error){
                    console.log(error);
                })
            },
            deletee:function (id){
                var this_=this;
                if(window.confirm("您确定要删除这条数据吗？")){
                    axios.post('/PoetDelete?id='+id).then(function(response){
                        alert("删除成功！")
                        this_.selectall();
                    })
                    .catch(function(error){
                        console.error("删除失败",error);
                    })
                }
            }
        },
        mounted() {
            axios.get('/PoetSelect').then(res => {
                    if (res.data.statusCode) {
                        this.poetList = res.data.data;
                    }
                }
            )
        }
    })
</script>
</html>

2.插入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="./js/vue.js"></script>
  <script src="./js/axios-0.18.0.js"></script>
  <link rel="stylesheet" href="element-ui/index.css">
  <script src="./element-ui/index.js"></script>
</head>
<body>
<div id="app" style=" display: flex;
            justify-content: center;
            align-items: center">
    <table>
        <tr>
            <td>ID</td>
            <td>
            <input type="text" v-model="poet.id">
            </td>
        </tr>
        <tr>
            <td>
                姓名：
            </td>
            <td>
                <input type="text" v-model="poet.name">
            </td>
        </tr>
        <tr>
            <td>
                性别：
            </td>
            <td>
                <input type="radio" name="gender" v-model="poet.gender" value="1">男
                <input type="radio" name="gender" v-model="poet.gender" value="2">女
            </td>
        </tr>
        <tr>
            <td>
                朝代：
            </td>
            <td>
                <input type="text" v-model="poet.dynasty">
            </td>
        </tr>
        <tr>
            <td>
                头衔：
            </td>
            <td>
                <input type="text" v-model="poet.title">
            </td>
        </tr>
        <tr>
            <td>
                风格：
            </td>
            <td>
                <input type="text" v-model="poet.style">
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" @click="addpoet" value="增加">
            </td>
        </tr>
    </table>
</div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            poet:{
                "id":"",
                "name":"",
                "gender":"",
                "dynasty":"",
                "title":"",
                "style":""
            }
        },
        methods:{
            addpoet:function (){
                axios.post('/PoetInsert',this.poet).then(r=>{
                    if(r.data.statusCode==1){
                        location.href='poet.html';
                    }
                    else{
                        alert(r.data.message);
                    }
                }).catch(error=>{
                    console.error(error);
                })
            }
        }
    })
</script>
</html>

3.修改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="./js/vue.js"></script>
  <script src="./js/axios-0.18.0.js"></script>
  <link rel="stylesheet" href="element-ui/index.css">
  <script src="./element-ui/index.js"></script>
</head>
<body>
<div id="app" style=" display: flex;
            justify-content: center;
            align-items: center">
    <table>
        <tr>
            <td>ID</td>
            <td>
                <input type="text" v-model="this.id">
            </td>
        </tr>
        <tr>
            <td>
                姓名：
            </td>
            <td>
                <input type="text" v-model="poet.name">
            </td>
        </tr>
        <tr>
            <td>
                性别：
            </td>
            <td>
                <input type="radio" name="gender" v-model="poet.gender" value="1">男
                <input type="radio" name="gender" v-model="poet.gender" value="2">女
            </td>
        </tr>
        <tr>
            <td>
                朝代：
            </td>
            <td>
                <input type="text" v-model="poet.dynasty">
            </td>
        </tr>
        <tr>
            <td>
                头衔：
            </td>
            <td>
                <input type="text" v-model="poet.title">
            </td>
        </tr>
        <tr>
            <td>
                风格：
            </td>
            <td>
                <input type="text" v-model="poet.style">
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" @click="updatepoet" value="修改">
            </td>
        </tr>
    </table>
 
</div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            poet:{},
            id:''
        },
        methods:{
            selectpart:function (){
                axios.get(`/PoetSelectpart/${this.id}`).then(r=>{
                    if(r.data.statusCode==1){
                        if (Array.isArray(r.data.data) && r.data.data.length > 0) {
                            this.poet = r.data.data[0];
                        } else {
                            this.poet = {};
                        }
                    }
                    else{
                        console.log(r.data.message);
                    }
                }).catch(er=>{
                    console.error(er);
                })
            },
            updatepoet:function (){
                axios({ method: 'put',
                    url: '/PoetUpdate',
                    data: JSON.stringify(this.poet),
                    headers: {
                        'Content-Type': 'application/json'
                    } }).then(r=>{
                    if(r.data.statusCode==1){
                        location.href='poet.html';
                    }
                    else{
                        alert(r.data.message);
                    }
                }).catch(e=>{
                    console.error(e);
 
                })
            }
        },
        created(){
            this.id=location.href.split("?id=")[1]
            this.selectpart();
        }
    })
</script>
</html>

小金牛piano
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
web应用技术 第三次课后作业
lengxiaoyi__的博客
04-17 187
1.springboots
《web应用技术》第七次课后作业
lengxiaoyi__的博客
05-23 114
前端发送请求到Controller，Controller调用Service中的接口和实现类，Service通过访问Mapper层来获取最终的数据。3.改 ：把女改为男。
web应用技术-第七次课后作业
2302_80868896的博客
05-24 171
PoetMapper（仅查询）
第7次课后作业《web应用技术》
qq_74105106的博客
05-23 190
【代码】第7次课后作业《web应用技术》
《Web应用技术》第六次课后作业
2301_78545131的博客
05-20 1421
参照所给的代码，完成诗人信息列表展示的页面，需要完成前端html页面和后端程序的编写。自己设计一个数据库表，并进行信息展示。
林子雨大数据技术原理及应用第六章课后作业答案.docx
06-28
### 林子雨《大数据技术原理及应用》第六章课后作业知识点解析 #### 一、云数据库概念 **云数据库**是一种基于云计算环境构建的新型数据库服务模式。相较于传统数据库，云数据库提供了更为灵活、高效的数据管理和...
C#网络应用编程第3版 马骏 课后答案.rar
06-14
《C#网络应用编程》是马骏先生撰写的一本深入探讨C#在构建网络应用程序方面的专著，第三版更是对前两版的完善和提升，旨在帮助开发者掌握使用C#进行网络编程的核心技术和实践方法。这本书涵盖了从基础的网络概念到...
林子雨大数据技术原理及应用第五章课后作业答案.docx
09-14
- 文档数据库：适用于Web应用，存储半结构化数据，便于快速开发。 - 图形数据库：适合社交网络、推荐系统等需要处理复杂关系的场景。 7. CAP理论： - C（一致性）：数据一致性，所有节点在同一时间具有相同数据...
使用SSM开发企业级应用第7章课后作业答案.rar
10-21
7.配置Spring应用配置文件 第2题 回答要点： 使用org.mybatis.spring.mapper.MapperFactoryBean创建数据映射器 使用org.mybatis.spring.mapper.MapperScannerConfigurer成批创建映射器 第3题 源代码：参考本章资料...
第二天课后作业练习的练习答案展示
02-26
"第二天课后作业练习的练习答案展示"这一主题，旨在帮助学员们对照答案，理解并检查自己在完成作业时的理解是否准确，进一步深化对相关知识点的掌握。下面我们将详细探讨可能涉及到的IT知识领域和具体知识点。 首先...
前端字符串将其分割成长度为 32 的子字符串数组
人与人之间最小的差别是智商，最大的差别是坚持。
08-19 372
要实现这个需求，可以编写一个简单的 JavaScript 函数来处理字符串并将其分割成长度为 32 的子字符串数组。将字符串切割后，对list数据进行数据处理。
前端开发攻略---在Vue3项目中修改Element-Plus主题色
最新发布
nibabaoo的博客
08-22 110
在Vue3项目中修改Element-Plus主题色
pywebview 入门
小小宾的博客
08-18 753
pywebview 是一个轻量级的 python 库，旨在简化桌面应用程序的开发。它利用系统的 WebView 组件，使得开发人员可以使用现代 Web 技术（HTML、CSS、JavaScript）来创建用户界面，同时使用 python 处理业务逻辑。pywebview 使得创建跨平台桌面应用程序变得更加简单和高效。
理解现代前端开发：从HTML到React的进化之路
qq_62512874的博客
08-18 673
随着互联网的不断发展，前端开发已经经历了从静态页面到复杂单页应用（SPA）的转变。作为前端开发者，我们需要不断更新知识，掌握最新的技术栈，以应对日益复杂的开发需求。本篇文章将带你从前端的基础知识逐步深入，探索现代前端开发的关键技术，包括HTML、CSS、JavaScript，以及流行的框架如React。前端开发是一个不断演进的领域，新的工具和框架层出不穷。通过不断学习和实践，我们可以掌握最新的前端技术，构建高效、美观且功能丰富的现代Web应用。
【js】各类前端输入校验方法
galaxyJING的博客
08-21 276
【代码】【js】各类前端输入校验方法。
vue中定义一个url文件,在vue文件中引入
weixin_65767506的博客
08-22 86
1.在src/utils文件夹下创建一个url.js。3.在其他vue文件中引入。2.url.js的内容为。4.在挂载时打印一下。打印出来就可以用了.
浅谈JavaScript 框架在现代 Web 开发中的作用
08-21 426
随着近年来 Web 开发的快速发展，JavaScript 框架已成为用于构建任何应用程序的强大、灵活和可扩展元素的重要实用程序。一些框架，如Angular、React、Vue.JS等，有助于以系统的方式处理固有的网站开发复杂性，以提高效率。它们提供已经为基本编程功能和常规任务编写的 JavaScript 代码，从而缩短了必要的原始编码时间。此外，它们还增加了 Web 应用程序的功能和交互性，从...
web前端之html弹窗面板的popover新属性
软件毕设协助及软件开发、智慧电子模块、计算机科技、软件开发、硬件开发、程序员、写代码、工程师、互联网、物联网、技术栈、程序、编程、IT。
08-18 3923
web前端之html弹窗面板的popover新属性
单片机原理与应用：第二版详解与课后习题答案
《单片机原理及应用技术_第二版_李全利》这本书提供了丰富的理论知识和课后习题解答，以下是部分内容解析： 1. **第一台计算机的意义**：ENIAC（Electronic Numerical Integrator And Computer）的诞生标志着计算机...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值