前端登录注册页面+后台管理系统
后端管理系统
架构
使用mvc设计模式 对代码进行划分
表现层（servlet）+业务逻辑层（service）+数据访问层（mapper）+DB
主要逻辑
后端代码共分为4层，
- DB为数据库层
- 数据访问层主要依靠mybatis框架完成对DB层的操作
- 业务逻辑层是靠生成sqlsessionfactry对数据层进行代码的实现
- 表现层（servlet）使用tomcat服务器，在本机生成客户端和服务器端，接收客户端用户的请求做出相应
数据库
-- 删除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)
;
SELECT * FROM tb_brand;数据访问层
数据访问层主要是使用mybatis框架，进行对数据库进行链接以及对数据库进行操作
BrandMapper
package com.itheima.mapper;
import com.itheima.pojo.Brand;
import com.itheima.pojo.PageBean;
import org.apache.ibatis.annotations.*;
import java.util.List;
public interface BrandMapper {
/**
* 查询所有信息
* @return
*/
@Select("select * from tb_brand")
@ResultMap("brandResultMap")
List<Brand> selectAll();
/**
* 添加信息
*/
@Insert("insert into tb_brand values (null,#{brandName},#{companyName},#{ordered},#{description},#{status})")
void add(Brand brand);
/**
* 批量删除
*/
void deleteByIds(@Param("ids") int[] ids);
/**
* 删除数据
*/
@Delete("delete from tb_brand where id = #{id}")
void deleteById(int id);
/**
*修改数据
*/
void update(Brand brand);
/**
* 分页查询
* @param begin 开始索引
* @param size 每页查询的个数
* @return
*/
@Select("select * from tb_brand limit #{begin},#{size}")
@ResultMap("brandResultMap")
List<Brand> selectByPag(@Param("begin") int begin,@Param("size") int size);
/**
* 查询数据库总数据数
* @return
*/
@Select("select count(*) from tb_brand")
int selectTotalCount();
/**
* 条件模糊查询
*/
List<Brand> selectByPageAndCondition(@Param("begin") int begin,@Param("size") int size,@Param("brand") Brand brand);
/**
* 查询总记录数
*/
int selectTotalCountByCondition(Brand brand);
}BrandMapper.xml:对于BrandMapper中较为复杂的mysql语句 在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.itheima.mapper.BrandMapper">
<resultMap id="brandResultMap" type="brand">
<result property="brandName" column="brand_name" />
<result property="companyName" column="company_name" />
</resultMap>
<!-- 修改数据-->
<update id="update" >
update tb_brand
set brand_name = #{brandName},company_name = #{companyName},ordered = #{ordered},description=#{description},status=#{status}
where id = #{id};
</update>
<!-- 批量删除-->
<delete id="deleteByIds">
delete from tb_brand where id in
<foreach collection="ids" item="id" separator="," open="(" close=")">
#{id}
</foreach>
</delete>
<!-- brand_name = #{brandName}-->
<select id="selectByPageAndCondition" resultMap="brandResultMap">
select * from tb_brand
<where>
<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>
<if test="brand.status != null">
and status = #{brand.status}
</if>
</where>
limit #{begin} , #{size}
</select>
<!-- 查询总记录数-->
<select id="selectTotalCountByCondition" resultType="java.lang.Integer">
select count(*)
from tb_brand
<where>
<if test="brandName != null and brandName != ''">
and brand_name like #{brandName}
</if>
<if test="companyName != null and companyName != ''">
and company_name like #{companyName}
</if>
<if test="status != null">
and status = #{status}
</if>
</where>
</select>
</mapper>service层
SqlSessionFactoryUtils：自定义sqlsessionfactory工厂
package com.itheima.util;
import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;
import java.io.IOException;
import java.io.InputStream;
public class SqlSessionFactoryUtils {
private static SqlSessionFactory sqlSessionFactory;
static {
//静态代码块会随着类的加载而自动执行，且只执行一次
try {
String resource = "mybatis-config.xml";
InputStream inputStream = Resources.getResourceAsStream(resource);
sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
} catch (IOException e) {
e.printStackTrace();
}
}
public static SqlSessionFactory getSqlSessionFactory(){
return sqlSessionFactory;
}
}BrandService接口：提供对对数据访问层的方法 降低与servlet层代码的耦合性
package com.itheima.service;
import com.itheima.pojo.Brand;
import com.itheima.pojo.PageBean;
import org.apache.ibatis.annotations.Param;
import java.util.List;
public interface BrandService {
/**
* 查询所有
* @return
*/
List<Brand> selectAll();
/**
*添加数据
*/
void add(Brand brand);
/**
* 批量删除
*/
void deleteByIds(int[] ids);
/**
* 删除数据
*/
void deleteById(int id);
/**
* 修改数据
*/
void update(Brand brand);
/**
* 分页查询
* @param currentPage 当前页码
* @param pageSize 每页展示条数
* @return
*/
PageBean<Brand> selectByPage(int currentPage,int pageSize);
PageBean<Brand> selectByPageAndCondition(int currentPage,int pageSize,Brand brand);
}BrandServiceImpl：BrandService接口的实现类 重写接口中的方法
package com.itheima.service.Impl;
import com.itheima.mapper.BrandMapper;
import com.itheima.pojo.Brand;
import com.itheima.pojo.PageBean;
import com.itheima.service.BrandService;
import com.itheima.util.SqlSessionFactoryUtils;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import java.util.List;
public class BrandServiceImpl implements BrandService {
//创建sqlsessionfactory工厂
SqlSessionFactory factory = SqlSessionFactoryUtils.getSqlSessionFactory();
/**
* 查询所有信息
* @return
*/
@Override
public List<Brand> selectAll() {
//1.获取sqlsession
SqlSession sqlSession = factory.openSession();
//2.获取brandMAPPER
BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
List<Brand> brands = mapper.selectAll();
sqlSession.close();
return brands;
}
/**
* 添加数据信息
* @param brand
*/
@Override
public void add(Brand brand) {
//1.获取sqlsession
SqlSession sqlSession = factory.openSession();
//2.获取brandMAPPER
BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
mapper.add(brand);
sqlSession.commit();
sqlSession.close();
}
/**
* 批量删除数据信息
* @param ids
*/
@Override
public void deleteByIds(int[] ids) {
//1.获取sqlsession
SqlSession sqlSession = factory.openSession();
//2.获取brandMAPPER
BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
mapper.deleteByIds(ids);
sqlSession.commit();
sqlSession.close();
}
/**
* 删除数据
*/
@Override
public void deleteById(int id) {
//1.获取sqlsession
SqlSession sqlSession = factory.openSession();
//2.获取brandMAPPER
BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
mapper.deleteById(id);
sqlSession.commit();
sqlSession.close();
}
/**
* 修改数据
* @param brand
*/
@Override
public void update(Brand brand) {
//1.获取sqlsession
SqlSession sqlSession = factory.openSession();
//2.获取brandMAPPER
BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
mapper.update(brand);
sqlSession.commit();
sqlSession.close();
}
/**
* 分页查询
* @param currentPage 当前页码
* @param pageSize 每页展示条数
* @return
*/
@Override
public PageBean<Brand> selectByPage(int currentPage, int pageSize) {
//1.获取sqlsession
SqlSession sqlSession = factory.openSession();
//2.获取brandMAPPER
BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
//3.计算开始索引
int begin = ( currentPage - 1) * pageSize;
//计算查询条目数
int size = pageSize;
//5.查询当前页数据
List<Brand> rows = mapper.selectByPag(begin, size);
//6.查询总记录数
int totalCount = mapper.selectTotalCount();
//7.封装pageBean对象
PageBean<Brand> pageBean = new PageBean<>();
pageBean.setRows(rows);
pageBean.setTotalCount(totalCount);
//8.释放资源
sqlSession.close();
return pageBean;
}
@Override
public PageBean<Brand> selectByPageAndCondition(int currentPage, int pageSize, Brand brand) {
//1.获取sqlsession
SqlSession sqlSession = factory.openSession();
//2.获取brandMAPPER
BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
//3.计算开始索引
int begin = ( currentPage - 1) * pageSize;
//计算查询条目数
int size = pageSize;
//处理brand条件 模糊表达式
String brandName = brand.getBrandName();
if (brandName != null && brandName.length() > 0 ) {
brand.setBrandName("%"+brandName+"%");
}
String companyName = brand.getCompanyName();
if (companyName != null && companyName.length() > 0 ) {
brand.setCompanyName("%"+companyName+"%");
}
//5.查询当前页数据
List<Brand> rows = mapper.selectByPageAndCondition(begin,size,brand);
//6.查询总记录数
int totalCount = mapper.selectTotalCountByCondition(brand);
//7.封装pageBean对象
PageBean<Brand> pageBean = new PageBean<>();
pageBean.setRows(rows);
pageBean.setTotalCount(totalCount);
//8.释放资源
sqlSession.close();
return pageBean;
}
}servlet层
Brandbase
package com.itheima.web.Servlet;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.lang.reflect.Method;
/**
* 替换HttpServlet，根据请求的最后一段路径来进行方法分发
*/
public class BaseServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//1.获取请求路径
String uri = req.getRequestURI(); // /brand_case/brand/selectAll
// System.out.println(uri);
//2.获取最后一段路径,方法名
int index = uri.lastIndexOf("/");
String methodName = uri.substring(index+1);
// System.out.println(methodName);
//3.执行方法
//3.1获取BrandServlet字节码对象 class
//谁调用我（this 所在的方法） 我（this）代表谁 [BrandServlet UserServlet]
Class<? extends BaseServlet> cls = this.getClass();
//3.2获取Method对象
try {
Method method = cls.getMethod(methodName, HttpServletRequest.class, HttpServletResponse.class);
//3.3执行方法
method.invoke(this,req,resp);
} catch (NoSuchMethodException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
}
}
}BrandServlet:主要实现与前端数据的交换
package com.itheima.web.Servlet;
import com.alibaba.fastjson.JSON;
import com.itheima.pojo.Brand;
import com.itheima.pojo.PageBean;
import com.itheima.service.BrandService;
import com.itheima.service.Impl.BrandServiceImpl;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.BufferedReader;
import java.io.IOException;
import java.util.List;
@WebServlet("/brand/*")
public class BrandServlet extends BaseServlet {
//创建service对象
private BrandService service = new BrandServiceImpl();
/**
* 查询所有
*
* @param request
* @param response
* @throws ServletException
* @throws IOException
*/
public void selectAll(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//调用service的查询所有方法
List<Brand> brands = service.selectAll();
//把数据转成JSON
String jsonString = JSON.toJSONString(brands);
//写数据
response.setContentType("text/json;charset=utf-8");
response.getWriter().write(jsonString);
}
/**
* 添加数据
*
* @param request
* @param response
* @throws ServletException
* @throws IOException
*/
public void add(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.接收html品牌数据
BufferedReader br = request.getReader();
String params = br.readLine();
//2.将json对象转会成java对象
Brand brand = JSON.parseObject(params, Brand.class);
//3.调用service方法添加数据
service.add(brand);
//4.相应添加成功
response.getWriter().write("success");
}
/**
* 批量删除
*
* @param request
* @param response
* @throws ServletException
* @throws IOException
*/
public void deleteByIds(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.接收id数组
BufferedReader br = request.getReader();
String params = br.readLine();
//2.把字符串转化成int数组
int[] ids = JSON.parseObject(params, int[].class);
//3.调用service方法批量删除数据
service.deleteByIds(ids);
//4.相应删除成功
response.getWriter().write("success");
}
/**
* 根据id删除单个数据
*/
public void deleteById(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.接收id数组
String id = request.getParameter("id");
// System.out.println(id);
//3.调用service方法删除数据
service.deleteById(Integer.parseInt(id));
//4.相应删除成功
response.getWriter().write("success");
}
/**
* 修改数据
*
* @param request
* @param response
* @throws ServletException
* @throws IOException
*/
public void update(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.接收html品牌修改数据
BufferedReader br = request.getReader();
String params = br.readLine();
//2.将json字符串转会成java对象
Brand _brand = JSON.parseObject(params, Brand.class);
Integer id = _brand.getId();
//将其封装
Brand brand = new Brand();
brand.setId(id);
brand.setBrandName(_brand.getBrandName());
brand.setCompanyName(_brand.getCompanyName());
brand.setStatus(_brand.getStatus());
brand.setOrdered(_brand.getOrdered());
brand.setDescription(_brand.getDescription());
//3.调用service方法进行修改
service.update(brand);
//给出反馈 添加成功
response.getWriter().write("success");
}
/**
* 分页查询
*
* @param request
* @param response
* @throws ServletException
* @throws IOException
*/
public void selectByPage(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.接收当前页码 和 每页展示条数 url?currentPage=1&pageSize=5
String _currentPage = request.getParameter("currentPage");
String _pageSize = request.getParameter("pageSize");
int currentPage = Integer.parseInt(_currentPage);
int pageSize = Integer.parseInt(_pageSize);
//2.调用service查询
PageBean<Brand> pageBean = service.selectByPage(currentPage, pageSize);
//把数据转成JSON
String jsonString = JSON.toJSONString(pageBean);
//写数据
response.setContentType("text/json;charset=utf-8");
response.getWriter().write(jsonString);
}
public void selectByPageAndCondition(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.接收当前页码 和 每页展示条数 url?currentPage=1&pageSize=5
request.setCharacterEncoding("utf-8");
String _currentPage = request.getParameter("currentPage");
String _pageSize = request.getParameter("pageSize");
int currentPage = Integer.parseInt(_currentPage);
int pageSize = Integer.parseInt(_pageSize);
//获取查询条件对象
BufferedReader br = request.getReader();
String params = br.readLine();
//转为brand
Brand brand = JSON.parseObject(params, Brand.class);
//2.调用service查询
PageBean<Brand> pageBean = service.selectByPageAndCondition(currentPage,pageSize,brand);
//把数据转成JSON
String jsonString = JSON.toJSONString(pageBean);
//写数据
response.setContentType("text/json;charset=utf-8");
response.getWriter().write(jsonString);
}
}前端代码
Brand.html:使用vue和ajax快速开发前端框架 完成与后端代码数据的交换
<!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.companyName" placeholder="企业名称"></el-input>
</el-form-item>
<el-form-item label="品牌名称">
<el-input v-model="brand.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-button type="danger" plain @click="deleteByIds">批量删除</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="brand" label-width="80px">
<el-form-item label="品牌名称">
<el-input v-model="brand.brandName"></el-input>
</el-form-item>
<el-form-item label="企业名称">
<el-input v-model="brand.companyName"></el-input>
</el-form-item>
<el-form-item label="排序">
<el-input v-model="brand.ordered"></el-input>
</el-form-item>
<el-form-item label="备注">
<el-input type="textarea" v-model="brand.description"></el-input>
</el-form-item>
<el-form-item label="状态">
<el-switch v-model="brand.status"
active-value="1"
inactive-value="0"
></el-switch>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="addBrand">提交</el-button>
<el-button @click="dialogVisible = false">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>
<!-- 修改数据对话框表单-->
<!--修改数据对话框-->
<el-dialog
title="修改品牌"
:visible.sync="dialogVisible1"
width="30%"
>
<template slot-scope="scope">
<!-- 点击修改,弹出的表单 -->
<el-form ref="form" :model="updateBrand" label-width="80px">
<el-form-item label="品牌名称" >
<el-input v-model="updateBrand.brandName"></el-input>
</el-form-item>
<el-form-item label="企业名称">
<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="状态">
<!-- 根据模型变化状态 :active-value="1" 表示打开状态, :inactive-value="0" 表示关闭状态 前面一定要加 : -->
<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="UpdateBrand">完成修改</el-button>
<el-button @click="cancelUpdate" >取消修改</el-button>
</el-form-item>
</el-form>
</template>
</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="brandName"
label="品牌名称"
align="center"
>
</el-table-column>
<el-table-column
prop="companyName"
label="企业名称"
align="center"
>
</el-table-column>
<el-table-column
prop="ordered"
align="center"
label="排序">
</el-table-column>
<el-table-column
prop="statusStr"
align="center"
label="当前状态">
</el-table-column>
<el-table-column
align="center"
label="操作">
<template slot-scope = "scope">
<el-row>
<el-button type="primary" @click="handleUpdate(scope.row)">修改</el-button>
<el-button type="danger" @click="handleDelete(scope.row)">删除</el-button>
</el-row>
</template>
</el-table-column>
</el-table>
</template>
<!--分页工具条-->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5, 10, 15, 20]"
:page-size="5"
layout="total, sizes, prev, pager, next, jumper"
:total="totalCount">
</el-pagination>
</div>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="js/axios-0.18.0.js"></script>
<script>
new Vue({
el: "#app",
mounted(){
//当页面加载完成后 发送异步请求 获取数据
this.selectAll();
},
methods: {
//查询分页的方法
selectAll(){
//当页面加载完成后 发送异步请求 获取数据
var _this = this;
axios({
method:"post",
// url:"http://localhost/brand_case/selectAllServlet"
url:"http://localhost/brand_case/brand/selectByPageAndCondition?currentPage="+_this.currentPage+"&pageSize="+_this.pageSize,
data:this.brand
}).then(function (resp) {
//设置表格数据
_this.tableData = resp.data.rows; //{ros:[] totalCount:100}
//设置总记录数
_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.brand);
this.selectAll();
},
// 添加数据
addBrand(){
var _this = this;
//console.log(this.brand);
//发送ajax异步请求 添加数据
axios({
method:"post",
// url:"http://localhost/brand_case/addServlet",
url:"http://localhost/brand_case/brand/add",
data:_this.brand
}).then(function (resp) {
if(resp.data == "success") {
//添加成功
//关闭窗口
_this.dialogVisible = false;
//重新查询数据 调用方法
_this.selectAll();
//给用户提示小组件
// _this.$message({
// message: '恭喜你，添加成功',
// type: 'success'
// });
_this.$message({
showClose: true,
message: '恭喜你，这是一条成功消息',
type: 'success'
});
}
})
},
//分页
handleSizeChange(val) {
// console.log(`每页 ${val} 条`);
//重新设置每页显示的条数
this.pageSize = val;
this.selectAll();
},
handleCurrentChange(val) {
//console.log(`当前页: ${val}`);
this.currentPage = val;
this.selectAll();
},
//完成批量删除的方法
deleteByIds() {
//弹出确认提示框
this.$confirm('此操作将删除该数据信息, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
//用户点击确认按钮
//获取id数组数据 [1,2,3] 从this.multipleSelection中获取
for (let i = 0; i < this.multipleSelection.length; i++) {
let element = this.multipleSelection[i];
this.selectedIds[i] = element.id;
}
//2.发送ajax请求
var _this = this;
//console.log(this.brand);
//发送ajax异步请求 添加数据
axios({
method:"post",
// url:"http://localhost/brand_case/addServlet",
url:"http://localhost/brand_case/brand/deleteByIds",
data:_this.selectedIds
}).then(function (resp) {
if(resp.data == "success") {
//删除成功
//重新查询数据 调用方法
_this.selectAll();
//给用户提示小组件
// _this.$message({
// message: '恭喜你，添加成功',
// type: 'success'
// });
_this.$message({
showClose: true,
message: '恭喜你，批量删除成功',
type: 'success'
});
}
})
}).catch(() => {
//点击取消按钮
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
//根据id删除
handleDelete(row) {
//要删除对象的id
this.brand.id = ;
//弹出确认提示框
this.$confirm('此操作将删除该数据信息, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
//2.发送ajax请求
//发送ajax异步请求 添加数据
axios({
method:"get",
url:"http://localhost/brand_case/brand/deleteById?id="+this.brand.id
}).then(resp=> {
if(resp.data == "success") {
//删除成功
//重新查询数据 调用方法
this.selectAll();
//提示用户小组件
this.$message({
showClose: true,
message: '恭喜你，删除成功',
type: 'success'
});
}
})
}).catch(() => {
//点击取消按钮
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
//修改数据
UpdateBrand(){
//发送ajax请求,修改数据
axios({
method: "post",
url: "http://localhost/brand_case/brand/update?id="+this.updateBrand.id, //当前brand对象的id值
data:this.updateBrand //当前行的brand对象
}).then(resp=>{
if(resp.data=="success"){
//表示修改成功
//关闭窗口
this.dialogVisible1=false;
//刷新页面,重新查询数据
this.selectAll();
//弹出消息提示
this.$message({
message: '恭喜你，修改成功!',
type: 'success'
});
}
})
},
//修改该行数据
handleUpdate(row) {
this.updateBrand=row;
// console.log(this.updateBrand.id);
//打开修改0对话框
this.dialogVisible1=true;
},
//取消修改,刷新页面
cancelUpdate(){
this.dialogVisible1 = false;
//刷新页面
this.selectAll();
},
},
data() {
let int;
return {
// 每页显示的条数
pageSize:5,
//总记录数
totalCount:100,
// 当前页码
currentPage: 1,
// 添加数据对话框是否展示的标记
dialogVisible: false,
dialogVisible1: false,
row:{},
updateBrand:{
status: '',
brandName: '',
companyName: '',
id:"",
ordered:"",
description:""
},
// 品牌模型数据
brand: {
status: '',
brandName: '',
companyName: '',
id:"",
ordered:"",
description:""
},
//删除按钮的数据id
selectById : int,
//复选框选中数据的id
selectedIds: [],
// 复选框选中数据集合
multipleSelection: [],
// 表格数据
tableData: [{
brandName: '华为',
companyName: '华为科技有限公司',
ordered: '100',
status: "1"
}, {
brandName: '华为',
companyName: '华为科技有限公司',
ordered: '100',
status: "1"
}, {
brandName: '华为',
companyName: '华为科技有限公司',
ordered: '100',
status: "1"
}, {
brandName: '华为',
companyName: '华为科技有限公司',
ordered: '100',
status: "1"
}]
}
}
})
</script>
</body>
</html>效果展示
功能
可以在页面实现对数据的添加、批量删除、单个删除、对单个数据的修改、对数据的模糊查询、分页查询
总结
- 对于个别前端代码的实现存在知识性不足所导致的问题
- 对于数据访问层个别sql语句的书写不太熟练 导致后期出现bug难以找到问题所在位置 浪费大量时间
- 对于业务逻辑层（service）没有太大问题
- 对于servlet层存在较大的问题 对于逻辑的混淆 理解的不上太深刻 主要还是因为java和javeweb基础不牢固所导致
- 对于servlet层使用了BrandBase解决了类爆炸的问题，通过反射来获取方法对象，执行方法
- 自定义servlet，使用了请求路径进行方法分发，替换HttpServlet的根据请求方式进行方法分发
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
