vue+element ui 项目 后台管理系统

最新推荐文章于 2025-04-20 16:50:52 发布
最新推荐文章于 2025-04-20 16:50:52 发布
阅读量7.1k 收藏 35
点赞数 2
文章标签： elementui vue java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47053593/article/details/123747015
版权

  前端界面


<!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>
    <script src="element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
</head>
<body>

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

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

<div id="app">

    <!--    搜索框-->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">

        <el-form-item label="当前状态">
            <el-select v-model="formInline.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="formInline.brandName" clearable @clear="selSubmit" placeholder="品牌名称"></el-input>
        </el-form-item>

        <el-form-item label="企业名称">
            <el-input v-model="formInline.companyName" clearable @clear="selSubmit" placeholder="企业名称"></el-input>
        </el-form-item>

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

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

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

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

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

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


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


        </span>
    </el-dialog>

<!--    修改表单-->
    <el-dialog title="修改企业信息" :visible.sync="vie" width="30%">


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

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

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

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

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


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


        </span>
    </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>

            <!--            id-->
            <el-table-column
                    type="index">
            </el-table-column>

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


            <el-table-column prop="companyName" label="企业名称" width="180" 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 prop="address" label="操作" align="center">
<!--              slot-scope="scope"  用来获取元素id-->
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="open(scope.$index, scope.row)">修改</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="del(scope.$index, scope.row)">删除</el-button>
                </template>

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

    <!--    分页-->
    <div class="block">

        <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="total">
        </el-pagination>
    </div>
</div>

<script>
    new Vue({
        el: "#app",
        // 数据区
        data() {
            return {
                //模型区


                //分页
                //当前页
                currentPage:2,

                //每页显示条数
                pageSizes: [5, 10, 20, 30],

                //每页显示条数初始化值
                pageSize: 5,

                //总条数
                total: 1,


                //搜索框模型
                formInline: {
                    brandName: '',
                    companyName: '',
                    status: "",
                },

                //新增表单模型
                form: {
                    brandName: "",
                    companyName: "",
                    ordered: "",
                    description: "",
                    status: ""
                },
                // 修改
                from: {
                    brandName: "",
                    companyName: "",
                    ordered: "",
                    description: "",
                    status: "",
                },

                //对话框
                dialogVisible: false,

                // 修改对话框的显示
                vie:false,


                tableData: [],

                //删除复选
                multipleSelection: [],
                //删除复选id
                ids:[],


            }
        },











        //方法区
        methods: {
            // 搜索
            // 后端返回 数据+总条数

            selSubmit() {

                console.log(this.formInline)
                axios({
                    method:"post",
                    url:"http://localhost:8080/elementdemo1/SelServlet?currentPage="+this.currentPage+"&pageSize="+this.pageSize,
                    data:this.formInline
                }).then(resp=>{
                    this.tableData=resp.data.list
                    this.total=resp.data.total
                })
            },

            // 开启修改框并 传递数据
            open(index, row){
                this.vie=true
                this.from=row
            },
            // 修改
            update(index, row){
                this.vie=false
                axios({
                    method: "post",
                    url: "http://localhost:8080/elementdemo1/UpdateServlet",
                    data:this.from
                }).then(resp =>{
                    if(resp.data){

                        //1,关闭对话框
                        this.vie=false
                        //2，弹出提示
                        this.$message({
                            message: '修改成功',
                            type: 'success'
                        });
                        //3,重新查询
                        this.handleCurrentChange(this.currentPage)
                    }else {
                        //添加失败
                        this.$message.error('修改失败');
                    }
                })



            },

            // 删除
            del(index, row){
               axios({
                   method:"get",
                   url:"http://localhost:8080/elementdemo1/DelServlet?id="+row.id,
               }).then(resp=>{
                   if(resp.data){
                       //1弹出提示
                       this.$message({
                           message: '删除成功',
                           type: 'success'
                       });
                       //2,重新查询
                       this.handleCurrentChange(this.currentPage)
                   }else {
                       //删除失败
                       this.$message.error('删除失败');
                   }
               })
            },
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },


            //批量删除方法
            delAll(){
                //创建一个模型  id
                for(let i=0;i<this.multipleSelection.length;i++){
                    var id=this.multipleSelection[i].id
                    this.ids[i]=id
                }

                //发送ajax
                axios({
                    method:"post",
                    url:"http://localhost:8080/elementdemo1/DelAllServlet",
                    data:this.ids
                }).then(resp =>{
                    if(resp.data){
                        //1弹出提示
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        //2,重新查询
                        this.handleCurrentChange(this.currentPage)
                    }else {
                        //删除失败
                        this.$message.error('删除失败');
                    }
                })
            },
            //删除复选
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },

            //新增表单提交
            onSubmit() {

                axios({
                    method: "post",
                    url: "http://localhost:8080/elementdemo1/AddServlet",
                    data:this.form
                }).then(resp =>{
                    if(resp.data){
                        //添加成功
                        //1,关闭对话框
                        this.dialogVisible=false
                        //2，弹出提示
                        this.$message({
                            message: '添加成功',
                            type: 'success'
                        });
                        //3,重新查询
                        this.handleCurrentChange(this.currentPage)
                    }else {
                        //添加失败
                        this.$message.error('添加失败');
                    }
                })

            },



            //每页显示条数改变
            handleSizeChange(val) {
                this.pageSize=val

                axios({
                    method:"get",
                    url:"http://localhost:8080/elementdemo1/PageServlet?currentPage="+this.currentPage+"&pageSize="+this.pageSize
                }).then(resp =>{
                    this.tableData=resp.data.list
                    this.total=resp.data.total
                })

            },


            //当前页改变触发
            handleCurrentChange(val) {
                this.currentPage= val

                axios({
                    method:"get",
                    url:"http://localhost:8080/elementdemo1/PageServlet?currentPage="+this.currentPage+"&pageSize="+this.pageSize
                }).then(resp =>{
                    this.tableData=resp.data.list
                    this.total=resp.data.total
                })
            },

            SelAll(){
                axios({
                    method:"get",
                    url:"http://localhost:8080/elementdemo1/SelAllServlet"
                }).then(resp =>{
                    this.tableData=resp.data
                })
            }



        },

        //钩子
        mounted(){
            //1=当前页
            this.handleCurrentChange(1)

        }
    })
</script>
</body>
</html>

查询所有功能 web层   service层  dao层

package web;

import com.alibaba.fastjson.JSON;
import po.Brand;
import service.SelAllService;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.util.List;

@WebServlet("/SelAllServlet")
public class SelAllServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//掉用下一层
        SelAllService selService=new SelAllService();
//        调用方法  并接受返回值
        List<Brand> sel = selService.sel();
//        转成json字符串
        String s = JSON.toJSONString(sel);
//        设置响应头
        response.setContentType("text/json;charset=utf-8");
//        返回数据
        response.getWriter().write(s);


    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");//手动解码
        this.doGet(request, response);//把数据传给get
    }
}

package service;

import dao.SelAllDao;
import po.Brand;

import java.util.List;

public class SelAllService {
    public List<Brand> sel() {
//        不用进行逻辑处理  直接调用dao
        SelAllDao selDao=new SelAllDao();
       return selDao.sel();
    }
}

package dao;

import po.Brand;
import util.JdbcUtil;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

public class SelAllDao {
    public List<Brand> sel() {
//        连接数据库
        Connection conn= JdbcUtil.getconn();
        ResultSet re=null;
        PreparedStatement pr=null;
        List<Brand> list=new ArrayList<>();

//查询语句
        String sql="select*from tb_brand";
        try {
            pr=conn.prepareStatement(sql);
            re=pr.executeQuery();
            while (re.next()){
                Brand brand=new Brand();
                brand.setId(re.getInt("id"));
                brand.setBrandName(re.getString("brand_name"));
                brand.setCompanyName(re.getString("company_name"));
                brand.setOrdered(re.getInt("ordered"));
                brand.setDescription(re.getString("description"));
                brand.setStatus(re.getInt("status"));

//                将查找到的数据添加到list集合
                list.add(brand);

            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
//        关流
        JdbcUtil.getclose(pr, conn, re);
//        返回list集合
        return list;


    }
}

分页功能  查询总条数功能  web层   service层  dao层

 

package web;

import com.alibaba.fastjson.JSON;
import po.Brand;
import po.PageBrand;
import service.PageService;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;

@WebServlet("/PageServlet")
public class PageServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

//        接收参数
        String currentPage = request.getParameter("currentPage");
        String pageSize = request.getParameter("pageSize");
//        转成int类型
        int  currentPages = Integer.parseInt(currentPage);
        int pageSizes = Integer.parseInt(pageSize);
//        调用下一层
        PageService pageService=new PageService();
        PageBrand<Brand> page = pageService.page(currentPages, pageSizes);

//        转json
        String s = JSON.toJSONString(page);
//        设置响应头
        response.setContentType("text/json;charset=utf-8");
//        返回数据
        response.getWriter().write(s);

    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");//手动解码
        this.doGet(request, response);//把数据传给get
    }
}

 

package service;

import dao.PageDao;
import po.Brand;
import po.PageBrand;

import java.util.List;

public class PageService {
    public PageBrand<Brand> page(int currentPages, int pageSizes) {
//        返回两个   数据集合  总条数

//        创建返回对象
        PageBrand<Brand> pageBrand=new PageBrand<>();
//        查询总条数
        PageDao pageDao=new PageDao();
        int total = pageDao.total();
//        封装
          pageBrand.setTotal(total);

//         查询数据
        List<Brand> sel = pageDao.sel(currentPages, pageSizes);
//        封装
        pageBrand.setList(sel);
//        返回

        return pageBrand;





    }
}

package dao;

import po.Brand;
import util.JdbcUtil;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;

public class PageDao {
//    查询总条数
    public int total() {
        Connection conn = JdbcUtil.getconn();
        ResultSet re = null;
        PreparedStatement pr = null;
        int total = -1;

        String sql = "select count(*) as count  from tb_brand";

        try {
            pr = conn.prepareStatement(sql);

            re = pr.executeQuery();

            while (re.next()) {
                total = re.getInt("count");
            }

        } catch (Exception e) {
            e.printStackTrace();
        }

        return total;


    }

//查询数据
    public List<Brand> sel(int currentPages, int pageSizes) {
        Connection conn = JdbcUtil.getconn();
        ResultSet re = null;
        PreparedStatement pr = null;
        List<Brand> list = new ArrayList<>();
        //                5   ,5
        String sql = "select * from tb_brand limit ?,?";

        try {
            pr = conn.prepareStatement(sql);
            //当前页-1*每页条数 ==  起始值
            //每页条数         ==  终止值
            //          2  5         2-1=1*5
            pr.setInt(1, (currentPages - 1) * pageSizes);
            pr.setInt(2, pageSizes);

            re = pr.executeQuery();

            while (re.next()) {
                Brand brand = new Brand();
                brand.setId(re.getInt("id"));
                brand.setBrandName(re.getString("brand_name"));
                brand.setCompanyName(re.getString("company_name"));
                brand.setOrdered(re.getInt("ordered"));
                brand.setDescription(re.getString("description"));
                brand.setStatus(re.getInt("status"));

                list.add(brand);
            }
        } catch (Exception e) {
            e.printStackTrace();
        }

        return list;
    }
}

删除功能  web层   service层  dao层

    package web;

    import service.DelService;

    import javax.servlet.*;
    import javax.servlet.http.*;
    import javax.servlet.annotation.*;
    import java.io.IOException;

    @WebServlet( "/DelServlet")
    public class DelServlet extends HttpServlet {
        @Override
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    //        接收数据
            String s = request.getParameter("id");
    //        将id强转为int类型
            int id=Integer.parseInt(s);
    //        调用下一层
            DelService delService=new DelService();
            boolean a = delService.del(id);
    //        返回数据
            if (a){
                response.getWriter().write("true");
            }


        }

        @Override
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            request.setCharacterEncoding("utf-8");//手动解码
            this.doGet(request, response);//把数据传给get
        }
    }

 

package service;

import dao.DelDao;

public class DelService {

    public boolean del(int id) {
//        调用下一层
        DelDao delDao=new DelDao();
       return delDao.del(id);
    }
}

package dao;

import util.JdbcUtil;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

public class DelDao {
    public boolean del(int id) {
//        连接数据库

        Connection conn = JdbcUtil.getconn();
        ResultSet re=null;
        PreparedStatement pr=null;
        boolean a=false;

        String sql="delete from tb_brand where id=?";

        try {
            pr = conn.prepareStatement(sql);

            pr.setInt(1,id);

            int i = pr.executeUpdate();
//            判断是否删除成功
            if (i==1){
                a=true;
            }else {
                a=false;
            }


        } catch (SQLException e) {
            e.printStackTrace();
        }

//        关流
        JdbcUtil.getclose(pr, conn, re);
        return a;

    }
}

批量删除功能    web层   service层  dao层

 

package web;

import com.alibaba.fastjson.JSON;
import po.Brand;
import service.DelAll;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;

@WebServlet( "/DelAllServlet")
public class DelAllServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

//        接收数据
        String s = request.getReader().readLine();

//        转格式
        int[] ints = JSON.parseObject(s, int[].class);
//        Integer integer = JSON.parseObject(s, int.class);

//        调用下一层1
        DelAll delAll=new DelAll();
        delAll.del(ints);
//        delAll.del(integer);
        //返回数据
        response.getWriter().write("true");

    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");//手动解码
        this.doGet(request, response);//把数据传给get
    }
}

package service;

import dao.DelAlldao;

public class DelAll {

    public void del(int[] ints) {
        DelAlldao delAlldao=new DelAlldao();
        delAlldao.del(ints);

    }
}

package dao;

import po.Brand;
import util.JdbcUtil;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;

public class DelAlldao {
//    public void delAll(Integer integer) {
//
//        Brand brand=new Brand();
//        brand.setId(integer);
//            Connection conn = JdbcUtil.getconn();
//            ResultSet re = null;
//            PreparedStatement pr = null;
//
//
            用批量删除语句进行删除
//            String sql = "delete from tb_brand where id in ( ? )";
//
//            try {
//                pr = conn.prepareStatement(sql);
//
//                pr.setInt(1, brand.getId());
//
//                int i = pr.executeUpdate();
//
//
//            } catch (SQLException e) {
//                e.printStackTrace();
//            } finally {
//                //        关流
//                JdbcUtil.getclose(pr, conn, re);
//
//            }
//
//
//        }







    public void del(int[] ints) {


        for (int id : ints) {





            Connection conn = JdbcUtil.getconn();
            ResultSet re = null;
            PreparedStatement pr = null;


//            用批量删除语句进行删除
            String sql = "delete from tb_brand where id in ( ? )";

            try {
                pr = conn.prepareStatement(sql);

                pr.setInt(1, id);

                int i = pr.executeUpdate();


            } catch (SQLException e) {
                e.printStackTrace();
            } finally {
                //        关流
                JdbcUtil.getclose(pr, conn, re);

            }


        }
//
//
//
//
    }
}

新增表单功能    web层   service层  dao层

 

package web;

import com.alibaba.fastjson.JSON;
import po.Brand;
import service.Addservice;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;

@WebServlet( "/AddServlet")
public class AddServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//        接收数据
        String s = request.getReader().readLine();
//        把json字符串转成对象
        Brand brand = JSON.parseObject(s, Brand.class);
        //调用下一层
        Addservice addservice=new Addservice();
        boolean bo = addservice.add(brand);
//        向前端返回结果
        response.getWriter().write(String.valueOf(bo));

    }


    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");//手动解码
        this.doGet(request, response);//把数据传给get
    }
}

package service;

import dao.AddDao;
import po.Brand;

public class Addservice {

    public boolean add(Brand brand) {
//        屌用下一层
        AddDao addDao=new AddDao();
       return addDao.add(brand);
    }
}


            Connection conn = JdbcUtil.getconn();
            ResultSet re=null;
            PreparedStatement pr=null;
            boolean bo=false;

            String sql="insert into tb_brand (brand_name,company_name,ordered,description,status)values (?,?,?,?,?)";

            try {
                pr = conn.prepareStatement(sql);

                pr.setString(1, brand.getBrandName());
                pr.setString(2, brand.getCompanyName());
                pr.setInt(3, brand.getOrdered());
                pr.setString(4, brand.getDescription());
                pr.setInt(5,brand.getStatus());

                //i 受影响条数
                int i = pr.executeUpdate();

                if(i==1){
                    bo=true;
                }


            } catch (SQLException e) {
                e.printStackTrace();
            }
            JdbcUtil.getclose(pr, conn, re);
            return bo;

修改表单信息功能     web层   service层  dao层

 

package web;

import com.alibaba.fastjson.JSON;
import po.Brand;
import service.UpdateService;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;

@WebServlet( "/UpdateServlet")
public class UpdateServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //        接收数据
        String s = request.getReader().readLine();
//        把json字符串转成对象
        Brand brand = JSON.parseObject(s, Brand.class);
//        调用下一层
        UpdateService updateService=new UpdateService();
        boolean upd = updateService.upd(brand);

//        返回数据
        response.getWriter().write(String.valueOf(upd));

    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");//手动解码
        this.doGet(request, response);//把数据传给get
    }
}

package service;

import dao.UpdateDao;
import po.Brand;

public class UpdateService {
    public boolean upd(Brand brand) {
//        调用下一层
        UpdateDao updateDao=new UpdateDao();
        return updateDao.upd(brand);

    }
}

package dao;

import po.Brand;
import util.JdbcUtil;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

public class UpdateDao {
    public boolean upd(Brand brand) {

        Connection conn = JdbcUtil.getconn();
        ResultSet re=null;
        PreparedStatement pr=null;
        boolean bo=false;

        String sql = "update  `tb_brand`set brand_name=?,company_name=?,ordered=?,description=?,status=? where id=?";



        try {
            pr = conn.prepareStatement(sql);
//            给问号赋值
            pr.setString(1,brand.getBrandName());
            pr.setString(2,brand.getCompanyName());
            pr.setInt(3,brand.getOrdered());
            pr.setString(4,brand.getDescription());
            pr.setInt(5,brand.getStatus());
            pr.setInt(6,brand.getId());


            //i 受影响条数
            int i = pr.executeUpdate();




            if(i==1){
                bo=true;
            }


        } catch (SQLException e) {
            e.printStackTrace();
        }finally {
            JdbcUtil.getclose(pr, conn, re);
            return bo;
        }
        }

}

搜索功能  模糊查询   web层   service层  dao层

package web;

import com.alibaba.fastjson.JSON;
import po.Brand;
import po.PageBrand;
import service.PageService;
import service.SelService;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.util.List;

@WebServlet( "/SelServlet")
public class SelServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

//        接收数据
        String s = request.getReader().readLine();
        String currentPage = request.getParameter("currentPage");
        String pageSize = request.getParameter("pageSize");

//      转格式
        Brand brand1 = JSON.parseObject(s, Brand.class);
        int  currentPages = Integer.parseInt(currentPage);
        int pageSizes = Integer.parseInt(pageSize);


//        调用下一层
        SelService sel=new SelService();
        PageBrand<Brand> sel1 = sel.sel(brand1, currentPages, pageSizes);


//        转json格式
        String s1 = JSON.toJSONString(sel1);
//        设置响应头
        response.setContentType("text/json;charset=utf-8");
        System.out.println(s1);

//        返回数据
        response.getWriter().write(s1);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");//手动解码
        this.doGet(request, response);//把数据传给get
    }
}

package service;

import dao.SelDao;
import po.Brand;
import po.PageBrand;

import java.util.List;

public class SelService {

    public PageBrand<Brand> sel(Brand brand1, int currentPages, int pageSizes) {
       PageBrand<Brand> pageBrand=new PageBrand<>();
//        调用下一层
        SelDao selDao=new SelDao();
        List<Brand> sel = selDao.sel(brand1, currentPages, pageSizes);
//        封装
        pageBrand.setList(sel);

//        调用下一层
        int total = selDao.total(brand1);
//        封装
        pageBrand.setTotal(total);

        return pageBrand;


    }




}

package dao;

import po.Brand;
import util.JdbcUtil;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

public class SelDao {


//    查询数据方法
    public List<Brand> sel(Brand brand1, int currentPages, int pageSizes) {
        //        连接数据库
        Connection conn = JdbcUtil.getconn();
        ResultSet re = null;
        PreparedStatement pr = null;
        List<Brand> list = new ArrayList<>();
//        查询语句
        System.out.println(brand1.toString());

        String sql = "select * from tb_brand where 1=1 ";
//        System.out.println("111111111111111");

        if (brand1.getStatus() != null) {
            sql += "and status= ? ";
        }
//        System.out.println("222222222222");

        if (!"".equals(brand1.getBrandName())) {
            sql += "and brand_name like ?";
        }

        if (!"".equals(brand1.getCompanyName())) {
            sql += "and company_name like ?";
        }
//        System.out.println("3333333333333333");
        sql += "limit ?,?";
        try {
            pr = conn.prepareStatement(sql);
// 定义int类型 变量i为后续占位符进行赋值
            int i = 1;
            if (brand1.getStatus() != null) {
                pr.setInt(i, brand1.getStatus());
                i++;
            }

            if (!"".equals(brand1.getBrandName())) {
                pr.setString(i, "%" + brand1.getBrandName() + "%");
                i++;
            }
            if (!"".equals(brand1.getCompanyName())) {
                pr.setString(i, "%" + brand1.getCompanyName() + "%");
                i++;
            }

            pr.setInt(i,(currentPages-1) * pageSizes);
            pr.setInt(++i, pageSizes);

            re = pr.executeQuery();

            while (re.next()) {
                Brand brand = new Brand();
                brand.setId(re.getInt("id"));
                brand.setBrandName(re.getString("brand_name"));
                brand.setCompanyName(re.getString("company_name"));
                brand.setOrdered(re.getInt("ordered"));
                brand.setDescription(re.getString("description"));
                brand.setStatus(re.getInt("status"));
                //                将查找到的数据添加到list集合
                list.add(brand);
            }


        }catch(SQLException e){
            e.printStackTrace();


        }finally {

//            关流
            JdbcUtil.getclose(pr, conn, re);
            return list;
        }


    }


    public int total(Brand brand1) {
        //        连接数据库
        Connection conn = JdbcUtil.getconn();
        ResultSet re = null;
        PreparedStatement pr = null;
        int total=-1;
//        查询语句
        System.out.println(brand1.toString());

        String sql = "select count(*) as count from tb_brand where 1=1 ";
//        System.out.println("111111111111111");

        if (brand1.getStatus() != null) {
            sql += "and status= ? ";
        }
//        System.out.println("222222222222");

        if (!"".equals(brand1.getBrandName())) {
            sql += "and brand_name like ?";
        }

        if (!"".equals(brand1.getCompanyName())) {
            sql += "and company_name like ?";
        }

        try {
            pr = conn.prepareStatement(sql);
// 定义int类型 变量i为后续占位符进行赋值
            int i = 1;
            if (brand1.getStatus() != null) {
                pr.setInt(i, brand1.getStatus());
                i++;
            }

            if (!"".equals(brand1.getBrandName())) {
                pr.setString(i, "%" + brand1.getBrandName() + "%");
                i++;
            }
            if (!"".equals(brand1.getCompanyName())) {
                pr.setString(i, "%" + brand1.getCompanyName() + "%");
            }


            re = pr.executeQuery();
            while (re.next()) {
                total = re.getInt("count");

            }


        }catch(SQLException e){
            e.printStackTrace();


        }finally {

//            关流
            JdbcUtil.getclose(pr, conn, re);
        }


        return total;

    }
}

容器

Brand

package po;


public class Brand {
    private int id;
    private String brandName;
    private String companyName;
    private  int ordered;
    String description;
//    需要把 int类型status 改Integer类型  不然能int默认值是0  但0代表禁用 所以改为改Integer类型
//    并且get set方法也需要改为ineger类型











    private Integer status;

    public Integer getStatus() {
        return status;
    }

    public void setStatus(Integer status) {
        this.status = status;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getBrandName() {
        return brandName;
    }

    public void setBrandName(String brandName) {
        this.brandName = brandName;
    }

    public String getCompanyName() {
        return companyName;
    }

    public void setCompanyName(String companyName) {
        this.companyName = companyName;
    }

    public int getOrdered() {
        return ordered;
    }

    public void setOrdered(int ordered) {
        this.ordered = ordered;
    }

    public String getDescription() {
        return description;
    }

    public void setDescription(String description) {
        this.description = description;
    }

    public Brand() {
    }

    public Brand(int id, String brandName, String companyName, int ordered, String description) {
        this.id = id;
        this.brandName = brandName;
        this.companyName = companyName;
        this.ordered = ordered;
        this.description = description;
    }

    @Override
    public String toString() {
        return "Brand{" +
                "id=" + id +
                ", brandName='" + brandName + '\'' +
                ", companyName='" + companyName + '\'' +
                ", ordered=" + ordered +
                ", description='" + description + '\'' +
                ", status=" + status +
                '}';
    }



}

PageBrand容器

package po;

import java.util.List;

public class PageBrand<T>{
    private  int total;


    private List<T>list;

    public PageBrand() {
    }

    public PageBrand(int total, List<T> list) {
        this.total = total;
        this.list = list;
    }

    public int getTotal() {
        return total;
    }

    public void setTotal(int total) {
        this.total = total;
    }

    public List<T> getList() {
        return list;
    }

    public void setList(List<T> list) {
        this.list = list;
    }


}

项目目录

 

Vue + ElementUI 实现后台管理系统模板 -- 前端篇（一，2024阿里手淘前端面试题目
fdsgdsgdfw的博客
03-30 1050
2、等待 出现以下提示 进入项目并启动3、启动项目 成功后进入以下界面 即创建成功基本环境配置1、自定义配置文件（此处为 vue-cli 4.0 创建的项目）（1）为什么使用自定义配置？有时候项目默认配置不能满足需求，可以手动去配置。【vue-cli 配置文件官方地址：】（2）如何使用？想要使用自定义配置，首先需要在 项目的根目录下 创建一个 vue.config.js。使用 json 格式进行配置。配置文件各属性可以自行查阅官方文档（此处不过多展开，简单举两个例子）。
基于vue + element UI 的后台管理系统模板
09-12
在本项目"基于vue + element UI 的后台管理系统模板"中，开发者可以利用这些组件和功能，快速搭建起一个具备基本管理功能的后台系统。通过动态路由的实现，系统可以根据用户权限动态加载相应的组件和页面，提高用户...
基于vueelementui的后台管理系统
08-12
本项是目基于vue element-ui 构建的后台管理系统， 具有真实的注册、登陆、管理数据、权限验证等功能。
vue-elementUI后台管理系统
2201_76092588的博客
12-27 5074
首先，我们要了解Vue.js是什么？Vue是一个独立的社区驱动的项目，它是由尤雨溪在2014年作为其个人项目创建，是一个成熟的、经历了无数实战考验的框架，它是目前生产环境中使用最广泛的JavaScript框架之一，可以轻松处理大多数web应用的场景，并且几乎不需要手动优化，并且Vue完全有能力处理大规模的应用。简单小巧是指Vue体量轻，压缩后大小仅有33KB；
基于Vue+element-ui开发的后台管理系统
最新发布
gitblog_06712的博客
04-20 385
基于Vue+element-ui开发的后台管理系统 【下载地址】基于Vueelement-ui开发的后台管理系统 这是一个基于Vue.js和element-ui开发的电商后台管理系统，旨在为用户提供高效、易用的管理界面。项目采用现代前端技术栈，包括Vue.js作为核心框架，element-ui构建桌面端组件，axios处...
Vue.js 2.0 + Element UI实现后台管理系统
07-18
Vue.js 2.0 + Element UI实现后台管理系统
基于 vue + element-ui 的后台管理系统
12-23
该项目是基于vue + element-ui的后台管理系统（企业级项目）。使用的技术包括：less、webpack、vuex、vue-router、element-ui。下载项目后可查看README.md文件，里面包含项目的启动信息等。在学习vue的同学，可以下载下来学习下。
基于vue + element-ui的后台管理系统
10-19
本项目是vue + element-ui构建的后台管理系统，是后台项目node-elm的管理系统，所有的数据都是从服务器实时获取的真实数据，具有真实的注册、登陆、管理数据、权限验证等功能。 注：项目预览地址和接口需要使用...
Vue + Element-ui后台管理系统模板.zip
06-04
这个“Vue + Element-ui后台管理系统模板”项目，利用 Vue CLI（Vue.js 的命令行工具）来初始化和管理项目。Vue CLI 提供了一套完整的脚手架，可以快速生成项目结构，包括路由、状态管理、单元测试等，使得开发者...
基于vue + element+ui的后台管理系统
12-30
本次所提及的后台管理系统是基于Vue框架结合Element UI组件库开发的，旨在为node-elm项目提供一个高效、直观、功能丰富的管理界面。该系统通过与服务器端进行数据交互，确保了注册、登录、数据管理、权限验证等核心...
基于vue + element-ui的后台管理系统基于 vue + element-ui 的后台管理系统.zip
04-01
数据库管理系统 (DBMS)：如Oracle、MySQL、SQL Server，用于创建、维护和查询结构化数据。 企业资源计划 (ERP)：整合企业的财务、供应链、人力资源、生产等多方面管理功能的综合性信息系统。 客户关系管理 (CRM)...
基于ElementUI的后台管理系统
08-09
基于ElementUI的后台管理系统
vueelementui构建的后台管理系统
08-10
vue element ui 构建的后台管理系统
基于vue2.0+element-ui的管理后台实例源码
09-05
基于vue2.0+element-ui的管理后台实例源码，包括路由管理，动态路由加载，全局导航守卫处理等功能，可以作为管理后台开发的非常好的参考
vue + element-ui构建的后台管理系统
02-20
此项目是vue + element-ui构建的后台管理系统，是后台项目node-elm的管理系统，所有的数据都是从服务器实时获取的真实数据，具有真实的注册，登陆，管理数据，权限验证等功能。
Vue+ElementUI 搭建后台管理系统（实战系列二）
祈澈菇凉
08-05 2047
这是我参与8月更文挑战的第2天，活动详情查看： 8月更文挑战 前言 使用ElementUI已经有一段时间了，在一边上手开发后台管理系统的同事，也记录了一些笔记，一直都没有时间将这些零零散散的笔记总结起来，整理成一个比较系统详细一点的教程，可以留着以后来看，正好在掘金上看到了关于8月更文挑战 的活动，看完我心动了，决定花一些时间和精力来参加这次的比较有意义的活动。 关于开发过程中，确实使用到很大一部...
antd vue form 手动校验_一起学Vue：UI框架(element-ui)
weixin_39950824的博客
11-02 273
目标使用Vue+ElementUI构建一个非常简单CRUD应用程序，以便您更好地了解它的工作方式。效果页面比如我们要实现这样列表、新增、编辑三个页面：列表页面新增页面编辑页面安装element我们使用 vue-cli@3 进行安装vue add element列表组件(TodoListWithUI.vue)与我们上次讲的无UI的列表组件逻辑基本都是一样的，我们这里主要用到了el-table，el-...
Vuejs+ElementUI搭建后台管理系统框架
架构师实战感悟
11-23 2040
README.md项目介绍说明信息。Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。babel.config.js 就是 babel 编辑器的配置文件。通常情况下，无需过多关注。项目依赖包目录，里边存储了当前 Web 项目依赖的 JavaScript 包。项目配置信息，包括依赖包信息。public公共文件目录，如 HTML 文件、图片等。src当前项目开发的 Vue 代码。
利用Vue+Element UI快速开发后台系统
5. **集成性**：它提供了一套集成的解决方案，可以快速构建出一个功能齐全的后台管理系统。 ### 使用 Vue + Element UI 搭建后台业务系统 1. **项目初始化**：使用 Vue CLI 创建一个新的 Vue 项目，并在项目中引入...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

一条 大鱼

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

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

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

打赏作者

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

抵扣说明：

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

余额充值