Javaweb14==mysql+mybatis+servlet+axios+fasetjson+html+vue.js+elementUI实现商品列表的前端分页、模糊查询、新增、删除、批量删除、修改

最新推荐文章于 2023-04-10 10:56:15 发布
最新推荐文章于 2023-04-10 10:56:15 发布
阅读量843 收藏 6
点赞数
分类专栏： javaWeb 文章标签： html vue.js elementui json
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hebian1994/article/details/121094865
版权

最终环境配置：

maven3.8：依赖包管理

IDEA2021+JDK8+mysql connector java5+Mysql5+mybatis3.5：从数据库取出数据。

tomcat7插件：web服务器

servlet、fastjson、axios：处理前后端数据交互

fastjson：阿里提供的依赖包。新增时后端收到前端发过来的JSON字符串后，简化将JSON字符串解析成对象。展示商品列表时后端通过mybatis从数据库中查出数据封装成实体类对象的list之后，简化将对象list序列化成JSON字符串。

axios框架：封装了原生JavaScript的ajax操作，简化了HTTP请求的发起和响应参数的获取。

vue.js+ElementUI+html5+css3+chorme：vue.js封装了JavaScript。ElementUI组件库，封装了vue.js，通过提供了搭配的CSS。所以作为后端搭建个简易前端界面，只需要新建个html页面，new一个Vue，绑定一个DIV，然后在这个DIV里填ElementUI提供的组件，并且在head标签中的style中填ElementUI提供的CSS样式就行了。

重点：记住一切操作的背后都是对象，比如前端是在操作vue data中return的对象，后端就是new 的Brand对象。感觉唯一的难点就是逻辑和深浅拷贝涉及到了JS的内存知识

【JS】深拷贝与浅拷贝的区别，实现深拷贝的几种方法 - 听风是风 - 博客园壹 ❀ 引 如何区分深拷贝与浅拷贝，简单点来说，就是假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟着变了，说明这是浅拷贝，拿人手短，如果B没变，那就是深拷贝，自食其力。 此篇文章中也会简单https://www.cnblogs.com/echolun/p/7889848.html
==========================================================

前端页面访问地址：http://localhost:8080/brand-crud/brand.html

 实际执行操作的接口如下：

查询所有http://localhost:8080/brand-crud/selectAllServlet
模糊查询http://localhost:8080/brand-crud/selectLikeServlet POST一条JSON格式的brand
新增：http://localhost:8080/brand-crud/addServlet   POST一条JSON格式的brand
删除一条：http://localhost:8080/brand-crud/deleteOneServlet?id=   GET传入ID
批量删除：http://localhost:8080/brand-crud/deleteSelectedListServlet  POST一条JSON格式的brand集合
修改更新一条：http://localhost:8080/brand-crud/updateOneBrandServlet  POST一条JSON格式的brand

项目结构：

项目效果：

=========================================================================

建表数据SQL

/*
Navicat MySQL Data Transfer

Source Host           : localhost:3306
Source Database       : db1
Target Server Type    : MYSQL

*/

SET FOREIGN_KEY_CHECKS=0;

-- ----------------------------
-- Table structure for tb_brand
-- ----------------------------
DROP TABLE IF EXISTS `tb_brand`;
CREATE TABLE `tb_brand` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `brand_name` varchar(20) DEFAULT NULL,
  `company_name` varchar(20) DEFAULT NULL,
  `ordered` int(11) DEFAULT NULL,
  `description` varchar(100) DEFAULT NULL,
  `status` int(11) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=63 DEFAULT CHARSET=utf8;

-- ----------------------------
-- Records of tb_brand
-- ----------------------------
INSERT INTO `tb_brand` VALUES ('46', '凡人修仙传3华为666', '公司3华为QQQWWW', '222', '描述3', '1');
INSERT INTO `tb_brand` VALUES ('47', '凡人修仙传3华为666', '公司3华为', '222', '描述3', '1');
INSERT INTO `tb_brand` VALUES ('48', '凡人修仙传3华为666', '公司3华为', '222', '描述3', '1');
INSERT INTO `tb_brand` VALUES ('50', '凡人修仙传3华为666', '公司3华为', '222', '描述3', '1');
INSERT INTO `tb_brand` VALUES ('51', '凡人修仙传3华为666', '公司3华为', '222', '描述3', '1');
INSERT INTO `tb_brand` VALUES ('52', '凡人修仙传3华为666', '公司3华为', '222', '描述3', '1');
INSERT INTO `tb_brand` VALUES ('53', '凡人修仙传3华为666', '公司3华为', '222', '描述3', '1');
INSERT INTO `tb_brand` VALUES ('54', '凡人修仙传3华为666', '公司3华为', '222', '描述3', '1');
INSERT INTO `tb_brand` VALUES ('55', '凡人修仙传3华为666', '公司3华为', '222', '描述3', '1');
INSERT INTO `tb_brand` VALUES ('57', '凡人修仙传3华为666', '公司3华为', '222', '描述3', '1');
INSERT INTO `tb_brand` VALUES ('58', '凡人修仙传3华为666', '公司3华为', '222', '描述3', '1');

前端页面代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

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

</head>
<body>
<div id="app">

    <!--模糊查询表单-->
    <el-form :inline="true" :model="brandLike" class="demo-form-inline">

        <el-form-item label="当前状态">
            <el-select v-model="brandLike.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="brandLike.companyName" placeholder="企业名称"></el-input>
        </el-form-item>

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

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

    <!--删除、新增按钮-->
    <el-row>
        <el-button type="danger" plain @click="deleteList">批量删除</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="brandAdd" label-width="80px">
            <el-form-item label="品牌名称">
                <el-input v-model="brandAdd.brandName"></el-input>
            </el-form-item>

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

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

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

            <el-form-item label="状态">
                <el-switch v-model="brandAdd.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="cancelDo">取消</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>
    <!--修改的弹对话框表单-->
    <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-value="1"
                           :inactive-value="0"
                ></el-switch>
            </el-form-item>


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

    </el-dialog>

    <!--显示数据的主表格-->
    <template>
        <el-table
                :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                style="width: 100%"
                :row-class-name="tableRowClassName"
                @selection-change="handleSelectionChange"
        >
            <!--            每条记录最前方的小选择框-->
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <!--            每条记录的编号-->
            <el-table-column
                    label="序号"
                    type="index"
                    width="50">
            </el-table-column>

            <!--            <el-table-column-->
            <!--                    prop="id"-->
            <!--                    label="ID"-->
            <!--                    align="center"-->
            <!--           //row自动对应整个对象，取出ID备用 >-->
            </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="status"
                    align="center"
                    label="当前状态"
                    :formatter="stateFormat"
            >
            </el-table-column>

            <el-table-column
                    align="center"
                    label="操作"
            >
                <template slot-scope="updateData">
                    <el-row>
                        <el-button type="primary" @click="updateOneBrand(updateData.row)">修改</el-button>
                        <el-button type="danger" @click="deleteOneBrand(updateData.row)">删除
                        </el-button>
                    </el-row>
                </template>
            </el-table-column>

        </el-table>
    </template>

    <!--分页工具条-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalNum">
    </el-pagination>

</div>

<!--引入依赖-->
<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">
<script src="js/axios-0.18.0.js"></script>

<script>
    new Vue({
        el: "#app",
        methods: {
            //点击取消新增或者取消修改按钮时执行此方法重置提示框
            cancelDo() {
                this.dialogVisible = false;
                this.brand = {
                    status: '',
                    brandName: '',
                    companyName: '',
                    id: "",
                    ordered: "",
                    description: ""
                };
                this.brandAdd = {
                    status: '',
                    brandName: '',
                    companyName: '',
                    id: "",
                    ordered: "",
                    description: ""
                }
            },
            //显示每行颜色间隔变化
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            // 复选框选中后执行的方法
            handleSelectionChange(val) {
                this.multipleSelection = val;//选中的
                let listSelect = this.multipleSelection;
                //发起删除请求
                //TODO
                console.log(listSelect[0])
                console.log(listSelect)
            },
            //点击批量删除后执行此方法
            deleteList() {
                let _this = this;
                console.log("想要批量删除：" + _this.multipleSelection);
                axios({
                    method: "post",
                    url: "http://localhost:8080/brand-crud/deleteSelectedListServlet",
                    data: JSON.stringify(this.multipleSelection)//会自动转换，可以不写转换语句
                    //JS对象转通过方法JSON.stringify(js对象) 转换为 JSON串，servlet中以req.getReader()流的形式读取
                }).then(function (resp) {
                    // 判断响应数据是否为 success
                    if (resp.data === "success") {
                        _this.selectAll();
                        // alert("查询成功！"
                        _this.$message({message: '批量删除成功', type: 'success'});
                    } else {
                        alert("删除失败");
                        _this.selectAll();
                    }
                })
            },
            // 点击查询后执行此方法：按条件模糊查询
            selectBySelect() {
                console.log("模糊查询的条件为" + this.brandLike.status + this.brandLike.companyName + this.brandLike.brandName);
                let _this = this;
                console.log("想要添加：" + _this.brand.brandName);
                axios({
                    method: "post",
                    url: "http://localhost:8080/brand-crud/selectLikeServlet",
                    data: JSON.stringify(this.brandLike)//会自动转换，可以不写转换语句
                    //JS对象转通过方法JSON.stringify(js对象) 转换为 JSON串，servlet中以req.getReader()流的形式读取
                }).then(function (resp) {
                    // 判断响应数据是否为 success
                    if (resp.data != "") {
                        // alert("查询成功！")
                        _this.tableData = resp.data;
                        _this.$message({message: '查询成功', type: 'success'});
                    } else {
                        alert("查询失败");

                    }
                })
            },
            // 点击新增按钮后会将新增提示框显现，数据填写完毕后，点击提交会执行此方法：添加数据
            addBrand() {
                let _this = this;
                console.log("想要添加：" + _this.brandAdd.brandName);
                axios({
                    method: "post",
                    url: "http://localhost:8080/brand-crud/addServlet",
                    data: JSON.stringify(this.brandAdd)//会自动转换，可以不写转换语句
                    //JS对象转通过方法JSON.stringify(js对象) 转换为 JSON串，servlet中以req.getReader()流的形式读取
                }).then(function (resp) {
                    // 判断响应数据是否为 success
                    if (resp.data == "success") {
                        // alert("添加成功！")
                        _this.dialogVisible = false;
                        _this.selectAll();
                        _this.brandAdd = {};//重置brandAdd对象
                        // location.href = "http://localhost:8080/brand-crud/brand.html";
                        // 弹出消息提示
                        _this.$message({message: '恭喜你，添加成功', type: 'success'});
                    } else {
                        alert("添加失败");
                        _this.selectAll();
                        // location.href = "http://localhost:8080/brand-crud/brand.html";
                    }
                })
            },

            //数据较少进行前端分页，不进行后端分页==========================================
            //每页显示条数改变后执行：选择  ?条/页后执行此方法
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize = val;
            },
            //当前也改变后执行：
            //选择 123456.。。之后执行此方法。
            //选择 前往？页后执行此方法
            handleCurrentChange(val) {
                this.currentPage = val;
                console.log(`当前页: ${val}`);
                console.log(`当前全表: ` + this.tableData);
                console.log(`当前范围起始编号: ` + (this.currentPage - 1) * this.pageSize);
                console.log(`当前每页多少: ` + this.pageSize);
            },
            //查询所有，页面初始加载完毕后通过mounted方法调用。
            //添加、删除、修改成功后也会被调用。
            selectAll() {
                let _this = this;
                axios({
                    method: "get",
                    url: "http://localhost:8080/brand-crud/selectAllServlet"
                })
                    .then(function (resp) {
                        _this.tableData = resp.data;
                        console.log(_this.tableData);
                        _this.totalNum = _this.tableData.length;
                    })
            },

            //点击删除按钮后执行此方法
            deleteOneBrand(data) {
                console.log("想要删除的数据的ID" + data.id)
                let _this = this;
                //页面加载完成后发送异步请求获取列表数据，获取到的为JSON字符串
                //往前端传JS对象会自动转成JSON字符串
                axios({
                    method: "get",
                    url: "http://localhost:8080/brand-crud/deleteOneServlet?id=" + data.id
                }).then(function (resp) {
                    //axios会将后端传过来JSON字符串自动转成JS对象
                    //将JSON字符串转成JS对象的原生JS方法是===parse(str) ：
                    // 将 JSON串转换为 js 对象。使用方式是： var jsObject = JSON.parse(jsonStr);
                    // 判断响应数据是否为 success
                    if (resp.data == "success") {
                        _this.selectAll();
                        // 弹出消息提示
                        _this.$message({message: '删除成功', type: 'success'});
                    } else {
                        alert("删除失败");
                        _this.selectAll();
                    }
                });
            },
            //点击修改按钮后获取当前行数据，修改提示框显现
            updateOneBrand(data) {
                console.log("想要修改的数据的ID" + data.id)
                this.dialogVisibleUpdate = true;
                // this.brand = data;//浅拷贝，我改你也改
                this.brand = JSON.parse(JSON.stringify(data));//深拷贝，我改你不改
            },
            //修改提示框显现后，显示停用启用
            stateFormat(row, column) {
                if (row.status === 1) {
                    return '启用'
                } else {
                    return '停用'
                }
            },
            //填写修改后的信息后，点击提交修改按钮后，执行此方法
            updateBrandDo() {
                let _this = this;
                console.log("想要添加：" + _this.brand.brandName);
                axios({
                    method: "post",
                    url: "http://localhost:8080/brand-crud/updateOneBrandServlet",
                    data: JSON.stringify(this.brand)//会自动转换，可以不写转换语句
                    //JS对象转通过方法JSON.stringify(js对象) 转换为 JSON串，servlet中以req.getReader()流的形式读取
                }).then(function (resp) {
                    // 判断响应数据是否为 success
                    if (resp.data == "success") {
                        // alert("添加成功！")
                        _this.dialogVisibleUpdate = false;//关闭弹窗
                        _this.selectAll();//重现所有
                        _this.brand = {};//重置brand对象
                        // location.href = "http://localhost:8080/brand-crud/brand.html";
                        // 弹出消息提示
                        _this.$message({message: '修改成功', type: 'success'});
                    } else {
                        alert("修改失败");
                        _this.selectAll();
                        // location.href = "http://localhost:8080/brand-crud/brand.html";
                    }
                })
            },
        },
        //钩子函数，页面初次加载DIV被EL后自动调用此方法
        mounted() {
            this.selectAll();
        },
        //页面中用到的相关VM对象
        data() {
            return {
                // 默认当前页码
                currentPage: 1,
                //每页显示多少条选择框
                pageSizes: [3, 10, 15, 20],
                //当前每页默认显示多少条
                pageSize: 3,
                //默认总数据的条数
                totalNum: 0,
                // 添加数据对话框是否展示的标记
                dialogVisible: false,
                //修改更新数据对话框是否展示的标记
                dialogVisibleUpdate: false,

                // 品牌模型数据:用于修改
                brand: {
                    status: '',
                    brandName: '',
                    companyName: '',
                    id: "",
                    ordered: "",
                    description: ""
                },
                //品牌模型数据:用于模糊查询
                brandLike: {
                    status: '',
                    brandName: '',
                    companyName: '',
                    id: "",
                    ordered: "",
                    description: ""
                },
                //品牌模型数据:用于新增
                brandAdd: {
                    status: '',
                    brandName: '',
                    companyName: '',
                    id: "",
                    ordered: "",
                    description: ""
                },
                // 复选框选中数据集合
                multipleSelection: [],
                // 表格数据，从后端接收到的JSON字符串经过AXIOS自动转成JS对象并赋值到这里
                tableData: [
                    //     {
                    //     brandName: '华为',
                    //     companyName: '华为科技有限公司',
                    //     ordered: '100',
                    //     status: "1"
                    // }, {
                    //     brandName: '华为',
                    //     companyName: '华为科技有限公司',
                    //     ordered: '100',
                    //     status: "1"
                    // }, {
                    //     brandName: '华为',
                    //     companyName: '华为科技有限公司',
                    //     ordered: '100',
                    //     status: "1"
                    // }, {
                    //     brandName: '华为',
                    //     companyName: '华为科技有限公司',
                    //     ordered: '100',
                    //     status: "1"
                    // }
                ]
            }
        }
    })

</script>

</body>
</html>

一个java开发
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Springboot 2 + Element UI + Vue.js实现简单的增删改查系统（IDEA）
originalone的博客
01-30 1112
Java Web开发菜鸟，初学Springboot 2，Element UI，Vue.js，发现三者合用是真的香，因此记录一些浅薄的个人理解，下一篇是代码解析。
SpringBoot+myBatis(plus)+MySQL+VUE最基础简易的前后端全栈demo制作
wanghe1111_的博客
05-12 2118
SpringBoot+myBatis(plus)+MySQL+VUE最基础简易的前后端全栈demo制作
IDEA+mybatis实现增删改查(CURD)
城南蝈蝈
06-12 279
原文链接：这里 0.前言 操作mybaits和mysql进行增删改查是必备的一步，今天写一篇文章简单记录一下mybatis的增删改查操作。 本文源代码放在github上。 1.具体操作 studnetsMapper文件 package com.cat.dao; import com.cat.pojo.Students; import java.util.List; public interface StudentsMapper { //所有学生 List listAllStudents(); //删除一名学
最简代码vue+elementui实现增删改查(带后台接口)，单数据和单模态
A_Xi_Baa的博客
08-20 9211
1、效果图先感受一波吧，代码在第二 2、代码 <template> <div style="padding: 5px 20px;"> <br> <el-form :inline="true" :model="listQuery" class="demo-form-inline"> <el-form-item label="代收单位名"> <el-input v-
（五）.xml配置方式动态实现数据增删查改---基于SpringBoot+MySQL+Vue+ElementUI+Mybatis前后端分离面向小白管理系统搭建
wdyan297的博客
01-18 2958
本次任务我们作为拓展训练，主要给大家介绍spring boot集成mybatis时使用xml配置的方式。
Java资源/java学习练习项目 javaWeb+Axios+ajax+Mybatis+vue
06-21
JavaWeb 介绍 javaWeb+Axios+ajax+Mybatis+vue 软件架构 软件架构说明 登录,注册没有写，也不需要写吧。 基于element-ui+javaweb+mybatis使用 代码简洁明了，更新操作有些许瑕疵，但不影响使用。
毕设项目基于Mybatis+Vue+axios+原生JavaWeb的文件管理系统源码.zip
08-22
毕设项目基于Mybatis+Vue+axios+原生JavaWeb的文件管理系统源码.zip毕设项目基于Mybatis+Vue+axios+原生JavaWeb的文件管理系统源码.zip毕设项目基于Mybatis+Vue+axios+原生JavaWeb的文件管理系统源码.zip毕设项目...
最新基于Javaweb的物流信息管理系统的设计与实现+vue.zip
最新发布
04-09
本文将深入探讨一个基于JavaWeb技术栈，结合Vue.js前端框架的物流信息管理系统的设计与实现。 首先，JavaWeb是Java技术在Web应用中的应用，它包括Servlet、JSP（JavaServer Pages）和JavaBean等技术。Servlet是Java...
基于ssm+vue+javaweb的吃了吗管理系统.zip
03-28
本项目“基于SSM+Vue+JavaWeb的‘吃了吗’管理系统”正是这样一个典型的实例，它巧妙地结合了Spring、SpringMVC、MyBatis（SSM）三大Java后端框架与前端的Vue.js，构建了一个高效、便捷的餐饮管理系统。接下来，我们...
本项目是基于SSM+VUE编写的在线商城系统
07-10
这是一个基于SSM（Spring、SpringMVC、MyBatis）后端框架与Vue.js前端框架构建的在线商城系统。SSM是JavaWeb开发中的常见组合，提供了强大的数据访问和业务逻辑处理能力，而Vue.js则是一款轻量级的前端MVVM框架，...
idea+Maven+Mybatis工程实现单表增删改查
Mr_wyl的博客
09-19 157
1.在数据库中创建一个简单地test表 2.在Maven工程中pom.xml加入MySQL和mybatis依赖包 3.在pom.xml中加入防止资源加载失败 4.在Mybatis-3官方文档中可以找到MySQL连接池在main文件下创建resource包在resource包下创建mybatis-config.xml文件并将MySQL连接池粘贴到.xml文件中 5.在main/java/bean下创建实体类并进行封装 6.在main/dao下创建UserMapper接口用于sql语...
springboot+vue+mybatis+axios+mybatis二级缓存实现异步增删改查
qq_36900632的博客
08-06 466
用springboot的好处 1.减少配置,在springboot中无需配置文件,只需要把配置写在application.properties或者.yml文件中,也可以利用注解实现全局配置,大大提高了开发效率 2.springboot实现了自动化配置.只需要@EnableAutoConfiguration注解就可以实现自动配置,无需手动配置 3.springboot集成了许多maven插件,对于j...
Web项目增删改查，技术vue，element，mybatis，sql，tomcat
qq_67580641的博客
09-27 554
实现如图功能，增删改查
品牌管理系统（第一个web项目）
weixin_62226325的博客
12-05 1562
总体文件预览： 实现页面预览 第一步：环境配置 一，添加Mavan依赖： <dependencies> <!--Servlet--> <dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> .
Vue使用教程和后台商品管理系统分享（详细完整教程讲解）
a910247的博客
04-10 1897
随着软件开发不断进步，前后端框架技术也取得重大进步，前端主要Layui经典框架，还有谷歌flutter和如今流行的Vue框架，后端主要是Spring框架，尤其是SpringBoot应用非常广泛，而前端这门技术也越来越重要，很多人都开启了学习Vue技术，本文就介绍了Vue的基础内容以及后台管理系统项目分享。
第三天总结 之 商品管理界面的实现 之 模糊查询 与 数据在页面展示
qq_45889574的博客
01-20 1754
第三天总结 之 商品管理界面的实现 之 模糊查询 与 数据在页面展示
Java web模糊查询的实现
热门推荐
cuit_海妖
04-20 1万+
1.预期效果： 我们在管理系统同查询的框中输入"z",因为这里是按照姓名查询，最后在界面上将打印出所有名字带有"z"的学生记录信息。 2.实现原理 首先在前端的<input>标签中输入你期望输入的数据，通过servlet传到后台，然后再dao,servlet层执行相应的操作业务。最后将学生的信息以一个list返回给前端界面 3.注意事项 需要注意的事项主要是sql语句再...
javaweb连接数据库进行模糊查询的sql语句
qq_44783689的博客
08-01 1459
对输入的名字进行模糊查询 String sql="select * from dept where true "; if(dname!=null&&!dname.trim().equals("")){ sql+=" and dname like '%"+dname.trim()+"%'"; }
java 查询_JavaWeb实现简单查询商品功能
weixin_39559486的博客
02-12 1486
本文实例为大家分享了JavaWeb实现简单查询商品功能的具体代码，供大家参考，具体内容如下CustomerServlet.javapackage com.subing.web;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet...
idea +html+MyBatis+mysql实现购物车
07-27
其中，前端技术包括HTML、CSS、JS、JQuery等，后端技术包括MyBatis作为持久层框架。数据库使用MySQL5.5/5.7/8.0版本，运行服务器可以选择Tomcat7.0/8.0/8.5/9.0等版本。该项目实现了购物车功能，可以区分管理员用户...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值