自学Java day35 电商后台管理系统-前后端分离 从jvav到架构师

已于 2022-04-30 22:33:54 修改
阅读量1.5k 收藏 5
点赞数 1
文章标签： java tomcat mysql
于 2022-04-30 22:30:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_68286846/article/details/124519518
版权

前端：html+css+jvavscript vue框架 + ajax + axios + element ui

后端：jvav + mybatis框架 + mysql数据库

项目管理工具：maven

服务器：Tomcat

相关功能演示

首先启动Tomcat服务器

进入页面

调整每页显示数量：

页面跳转：

添加数据：

删除数据：

条件查询：

条件查询下的页面切换：

前端源码： 

<!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="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-option label="当前状态" value=""></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="企业名称">
            <el-input v-model="brand.company" placeholder="企业名称"></el-input>
        </el-form-item>
        <el-form-item label="品牌名称">
            <el-input v-model="brand.name" placeholder="品牌名称"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>

    <el-button type="danger" plain @click="del">删除</el-button>
    <el-button type="primary" plain @click="dialogVisible=true">添加</el-button>

    <!--    添加 -- 对话框-->
    <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%"
    >
        <!--        表单内容-->
        <el-form ref="form" :model="brand" label-width="80px">
            <el-form-item label="品牌名称">
                <el-input v-model="brand.name"></el-input>
            </el-form-item>

            <el-form-item label="企业名称">
                <el-input v-model="brand.company"></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="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="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    type="index"
                    width="50"
            >
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="品牌名称"
                    align="center"
            >
            </el-table-column>
            <el-table-column
                    prop="company"
                    label="企业名称"
                    align="center"
            >
            </el-table-column>
            <el-table-column
                    prop="ordered"
                    label="排序"
                    align="center"
            >
            </el-table-column>
            <el-table-column
                    prop="statusStr"
                    label="当前状态"
                    align="center">
            </el-table-column>
            <el-table-column
                    label="操作"
                    align="center"
            >
                <el-button type="primary">修改</el-button>
                <el-button type="danger" @click="dell">删除</el-button>

            </el-table-column>
        </el-table>

    </template>

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

</div>

<script src="js/axios-0.18.0.js"></script>
<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>

    new Vue({
        el: "#app",
        mounted() {
            this.select()
        },
        data() {
            return {
                //第 ? 页
                currentPage: 1,

                //每页 ? 条
                pageSize: 5,


                //页数
                total: 100,

                //选中的数组
                ids: [],

                //是否显示对话框
                dialogVisible: false,

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

                //选择框数据
                multipleSelection: [],

                //表格数据
                tableData: [{
                    id: '',
                    status: '',
                    company: '',
                    name: '',
                    ordered: '',
                    description: '',
                }]
            }
        },
        methods: {
            dell() {
                //message: this.value
                //????????????????????????
            },
            del() {
                _this = this

                //二次确认
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    for (let i = 0; i < this.multipleSelection.length; i++) {
                        this.ids[i] = this.multipleSelection[i].id
                    }

                    //console.log(this.ids);
                    axios({
                        method: "post",
                        url: "http://localhost/Brand/delServlet",
                        data: _this.ids
                    }).then(function (resp) {
                        if (resp.data == "success") {
                            _this.select()

                            _this.$message({
                                message: '删除成功',
                                type: 'warning'
                            });
                        }
                    })

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

            },
            /*select() {
                _this = this
                axios({
                    method: "get",
                    url: "http://localhost/Brand/selectServlet",
                }).then(function (resp) {
                    _this.tableData = resp.data
                })
            },*/
            select() {
                _this = this
                if (this.brand.status == "" && this.brand.company == "" && this.brand.name == "") {
                    //console.log(true);
                    str = "http://localhost/Brand/selectCountServlet?currentPage=" + _this.currentPage + "&pageSize=" + _this.pageSize
                } else {
                    //console.log(false);
                    str = "http://localhost/Brand/selectxServlet?currentPage=" + _this.currentPage + "&pageSize=" + _this.pageSize
                }
                console.log(this.brand.status);
                axios({
                    method: "post",
                    url: str,
                    data: _this.brand,
                }).then(function (resp) {
                    _this.tableData = resp.data.rows
                    _this.total = resp.data.total
                })
            },
            tableRowClassName({row, rowIndex}) {
                if (rowIndex % 4 == 1) {
                    return 'warning-row';
                } else if (rowIndex % 4 == 3) {
                    return 'success-row';
                }
                return '';
            },
            handleSelectionChange(val) {
                console.log(this.multipleSelection)
                this.multipleSelection = val;
            },
            onSubmit() {
                this.currentPage = 1
                this.select();
            },
            addBrand() {
                //发送ajax请求
                _this = this
                axios({
                    method: "post",
                    url: "http://localhost/Brand/addServlet",
                    data: _this.brand
                }).then(function (resp) {
                    if (resp.data == "success") {
                        _this.dialogVisible = false
                        _this.select()

                        _this.$message({
                            message: '添加成功',
                            type: 'success'
                        });

                        _this.brand.status = ""
                        _this.brand.company = ""
                        _this.brand.name = ""

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

    })

</script>

</body>
</html>

后端源码（部分）：

Dao层

mapper（实现对数据库的操作）

package com.company.web.mapper;

import com.company.web.pojo.Brand;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Param;
import org.apache.ibatis.annotations.Select;

import java.util.List;

public interface BrandMapper {
    @Select("select * from brand")
    List<Brand> select();

    @Insert("insert into brand values(null,#{name },#{company},#{ordered},#{description},#{status})")
    void add(Brand brand);

    //@Delete("delete from brand where ??????")
    void del(@Param("ids") int[] ids);

    @Select("select * from brand limit #{begin},#{size}")
    List<Brand> selectByPage(@Param("begin") int begin, @Param("size") int size);

    @Select("select count(*) from brand")
    int selectCount();

    //List<Brand> selectx(@Param("status")int status,@Param("name") String name,@Param("company") String company,@Param("begin")int begin, @Param("size")int size);
    List<Brand> selectx(@Param("brand")Brand brand, @Param("begin") int begin, @Param("size") int size);

    //@Select("select count(*) from brand where ???")
    int selectCountx(Brand brand);
}

mapper的xml配置

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<!--名称空间-->
<mapper namespace="com.company.web.mapper.BrandMapper">

    <resultMap id="brandResultMap" type="com.company.web.pojo.Brand"></resultMap>


    <delete id="del">
        delete
        from brand
        where id in
        <foreach collection="ids" item="id" separator="," open="(" close=")">
            #{id}
        </foreach>
    </delete>

    <select id="selectx" resultType="com.company.web.pojo.Brand">
        select *
        from brand
        <where>
            <if test="brand.status != null">
                and status = #{brand.status}
            </if>
            <if test="brand.name != null and brand.name !=''">
                and name like #{brand.name}
            </if>
            <if test="brand.company != null and brand.company !=''">
                and company like #{brand.company}
            </if>
        </where>
        limit #{begin},#{size}
    </select>

    <select id="selectCountx" resultType="java.lang.Integer">
        select count(*)
        from brand
        <where>
            <if test="status != null">
                and status = #{status}
            </if>
            <if test="name != null and name !=''">
                and name like #{name}
            </if>
            <if test="company != null and company !=''">
                and company like #{company}
            </if>
        </where>
    </select>

</mapper>

service层（封装操作数据库的方法）

package com.company.web.server;

import com.company.web.pojo.Brand;
import com.company.web.mapper.BrandMapper;
import com.company.web.pojo.PageBean;
import com.company.web.servlet.SSF;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;

import java.util.List;

public class BrandServer {
    public List<Brand> select() {
        //1.加载mybatis核心配置文件
        SqlSessionFactory sqlSessionFactory = SSF.factory();

        //2.获取SqlSession对象，用它执行sql
        SqlSession sqlSession = sqlSessionFactory.openSession();

        //3.执行sql
        BrandMapper brandMapper = sqlSession.getMapper(BrandMapper.class);
        List<Brand> list = brandMapper.select();
        sqlSession.close();
        return list;
    }

    public PageBean selectx(Brand brand, int currentPage, int pageSize) {
        //1.加载mybatis核心配置文件
        SqlSessionFactory sqlSessionFactory = SSF.factory();

        //2.获取SqlSession对象，用它执行sql
        SqlSession sqlSession = sqlSessionFactory.openSession();

        //3.执行sql
        BrandMapper brandMapper = sqlSession.getMapper(BrandMapper.class);

        String name = brand.getName();
        if (name != null && name.length() > 0) {
            brand.setName("%" + name + "%");
        }

        String company = brand.getCompany();
        if (company != null && company.length() > 0) {
            brand.setCompany("%" + company + "%");
        }

        if (brand.getStatus() == 0) {
            brand.setStatus(null);
        }

        int begin = (currentPage - 1) * pageSize;
        int size = pageSize;

        List<Brand> list = brandMapper.selectx(brand, begin, size);
        int countx = brandMapper.selectCountx(brand);

        PageBean pageBean = new PageBean(list, countx);
        sqlSession.close();
        return pageBean;
    }

    public PageBean<Brand> selectByPage(int currentPage, int pageSize) {
        //1.加载mybatis核心配置文件
        SqlSessionFactory sqlSessionFactory = SSF.factory();

        //2.获取SqlSession对象，用它执行sql
        SqlSession sqlSession = sqlSessionFactory.openSession();

        //3.执行sql
        BrandMapper brandMapper = sqlSession.getMapper(BrandMapper.class);

        int begin = (currentPage - 1) * pageSize;
        int size = pageSize;

        int count = brandMapper.selectCount();
        List<Brand> list = brandMapper.selectByPage(begin, size);

        PageBean pageBean = new PageBean(list, count);

        sqlSession.close();

        return pageBean;
    }

    public void add(Brand brand) {
        //1.加载mybatis核心配置文件
        SqlSessionFactory sqlSessionFactory = SSF.factory();

        //2.获取SqlSession对象，用它执行sql
        SqlSession sqlSession = sqlSessionFactory.openSession();

        //3.执行sql
        BrandMapper brandMapper = sqlSession.getMapper(BrandMapper.class);
        brandMapper.add(brand);
        sqlSession.commit();
        sqlSession.close();
    }

    public void del(int[] ids) {
        //1.加载mybatis核心配置文件
        SqlSessionFactory sqlSessionFactory = SSF.factory();

        //2.获取SqlSession对象，用它执行sql
        SqlSession sqlSession = sqlSessionFactory.openSession();

        //3.执行sql
        BrandMapper brandMapper = sqlSession.getMapper(BrandMapper.class);
        brandMapper.del(ids);
        sqlSession.commit();
        sqlSession.close();
    }

}

 servlet层（响应请求，调用service的方法）

package com.company.web.servlet;

import com.alibaba.fastjson.JSON;
import com.company.web.pojo.Brand;
import com.company.web.pojo.PageBean;
import com.company.web.server.BrandServer;

import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.BufferedReader;
import java.io.IOException;


@WebServlet(urlPatterns = {"/selectxServlet"})
public class SelectxServlet extends HttpServlet {
    BrandServer brandServer = new BrandServer();

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        String _CurrentPage = req.getParameter("currentPage");
        String _PageSize= req.getParameter("pageSize");

        int currentPage = Integer.parseInt(_CurrentPage);
        int pageSize = Integer.parseInt(_PageSize);

        BufferedReader reader = req.getReader();

        String json = reader.readLine();
        Brand brand = JSON.parseObject(json,Brand.class);

        PageBean pageBean = brandServer.selectx(brand,currentPage,pageSize);
        json = JSON.toJSONString(pageBean);

        resp.setContentType("text/json;charset=utf8");
        resp.getWriter().write(json);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws  IOException {
        doGet(req, resp);
    }
}

至此，已完成对jvav se 、jvav sql、jvav web的学习，下面将开启spring篇

完整源码过于啰嗦，这里就不放了，有需要者欢迎评论/私信获取

世界线回溯，从jvav到架构师

思维剪刀差
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
电子商务后台管理系统
06-30
电子商务后台管理系统
酒店管理系统.zip
11-17
上传的资源为酒店管理系统，基本语言采用的是Java与web动态项目，内含mysql数据库脚本与项目源代码，还有软件录制视频与截图，如果在使用的过程中遇到了些许问题，也可以留言帮你解决，希望我所上传的资源能够真正...
Java基于Vue框架的电商后台管理系统(源码+mysql+文档)
and866的博客
01-10 1154
• 在这种开发技术模式下，系统的开发流程主要是前端专注于使用Vue.js构建动态和响应式的用户界面，同时通过Ajax技术与后端进行数据交换，实现了前后端的逻辑分离。后端SSM框架结合了Spring的依赖注入和事务管理、SpringMVC的模型-视图-控制器架构以及MyBatis的数据持久化功能，为后端开发提供全面的支持。传统的后台管理系统往往无法满足这些需求，因此，开发一款基于Vue框架的电商后台管理系统具有重要的现实意义。因此，基于Vue框架的电商后台管理系统具有很高的实用价值和广泛的应用前景。
[附源码]JAVA计算机毕业设计电商后台管理系统（源码+开题）
便捷程序设计
04-01 841
此外，本研究还将关注系统的安全性，采取有效的安全防护措施，确保企业数据的安全性和完整性。然而，电商业务规模的扩大也带来了后台管理的挑战。同时，我们还将优化用户界面的设计，提供简洁明了的操作界面，降低用户的学习成本，提高用户的使用体验。同时，我们还将加强系统的安全防护措施，包括防火墙设置、数据备份和恢复等，确保系统的稳定运行和数据的安全。综上所述，本研究将全面考虑电商后台管理系统的各个方面，从用户需求出发，设计并实现一套功能完善、性能稳定、安全可靠的电商后台管理系统，为电商企业的发展提供有力支持。
Java基于Vue框架的电商后台管理系统（开题+源码）
便捷程序设计
11-18 225
然而，现有的电商后台管理系统在商品分类、商品信息管理、用户管理和订单信息处理等方面存在一些问题，如操作繁琐、效率低下、数据不准确等，这些问题严重影响了企业的运营效率和用户体验。因此，针对现有电商后台管理系统的不足，开发一套高效、稳定、易用的电商后台管理系统，具有重要的现实意义和市场需求。本系统的目的是开发一套基于Vue框架的电商后台管理系统，实现商品分类、商品信息管理、用户管理和订单信息处理等功能，以提高企业的运营效率和管理水平，减少人工干预和错误率，提高用户体验和满意度。
JAVA电商平台项目后台实现
qq_44716544的博客
07-15 1717
主要功能： 用户进行登录，登陆后可进行对商品类型管理，商品管理和系统用户管理进行操作。主要是进行添加，修改，删除和状态更改。 代码下载（gitee)：https://gitee.com/c-xiaobai-c/online-mall.git csdn下载（有积分下载）： 目录结构 . ...
JAVA计算机毕业设计基于springboot的电商后台管理系统（附源码+springboot+开题+论文）
最新发布
sryue06的博客
04-22 717
因此，开发一款基于SpringBoot的电商后台管理系统，以实现对商品、用户、订单等信息的全面管理，成为当前电商行业亟待解决的问题。在实践层面，该系统能够为企业提供一个功能强大、操作便捷的后台管理平台，帮助企业实现对商品、用户、订单等信息的全面管理，提升企业的市场竞争力。同时，通过精准营销和个性化推荐等功能，提升企业的销售额和利润水平。首先，针对传统电商后台管理系统功能单一、操作繁琐的问题，我们将通过优化系统架构和功能设计，实现用户管理、商品分类、商品信息展示以及商品咨询处理等核心功能的集成与高效运行。
开源Jvav swing.rar_java 打印_jvav_swing 内容_swing 打印_打印
09-14
一个开源Jvav swing项目,内容极其丰富,特别是打印和预览功能,代码可直接复用
JVAV面向对象课程设计 GUI做的 学生管理系统
01-01
JAVA 课程设计 GUI做的学生管理系统 答辩的时候 记得看看同学的 别重复了 不行就改一改
Java零基础-网盘链接
07-29
JavaSE-Java零基础 里有两个版本的JDK（新的JDK13 和旧的JDK8）
Jvav_Dumps_OCPJP:有助于理解 Java 转储的小代码片段。 这个项目可以帮助准备OCPJP
06-05
Java 转储 OCPJP 有助于理解 Java 转储的小代码片段。 这个项目可以帮助准备OCPJP 链接
java后台代码基于电商平台
03-13
该代码为电商平台后台代码,用于平时学习，参考之用，不可他用！
电商前后台应用
03-27
本资源是一个电商平台，后端发布前端展示并进行购买，有订单模型，无真实的支付，可以自行接入第三方支付平台
电子商务源码前后台
01-19
java 前后台电子商务源码， 数据库 前后台源码 框架 ssh
电商网站完整代码(前端+后端)
06-29
本资源仅供参考学习，侵权必究！。。。。。。。。。。。。。。
Java集合实战电商后台管理
weixin_68372017的博客
11-24 77
完整代码请访问下方链接自行查询。
基于Java+SpringBoot+Vue前后端分离电商应用系统设计和实现
java李阳勇的博客
09-07 328
现代经济快节奏发展以及不断完善升级的信息化技术，让传统数据信息的管理升级为软件存储，归纳，集中处理数据信息的管理方式。本电商应用系统就是在这样的大环境下诞生，其可以帮助管理者在短时间内处理完毕庞大的数据信息，使用这种软件工具可以帮助管理人员提高事务处理效率，达到事半功倍的效果。
jvav学生管理系统
12-21
根据提供的引用内容，Java学生管理系统是一个用于管理学生就业信息的信息管理系统。它使用了Maven作为项目构建工具，采用了Spring Boot和Layui框架进行开发。该系统可以实现学生就业信息的高效查询、修改、删除等...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值