Java项目商品管理系统 Java产品管理系统
导读：Java项目商品管理系统，为网友们解答Java项目商品管理系统的相关话题，一起跟随小编看看吧！ 1、功能介绍 以上是我们在综合案例要实现的功能。对数据的除了对数据的增删改查功能外，还有
Java项目商品管理系统
为网友们解答Java项目商品管理系统的相关话题，一起跟随小编看看吧！
1、功能介绍
以上是我们在综合案例要实现的功能。对数据的除了对数据的增删改查功能外，还有一些复杂的功能，如批量删除、分页查询、条件查询等功能
批量删除功能：每条数据前都有复选框，当我选中多条数据并点击批量删除按钮后，会发送请求到后端并删除数据库中指定的多条数据。分页查询功能：当数据库中有很多数据时，我们不可能将所有的数据展示在一页里，这个时候就需要分页展示数据。条件查询功能：数据库量大的时候，我们就需要精确的查询一些想看到的数据，这个时候就需要通过条件查询。
2、技术栈
- servlet
- Vue
- axios
- Mybatis
- Tomcat
3、环境准备
3.1、数据库准备
use brand;
-- 删除tb_brand表
drop table if exists tb_brand;
-- 创建tb_brand表
create table tb_brand (
-- id 主键
id int primary key auto_increment,
-- 品牌名称
brand_name varchar(20),
-- 企业名称
company_name varchar(20),
-- 排序字段
ordered int,
-- 描述信息
description varchar(100),
-- 状态：0：禁用 1：启用
status int
);
-- 添加数据
insert into tb_brand (brand_name, company_name, ordered, description, status)
values
('华为', '华为技术有限公司', 100, '万物互联', 1),
('小米', '小米科技有限公司', 50, 'are you ok', 1),
('格力', '格力电器股份有限公司', 30, '让世界爱上中国造', 1),
('阿里巴巴', '阿里巴巴集团控股有限公司', 10, '买买买', 1),
('腾讯', '腾讯计算机系统有限公司', 50, '玩玩玩', 0),
('百度', '百度在线网络技术公司', 5, '搜搜搜', 0),
('京东', '北京京东世纪贸易有限公司', 40, '就是快', 1),
('小米', '小米科技有限公司', 50, 'are you ok', 1),
('三只松鼠', '三只松鼠股份有限公司', 5, '好吃不上火', 0),
('华为', '华为技术有限公司', 100, '万物互联', 1),
('小米', '小米科技有限公司', 50, 'are you ok', 1),
('格力', '格力电器股份有限公司', 30, '让世界爱上中国造', 1),
('阿里巴巴', '阿里巴巴集团控股有限公司', 10, '买买买', 1),
('腾讯', '腾讯计算机系统有限公司', 50, '玩玩玩', 0),
('百度', '百度在线网络技术公司', 5, '搜搜搜', 0),
('京东', '北京京东世纪贸易有限公司', 40, '就是快', 1),
('华为', '华为技术有限公司', 100, '万物互联', 1),
('小米', '小米科技有限公司', 50, 'are you ok', 1),
('格力', '格力电器股份有限公司', 30, '让世界爱上中国造', 1),
('阿里巴巴', '阿里巴巴集团控股有限公司', 10, '买买买', 1),
('腾讯', '腾讯计算机系统有限公司', 50, '玩玩玩', 0),
('百度', '百度在线网络技术公司', 5, '搜搜搜', 0),
('京东', '北京京东世纪贸易有限公司', 40, '就是快', 1),
('小米', '小米科技有限公司', 50, 'are you ok', 1),
('三只松鼠', '三只松鼠股份有限公司', 5, '好吃不上火', 0),
('华为', '华为技术有限公司', 100, '万物互联', 1),
('小米', '小米科技有限公司', 50, 'are you ok', 1),
('格力', '格力电器股份有限公司', 30, '让世界爱上中国造', 1),
('阿里巴巴', '阿里巴巴集团控股有限公司', 10, '买买买', 1),
('腾讯', '腾讯计算机系统有限公司', 50, '玩玩玩', 0),
('百度', '百度在线网络技术公司', 5, '搜搜搜', 0),
('京东', '北京京东世纪贸易有限公司', 40, '就是快', 1),
('华为', '华为技术有限公司', 100, '万物互联', 1),
('小米', '小米科技有限公司', 50, 'are you ok', 1),
('格力', '格力电器股份有限公司', 30, '让世界爱上中国造', 1),
('阿里巴巴', '阿里巴巴集团控股有限公司', 10, '买买买', 1),
('腾讯', '腾讯计算机系统有限公司', 50, '玩玩玩', 0),
('百度', '百度在线网络技术公司', 5, '搜搜搜', 0),
('京东', '北京京东世纪贸易有限公司', 40, '就是快', 1),
('小米', '小米科技有限公司', 50, 'are you ok', 1),
('三只松鼠', '三只松鼠股份有限公司', 5, '好吃不上火', 0),
('华为', '华为技术有限公司', 100, '万物互联', 1),
('小米', '小米科技有限公司', 50, 'are you ok', 1),
('格力', '格力电器股份有限公司', 30, '让世界爱上中国造', 1),
('阿里巴巴', '阿里巴巴集团控股有限公司', 10, '买买买', 1),
('腾讯', '腾讯计算机系统有限公司', 50, '玩玩玩', 0),
('百度', '百度在线网络技术公司', 5, '搜搜搜', 0),
('京东', '北京京东世纪贸易有限公司', 40, '就是快', 1);
3.2、在新建web项目中导入依赖
<dependencies>
<!--Servlet-->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.1.0</version>
<scope>provided</scope>
</dependency>
<!--MyBatis-->
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis</artifactId>
<version>3.5.5</version>
</dependency>
<!--MySQL-->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.46</version>
</dependency>
<!--fastjson-->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.62</version>
</dependency>
</dependencies>
3.3、编写Mybatis文件
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
<settings>
<!--在控制台显示SQL语句-->
<setting name="logImpl" value="STDOUT_LOGGING"/>
<setting name="mapUnderscoreToCamelCase" value="true"/>
</settings>
<typeAliases>
<package name="com.demo.pojo"/>
</typeAliases>
<environments default="development">
<environment id="development">
<transactionManager type="JDBC"/>
<dataSource type="POOLED">
<property name="driver" value="com.mysql.jdbc.Driver"/>
<property name="url" value="jdbc:mysql:///brand?useSSL=false"/>
<property name="username" value="root"/>
<property name="password" value="123456"/>
</dataSource>
</environment>
</environments>
<mappers>
<!--扫描mapper-->
<package name="com.demo.mapper"/>
</mappers>
</configuration>
3.4、编写pojo类
public class Brand {
// id 主键
private Integer id;
// 品牌名称
private String brandName;
// 企业名称
private String companyName;
// 排序字段
private Integer ordered;
// 描述信息
private String description;
// 状态：0：禁用 1：启用
private Integer status;
.....省略方法
}
3.5、编写Mybatis工具类
public class MyBatisUtils {
private static SqlSessionFactory sqlSessionFactory;
// 我们只需要一个SqlSessionFactory,在静态代码块中创建SqlSessionFactory
static {
try {
// 编写代码让MyBatis跑起来,执行SQL语句
String resource = "mybatis-config.xml";
// 加载核心配置文件
InputStream inputStream = Resources.getResourceAsStream(resource);
// 得到SqlSession工厂,赋值给成员变量
sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
} catch (IOException e) {
e.printStackTrace();
}
}
// 返回SqlSessionFactory
public static SqlSessionFactory getSqlSessionFactory() {
return sqlSessionFactory;
}
// 返回SqlSession
public static SqlSession openSession() {
return sqlSessionFactory.openSession();
}
public static SqlSession openSession(boolean autoCommit) {
return sqlSessionFactory.openSession(autoCommit);
}
}
3.6、导入前端素材（element-ui & vue.js & axios.js）
use brand;
-- 删除tb_brand表
drop table if exists tb_brand;
-- 创建tb_brand表
create table tb_brand (
-- id 主键
id int primary key auto_increment,
-- 品牌名称
brand_name varchar(20),
-- 企业名称
company_name varchar(20),
-- 排序字段
ordered int,
-- 描述信息
description varchar(100),
-- 状态：0：禁用 1：启用
status int
);
-- 添加数据
insert into tb_brand (brand_name, company_name, ordered, description, status)
values
('华为', '华为技术有限公司', 100, '万物互联', 1),
('小米', '小米科技有限公司', 50, 'are you ok', 1),
('格力', '格力电器股份有限公司', 30, '让世界爱上中国造', 1),
('阿里巴巴', '阿里巴巴集团控股有限公司', 10, '买买买', 1),
('腾讯', '腾讯计算机系统有限公司', 50, '玩玩玩', 0),
('百度', '百度在线网络技术公司', 5, '搜搜搜', 0),
('京东', '北京京东世纪贸易有限公司', 40, '就是快', 1),
('小米', '小米科技有限公司', 50, 'are you ok', 1),
('三只松鼠', '三只松鼠股份有限公司', 5, '好吃不上火', 0),
('华为', '华为技术有限公司', 100, '万物互联', 1),
('小米', '小米科技有限公司', 50, 'are you ok', 1),
('格力', '格力电器股份有限公司', 30, '让世界爱上中国造', 1),
('阿里巴巴', '阿里巴巴集团控股有限公司', 10, '买买买', 1),
('腾讯', '腾讯计算机系统有限公司', 50, '玩玩玩', 0),
('百度', '百度在线网络技术公司', 5, '搜搜搜', 0),
('京东', '北京京东世纪贸易有限公司', 40, '就是快', 1),
('华为', '华为技术有限公司', 100, '万物互联', 1),
('小米', '小米科技有限公司', 50, 'are you ok', 1),
('格力', '格力电器股份有限公司', 30, '让世界爱上中国造', 1),
('阿里巴巴', '阿里巴巴集团控股有限公司', 10, '买买买', 1),
('腾讯', '腾讯计算机系统有限公司', 50, '玩玩玩', 0),
('百度', '百度在线网络技术公司', 5, '搜搜搜', 0),
('京东', '北京京东世纪贸易有限公司', 40, '就是快', 1),
('小米', '小米科技有限公司', 50, 'are you ok', 1),
('三只松鼠', '三只松鼠股份有限公司', 5, '好吃不上火', 0),
('华为', '华为技术有限公司', 100, '万物互联', 1),
('小米', '小米科技有限公司', 50, 'are you ok', 1),
('格力', '格力电器股份有限公司', 30, '让世界爱上中国造', 1),
('阿里巴巴', '阿里巴巴集团控股有限公司', 10, '买买买', 1),
('腾讯', '腾讯计算机系统有限公司', 50, '玩玩玩', 0),
('百度', '百度在线网络技术公司', 5, '搜搜搜', 0),
('京东', '北京京东世纪贸易有限公司', 40, '就是快', 1),
('华为', '华为技术有限公司', 100, '万物互联', 1),
('小米', '小米科技有限公司', 50, 'are you ok', 1),
('格力', '格力电器股份有限公司', 30, '让世界爱上中国造', 1),
('阿里巴巴', '阿里巴巴集团控股有限公司', 10, '买买买', 1),
('腾讯', '腾讯计算机系统有限公司', 50, '玩玩玩', 0),
('百度', '百度在线网络技术公司', 5, '搜搜搜', 0),
('京东', '北京京东世纪贸易有限公司', 40, '就是快', 1),
('小米', '小米科技有限公司', 50, 'are you ok', 1),
('三只松鼠', '三只松鼠股份有限公司', 5, '好吃不上火', 0),
('华为', '华为技术有限公司', 100, '万物互联', 1),
('小米', '小米科技有限公司', 50, 'are you ok', 1),
('格力', '格力电器股份有限公司', 30, '让世界爱上中国造', 1),
('阿里巴巴', '阿里巴巴集团控股有限公司', 10, '买买买', 1),
('腾讯', '腾讯计算机系统有限公司', 50, '玩玩玩', 0),
('百度', '百度在线网络技术公司', 5, '搜搜搜', 0),
('京东', '北京京东世纪贸易有限公司', 40, '就是快', 1);<dependencies>
<!--Servlet-->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.1.0</version>
<scope>provided</scope>
</dependency>
<!--MyBatis-->
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis</artifactId>
<version>3.5.5</version>
</dependency>
<!--MySQL-->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.46</version>
</dependency>
<!--fastjson-->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.62</version>
</dependency>
</dependencies>3.3、编写Mybatis文件
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
<settings>
<!--在控制台显示SQL语句-->
<setting name="logImpl" value="STDOUT_LOGGING"/>
<setting name="mapUnderscoreToCamelCase" value="true"/>
</settings>
<typeAliases>
<package name="com.demo.pojo"/>
</typeAliases>
<environments default="development">
<environment id="development">
<transactionManager type="JDBC"/>
<dataSource type="POOLED">
<property name="driver" value="com.mysql.jdbc.Driver"/>
<property name="url" value="jdbc:mysql:///brand?useSSL=false"/>
<property name="username" value="root"/>
<property name="password" value="123456"/>
</dataSource>
</environment>
</environments>
<mappers>
<!--扫描mapper-->
<package name="com.demo.mapper"/>
</mappers>
</configuration>
3.4、编写pojo类
public class Brand {
// id 主键
private Integer id;
// 品牌名称
private String brandName;
// 企业名称
private String companyName;
// 排序字段
private Integer ordered;
// 描述信息
private String description;
// 状态：0：禁用 1：启用
private Integer status;
.....省略方法
}
3.5、编写Mybatis工具类
public class MyBatisUtils {
private static SqlSessionFactory sqlSessionFactory;
// 我们只需要一个SqlSessionFactory,在静态代码块中创建SqlSessionFactory
static {
try {
// 编写代码让MyBatis跑起来,执行SQL语句
String resource = "mybatis-config.xml";
// 加载核心配置文件
InputStream inputStream = Resources.getResourceAsStream(resource);
// 得到SqlSession工厂,赋值给成员变量
sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
} catch (IOException e) {
e.printStackTrace();
}
}
// 返回SqlSessionFactory
public static SqlSessionFactory getSqlSessionFactory() {
return sqlSessionFactory;
}
// 返回SqlSession
public static SqlSession openSession() {
return sqlSessionFactory.openSession();
}
public static SqlSession openSession(boolean autoCommit) {
return sqlSessionFactory.openSession(autoCommit);
}
}
3.6、导入前端素材（element-ui & vue.js & axios.js）
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
<settings>
<!--在控制台显示SQL语句-->
<setting name="logImpl" value="STDOUT_LOGGING"/>
<setting name="mapUnderscoreToCamelCase" value="true"/>
</settings>
<typeAliases>
<package name="com.demo.pojo"/>
</typeAliases>
<environments default="development">
<environment id="development">
<transactionManager type="JDBC"/>
<dataSource type="POOLED">
<property name="driver" value="com.mysql.jdbc.Driver"/>
<property name="url" value="jdbc:mysql:///brand?useSSL=false"/>
<property name="username" value="root"/>
<property name="password" value="123456"/>
</dataSource>
</environment>
</environments>
<mappers>
<!--扫描mapper-->
<package name="com.demo.mapper"/>
</mappers>
</configuration>public class Brand {
// id 主键
private Integer id;
// 品牌名称
private String brandName;
// 企业名称
private String companyName;
// 排序字段
private Integer ordered;
// 描述信息
private String description;
// 状态：0：禁用 1：启用
private Integer status;
.....省略方法
}3.5、编写Mybatis工具类
public class MyBatisUtils {
private static SqlSessionFactory sqlSessionFactory;
// 我们只需要一个SqlSessionFactory,在静态代码块中创建SqlSessionFactory
static {
try {
// 编写代码让MyBatis跑起来,执行SQL语句
String resource = "mybatis-config.xml";
// 加载核心配置文件
InputStream inputStream = Resources.getResourceAsStream(resource);
// 得到SqlSession工厂,赋值给成员变量
sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
} catch (IOException e) {
e.printStackTrace();
}
}
// 返回SqlSessionFactory
public static SqlSessionFactory getSqlSessionFactory() {
return sqlSessionFactory;
}
// 返回SqlSession
public static SqlSession openSession() {
return sqlSessionFactory.openSession();
}
public static SqlSession openSession(boolean autoCommit) {
return sqlSessionFactory.openSession(autoCommit);
}
}
3.6、导入前端素材（element-ui & vue.js & axios.js）
public class MyBatisUtils {
private static SqlSessionFactory sqlSessionFactory;
// 我们只需要一个SqlSessionFactory,在静态代码块中创建SqlSessionFactory
static {
try {
// 编写代码让MyBatis跑起来,执行SQL语句
String resource = "mybatis-config.xml";
// 加载核心配置文件
InputStream inputStream = Resources.getResourceAsStream(resource);
// 得到SqlSession工厂,赋值给成员变量
sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
} catch (IOException e) {
e.printStackTrace();
}
}
// 返回SqlSessionFactory
public static SqlSessionFactory getSqlSessionFactory() {
return sqlSessionFactory;
}
// 返回SqlSession
public static SqlSession openSession() {
return sqlSessionFactory.openSession();
}
public static SqlSession openSession(boolean autoCommit) {
return sqlSessionFactory.openSession(autoCommit);
}
}
3.7、前端页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>品牌列表</title>
<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">
<style>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
</style>
</head>
<body>
<div id="app">
<!--第一行-->
<el-row>
<el-form :inline="true" :model="searchBrand">
<el-form-item label="当前状态">
<el-select v-model="searchBrand.status" placeholder="当前状态">
<el-option label="禁用" value="0"></el-option>
<el-option label="启用" value="1"></el-option>
<el-option label="所有" value=""></el-option>
</el-select>
</el-form-item>
<el-form-item label="企业名称">
<el-input v-model="searchBrand.companyName" placeholder="企业名称"></el-input>
</el-form-item>
<el-form-item label="品牌名称">
<el-input v-model="searchBrand.brandName" placeholder="品牌名称"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
</el-row>
<!--第二行-->
<el-row>
<el-button type="danger" plain @click="deleteByIds()">批量删除</el-button>
<el-button type="primary" plain @click="dialogVisible = true">新增</el-button>
<!--添加品牌对话框-->
<el-dialog
title="添加品牌"
:visible.sync="dialogVisible"
width="30%">
<!--对话框里面的表单-->
<el-form :model="addBrand" :rules="rules" ref="addBrand" label-width="100px">
<el-form-item label="品牌名称" prop="brandName">
<el-input v-model="addBrand.brandName"></el-input>
</el-form-item>
<el-form-item label="企业名称" prop="companyName">
<el-input v-model="addBrand.companyName"></el-input>
</el-form-item>
<el-form-item label="排序">
<el-input v-model="addBrand.ordered"></el-input>
</el-form-item>
<el-form-item label="描述">
<el-input type="textarea" v-model="addBrand.description"></el-input>
</el-form-item>
<el-form-item label="状态">
<el-switch v-model="addBrand.status"
active-value="1"
inactive-value="0"></el-switch>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
<el-button @click="resetForm('ruleForm')">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>
</el-row>
<!--第三行-->
<el-row>
<template>
<el-table
:data="tableData"
: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="brandName"
label="品牌名称">
</el-table-column>
<el-table-column
prop="companyName"
label="企业名称">
</el-table-column>
<el-table-column
prop="ordered"
label="排序"
width="150">
</el-table-column>
<el-table-column
prop="status"
label="当前状态"
width="150">
<template slot-scope="scope">
<span v-if="scope.row.status==1">启用</span>
<span v-else="">禁用</span>
</template>
</el-table-column>
<el-table-column label="操作" width="250">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit(scope.$index, scope.row)">修改
</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">删除
</el-button>
</template>
</el-table-column>
</el-table>
</template>
</el-row>
<!--修改品牌对话框-->
<el-dialog
title="修改品牌"
:visible.sync="updateDialogVisible"
width="30%">
<!--对话框里面的表单-->
<el-form :model="updateBrand" :rules="rules" ref="updateBrand" label-width="100px">
<el-form-item label="品牌名称" prop="brandName">
<el-input v-model="updateBrand.brandName"></el-input>
</el-form-item>
<el-form-item label="企业名称" prop="companyName">
<el-input v-model="updateBrand.companyName"></el-input>
</el-form-item>
<el-form-item label="排序">
<el-input v-model="updateBrand.ordered"></el-input>
</el-form-item>
<el-form-item label="描述">
<el-input type="textarea" v-model="updateBrand.description"></el-input>
</el-form-item>
<el-form-item label="状态">
<el-switch v-model="updateBrand.status"
:active-value="1"
:inactive-value="0"></el-switch>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitFormUpdate('ruleForm')">提交</el-button>
<el-button @click="resetFormUpdate('ruleForm')">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>
<!--第四行-->
<el-row>
<div>
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5, 10, 15, 20]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="totalCount">
</el-pagination>
</div>
</el-row>
</div>
<script>
new Vue({
el: "#app",
mounted() {
this.reselectAll();
},
methods: {
// 批量删除的方法
deleteByIds() {
this.$confirm('此操作将永久删除选中的品牌, 是否继续?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.selectionIds = [];
// 遍历对象,取出id,放到selectionIds中;
for (let brand of this.multipleSelection) {
this.selectionIds.push(brand.id);
}
console.log(this.selectionIds);
// 1.点击批量删除按钮，发送ajax请求,携带被选中的id数组数据
axios.post("brand/deleteByIds", this.selectionIds)
.then(resp => {
// 2.获取标识，判断删除是否成功
if (resp.data == "success") {
// 给出提示
this.$message({
showClose: true,
message: '恭喜你，删除成功',
type: 'success'
});
// 重新查询数据
this.reselectAll();
}
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
// 重新加载所有数据
reselectAll() {
// 1.(查询所有数据) 页面加载完成后发送异步请求，获取列表数据
axios.get("brand/selectAll")
.then(resp => {
// 将数据设置到模型上
this.tableData = resp.data;
});
// 2.(分页查询) 页面加载完成后发送异步请求，携带当前页码和每页显示条数参数
/*axios.get("brand/selectByPage?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize)
.then(resp => {
// 将数据设置到模型上
this.tableData = resp.data.rows; // 这页的数据
this.totalCount = resp.data.totalCount;
});*/
// 3.(条件且分页查询) 页面加载完成后发送异步请求，携带当前页码和每页显示条数参数
// axios.get("brand/selectByPageAndCondition?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize + "&brandName=" + this.searchBrand.brandName + "&companyName=" + this.searchBrand.companyName + "&status=" + this.searchBrand.status)
// .then(resp => {
// // 将数据设置到模型上
// this.tableData = resp.data.rows; // 这页的数据
// this.totalCount = resp.data.totalCount;
// });
},
tableRowClassName({row, rowIndex}) {
if (rowIndex === 1) {
return 'warning-row';
} else if (rowIndex === 3) {
return 'success-row';
}
return '';
},
// 多选按钮状态改变会调用
handleSelectionChange(val) {
this.multipleSelection = val;
console.log(this.multipleSelection);
},
// 点击查询按钮时调用
onSubmit() {
console.log('准备查询: ' + this.searchBrand);
// 每一次点击了查询按钮,当前页码要重置为1
this.currentPage = 1;
// 带条件分页查询
this.reselectAll();
},
// 添加品牌
submitForm(formName) {
// 1.点击提交按钮，发送ajax请求,携带表单数据
axios.post("brand/add", this.addBrand)
.then(resp => {
// 2.获取数据，判断添加是否成功
if (resp.data == "success") {
// 关闭窗口
this.dialogVisible = false;
// 重新加载数据
this.reselectAll();
// 给一个成功的提示
this.$message({
message: '恭喜你，添加品牌成功!',
type: 'success'
});
// 清空模型数据,否则还显示上一次的
this.addBrand = {
brandName: '',
companyName: '',
ordered: '',
description: '',
status: "0"
}
}
});
},
// 取消添加品牌
resetForm(formName) {
this.dialogVisible = false;
},
// 修改品牌
submitFormUpdate(formName) {
// 1.点击提交按钮，发送ajax请求,携带表单数据
axios.post("brand/update", this.updateBrand)
.then(resp => {
// 2.获取数据，判断修改是否成功
if (resp.data == "success") {
// 关闭窗口
this.updateDialogVisible = false;
// 重新加载数据
this.reselectAll();
// 给一个成功的提示
this.$message({
message: '恭喜你，修改品牌成功!',
type: 'success'
});
// 清空模型数据,否则还显示上一次的
this.updateBrand = {
brandName: '',
companyName: '',
ordered: '',
description: '',
status: 0
}
}
});
},
// 取消修改品牌对话框
resetFormUpdate(formName) {
this.updateDialogVisible = false;
},
// 每页数量发生变化调用
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.pageSize = val;
// 重新请求数据
this.reselectAll();
},
// 页码变化调用
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.currentPage = val;
// 重新请求数据
this.reselectAll();
},
// 修改品牌
handleEdit(index, row) {
// 把当前行的数据赋值给修改品牌,让对话框中显示这个数据
this.updateBrand = row;
// 显示修改的对话框
this.updateDialogVisible = true;
},
// 删除品牌
handleDelete(index, row) {
this.$confirm('此操作将永久删除选中的品牌, 是否继续?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 根据id删除一个品牌
axios.post("brand/deleteOne", "id=" + row.id)
.then(resp => {
if (resp.data == "success") {
// 重新加载数据
this.reselectAll();
// 给一个成功的提示
this.$message({
message: '恭喜你，删除品牌成功!',
type: 'success'
});
}
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
}
},
data() {
return {
// 保存选中的要删除的id
selectionIds: [],
// 分页工具条,显示当前第几页
currentPage: 1,
// 每页显示的数量
pageSize: 5,
// 总数量
totalCount: 100,
// 添加品牌的数据
addBrand: {
brandName: '',
companyName: '',
ordered: '',
description: '',
status: "0"
},
// 修改品牌的数据
updateBrand: {
brandName: '',
companyName: '',
ordered: '',
description: '',
status: 0
},
// 添加和修改品牌的输入验证规则
rules: {
brandName: [
{required: true, message: '请输入品牌名称', trigger: 'blur'},
{min: 1, max: 15, message: '品牌名称长度在 1 到 15 个字符', trigger: 'blur'}
],
companyName: [
{required: true, message: '请输入企业名称', trigger: 'blur'},
{min: 2, max: 15, message: '企业名称长度在 2 到 15 个字符', trigger: 'blur'}
]
},
// 控制添加品牌对话框是否显示true表示显示,false表示不显示
dialogVisible: false,
// 控制修改品牌对话框是否显示true表示显示,false表示不显示
updateDialogVisible: false,
// 第一行表单中查询的数据
searchBrand: {
brandName: '',
companyName: '',
status: ""
},
// 保存多选按钮选中的数据
multipleSelection: [],
// 表格中的数据
tableData: [{
brandName: '华为P50',
companyName: '华为科技有限公司',
ordered: '1',
status: '1'
}]
}
}
});
</script>
</body>
</html>
4、功能实现
4.1、查询所有功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>品牌列表</title>
<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">
<style>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
</style>
</head>
<body>
<div id="app">
<!--第一行-->
<el-row>
<el-form :inline="true" :model="searchBrand">
<el-form-item label="当前状态">
<el-select v-model="searchBrand.status" placeholder="当前状态">
<el-option label="禁用" value="0"></el-option>
<el-option label="启用" value="1"></el-option>
<el-option label="所有" value=""></el-option>
</el-select>
</el-form-item>
<el-form-item label="企业名称">
<el-input v-model="searchBrand.companyName" placeholder="企业名称"></el-input>
</el-form-item>
<el-form-item label="品牌名称">
<el-input v-model="searchBrand.brandName" placeholder="品牌名称"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
</el-row>
<!--第二行-->
<el-row>
<el-button type="danger" plain @click="deleteByIds()">批量删除</el-button>
<el-button type="primary" plain @click="dialogVisible = true">新增</el-button>
<!--添加品牌对话框-->
<el-dialog
title="添加品牌"
:visible.sync="dialogVisible"
width="30%">
<!--对话框里面的表单-->
<el-form :model="addBrand" :rules="rules" ref="addBrand" label-width="100px">
<el-form-item label="品牌名称" prop="brandName">
<el-input v-model="addBrand.brandName"></el-input>
</el-form-item>
<el-form-item label="企业名称" prop="companyName">
<el-input v-model="addBrand.companyName"></el-input>
</el-form-item>
<el-form-item label="排序">
<el-input v-model="addBrand.ordered"></el-input>
</el-form-item>
<el-form-item label="描述">
<el-input type="textarea" v-model="addBrand.description"></el-input>
</el-form-item>
<el-form-item label="状态">
<el-switch v-model="addBrand.status"
active-value="1"
inactive-value="0"></el-switch>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
<el-button @click="resetForm('ruleForm')">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>
</el-row>
<!--第三行-->
<el-row>
<template>
<el-table
:data="tableData"
: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="brandName"
label="品牌名称">
</el-table-column>
<el-table-column
prop="companyName"
label="企业名称">
</el-table-column>
<el-table-column
prop="ordered"
label="排序"
width="150">
</el-table-column>
<el-table-column
prop="status"
label="当前状态"
width="150">
<template slot-scope="scope">
<span v-if="scope.row.status==1">启用</span>
<span v-else="">禁用</span>
</template>
</el-table-column>
<el-table-column label="操作" width="250">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit(scope.$index, scope.row)">修改
</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">删除
</el-button>
</template>
</el-table-column>
</el-table>
</template>
</el-row>
<!--修改品牌对话框-->
<el-dialog
title="修改品牌"
:visible.sync="updateDialogVisible"
width="30%">
<!--对话框里面的表单-->
<el-form :model="updateBrand" :rules="rules" ref="updateBrand" label-width="100px">
<el-form-item label="品牌名称" prop="brandName">
<el-input v-model="updateBrand.brandName"></el-input>
</el-form-item>
<el-form-item label="企业名称" prop="companyName">
<el-input v-model="updateBrand.companyName"></el-input>
</el-form-item>
<el-form-item label="排序">
<el-input v-model="updateBrand.ordered"></el-input>
</el-form-item>
<el-form-item label="描述">
<el-input type="textarea" v-model="updateBrand.description"></el-input>
</el-form-item>
<el-form-item label="状态">
<el-switch v-model="updateBrand.status"
:active-value="1"
:inactive-value="0"></el-switch>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitFormUpdate('ruleForm')">提交</el-button>
<el-button @click="resetFormUpdate('ruleForm')">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>
<!--第四行-->
<el-row>
<div>
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5, 10, 15, 20]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="totalCount">
</el-pagination>
</div>
</el-row>
</div>
<script>
new Vue({
el: "#app",
mounted() {
this.reselectAll();
},
methods: {
// 批量删除的方法
deleteByIds() {
this.$confirm('此操作将永久删除选中的品牌, 是否继续?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.selectionIds = [];
// 遍历对象,取出id,放到selectionIds中;
for (let brand of this.multipleSelection) {
this.selectionIds.push(brand.id);
}
console.log(this.selectionIds);
// 1.点击批量删除按钮，发送ajax请求,携带被选中的id数组数据
axios.post("brand/deleteByIds", this.selectionIds)
.then(resp => {
// 2.获取标识，判断删除是否成功
if (resp.data == "success") {
// 给出提示
this.$message({
showClose: true,
message: '恭喜你，删除成功',
type: 'success'
});
// 重新查询数据
this.reselectAll();
}
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
// 重新加载所有数据
reselectAll() {
// 1.(查询所有数据) 页面加载完成后发送异步请求，获取列表数据
axios.get("brand/selectAll")
.then(resp => {
// 将数据设置到模型上
this.tableData = resp.data;
});
// 2.(分页查询) 页面加载完成后发送异步请求，携带当前页码和每页显示条数参数
/*axios.get("brand/selectByPage?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize)
.then(resp => {
// 将数据设置到模型上
this.tableData = resp.data.rows; // 这页的数据
this.totalCount = resp.data.totalCount;
});*/
// 3.(条件且分页查询) 页面加载完成后发送异步请求，携带当前页码和每页显示条数参数
// axios.get("brand/selectByPageAndCondition?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize + "&brandName=" + this.searchBrand.brandName + "&companyName=" + this.searchBrand.companyName + "&status=" + this.searchBrand.status)
// .then(resp => {
// // 将数据设置到模型上
// this.tableData = resp.data.rows; // 这页的数据
// this.totalCount = resp.data.totalCount;
// });
},
tableRowClassName({row, rowIndex}) {
if (rowIndex === 1) {
return 'warning-row';
} else if (rowIndex === 3) {
return 'success-row';
}
return '';
},
// 多选按钮状态改变会调用
handleSelectionChange(val) {
this.multipleSelection = val;
console.log(this.multipleSelection);
},
// 点击查询按钮时调用
onSubmit() {
console.log('准备查询: ' + this.searchBrand);
// 每一次点击了查询按钮,当前页码要重置为1
this.currentPage = 1;
// 带条件分页查询
this.reselectAll();
},
// 添加品牌
submitForm(formName) {
// 1.点击提交按钮，发送ajax请求,携带表单数据
axios.post("brand/add", this.addBrand)
.then(resp => {
// 2.获取数据，判断添加是否成功
if (resp.data == "success") {
// 关闭窗口
this.dialogVisible = false;
// 重新加载数据
this.reselectAll();
// 给一个成功的提示
this.$message({
message: '恭喜你，添加品牌成功!',
type: 'success'
});
// 清空模型数据,否则还显示上一次的
this.addBrand = {
brandName: '',
companyName: '',
ordered: '',
description: '',
status: "0"
}
}
});
},
// 取消添加品牌
resetForm(formName) {
this.dialogVisible = false;
},
// 修改品牌
submitFormUpdate(formName) {
// 1.点击提交按钮，发送ajax请求,携带表单数据
axios.post("brand/update", this.updateBrand)
.then(resp => {
// 2.获取数据，判断修改是否成功
if (resp.data == "success") {
// 关闭窗口
this.updateDialogVisible = false;
// 重新加载数据
this.reselectAll();
// 给一个成功的提示
this.$message({
message: '恭喜你，修改品牌成功!',
type: 'success'
});
// 清空模型数据,否则还显示上一次的
this.updateBrand = {
brandName: '',
companyName: '',
ordered: '',
description: '',
status: 0
}
}
});
},
// 取消修改品牌对话框
resetFormUpdate(formName) {
this.updateDialogVisible = false;
},
// 每页数量发生变化调用
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.pageSize = val;
// 重新请求数据
this.reselectAll();
},
// 页码变化调用
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.currentPage = val;
// 重新请求数据
this.reselectAll();
},
// 修改品牌
handleEdit(index, row) {
// 把当前行的数据赋值给修改品牌,让对话框中显示这个数据
this.updateBrand = row;
// 显示修改的对话框
this.updateDialogVisible = true;
},
// 删除品牌
handleDelete(index, row) {
this.$confirm('此操作将永久删除选中的品牌, 是否继续?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 根据id删除一个品牌
axios.post("brand/deleteOne", "id=" + row.id)
.then(resp => {
if (resp.data == "success") {
// 重新加载数据
this.reselectAll();
// 给一个成功的提示
this.$message({
message: '恭喜你，删除品牌成功!',
type: 'success'
});
}
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
}
},
data() {
return {
// 保存选中的要删除的id
selectionIds: [],
// 分页工具条,显示当前第几页
currentPage: 1,
// 每页显示的数量
pageSize: 5,
// 总数量
totalCount: 100,
// 添加品牌的数据
addBrand: {
brandName: '',
companyName: '',
ordered: '',
description: '',
status: "0"
},
// 修改品牌的数据
updateBrand: {
brandName: '',
companyName: '',
ordered: '',
description: '',
status: 0
},
// 添加和修改品牌的输入验证规则
rules: {
brandName: [
{required: true, message: '请输入品牌名称', trigger: 'blur'},
{min: 1, max: 15, message: '品牌名称长度在 1 到 15 个字符', trigger: 'blur'}
],
companyName: [
{required: true, message: '请输入企业名称', trigger: 'blur'},
{min: 2, max: 15, message: '企业名称长度在 2 到 15 个字符', trigger: 'blur'}
]
},
// 控制添加品牌对话框是否显示true表示显示,false表示不显示
dialogVisible: false,
// 控制修改品牌对话框是否显示true表示显示,false表示不显示
updateDialogVisible: false,
// 第一行表单中查询的数据
searchBrand: {
brandName: '',
companyName: '',
status: ""
},
// 保存多选按钮选中的数据
multipleSelection: [],
// 表格中的数据
tableData: [{
brandName: '华为P50',
companyName: '华为科技有限公司',
ordered: '1',
status: '1'
}]
}
}
});
</script>
</body>
</html>
如上图所示是查询所有品牌数据在页面展示的效果。要实现这个功能，要先搞明白如下问题：
- 什么时候发送异步请求？页面加载完毕后就需要在页面上看到所有的品牌数据。所以在
mounted()这个构造函数中写发送异步请求的代码。 - 请求需要携带参数吗？查询所有功能不需要携带什么参数。
- 响应的数据格式是什么样？后端是需要将
List<Brand>对象转换为 JSON 格式的数据并响应回给浏览器。响应数据格式如下：
相关阅读
-
玩游戏的win11系统 win11打游戏的性能介绍
相对于大多数人win11打游戏的性能介绍的话题，关于玩游戏的win11系统 win11打游戏的性能介绍，继续往下看吧！ 游戏性能是当前比较多的IT袋朋友在选择操作系统时非常关注的一点，最近win11的
-
电脑出现0x000000ed怎么办 0x00000ed xp系统解决教程
今天小编详解0x00000ed xp系统解决教程方面的内容，关于电脑出现0x000000ed怎么办 0x00000ed xp系统解决教程，接下来一起来看看吧。 xp系统是一款非常老旧的系统，虽然还是有一些用户在使用，但是
-
win10查看电脑配置命令 了解查看自己电脑的配置信息
小编为你讲解win10查看电脑配置命令和了解查看自己电脑的配置信息的电脑小知识，相关内容具体如下： 你是否了解自己的系统配置呢?如果用户使用的操作系统是win10系统?今天就为大家介绍
-
win10如何升级win10系统教程 教你看电脑的配置跟型号
IT袋网小编为你介绍win10如何升级win10系统教程和教你看电脑的配置跟型号的IT知识，接下来小编为网友介绍。 微软声明不再对win10系统支持后，很多win10系统的用户都将自己的系统升级到win10进