【JAVAWEB开发】黑马程序员java web案例资料（含Element的删除与修改）

已于 2023-12-31 10:41:00 修改
阅读量2.1w 收藏 48
点赞数 19
文章标签： java vue.js elementui mybatis servlet
于 2022-09-19 19:29:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aasd23/article/details/126940147
版权

  哈喽~大家好呀，本篇视频教程来自于黑马程序员的——黑马程序员最新版JavaWeb基础教程，Java web从入门到企业实战完整版，对最后的项目教程添加了删除与修改功能，基于Java+Servlet+Axios+Vue+Element+Maven+Mybatis 下面来看看。

 🥇个人主页：个人主页​​​​​                  

🥈 系列专栏：【JAVAWEB开发】

号外号外，我最近发现了一个非常棒的人工智能学习网站，它的内容通俗易懂，风趣幽默，让人印象深刻。我想和大家分享这个网站，点击链接即可访问。 

目录

一、效果展示

首页

分类查询

批量删除

单个删除

修改

新建

二、部分代码展示

前台页面

Servlet展示

Mapper

三、源码获取

一、效果展示

首页

 分类查询

 批量删除

 单个删除

修改

新建

二、部分代码展示

前台页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>

</head>
<body>

<div id="app">

    <!--    搜索表单-->
    <el-form :inline="true" :model="brand" class="demo-form-inline">

        <el-form-item label="当前状态">
            <el-select v-model="brand.status" placeholder="当前状态">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="品牌名称">
            <el-input v-model="brand.brandName" placeholder="品牌名称"></el-input>
        </el-form-item>

        <el-form-item label="企业名称">
            <el-input v-model="brand.companyName" placeholder="企业名称"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>

    </el-form>

    <el-row>
        <el-button type="danger" plain @click="deleteByIds">批量删除</el-button>
        <el-button type="primary" plain @click="dialogVisible = true">新建</el-button>
    </el-row>

    <!--    弹出新建对话框-->
    <el-dialog
            title="新建数据"
            :visible.sync="dialogVisible"
            width="30%">

        <el-form ref="form" :model="brands" label-width="80px">
            <el-form-item label="品牌名称">
                <el-input v-model="brands.brandName"></el-input>
            </el-form-item>

            <el-form-item label="企业名称">
                <el-input v-model="brands.companyName"></el-input>
            </el-form-item>

            <el-form-item label="排序">
                <el-input v-model="brands.ordered"></el-input>
            </el-form-item>

            <el-form-item label="备注">
                <el-input type="textarea" v-model="brands.description"></el-input>
            </el-form-item>

            <el-form-item label="状态">
                <el-switch v-model="brands.status" active-value="1" inactive-value="0"></el-switch>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="addBrand">提交</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>


    </el-dialog>


    <!--    表格-->
    <template>
        <el-table
                :data="tableData"
                style="width: 100%"
                :row-class-name="tableRowClassName"
                @selection-change="handleSelectionChange">

            <el-table-column
                    type="index"
                    width="50">
            </el-table-column>

            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>

            <el-table-column
                    prop="brandName"
                    label="品牌名"
                    align="center">
            </el-table-column>


            <el-table-column
                    prop="companyName"
                    label="公司名"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="ordered"
                    align="center"
                    label="排序顺序">
            </el-table-column>
            <el-table-column
                    prop="description"
                    align="center"
                    label="描述">
            </el-table-column>

            <el-table-column
                    prop="statusStr"
                    align="center"
                    label="当前状态">
            </el-table-column>

            <el-table-column
                    align="center"
                    label="操作">

                <template slot-scope="scope">
                    <el-row>
                        <el-button type="primary" @click="update_No1(scope.$index, scope.row)">修改</el-button>
                        <el-button type="danger" @click="deleteById(scope.$index, scope.row)">删除</el-button>
                    </el-row>
                </template>

            </el-table-column>

        </el-table>
    </template>

    <!--    弹出修改对话框-->
    <el-dialog
            title="修改品牌"
            :visible.sync="dialogVisibleUpdate"
            width="30%">

        <el-form ref="form" :model="brand" label-width="80px">
            <el-form-item label="品牌名称">
                <el-input v-model="brand.brandName"></el-input>
            </el-form-item>

            <el-form-item label="企业名称">
                <el-input v-model="brand.companyName"></el-input>
            </el-form-item>

            <el-form-item label="排序">
                <el-input v-model="brand.ordered"></el-input>
            </el-form-item>

            <el-form-item label="备注">
                <el-input type="textarea" v-model="brand.description"></el-input>
            </el-form-item>

            <el-form-item label="状态">
                <el-switch v-model=" brand.status"
                           active-text="启用"
                           inactive-text="禁用"
                           active-value="1"
                           inactive-value="0">
                </el-switch>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="update_No2">提交</el-button>
                <el-button @click="dialogVisibleUpdate = false">取消</el-button>
            </el-form-item>
        </el-form>


    </el-dialog>

    <!--    分页-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount">
    </el-pagination>
</div>

<script src="js/axios-0.18.0.js"></script>

<script>

    new Vue({
        el: "#app",

        // 页面加载完之后，执行的方法
        mounted() {
            this.selectAll();
        }

        ,
        methods: {

            // 查询分页数据
            selectAll() {
                axios({
                    method: "post",
                     url: "http://localhost:8080/brand-demo/brand/selectByPageAndCondition?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize,
                    //url: "http://localhost:8080/brand-demo/brand/selectByPage?currentPage=" + _this.currentPage + "&pageSize=" + _this.pageSize,
                    data: this.brand
                }).then(resp => {
                    this.tableData = resp.data.rows;
                    this.totalCount = resp.data.totalCount;
                })
            },

            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },

            handleSelectionChange(val) {
                this.multipleSelection = val;
            },

            onSubmit() {
               // console.log(this.brand);
                this.selectAll();
            },

            // 添加数据
            addBrand() {
                axios({
                    method: "post",
                    url: "http://localhost:8080/brand-demo/brand/add",
                    data: this.brands
                }).then(resp => {
                    // 判断响应数据是否为 success
                    if (resp.data == "success") {
                        this.dialogVisible = false;
                        this.selectAll();

                        this.$message({
                            showClose: true,
                            message: '恭喜你，添加成功',
                            type: 'success'
                        });
                    }
                })
            },

            deleteByIds() {

                // 删除前判断
                this.$confirm('此操作将永久删除被选数据, 是否继续?', '删除', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    for (var i = 0; i < this.multipleSelection.length; i++) {
                        var selectIds = this.multipleSelection[i];
                        this.selectedIds[i] = selectIds.id;
                    }

                    axios({
                        method: "post",
                        url: "http://localhost:8080/brand-demo/brand/deleteByIds",
                        data: this.selectedIds
                    }).then(resp => {
                        // 判断响应数据是否为 success
                        if (resp.data == "success") {

                            this.selectAll();

                            this.$message({
                                message: '恭喜你，删除成功',
                                type: 'success'
                            });
                        }
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

            deleteById(index, row) {
                // 删除前判断
                this.$confirm('此操作将永久删除被选数据, 是否继续?', '删除', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios({
                        method: "post",
                        url: "http://localhost:8080/brand-demo/brand/deleteById",
                        data: row.id
                    }).then( resp => {
                        // 判断响应数据是否为 success
                        if (resp.data == "success") {

                            this.selectAll();

                            this.$message({
                                message: '恭喜你，删除成功',
                                type: 'success'
                            });
                        }
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

            update_No1(index, row){
                this.dialogVisibleUpdate = true;
                this.brand = row;
            },

            update_No2(){
                axios({
                    method: "post",
                    url: "http://localhost:8080/brand-demo/brand/update",
                    data: this.brand
                }).then( resp => {
                    // 判断响应数据是否为 success
                    if (resp.data == "success") {
                        this.dialogVisibleUpdate = false;
                        this.selectAll();

                        this.$message({
                            showClose: true,
                            message: '恭喜你，修改成功',
                            type: 'success'
                        });
                    }
                })
            },

            // 分页
            handleSizeChange(val) {
                this.pageSize = val;
                this.selectAll();
            },
            handleCurrentChange(val) {
                // console.log(`当前页: ${val}`);
                this.currentPage = val;
                this.selectAll();
            }

        },
        data() {
            return {

                totalCount: 100,
                pageSize: 5,

                // 搜索表单数据
                brand: {
                    status: '',
                    brandName: '',
                    companyName: '',
                    id: '',
                    ordered: '',
                    description: ''
                },

                // 新增表单数据
                brands: {
                    status: '',
                    brandName: '',
                    companyName: '',
                    id: '',
                    ordered: '',
                    description: ''
                },

                // 修改表单数据
                brandss: {
                    status: '',
                    brandName: '',
                    companyName: '',
                    id: '',
                    ordered: '',
                    description: ''
                },
                // 被选中的id
                selectedIds: []
                ,
                // 添加对话框是否标记
                dialogVisible: false,

                // 修改对话框是否标记
                dialogVisibleUpdate: false,

                // 数据模型，复选框选中几何
                multipleSelection: [],

                // 分页
                currentPage: 1,

                // 表格数据
                tableData: [{
                    brandName: '',
                    companyName: '',
                    ordered: '',
                    status: '',
                    description: ''
                }]
            }
        }

    })


</script>


</body>
</html>

 Servlet展示

    private BrandService brandService = new BrandServiceImpl();

    public void selectAll(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{
        List<Brand> brands = brandService.selectAll();

        String json = JSON.toJSONString(brands);

        response.setContentType("text/json;charset=utf-8");

        response.getWriter().write(json);
    }

Mapper

    // 查询所有
    @Select("select * from tb_brand")
    @ResultMap("brandResultMap")
    List<Brand> selectAll();

三、源码获取

本人主页右侧关注公众号回复“java web案例资料”获取源码

不积跬步无以至千里，趁年轻，使劲拼，给未来的自己一个交代！向着明天更好的自己前进吧！

​

程序猿追
关注
  • 19
    点赞
  • 踩
  • 48
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 8
    评论
黑马程序员JAVA WEB全笔记pdf
03-26
本笔记基于黑马程序员的课程内容，全面覆盖了Java Web的基础知识，包括前端开发技术如HTML、CSS、JavaScript，以及后端服务器端的Java Servlet和JSP（Java Server Pages）。 一、前端基础 1. ...
黑马程序员-Java语言进阶-源码、教程笔记.zip
12-16
day07_等待与唤醒案例、线程池、Lambda表达式 day08_File类、递归 day09_字节流、字符流 day10_缓冲流、转换流、序列化流、Files day11_网络编程 day12_函数式接口 day13_Stream流、方法引用 Java基础小节练习题答案
【Vue2.0】黑马课程笔记（三）ajax、axios
小女不才
04-07 1024
目录（一）什么是前后端交互模式（1）Promise的相关概念和用法1.1 异步调用（2）fetch 进行接口调用（3） axios 进行接口调用（4）async/await方式调用接口三级目录 （一）什么是前后端交互模式 接口调用方式：原生ajax、基于jQuery的ajax、 fetch、axios URL地址格式： 1 传统形式的 URL 格式：schema://host:port/pa...
黑马 javaweb 实现小案例
weixin_53432918的博客
04-14 361
引入依赖/*** 生成JWT令牌* @param claims JWT第二部分负载 payload 中存储的内容* @return*/.compact();return jwt;/*** 解析JWT令牌* @param jwt JWT令牌* @return JWT第二部分负载 payload 中存储的内容*/.getBody();@Slf4j@Autowiredlog.info("员工登录"+emp);//登录成功，生成令牌，下发令牌if (e!
黑马程序员Java基础学习，涉及精细知识点复习【持续更新】
qq_49288362的博客
06-19 1240
文章目录01java基础java基础面向对象1.类：2.成员变量：类中方法外的变量，不能赋值3.成员方法：4.java内存分配：5.成员变量有初始值，局部变量没有初始值。6.this关键字：7.封装：8.构造方法：9.标准的JavaBean组成10.JDK帮助文档使用流程：GUI1.java.awt包：2.javax.swing包：3.GUI组件：4.事件监听机制5.“”创建的字符串对象，在字符串常量池存储，如果内容一样的字符串，本质上是同一个对象。6.基本类型包装类7.比较字符串相等02java_进阶一、
黑马程序员java web案例资料（element包括删除和修改）
Javascript_tsj的博客
03-09 1万+
黑马最新的javaweb+mysql+maven+html+css+ajax+vue的案例资料（element的修改和删除也有) 百度网盘连接：https://pan.baidu.com/s/1wQG2yG3QJF5xjU931ZPtOA 提取码：lus9
黑马程序员最新版JavaWeb综合案例(前后端完整版)
热门推荐
鲁棒最小二乘支持向量机
06-28 10万+
黑马程序员最新版JavaWeb综合案例(前后端完整版)
JavaWeb企业开发全流程-黑马程序员
Kim-Hyunyeon的博客
09-25 3545
黑马程序员2023新版JavaWeb企业开发全流程学习笔记（涵盖Spring+MyBatis+SpringMVC+SpringBoot等）
黑马程序员JavaWeb开发教程，实现javaweb企业开发全流程（涵盖Spring+MyBatis+SpringMVC+SpringBoot等）
qq_69325307的博客
03-30 3061
感谢黑马，感谢努力的自己，终将成为黑马。
黑马程序员Java Web--14.综合案例--修改功能实现
weixin_45803282的博客
10-16 963
一、BrandMapper包 首先，在BrandMapper包中定义用来修改的方法，和使用注解的sql语句。 BrandMapper包所在路径： package com.itheima.mapper; /** * * 修改 * **/ @Update("update tb_brand set brand_name = #{brandName},company_name = #{companyName},ordered = #{ordered},descri
JavaWeb综合案例（黑马程序员2021年JavaWeb课程总结，所有功能均实现，包含数据库sql文件）
阿博的博客
09-25 9282
JavaWeb综合案例（黑马程序员2021年JavaWeb课程总结，所有功能均实现，包含数据库sql文件）
黑马程序员JavaWeb开发教程（P183-P194）
这里有一只小马吖
07-16 751
黑马程序员JavaWeb开发教程（P183-P194）
教材源码_javaweb_黑马程序员Javaweb源码_
09-30
黑马程序员的Javaweb源码集是一个丰富的学习资源，包含实际项目案例和练习，覆盖了Web开发的基础到进阶内容。通过阅读和分析这些源码，学习者可以更好地理解Web开发流程，学习如何组织代码结构，以及掌握常见的设计...
《JavaWeb程序开发进阶》-黑马程序员配套资源ppt.zip
07-19
《JavaWeb程序开发进阶》是一本深入探讨JavaWeb技术的教材，由黑马程序员提供配套的教学资源PPT。这些PPT涵盖了多个关键章节，旨在帮助学习者系统地掌握JavaWeb开发的核心技能。以下是对各章节内容的详细解读： 1. ...
Java Web程序设计任务教程源码（黑马程序员）
12-11
《Java Web程序设计任务教程》是一本专注于Java Web开发实践的书籍，由中国工信出版社出版，由传智播客旗下的高端教育品牌“黑马程序员”精心编著。这本书旨在帮助读者掌握Java Web开发的核心技术和实践方法，通过一...
使用hutool工具判断字符串是否全部是字母(包括大小写)，java判断字符串是否全部是字母(包括大小写)
最新发布
qq_43700885的博客
07-29 452
1.导入hutool的maven依赖。2.复制一下代码执行。
golang 接口
m0_70982551的博客
07-24 1143
接口定义了一组方法，这些方法没有具体的实现。接口类型的变量可以存储任何实现了这些方法的类型的值。// 更多方法...在Go语言中，接口值是指存储了实现某个接口的具体类型值的变量。接口值由两部分组成：1.动态类型：这是接口值当前存储的实际类型。2.动态值：这是实际存储的值，该值必须实现了接口中定义的所有方法。
java判断邮箱地址是否正确，使用hutool工具判断邮箱地址是否正确
qq_43700885的博客
07-29 250
1.导入hutool的maven依赖。2.直接复制一下代码运行。
java后端开发学习黑马
08-16
如果你对Java后端开发感兴趣，黑马程序员是一个非常知名的IT培训机构，他们提供了一系列与Java后端开发相关的课程。 在黑马程序员的Java后端开发课程中，他们通常会涵盖以下内容： 1. Java基础：包括Java语法、面向对象编程、集合框架等基础知识。 2. 数据库与SQL：包括关系型数据库（如MySQL）的基本概念和SQL语言的使用。 3. JavaWeb开发：包括Servlet、JSP、Tomcat等技术，用于开发基于Java的Web应用程序。 4. Spring框架：包括Spring IoC容器、Spring MVC、Spring AOP等，用于构建企业级Java应用程序。 5. Spring Boot框架：学习使用Spring Boot快速开发独立的、可执行的Java应用程序。 6. MyBatis框架：学习使用MyBatis进行数据库访问和ORM（对象关系映射）。 除了课程内容外，黑马程序员通常也会提供实践项目、模拟面试等辅助学习资源，以帮助学员更好地掌握Java后端开发技能。 如果你有兴趣参加黑马程序员的课程，你可以去他们的官方网站了解更多信息，包括课程安排、费用等方面的详情。记得在选择培训机构时，要仔细了解课程内容和师资力量，确保选择适合自己学习需求的培训机构。 祝你在Java后端开发学习中取得成功！
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序猿追

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值