ajax前后端分离品牌管理项目

项目总结：基于Java+MyBatis+Vue的品牌管理系统

在这篇博客中，我将总结一个基于Java、MyBatis和Vue的品牌管理系统的开发过程。该项目实现了品牌信息的增删改查（CRUD）、分页查询、条件查询等功能，并通过Vue.js和Element UI构建了前端页面。以下是项目的详细总结和必要的代码片段。

一、项目概述

该项目是一个品牌管理系统，主要功能包括：

品牌信息的增删改查：支持添加、修改、删除和查询品牌信息。
分页查询：支持分页展示品牌数据。
条件查询：根据品牌名称、企业名称和状态进行模糊查询。
批量删除：支持一次性删除多个品牌。
前端页面：使用Vue.js和Element UI构建，提供了友好的用户界面。

二、技术栈

后端：Java、MyBatis、Servlet
前端：Vue.js、Element UI、Axios
数据库：MySQL
工具：Logback（日志管理）

三、核心功能实现

1. 后端实现

后端主要通过MyBatis和Servlet实现品牌管理的核心逻辑。

1.1 MyBatis Mapper

BrandMapper.java：定义了品牌管理的数据库操作接口。
BrandMapper.xml：通过XML配置实现动态SQL，支持条件查询和批量删除。

xml 复制代码

<!-- 批量删除 -->
<delete id="deleteByIds">
    delete from tb_brand where id in
    <foreach collection="ids" item="id" separator="," open="(" close=")">
        #{id}
    </foreach>
</delete>

<!-- 条件查询 -->
<select id="selectByCondition" resultMap="brandResultMap">
    select * from tb_brand
    <where>
        <if test="brand.status != null">
            and status = #{brand.status}
        </if>
        <if test="brand.brandName != null and brand.brandName != ''">
            and brand_name like #{brand.brandName}
        </if>
        <if test="brand.companyName != null and brand.companyName != ''">
            and company_name like #{brand.companyName}
        </if>
    </where>
    limit #{begin}, #{size}
</select>

1.2 Servlet处理请求

BrandServlet.java：处理前端发送的HTTP请求，调用Service层完成业务逻辑，并返回JSON格式的响应。

java 复制代码

@WebServlet("/brand/*")
public class BrandServlet extends BaseServlet {
    private BrandService brandService = new BrandServiceImpl();

    public void selectAll(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        List<Brand> brands = brandService.selectALl();
        String jsonString = JSON.toJSONString(brands);
        resp.setContentType("text/json;charset=utf-8");
        resp.getWriter().write(jsonString);
    }

    public void add(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        BufferedReader reader = req.getReader();
        String readLine = reader.readLine();
        Brand brand = JSON.parseObject(readLine, Brand.class);
        brandService.add(brand);
        resp.getWriter().write("success");
    }
}

2. 前端实现

前端使用Vue.js和Element UI构建，通过Axios与后端进行数据交互。

2.1 品牌列表展示

使用Element UI的el-table组件展示品牌数据，支持分页和条件查询。

html 复制代码

<el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
    <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" label="排序" align="center"></el-table-column>
    <el-table-column prop="status" label="当前状态" align="center"></el-table-column>
    <el-table-column label="操作" align="center">
        <el-button type="primary" @click="update">修改</el-button>
        <el-button type="danger" @click="deleteBrand">删除</el-button>
    </el-table-column>
</el-table>

2.2 分页功能

使用Element UI的el-pagination组件实现分页功能。

html 复制代码

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

2.3 条件查询

通过表单输入条件，调用后端接口进行查询。

javascript 复制代码

methods: {
    selectAll() {
        axios({
            method: "post",
            url: `http://localhost:8080/brand-demo/brand/selectByCondition?currentPage=${this.currentPage}&currentSize=${this.currentSize}`,
            data: this.brand
        }).then(res => {
            this.tableData = res.data.rows;
            this.totalCount = res.data.totalCount;
        });
    }
}

四、项目亮点

前后端分离：前端使用Vue.js，后端使用Java+MyBatis，通过RESTful API进行数据交互。
动态SQL：通过MyBatis的动态SQL实现灵活的条件查询和批量删除。
分页查询 ：结合MyBatis的LIMIT和OFFSET实现高效的分页查询。
前端交互友好：使用Element UI组件库，提供了美观且易用的用户界面。

五、未来优化方向

引入Spring Boot：简化项目配置，提升开发效率。
用户权限管理：增加用户登录和权限控制功能。
前端表单验证：增强表单输入的验证逻辑，提升用户体验。
日志管理：优化日志输出，便于问题排查和系统监控。

六、学习心得

通过该项目，我掌握了以下技能：

MyBatis的使用：包括注解开发和XML配置，尤其是动态SQL的实现。
前后端分离开发：使用Vue.js和Axios与后端进行数据交互。
分页查询的实现：结合MyBatis和前端分页组件，实现高效的数据展示。

未来，我计划继续学习Spring Boot和前端框架，进一步提升全栈开发能力。

源码地址 ：[www.github.com/yq123456789...]
效果截图：希望通过这篇博客记录我的学习历程，也欢迎大家一起交流探讨！