后端学习 Java 面向指挥官的操作系统

项目简介

本项目为学习完JavaWeb后自主设计的课题，主题是为指挥官开发管理平台
源码附在文章下方，如果感兴趣的朋友可以试一试，不过可能需要自己配环境。我把大部分代码都写在文中了，不过那些大部分项目都会用到的重复代码就不写了，可以根据项目目录进行添加

项目截图

1. 首页
   
   本页面具有权限识别功能：
   指挥官输入正确的信息后可以访问管理系统、仓库系统；其他用户输入信息后则只能访问属于自己的装备系统

2. 管理系统
   
   本页面为指挥官管理用户而设计：
   搜索、增加用户、编辑、删除、批量删除

3. 仓库系统
   
   本页面为指挥官管理仓库而设计，每一位用户都可以在自己的页面中通过仓库选择适合自己的装备：
   搜索、增加装备、编辑、删除、批量删除

4. 装备系统
   
   本页面为用户管理自己的装备而设计：
   添加装备、删除

项目细节

1. 首页填写完信息后直接Enter也可以进行登录操作
2. 搜索框空白的情况下点击搜索会显示所有数据
3. 点击右上角的标志可返回首页
4. 指挥官权限的页面，左侧的导航栏只要鼠标放上去能亮点击后就能跳转，不需要专门点击文字
5. 在用户权限的界面，点击新增装备后选择好种类，点击下方的输入框会自动弹出仓库中已有的装备，在其中进行选择即可
   

项目结构

warship-demo
|____src
|    |____main
|         |____java
|         |    |____com.cookies
|         |         |____mapper
|         |         |    |____EquipmentMapper.java
|         |         |    |____WarehouseMapper.java
|         |         |    |____WarshipMapper.java
|         |         |____pojo
|         |         |    |____Equipment.java
|         |         |    |____User.java
|         |         |    |____Warehouse.java
|         |         |____service
|         |         |    |____impl
|         |         |    |    |____EquipmentServiceImpl.java
|         |         |    |    |____WarehouseServiceImpl.java
|         |         |    |    |____WarshipServiceImpl.java
|         |         |    |____EquipmentMapper.java
|         |         |    |____WarehouseMapper.java
|         |         |    |____WarshipMapper.java
|         |         |____util
|         |         |    |____SqlSessionFactoryUtils.java
|         |         |____web
|         |              |____BaseServlet.java
|         |              |____EquipmentServlet.java
|         |              |____LoginFilter.java
|         |              |____UserServlet.java
|         |              |____WarehouseServlet.java
|         |____resources
|         |    |____com
|         |         |____cookies
|         |         |    |____mapper
|         |         |         |____EquipmentMapper.xml
|         |         |         |____WarehouseMapper.xml
|         |         |         |____WarshipMapper.xml
|         |         |____mybatis-config.xml
|         |____webapp
|              |____image
|              |    |____cut.png
|              |    |____login.png
|              |____node_modules
|              |____WEB-INF
|              |    |____web.xml
|              |____equipment.html
|              |____index.html
|              |____user.html
|              |____warehouse.html
|____pom.xml

关键代码

准备

1. 通过SQL建立数据库

-- 用户表
CREATE TABLE tb_user(
id INT PRIMARY KEY auto_increment,
user_name VARCHAR(50),
password VARCHAR(20)
);

-- 装备表
CREATE TABLE tb_warehouse(
id INT PRIMARY KEY auto_increment,
equipment_name VARCHAR(50),
type VARCHAR(20)
);

-- 用户装备中间表
CREATE TABLE tb_user_warehouse(
id INT PRIMARY KEY auto_increment,
user_id INT,
warehouse_id INT
);

ALTER TABLE tb_user_warehouse ADD CONSTRAINT fk_user_id FOREIGN KEY(user_id) REFERENCES tb_user(id);
ALTER TABLE tb_user_warehouse ADD CONSTRAINT fk_warehouse_id FOREIGN KEY(warehouse_id) REFERENCES tb_warehouse(id);

2. 建立多个实体类

src/main/java/com/cookies/pojo/User.java

package com.cookies.pojo;

public class User {
    // id 主键
    private Integer id;
    // 用户名
    private String userName;
    // 密码
    private String password;

    public Integer getId() {
        return id;
    }

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

    public String getUserName() {
        return userName;
    }

    public void setUserName(String userName) {
        this.userName = userName;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }
}

src/main/java/com/cookies/pojo/Warehouse.java

package com.cookies.pojo;

public class Warehouse {
    // id 主键
    private Integer id;
    // 装备名称
    private String equipmentName;
    // 装备类型
    private String type;

    public Integer getId() {
        return id;
    }

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

    public String getEquipmentName() {
        return equipmentName;
    }

    public void setEquipmentName(String equipmentName) {
        this.equipmentName = equipmentName;
    }

    public String getType() {
        return type;
    }

    public void setType(String type) {
        this.type = type;
    }
}

src/main/java/com/cookies/pojo/Equipment.java

package com.cookies.pojo;

public class Equipment {
    private int id;
    private int userId;
    private int warehouseId;

    public int getId() {
        return id;
    }

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

    public int getUserId() {
        return userId;
    }

    public void setUserId(int userId) {
        this.userId = userId;
    }

    public int getWarehouseId() {
        return warehouseId;
    }

    public void setWarehouseId(int warehouseId) {
        this.warehouseId = warehouseId;
    }

    @Override
    public String toString() {
        return "Equipment{" +
                "id=" + id +
                ", userId=" + userId +
                ", warehouseId=" + warehouseId +
                '}';
    }
}

DAO层

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.cookies</groupId>
    <artifactId>warship-demo</artifactId>
    <version>1.0-SNAPSHOT</version>
    <packaging>war</packaging>

    <properties>
        <maven.compiler.source>17</maven.compiler.source>
        <maven.compiler.target>17</maven.compiler.target>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    </properties>

    <dependencies>
        <!--MySQL-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.30</version>
        </dependency>
        <!--MyBatis-->
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis</artifactId>
            <version>3.5.10</version>
        </dependency>
        <!--Servlet-->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>4.0.1</version>
            <scope>provided</scope>
        </dependency>
        <!--fastJSON-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.83</version>
        </dependency>
    </dependencies>

    <!--Tomcat-->
    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.tomcat.maven</groupId>
                <artifactId>tomcat7-maven-plugin</artifactId>
                <version>2.2</version>
            </plugin>
        </plugins>
    </build>
</project>

src/main/java/com/cookies/mapper/WarshipMapper.java

package com.cookies.mapper;

import com.cookies.pojo.User;
import org.apache.ibatis.annotations.*;

import java.util.List;

public interface WarshipMapper {
    /**
     * 查询所有用户信息
     * @return 所有用户名和密码
     */
    @Select("select * from tb_user")
    @ResultMap("userResultMap")
    List<User> selectAllUser();

    /**
     * 查看符合搜索要求的用户信息
     * @param userName 用户名
     * @return 符合的集合
     */
    @Select("select * from tb_user where user_name like #{userName}")
    @ResultMap("userResultMap")
    List<User> selectByUserName(String userName);

    /**
     * 新增用户
     */
    @Insert("insert into tb_user(user_name, password) values (#{userName}, #{password})")
    @ResultMap("userResultMap")
    void addUser(User user);

    /**
     * 删除用户
     * @param id id
     */
    @Delete("delete from tb_user where id = #{id}")
    void deleteUserById(int id);

    /**
     * 批量删除
     * @param ids 删除数组
     */
    void deleteUserByIds(@Param("ids") int[] ids);

    /**
     * 编辑用户
     * @param user 用户类
     */
    @Update("update tb_user set user_name = #{userName}, password = #{password} where id = #{id}")
    @ResultMap("userResultMap")
    void updateUser(User user);

    /**
     * 登录
     * @param user 用户类
     * @return 用户名
     */
    @Select("select user_name from tb_user where user_name = #{userName} && password = #{password}")
    @ResultMap("userResultMap")
    User login(User user);
}

src/main/resources/com/cookies/mapper/WarshipMapper.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.cookies.mapper.WarshipMapper">
    <resultMap id="userResultMap" type="user">
        <result property="userName" column="user_name"/>
    </resultMap>
    <!--
    /**
     * 批量删除
     * @param ids 删除数组
     */-->
    <delete id="deleteUserByIds">
        delete from tb_user where id in
        <foreach collection="ids" item="id" separator="," open="(" close=")">
            #{id}
        </foreach>
    </delete>
</mapper>

src/main/java/com/cookies/mapper/WarehouseMapper.java

package com.cookies.mapper;

import com.cookies.pojo.Warehouse;
import org.apache.ibatis.annotations.*;

import java.util.List;

public interface WarehouseMapper {
    /**
     * 查看所有数据
     *
     * @return 装备集合
     */
    @Select("select * from tb_warehouse")
    @ResultMap("warehouseResultMap")
    List<Warehouse> selectAllWarehouse();

    /**
     * 查看符合搜索要求的装备信息
     *
     * @param equipmentName 装备名
     * @return 符合的集合
     */
    @Select("select * from tb_warehouse where equipment_name like #{equipmentName}")
    @ResultMap("warehouseResultMap")
    List<Warehouse> selectByWarehouseName(String equipmentName);

    /**
     * 新增装备
     */
    @Insert("insert into tb_warehouse(equipment_name, type) values (#{equipmentName}, #{type})")
    @ResultMap("warehouseResultMap")
    void addWarehouse(Warehouse warehouse);

    /**
     * 删除装备
     *
     * @param id id
     */
    @Delete("delete from tb_warehouse where id = #{id}")
    void deleteWarehouseById(int id);

    /**
     * 批量删除
     *
     * @param ids 删除数组
     */
    void deleteWarehouseByIds(@Param("ids") int[] ids);

    /**
     * 编辑装备
     *
     * @param warehouse 装备类
     */
    @Update("update tb_warehouse set equipment_name = #{equipmentName}, type = #{type} where id = #{id}")
    @ResultMap("warehouseResultMap")
    void updateWarehouse(Warehouse warehouse);
}

src/main/resources/com/cookies/mapper/WarehouseMapper.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.cookies.mapper.WarehouseMapper">
    <resultMap id="warehouseResultMap" type="warehouse">
        <result property="equipmentName" column="equipment_name"/>
    </resultMap>
    <!--
    /**
     * 批量删除
     * @param ids 删除数组
     */
     -->
    <delete id="deleteWarehouseByIds">
        delete from tb_warehouse where id in
        <foreach collection="ids" item="id" separator="," open="(" close=")">
            #{id}
        </foreach>
    </delete>
</mapper>

src/main/java/com/cookies/mapper/EquipmentMapper.java

package com.cookies.mapper;

import com.cookies.pojo.Warehouse;
import org.apache.ibatis.annotations.*;

import java.util.List;

public interface EquipmentMapper {
    /**
     * 查看所有数据
     *
     * @param userName 用户名
     * @return 装备类集合
     */
    @Select("SELECT * FROM tb_warehouse WHERE id IN (SELECT warehouse_id FROM tb_user_warehouse WHERE user_id = (SELECT id FROM tb_user WHERE user_name = #{userName}))")
    @ResultMap("warehouseResultMap")
    List<Warehouse> selectAllEquipment(String userName);

    /**
     * 根据种类显示名称
     *
     * @param type 种类
     * @return 装备类集合
     */
    @Select("SELECT * FROM tb_warehouse WHERE type = #{type}")
    @ResultMap("warehouseResultMap")
    List<Warehouse> responseEquipment(String type);

    /**
     * 添加数据
     *
     * @param userName      用户名
     * @param equipmentName 装备名
     */
    @Insert("INSERT INTO tb_user_warehouse(user_id, warehouse_id) VALUES((SELECT id FROM tb_user WHERE user_name = #{userName}), (SELECT id FROM tb_warehouse WHERE equipment_name = #{equipmentName}))")
    void addEquipment(@Param("userName") String userName, @Param("equipmentName") String equipmentName);

    /**
     * 删除数据
     *
     * @param userName      用户名
     * @param equipmentName 装备名
     */
    @Delete("DELETE FROM tb_user_warehouse WHERE user_id = (SELECT id FROM tb_user WHERE user_name = #{userName}) && warehouse_id = (SELECT id FROM tb_warehouse WHERE equipment_name = #{equipmentName})")
    void deleteEquipment(@Param("userName") String userName, @Param("equipmentName") String equipmentName);
}

src/main/resources/com/cookies/mapper/EquipmentMapper.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.cookies.mapper.EquipmentMapper">
    <resultMap id="warehouseResultMap" type="warehouse">
        <result property="equipmentName" column="equipment_name"/>
    </resultMap>
</mapper>

Service层

src/main/java/com/cookies/service/WarshipService.java

package com.cookies.service;

import com.cookies.pojo.User;

import java.util.List;

public interface WarshipService {
    /**
     * 查询所有用户信息
     */
    List<User> selectAllUser();

    /**
     * 查看符合搜索要求的用户信息
     *
     * @param userName 用户名
     * @return 符合的集合
     */
    List<User> selectByUserName(String userName);

    /**
     * 新增用户
     */
    void addUser(User user);

    /**
     * 删除用户
     *
     * @param id id
     */
    void deleteUserById(int id);

    /**
     * 批量删除
     *
     * @param ids 删除数组
     */
    void deleteUserByIds(int[] ids);

    /**
     * 编辑用户
     *
     * @param user 用户类
     */
    void updateUser(User user);

    /**
     * 登录
     *
     * @param user 用户类
     * @return 用户类别
     */
    User login(User user);
}

src/main/java/com/cookies/service/impl/WarshipServiceImpl.java

package com.cookies.service.impl;

import com.cookies.mapper.WarshipMapper;
import com.cookies.pojo.User;
import com.cookies.service.WarshipService;
import com.cookies.util.SqlSessionFactoryUtils;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;

import java.util.List;

public class WarshipServiceImpl implements WarshipService {
    // 1.创建SqlSessionFactory工厂对象
    SqlSessionFactory factory = SqlSessionFactoryUtils.getSqlSessionFactory();

    /**
     * 查询所有用户信息
     *
     * @return 所有用户名和密码
     */
    @Override
    public List<User> selectAllUser() {
        // 2.获取SqlSession对象
        SqlSession sqlSession = factory.openSession();
        // 3.获取WarshipMapper
        WarshipMapper mapper = sqlSession.getMapper(WarshipMapper.class);
        // 4.调用方法
        List<User> users = mapper.selectAllUser();
        // 5.释放资源
        sqlSession.close();
        return users;
    }

    /**
     * 查看符合搜索要求的用户信息
     *
     * @param userName 用户名
     * @return 符合的集合
     */
    @Override
    public List<User> selectByUserName(String userName) {
        // 2.获取SqlSession对象
        SqlSession sqlSession = factory.openSession();
        // 3.获取WarshipMapper
        WarshipMapper mapper = sqlSession.getMapper(WarshipMapper.class);
        // 4.调用方法
        List<User> users = mapper.selectByUserName('%' + userName + '%');
        // 5.释放资源
        sqlSession.commit();
        sqlSession.close();
        return users;
    }

    /**
     * 新增用户
     */
    @Override
    public void addUser(User user) {
        // 2.获取SqlSession对象
        SqlSession sqlSession = factory.openSession();
        // 3.获取WarshipMapper
        WarshipMapper mapper = sqlSession.getMapper(WarshipMapper.class);
        // 4.调用方法
        mapper.addUser(user);
        // 5.释放资源
        sqlSession.commit();
        sqlSession.close();
    }

    /**
     * 删除用户
     *
     * @param id id
     */
    @Override
    public void deleteUserById(int id) {
        // 2.获取SqlSession对象
        SqlSession sqlSession = factory.openSession();
        // 3.获取WarshipMapper
        WarshipMapper mapper = sqlSession.getMapper(WarshipMapper.class);
        // 4.调用方法
        mapper.deleteUserById(id);
        // 5.释放资源
        sqlSession.commit();
        sqlSession.close();
    }

    /**
     * 批量删除
     *
     * @param ids 删除数组
     */
    @Override
    public void deleteUserByIds(int[] ids) {
        // 2.获取SqlSession对象
        SqlSession sqlSession = factory.openSession();
        // 3.获取WarshipMapper
        WarshipMapper mapper = sqlSession.getMapper(WarshipMapper.class);
        // 4.调用方法
        mapper.deleteUserByIds(ids);
        // 5.释放资源
        sqlSession.commit();
        sqlSession.close();
    }

    /**
     * 编辑用户
     *
     * @param user 用户类
     */
    @Override
    public void updateUser(User user) {
        // 2.获取SqlSession对象
        SqlSession sqlSession = factory.openSession();
        // 3.获取WarshipMapper
        WarshipMapper mapper = sqlSession.getMapper(WarshipMapper.class);
        // 4.调用方法
        mapper.updateUser(user);
        // 5.释放资源
        sqlSession.commit();
        sqlSession.close();
    }

    /**
     * 登录
     *
     * @param user 用户类
     * @return 用户类别
     */
    @Override
    public User login(User user) {
        // 2.获取SqlSession对象
        SqlSession sqlSession = factory.openSession();
        // 3.获取WarshipMapper
        WarshipMapper mapper = sqlSession.getMapper(WarshipMapper.class);
        // 4.调用方法
        User userType = mapper.login(user);
        // 5.释放资源
        sqlSession.commit();
        sqlSession.close();
        return userType;
    }
}

src/main/java/com/cookies/service/WarehouseService.java

package com.cookies.service;

import com.cookies.pojo.Warehouse;

import java.util.List;

public interface WarehouseService {
    /**
     * 查询所有装备信息
     */
    List<Warehouse> selectAllWarehouse();

    /**
     * 查看符合搜索要求的装备信息
     *
     * @param equipmentName 装备名
     * @return 符合的集合
     */
    List<Warehouse> selectByWarehouseName(String equipmentName);

    /**
     * 新增装备
     */
    void addWarehouse(Warehouse warehouse);

    /**
     * 删除装备
     *
     * @param id id
     */
    void deleteWarehouseById(int id);

    /**
     * 批量删除
     *
     * @param ids 删除数组
     */
    void deleteWarehouseByIds(int[] ids);

    /**
     * 编辑装备
     *
     * @param warehouse 装备类
     */
    void updateWarehouse(Warehouse warehouse);
}

src/main/java/com/cookies/service/impl/WarehouseServiceImpl.java

package com.cookies.service.impl;

import com.cookies.mapper.WarehouseMapper;
import com.cookies.pojo.Warehouse;
import com.cookies.service.WarehouseService;
import com.cookies.util.SqlSessionFactoryUtils;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;

import java.util.List;

public class WarehouseServiceImpl implements WarehouseService {
    // 1.创建SqlSessionFactory工厂对象
    SqlSessionFactory factory = SqlSessionFactoryUtils.getSqlSessionFactory();

    /**
     * 查询所有装备信息
     */
    @Override
    public List<Warehouse> selectAllWarehouse() {
        // 2.获取SqlSession对象
        SqlSession sqlSession = factory.openSession();
        // 3.获取WarehouseMapper
        WarehouseMapper mapper = sqlSession.getMapper(WarehouseMapper.class);
        // 4.调用方法
        List<Warehouse> warehouses = mapper.selectAllWarehouse();
        // 5.释放资源
        sqlSession.close();
        return warehouses;
    }

    /**
     * 查看符合搜索要求的装备信息
     *
     * @param equipmentName 装备名
     * @return 符合的集合
     */
    @Override
    public List<Warehouse> selectByWarehouseName(String equipmentName) {
        // 2.获取SqlSession对象
        SqlSession sqlSession = factory.openSession();
        // 3.获取WarshipMapper
        WarehouseMapper mapper = sqlSession.getMapper(WarehouseMapper.class);
        // 4.调用方法
        List<Warehouse> warehouses = mapper.selectByWarehouseName('%' + equipmentName + '%');
        // 5.释放资源
        sqlSession.commit();
        sqlSession.close();
        return warehouses;
    }

    /**
     * 新增装备
     */
    @Override
    public void addWarehouse(Warehouse warehouse) {
        // 2.获取SqlSession对象
        SqlSession sqlSession = factory.openSession();
        // 3.获取WarshipMapper
        WarehouseMapper mapper = sqlSession.getMapper(WarehouseMapper.class);
        // 4.调用方法
        mapper.addWarehouse(warehouse);
        // 5.释放资源
        sqlSession.commit();
        sqlSession.close();
    }

    /**
     * 删除装备
     *
     * @param id id
     */
    @Override
    public void deleteWarehouseById(int id) {
        // 2.获取SqlSession对象
        SqlSession sqlSession = factory.openSession();
        // 3.获取WarshipMapper
        WarehouseMapper mapper = sqlSession.getMapper(WarehouseMapper.class);
        // 4.调用方法
        mapper.deleteWarehouseById(id);
        // 5.释放资源
        sqlSession.commit();
        sqlSession.close();
    }

    /**
     * 批量删除
     *
     * @param ids 删除数组
     */
    @Override
    public void deleteWarehouseByIds(int[] ids) {
        // 2.获取SqlSession对象
        SqlSession sqlSession = factory.openSession();
        // 3.获取WarehouseMapper
        WarehouseMapper mapper = sqlSession.getMapper(WarehouseMapper.class);
        // 4.调用方法
        mapper.deleteWarehouseByIds(ids);
        // 5.释放资源
        sqlSession.commit();
        sqlSession.close();
    }

    /**
     * 编辑装备
     *
     * @param warehouse 装备类
     */
    @Override
    public void updateWarehouse(Warehouse warehouse) {
        // 2.获取SqlSession对象
        SqlSession sqlSession = factory.openSession();
        // 3.获取WarshipMapper
        WarehouseMapper mapper = sqlSession.getMapper(WarehouseMapper.class);
        // 4.调用方法
        mapper.updateWarehouse(warehouse);
        // 5.释放资源
        sqlSession.commit();
        sqlSession.close();
    }
}

src/main/java/com/cookies/service/EquipmentService.java

package com.cookies.service;

import com.cookies.pojo.Warehouse;
import org.apache.ibatis.annotations.Param;

import java.util.List;

public interface EquipmentService {
    /**
     * 查看所有数据
     *
     * @param userName 用户名
     * @return 装备类集合
     */
    List<Warehouse> selectAllEquipment(String userName);

    /**
     * 根据种类显示名称
     *
     * @param type 种类
     * @return 装备类集合
     */
    List<Warehouse> responseEquipment(String type);

    /**
     * 添加数据
     *
     * @param userName      用户名
     * @param equipmentName 装备名
     */
    void addEquipment(String userName, String equipmentName);

    /**
     * 删除数据
     *
     * @param userName      用户名
     * @param equipmentName 装备名
     */
    void deleteEquipment(String userName, String equipmentName);
}

src/main/java/com/cookies/service/impl/EquipmentServiceImpl.java

package com.cookies.service.impl;

import com.cookies.mapper.EquipmentMapper;
import com.cookies.pojo.Warehouse;
import com.cookies.service.EquipmentService;
import com.cookies.util.SqlSessionFactoryUtils;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;

import java.util.List;

public class EquipmentServiceImpl implements EquipmentService {
    // 1.创建SqlSessionFactory工厂对象
    SqlSessionFactory factory = SqlSessionFactoryUtils.getSqlSessionFactory();

    /**
     * 查看所有数据
     *
     * @param userName 用户名
     * @return 装备类集合
     */
    @Override
    public List<Warehouse> selectAllEquipment(String userName) {
        // 2.获取SqlSession对象
        SqlSession sqlSession = factory.openSession();
        // 3.获取Mapper
        EquipmentMapper mapper = sqlSession.getMapper(EquipmentMapper.class);
        // 4.调用方法
        List<Warehouse> warehouses = mapper.selectAllEquipment(userName);
        // 5.释放资源
        sqlSession.close();
        return warehouses;
    }

    /**
     * 根据种类显示名称
     *
     * @param type 种类
     * @return 装备类集合
     */
    @Override
    public List<Warehouse> responseEquipment(String type) {
        // 2.获取SqlSession对象
        SqlSession sqlSession = factory.openSession();
        // 3.获取Mapper
        EquipmentMapper mapper = sqlSession.getMapper(EquipmentMapper.class);
        // 4.调用方法
        List<Warehouse> warehouses = mapper.responseEquipment(type);
        // 5.释放资源
        sqlSession.close();
        return warehouses;
    }

    /**
     * 添加数据
     *
     * @param userName      用户名
     * @param equipmentName 装备名
     */
    @Override
    public void addEquipment(String userName, String equipmentName) {
        // 2.获取SqlSession对象
        SqlSession sqlSession = factory.openSession();
        // 3.获取Mapper
        EquipmentMapper mapper = sqlSession.getMapper(EquipmentMapper.class);
        // 4.调用方法
        mapper.addEquipment(userName, equipmentName);
        sqlSession.commit();
        // 5.释放资源
        sqlSession.close();
    }

    /**
     * 删除数据
     *
     * @param userName      用户名
     * @param equipmentName 装备名
     */
    @Override
    public void deleteEquipment(String userName, String equipmentName) {
        // 2.获取SqlSession对象
        SqlSession sqlSession = factory.openSession();
        // 3.获取Mapper
        EquipmentMapper mapper = sqlSession.getMapper(EquipmentMapper.class);
        // 4.调用方法
        mapper.deleteEquipment(userName, equipmentName);
        sqlSession.commit();
        // 5.释放资源
        sqlSession.close();
    }
}

Web层

src/main/java/com/cookies/web/BaseServlet.java

package com.cookies.web;

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;

public class BaseServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String uri = req.getRequestURI();
        int index = uri.lastIndexOf('/');
        String methodName = uri.substring(index + 1);

        Class<? extends BaseServlet> cls = this.getClass();
        try {
            Method method = cls.getMethod(methodName, HttpServletRequest.class, HttpServletResponse.class);
            method.invoke(this, req, resp);
        } catch (InvocationTargetException | IllegalAccessException | NoSuchMethodException e) {
            throw new RuntimeException(e);
        }
    }
}

src/main/java/com/cookies/web/LoginFilter.java

package com.cookies.web;

import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;

@WebFilter("/*")
public class LoginFilter implements Filter {
    public void init(FilterConfig config) throws ServletException {
    }

    public void destroy() {
    }

    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws ServletException, IOException {
        HttpServletRequest req = (HttpServletRequest) request;
        HttpServletResponse resp = (HttpServletResponse) response;

        // 获取URL
        String url = req.getRequestURL().toString();
        // System.out.println(url);

        // 输出当前权限人
        HttpSession session = req.getSession();
        String user = (String) session.getAttribute("user");
        // System.out.println(user);

        if (user != null && !user.equals("commander")) {
            if (url.contains("user") || url.contains("warehouse")) {
                resp.sendRedirect("http://localhost:8080/warship-demo/");
                chain.doFilter(request, response);
            } else {
                chain.doFilter(request, response);
            }
        } else {
            chain.doFilter(request, response);
        }
    }
}

src/main/java/com/cookies/web/UserServlet.java

package com.cookies.web;

import com.alibaba.fastjson.JSON;
import com.cookies.pojo.User;
import com.cookies.service.WarshipService;
import com.cookies.service.impl.WarshipServiceImpl;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.BufferedReader;
import java.io.IOException;
import java.util.List;

@WebServlet("/user/*")
public class UserServlet extends BaseServlet {
    private final WarshipService warshipService = new WarshipServiceImpl();

    /**
     * 查询所有用户信息
     */
    public void selectAllUser(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 1.调用Service查询
        List<User> users = warshipService.selectAllUser();

        // 2.转为JSON
        String jsonString = JSON.toJSONString(users);

        // 3.写数据
        response.setContentType("text/json;charset=utf-8");
        response.getWriter().write(jsonString);
    }

    /**
     * 查看符合搜索要求的用户信息
     */
    public void selectByUserName(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 1.接收JSON格式的品牌数据
        BufferedReader br = request.getReader();
        String userName = br.readLine();

        // 2.调用Service查询
        List<User> users = warshipService.selectByUserName(userName);

        // 3.转为JSON
        String jsonString = JSON.toJSONString(users);

        // 4.写数据
        response.setContentType("text/json;charset=utf-8");
        response.getWriter().write(jsonString);
    }

    /**
     * 新增用户
     */
    public void addUser(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 1.接收JSON格式的品牌数据
        BufferedReader br = request.getReader();
        String params = br.readLine();
        // 转换为User对象
        User user = JSON.parseObject(params, User.class);

        // 2.调用函数添加
        warshipService.addUser(user);

        // 3.响应提示
        response.getWriter().write("success");
    }

    /**
     * 删除
     */
    public void deleteUserById(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 1.接收JSON格式的品牌数据
        BufferedReader br = request.getReader();
        String params = br.readLine();
        // 转换为id
        int id = JSON.parseObject(params, int.class);

        // 2.调用函数添加
        warshipService.deleteUserById(id);

        // 3.响应提示
        response.getWriter().write("success");
    }

    /**
     * 批量删除
     */
    public void deleteUserByIds(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 1.接收JSON格式的品牌数据
        BufferedReader br = request.getReader();
        String params = br.readLine();
        // 转换为id
        int[] ids = JSON.parseObject(params, int[].class);

        // 2.调用函数添加
        warshipService.deleteUserByIds(ids);

        // 3.响应提示
        response.getWriter().write("success");
    }

    /**
     * 编辑数据
     */
    public void updateUser(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 1.接收JSON格式的品牌数据
        BufferedReader br = request.getReader();
        String params = br.readLine();
        User user = JSON.parseObject(params, User.class);

        // 2.调用函数添加
        warshipService.updateUser(user);

        // 3.响应提示
        response.getWriter().write("success");
    }

    public void login(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 1.接收JSON格式的品牌数据
        BufferedReader br = request.getReader();
        String params = br.readLine();
        User user = JSON.parseObject(params, User.class);

        // 2.调用函数添加
        User userType = warshipService.login(user);

        // 3.响应提示
        if (userType != null) {
            response.getWriter().write(userType.getUserName());
            HttpSession session = request.getSession();
            session.setAttribute("user", userType.getUserName());
        } else {
            response.getWriter().write("null");
        }
    }

src/main/java/com/cookies/web/WarehouseServlet.java

package com.cookies.web;

import com.alibaba.fastjson.JSON;
import com.cookies.pojo.Warehouse;
import com.cookies.service.WarehouseService;
import com.cookies.service.impl.WarehouseServiceImpl;

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("/warehouse/*")
public class WarehouseServlet extends BaseServlet {
    private final WarehouseService warehouseService = new WarehouseServiceImpl();

    /**
     * 查询所有装备信息
     */
    public void selectAllWarehouse(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 1.调用Service查询
        List<Warehouse> warehouses = warehouseService.selectAllWarehouse();

        // 2.转为JSON
        String jsonString = JSON.toJSONString(warehouses);

        // 3.写数据
        response.setContentType("text/json;charset=utf-8");
        response.getWriter().write(jsonString);
    }

    /**
     * 查看符合搜索要求的装备信息
     */
    public void selectByWarehouseName(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        // 1.接收JSON格式的品牌数据
        BufferedReader br = request.getReader();
        String equipmentName = br.readLine();

        // 2.调用Service查询
        List<Warehouse> warehouses = warehouseService.selectByWarehouseName(equipmentName);

        // 3.转为JSON
        String jsonString = JSON.toJSONString(warehouses);

        // 4.写数据
        response.setContentType("text/json;charset=utf-8");
        response.getWriter().write(jsonString);
    }

    /**
     * 新增装备
     */
    public void addWarehouse(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 1.接收JSON格式的品牌数据
        BufferedReader br = request.getReader();
        String params = br.readLine();
        // 转换为User对象
        Warehouse warehouse = JSON.parseObject(params, Warehouse.class);

        // 2.调用函数添加
        warehouseService.addWarehouse(warehouse);

        // 3.响应提示
        response.getWriter().write("success");
    }

    /**
     * 删除
     */
    public void deleteWarehouseById(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 1.接收JSON格式的品牌数据
        BufferedReader br = request.getReader();
        String params = br.readLine();
        // 转换为id
        int id = JSON.parseObject(params, int.class);

        // 2.调用函数添加
        warehouseService.deleteWarehouseById(id);

        // 3.响应提示
        response.getWriter().write("success");
    }

    /**
     * 批量删除
     */
    public void deleteWarehouseByIds(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 1.接收JSON格式的品牌数据
        BufferedReader br = request.getReader();
        String params = br.readLine();
        // 转换为id
        int[] ids = JSON.parseObject(params, int[].class);

        // 2.调用函数添加
        warehouseService.deleteWarehouseByIds(ids);

        // 3.响应提示
        response.getWriter().write("success");
    }

    /**
     * 编辑数据
     */
    public void updateWarehouse(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 1.接收JSON格式的品牌数据
        BufferedReader br = request.getReader();
        String params = br.readLine();
        Warehouse warehouse = JSON.parseObject(params, Warehouse.class);

        // 2.调用函数添加
        warehouseService.updateWarehouse(warehouse);

        // 3.响应提示
        response.getWriter().write("success");
    }
}

src/main/java/com/cookies/web/EquipmentServlet.java

package com.cookies.web;

import com.alibaba.fastjson.JSON;
import com.cookies.pojo.Warehouse;
import com.cookies.service.EquipmentService;
import com.cookies.service.impl.EquipmentServiceImpl;

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.nio.charset.StandardCharsets;
import java.util.List;

@WebServlet("/equipment/*")
public class EquipmentServlet extends BaseServlet {
    private final EquipmentService equipmentService = new EquipmentServiceImpl();

    /**
     * 查看所有数据
     *
     * @param request  请求
     * @param response 响应
     * @throws ServletException 异常
     * @throws IOException      异常
     */
    public void selectAllEquipment(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 1.接收JSON数据
        BufferedReader br = request.getReader();
        String userName = br.readLine();
        // 2.调用接口
        List<Warehouse> warehouses = equipmentService.selectAllEquipment(userName);
        // 3.转为JSON
        String jsonString = JSON.toJSONString(warehouses);
        // 4.写数据
        response.setContentType("text/json;charset=utf-8");
        response.getWriter().write(jsonString);
    }

    /**
     * 根据种类显示名称
     *
     * @param request  请求
     * @param response 响应
     * @throws ServletException 异常
     * @throws IOException      异常
     */
    public void responseEquipment(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 1.接收JSON数据
        request.setCharacterEncoding("utf-8");
        BufferedReader br = request.getReader();
        String type = br.readLine();
        // 2.调用接口
        List<Warehouse> warehouses = equipmentService.responseEquipment(type);
        // 3.转为JSON
        String jsonString = JSON.toJSONString(warehouses);
        // 4.写数据
        response.setContentType("text/json;charset=utf-8");
        response.getWriter().write(jsonString);
    }

    /**
     * 添加数据
     * @param request 请求
     * @param response 响应
     * @throws ServletException 异常
     * @throws IOException 异常
     */
    public void addEquipment(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 1.接收JSON数据
        request.setCharacterEncoding("utf-8");
        String userName = request.getParameter("userName");
        String equipmentName = request.getParameter("equipmentName");
        // 对GET方法编码
        // 1.1 先对乱码数据编码，转为字节数组
        byte[] bytes = equipmentName.getBytes(StandardCharsets.ISO_8859_1);
        // 1.2 字节数组编码
        equipmentName = new String(bytes, StandardCharsets.UTF_8);
        // 2.调用接口
        equipmentService.addEquipment(userName, equipmentName);
        // 3.响应操作
        response.getWriter().write("success");
    }

    public void deleteEquipment(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 1.接收JSON数据
        request.setCharacterEncoding("utf-8");
        String userName = request.getParameter("userName");
        String equipmentName = request.getParameter("equipmentName");
        // 对GET方法编码
        // 1.1 先对乱码数据编码，转为字节数组
        byte[] bytes = equipmentName.getBytes(StandardCharsets.ISO_8859_1);
        // 1.2 字节数组编码
        equipmentName = new String(bytes, StandardCharsets.UTF_8);
        // 2.调用接口
        equipmentService.deleteEquipment(userName, equipmentName);
        // 3.响应操作
        response.getWriter().write("success");
    }
}

前端

src/main/webapp/index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>首页</title>
	<link rel="shortcut icon" href="#">
</head>
<body>
<div id="app">
	<el-container>
		<el-main id="box">
			<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
			         class="demo-ruleForm">
				<el-form-item label="用户名" prop="userName">
					<el-input v-model.number="ruleForm.userName"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="pass">
					<el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="确认密码" prop="checkPass">
					<el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"
					          @keyup.enter.native="submitForm('ruleForm')"></el-input>
				</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-main>
	</el-container>
</div>

<!--引入Vue-->
<script src="node_modules/vue/dist/vue.js"></script>
<!--引入Element-->
<link rel="stylesheet" href="node_modules/element-ui/lib/theme-chalk/index.css">
<script src="node_modules/element-ui/lib/index.js"></script>
<!--引入axios-->
<script src="node_modules/axios/dist/axios.min.js"></script>
<script src="node_modules/default-passive-events/dist/index.js"></script>
<!--引入vue-cookies-->
<script src="node_modules/vue-cookies/vue-cookies.js"></script>
<!--关闭开发者提示-->
<script>Vue.config.productionTip = false</script>

<!--JavaScript部分-->
<script type="module">
    new Vue({
        el: "#app",
        mounted() {
            this.ruleForm.userName = this.$cookies.get('userName')
        },
        data() {
            let checkUserName = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('用户名不能为空'));
                } else {
                    callback()
                }
            }
            let validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    callback();
                }
            }
            let validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.ruleForm.pass) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            }
            return {
                ruleForm: {
                    userName: '',
                    pass: '',
                    checkPass: ''
                },
                rules: {
                    userName: [
                        {validator: checkUserName, trigger: 'blur'}
                    ],
                    pass: [
                        {validator: validatePass, trigger: 'blur'}
                    ],
                    checkPass: [
                        {validator: validatePass2, trigger: 'blur'}
                    ]
                },
                user: {}
            }
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid && (this.ruleForm.userName === "commander")) {
                        this.user.userName = this.ruleForm.userName;
                        this.user.password = this.ruleForm.pass;
                        axios({
                            method: "post",
                            url: "http://localhost:8080/warship-demo/user/login",
                            data: this.user
                        }).then(resp => {
                            if (resp.data === null) {
                                return false
                            } else {
                                location.href = "http://localhost:8080/warship-demo/user.html"
                                this.$cookies.set('userName', this.ruleForm.userName)
                            }
                        })
                    } else if (valid && this.ruleForm.userName !== "commander") {
                        this.user.userName = this.ruleForm.userName;
                        this.user.password = this.ruleForm.pass;
                        axios({
                            method: "post",
                            url: "http://localhost:8080/warship-demo/user/login",
                            data: this.user
                        }).then(resp => {
                            if (resp.data === null) {
                                return false
                            } else {
                                location.href = "http://localhost:8080/warship-demo/equipment.html";
                                this.$cookies.set('userName', this.ruleForm.userName)
                            }
                        })
                    } else {
                        return false;
                    }
                })
            },
            resetForm(formName) {
                this.$refs[formName].resetFields()
            }
        }
    })
</script>
</body>
<style>
    .el-main {
        background-color: rgba(144, 147, 153, 0.5);
        color: #606266;
        text-align: center;
        line-height: 160px;
        border-radius: 15px;
        margin: 15% 20% 0 20%;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    }

    #box:before {
        width: 90%;
        height: 90%;
        background-image: url("image/login.png");
        background-repeat: no-repeat;
        background-size: 100%;
        position: absolute;
        top: 5%;
        left: 5%;
        content: "";
        z-index: -1;
        opacity: 45%;
        filter: blur(5px);
    }
</style>
</html>

src/main/webapp/user.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>管理系统</title>
	<link rel="shortcut icon" href="#">
</head>

<body>
<!--标签部分-->
<div id="app">
	<el-container id="box">
		<!--Header-->
		<el-header>
			<el-row>
				<el-col :span="20">{{ message }}</el-col>
				<el-col :span="4">
					<el-button type="primary" icon="el-icon-house" @click="backToHome"></el-button>
				</el-col>
			</el-row>
		</el-header>
		<el-container>
			<!--el-aside-->
			<el-aside width="20%">
				<el-row class="tac">
					<el-col width="20%">
						<el-menu
								default-active="1"
								class="el-menu-vertical-demo">
							<el-menu-item index="1">
								<i class="el-icon-menu"></i>
								<span slot="title">用户管理</span>
							</el-menu-item>
							<el-menu-item index="2" @click="hrefMenu">
								<i class="el-icon-menu"></i>
								<span slot="title">
									<el-link :underline="false">装备管理</el-link>
								</span>
							</el-menu-item>
						</el-menu>
					</el-col>
				</el-row>
			</el-aside>
			<!--Main-->
			<el-main>
				<!--搜索表单-->
				<el-form :inline="true">
					<!--新增用户-->
					<el-button type="info" round @click="dialogVisibleAdd = true">新增用户</el-button>
					<el-button type="danger" round @click="deleteUserByIds">批量删除</el-button>
					<el-form-item class="userForm">
						<el-input v-model="selectUserName" placeholder="用户名"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" size="mini" @click="onSubmit">查询</el-button>
					</el-form-item>
				</el-form>
				<!--表格-->
				<el-table
						:data="user"
						style="width: 100%"
						@selection-change="handleSelectionChange"
						v-loading.lock='loading'
						element-loading-background="rgba(233, 238, 243, 0.1)">
					<!--复选框-->
					<el-table-column
							type="selection"
							width="55">
					</el-table-column>
					<!--序列-->
					<el-table-column
							type="index"
							width="50">
					</el-table-column>
					<!--表格数据-->
					<el-table-column
							prop="userName"
							label="用户名">
					</el-table-column>
					<el-table-column
							prop="password"
							label="密码">
					</el-table-column>
					<!--操作-->
					<el-table-column label="操作">
						<template v-slot="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>
				<!--新增用户弹窗-->
				<el-dialog
						title="新增用户"
						:visible.sync="dialogVisibleAdd"
						width="50%">
				<span>
					<el-form ref="form" :model="addUserByDialog" label-width="80px">
						<el-form-item label="用户名">
							<el-input v-model="addUserByDialog.userName"></el-input>
						</el-form-item>
						<el-form-item label="密码">
							<el-input v-model="addUserByDialog.password"></el-input>
						</el-form-item>
					</el-form>
				</span>
					<span slot="footer" class="dialog-footer">
					<el-button type="primary" @click="addUser">确 定</el-button>
                    <el-button @click="dialogVisibleAdd = false">取 消</el-button>
                </span>
				</el-dialog>
				<!--编辑用户弹窗-->
				<el-dialog
						title="编辑用户"
						:visible.sync="dialogVisibleEdit"
						width="50%">
				<span>
					<el-form ref="form" :model="addUserByDialog" label-width="80px">
						<el-form-item label="用户名">
							<el-input v-model="addUserByDialog.userName"></el-input>
						</el-form-item>
						<el-form-item label="密码">
							<el-input v-model="addUserByDialog.password"></el-input>
						</el-form-item>
					</el-form>
				</span>
					<span slot="footer" class="dialog-footer">
					<el-button type="primary" @click="editUser()">确 定</el-button>
                    <el-button @click="cancelChange">取 消</el-button>
                </span>
				</el-dialog>
			</el-main>
		</el-container>
	</el-container>
</div>

<!--引入Vue-->
<script src="node_modules/vue/dist/vue.js"></script>
<!--引入Element-->
<link rel="stylesheet" href="node_modules/element-ui/lib/theme-chalk/index.css">
<script src="node_modules/element-ui/lib/index.js"></script>
<!--引入axios-->
<script src="node_modules/axios/dist/axios.min.js"></script>
<script src="node_modules/default-passive-events/dist/index.js"></script>
<!--引入vue-cookies-->
<script src="node_modules/vue-cookies/vue-cookies.js"></script>
<!--关闭开发者提示-->
<script>Vue.config.productionTip = false</script>

<!--JavaScript部分-->
<script type="module">
    new Vue({
        el: '#app',
        data() {
            return {
                // Header
                message: 'commander',
                // 弹出框
                dialogVisibleAdd: false,
                dialogVisibleEdit: false,
                // 删除的Id
                selectedId: 0,
                selectedIds: [],
                multipleSelection: [],
                // 用户数据
                user: [],
                selectUserName: '',
                // 新增用户
                addUserByDialog: {},
                temp: '',
                loading: true
            }
        },
        mounted() {
            this.selectAllUser();
            this.temp = this.$cookies.get('userName');
            if (this.temp !== 'commander') {
                window.location.reload();
            }
        },
        methods: {
            // 通过Cookie识别
            myCookie() {

            },
            // 返回首页
            backToHome() {
                location.href = "http://localhost:8080/warship-demo/"
            },
            // 编辑用户取消
            cancelChange() {
                this.dialogVisibleEdit = false;
                this.$data.addUserByDialog = this.$options.data().addUserByDialog;
            },
            // 显示所有数据
            selectAllUser() {
                this.loading = true;
                axios({
                    method: "post",
                    url: "http://localhost:8080/warship-demo/user/selectAllUser",
                    data: this.user
                }).then(resp => {
                    this.user = resp.data;
                    this.loading = false;
                })
            },
            // 查询
            onSubmit() {
                if (this.selectUserName === '') {
                    this.selectAllUser()
                } else {
                    axios({
                        method: "post",
                        url: "http://localhost:8080/warship-demo/user/selectByUserName",
                        data: this.selectUserName
                    }).then(resp => {
                        this.user = resp.data;
                    })
                }
            },
            // 编辑
            editUser() {
                axios({
                    method: "post",
                    url: "http://localhost:8080/warship-demo/user/updateUser",
                    data: this.addUserByDialog
                }).then(resp => {
                    if (resp.data === "success") {
                        this.$data.addUserByDialog = this.$options.data().addUserByDialog;
                        this.dialogVisibleEdit = false;
                        this.$message({
                            message: '编辑成功',
                            type: "success"
                        })
                        // 重新查询
                        this.selectAllUser();
                    }
                })
            },
            // 编辑
            handleEdit(index, row) {
                this.addUserByDialog = row;
                this.dialogVisibleEdit = true;
            },
            // 删除
            handleDelete(index, row) {
                axios({
                    method: "post",
                    url: "http://localhost:8080/warship-demo/user/deleteUserById",
                    data: row.id
                }).then(resp => {
                    if (resp.data === "success") {
                        this.$message({
                            message: '删除成功',
                            type: "success"
                        })
                        // 重新查询
                        this.selectAllUser();
                    }
                })
            },
            handleSelectionChange(val) {
                this.multipleSelection = val
            },
            // 批量删除
            deleteUserByIds() {
                // 1.创建id数组，从this.multipleSelection中获取
                for (let i = 0; i < this.multipleSelection.length; i++) {
                    let selectionElement = this.multipleSelection[i];
                    this.selectedIds[i] = selectionElement.id;
                }
                this.$confirm('此操作将删除数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // 2.发送请求
                    axios({
                        method: "post",
                        url: "http://localhost:8080/warship-demo/user/deleteUserByIds",
                        data: this.selectedIds
                    }).then(resp => {
                        if (resp.data === "success") {
                            // 删除成功
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            // 重新查询
                            this.selectAllUser()
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                })
            },
            // 新增用户
            addUser() {
                axios({
                    method: "post",
                    url: "http://localhost:8080/warship-demo/user/addUser",
                    data: this.addUserByDialog
                }).then(resp => {
                    if (resp.data === "success") {
                        this.$data.addUserByDialog = this.$options.data().addUserByDialog;
                        this.dialogVisibleAdd = false;
                        this.$message({
                            message: '添加成功',
                            type: "success"
                        })
                        // 重新查询
                        this.selectAllUser();
                    }
                })
            },
            hrefMenu() {
                location.href = "http://localhost:8080/warship-demo/warehouse.html";
            }
        }
    })
</script>
</body>
<style>
    .el-container {
        height: 370px;
    }

    .el-header {
        background-color: rgba(144, 147, 153, 0.5);
        color: #606266;
        text-align: center;
        line-height: 60px;
        border-radius: 15px;
        margin: 5% 20% 3% 20%;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    }

    .el-aside {
        background-color: rgba(233, 238, 243, 0.5);
        color: #606266;
        text-align: center;
        line-height: 200px;
        border-radius: 15px;
        margin-left: 5%;
        margin-right: 5px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    }

    .el-main {
        background-color: rgba(233, 238, 243, 0.5);
        color: #333;
        text-align: center;
        line-height: 100%;
        border-radius: 15px;
        margin-right: 5%;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    }

    #box:before {
        width: 90%;
        height: 90%;
        background-image: url("image/cut.png");
        background-repeat: no-repeat;
        background-size: 100%;
        position: absolute;
        top: 5%;
        left: 5%;
        content: "";
        z-index: -1;
        opacity: 45%;
        filter: blur(5px);
    }

    .el-table {
        background-color: transparent;
    }

    .el-table th.el-table__cell {
        color: #606266;
        background-color: transparent;
    }

    .el-table tr {
        background-color: transparent;
    }

    .el-menu {
        border-right-color: rgba(0, 0, 0, 0);
        background-color: transparent;
    }

    *::-webkit-scrollbar {
        width: 7px;
        height: 10px;
        background-color: transparent;
    }

    *::-webkit-scrollbar-track {
        background-color: #f0f6ff;
    }

    *::-webkit-scrollbar-thumb {
        background-color: #73abb1;
        border-radius: 6px;
    }

    .userForm {
        margin-left: 20px;
    }

    .el-dialog {
        background-color: #EBEEF5;
        border-radius: 15px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    }

    .el-message-box {
        margin-bottom: 220px;
        background-color: #EBEEF5;
        border-radius: 15px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    }

    .el-message-box__btns .el-button:nth-child(2) {
        float: left;
        margin-left: 65%;
    }
</style>
</html>

src/main/webapp/warehouse.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>仓库系统</title>
	<link rel="shortcut icon" href="#">
</head>

<body>
<!--标签部分-->
<div id="app">
	<el-container id="box">
		<!--Header-->
		<el-header>
			<el-row>
				<el-col :span="20">{{ message }}</el-col>
				<el-col :span="4">
					<el-button type="primary" icon="el-icon-house" @click="backToHome"></el-button>
				</el-col>
			</el-row>
		</el-header>
		<el-container>
			<!--el-aside-->
			<el-aside width="20%">
				<el-row class="tac">
					<el-col width="20%">
						<el-menu
								default-active="2"
								class="el-menu-vertical-demo">
							<el-menu-item index="1" @click="hrefMenu">
								<i class="el-icon-menu"></i>
								<el-link :underline="false">用户管理
								</el-link>
							</el-menu-item>
							<el-menu-item index="2">
								<i class="el-icon-menu"></i>
								<span slot="title">
									<span slot="title">装备管理</span>
								</span>
							</el-menu-item>
						</el-menu>
					</el-col>
				</el-row>
			</el-aside>
			<!--Main-->
			<el-main>
				<!--搜索表单-->
				<el-form :inline="true">
					<!--新增装备-->
					<el-button type="info" round @click="dialogVisibleAdd = true">新增装备</el-button>
					<el-button type="danger" round @click="deleteWarehouseByIds">批量删除</el-button>
					<el-form-item class="warehouseForm">
						<el-input v-model="selectWarehouseName" placeholder="装备名"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" size="mini" @click="onSubmit">查询</el-button>
					</el-form-item>
				</el-form>
				<!--表格-->
				<el-table
						:data="warehouse"
						height="250"
						style="width: 100%"
						@selection-change="handleSelectionChange"
						v-loading.lock='loading'
						element-loading-background="rgba(233, 238, 243, 0.1)">
					<!--复选框-->
					<el-table-column
							type="selection"
							width="55">
					</el-table-column>
					<!--序列-->
					<el-table-column
							type="index"
							width="50">
					</el-table-column>
					<!--表格数据-->
					<el-table-column
							prop="equipmentName"
							label="装备名">
					</el-table-column>
					<el-table-column
							prop="type"
							label="种类"
							width="80%">
					</el-table-column>
					<!--操作-->
					<el-table-column
							label="操作"
							width="200">
						<template v-slot="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>
				<!--新增装备弹窗-->
				<el-dialog
						title="新增装备"
						:visible.sync="dialogVisibleAdd"
						width="50%">
				<span>
					<el-form ref="form" :model="addWarehouseByDialog" label-width="80px">
						<el-form-item label="装备名">
							<el-input v-model="addWarehouseByDialog.equipmentName"></el-input>
						</el-form-item>
						<el-form-item label="种类">
							<el-input v-model="addWarehouseByDialog.type"></el-input>
						</el-form-item>
					</el-form>
				</span>
					<span slot="footer" class="dialog-footer">
					<el-button type="primary" @click="addWarehouse">确 定</el-button>
                    <el-button @click="dialogVisibleAdd = false">取 消</el-button>
                </span>
				</el-dialog>
				<!--编辑装备弹窗-->
				<el-dialog
						title="编辑装备"
						:visible.sync="dialogVisibleEdit"
						width="50%">
				<span>
					<el-form ref="form" :model="addWarehouseByDialog" label-width="80px">
						<el-form-item label="装备名">
							<el-input v-model="addWarehouseByDialog.equipmentName"></el-input>
						</el-form-item>
						<el-form-item label="种类">
							<el-input v-model="addWarehouseByDialog.type"></el-input>
						</el-form-item>
					</el-form>
				</span>
					<span slot="footer" class="dialog-footer">
					<el-button type="primary" @click="editWarehouse">确 定</el-button>
                    <el-button @click="cancelChange">取 消</el-button>
                </span>
				</el-dialog>
			</el-main>
		</el-container>
	</el-container>
</div>

<!--引入Vue-->
<script src="node_modules/vue/dist/vue.js"></script>
<!--引入Element-->
<link rel="stylesheet" href="node_modules/element-ui/lib/theme-chalk/index.css">
<script src="node_modules/element-ui/lib/index.js"></script>
<!--引入axios-->
<script src="node_modules/axios/dist/axios.min.js"></script>
<script src="node_modules/default-passive-events/dist/index.js"></script>
<!--引入vue-cookies-->
<script src="node_modules/vue-cookies/vue-cookies.js"></script>
<!--关闭开发者提示-->
<script>Vue.config.productionTip = false</script>

<!--JavaScript部分-->
<script type="module">
    new Vue({
        el: '#app',
        data() {
            return {
                // Header
                message: 'commander',
                // 弹出框
                dialogVisibleAdd: false,
                dialogVisibleEdit: false,
                // 删除的Id
                selectedId: 0,
                selectedIds: [],
                multipleSelection: [],
                // 用户数据
                warehouse: [],
                selectWarehouseName: '',
                // 新增用户
                addWarehouseByDialog: {},
                temp: '',
                loading: true
            }
        },
        mounted() {
            this.selectAllWarehouse();
            this.temp = this.$cookies.get('userName');
            if (this.temp !== 'commander') {
                window.location.reload();
            }
        },
        methods: {
            // 返回首页
            backToHome() {
                location.href = "http://localhost:8080/warship-demo/"
            },
            // 编辑装备取消
            cancelChange() {
                this.dialogVisibleEdit = false;
                this.$data.addWarehouseByDialog = this.$options.data().addWarehouseByDialog;
            },
            // 显示所有数据
            selectAllWarehouse() {
                this.loading = true;
                axios({
                    method: "post",
                    url: "http://localhost:8080/warship-demo/warehouse/selectAllWarehouse",
                    data: this.warehouse
                }).then(resp => {
                    this.warehouse = resp.data;
                    this.loading = false;
                })
            },
            // 查询
            onSubmit() {
                console.log(this.selectWarehouseName);
                if (this.selectWarehouseName === '') {
                    this.selectAllWarehouse()
                } else {
                    axios({
                        method: "post",
                        url: "http://localhost:8080/warship-demo/warehouse/selectByWarehouseName",
                        data: this.selectWarehouseName
                    }).then(resp => {
                        this.warehouse = resp.data;
                    })
                }
            },
            // 编辑
            editWarehouse() {
                axios({
                    method: "post",
                    url: "http://localhost:8080/warship-demo/warehouse/updateWarehouse",
                    data: this.addWarehouseByDialog
                }).then(resp => {
                    if (resp.data === "success") {
                        this.$data.addWarehouseByDialog = this.$options.data().addWarehouseByDialog;
                        this.dialogVisibleEdit = false;
                        this.$message({
                            message: '编辑成功',
                            type: "success"
                        })
                        // 重新查询
                        this.selectAllWarehouse();
                    }
                })
            },
            // 编辑
            handleEdit(index, row) {
                this.addWarehouseByDialog = row;
                this.dialogVisibleEdit = true;
            },
            // 删除
            handleDelete(index, row) {
                axios({
                    method: "post",
                    url: "http://localhost:8080/warship-demo/warehouse/deleteWarehouseById",
                    data: row.id
                }).then(resp => {
                    if (resp.data === "success") {
                        this.$message({
                            message: '删除成功',
                            type: "success"
                        })
                        // 重新查询
                        this.selectAllWarehouse();
                    }
                })
            },
            handleSelectionChange(val) {
                this.multipleSelection = val
            },
            // 批量删除
            deleteWarehouseByIds() {
                // 1.创建id数组，从this.multipleSelection中获取
                for (let i = 0; i < this.multipleSelection.length; i++) {
                    let selectionElement = this.multipleSelection[i];
                    this.selectedIds[i] = selectionElement.id;
                }
                this.$confirm('此操作将删除数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // 2.发送请求
                    axios({
                        method: "post",
                        url: "http://localhost:8080/warship-demo/warehouse/deleteWarehouseByIds",
                        data: this.selectedIds
                    }).then(resp => {
                        if (resp.data === "success") {
                            // 删除成功
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            // 重新查询
                            this.selectAllWarehouse()
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                })
            },
            // 新增装备
            addWarehouse() {
                axios({
                    method: "post",
                    url: "http://localhost:8080/warship-demo/warehouse/addWarehouse",
                    data: this.addWarehouseByDialog
                }).then(resp => {
                    if (resp.data === "success") {
                        this.$data.addWarehouseByDialog = this.$options.data().addWarehouseByDialog;
                        this.dialogVisibleAdd = false;
                        this.$message({
                            message: '添加成功',
                            type: "success"
                        })
                        // 重新查询
                        this.selectAllWarehouse();
                    }
                })
            },
            hrefMenu() {
                location.href = "http://localhost:8080/warship-demo/user.html";
            }
        }
    })
</script>
</body>
<style>
    .el-container {
        height: 370px;
    }

    .el-header {
        background-color: rgba(144, 147, 153, 0.5);
        color: #606266;
        text-align: center;
        line-height: 60px;
        border-radius: 15px;
        margin: 5% 20% 3% 20%;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    }

    .el-aside {
        background-color: rgba(233, 238, 243, 0.5);
        color: #606266;
        text-align: center;
        line-height: 200px;
        border-radius: 15px;
        margin-left: 5%;
        margin-right: 5px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    }

    .el-main {
        background-color: rgba(233, 238, 243, 0.5);
        color: #333;
        text-align: center;
        line-height: 100%;
        border-radius: 15px;
        margin-right: 5%;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    }

    #box:before {
        width: 90%;
        height: 90%;
        background-image: url("image/cut.png");
        background-repeat: no-repeat;
        background-size: 100%;
        position: absolute;
        top: 5%;
        left: 5%;
        content: "";
        z-index: -1;
        opacity: 45%;
        filter: blur(5px);
    }

    .el-table {
        background-color: transparent;
    }

    .el-table th.el-table__cell {
        color: #606266;
        background-color: transparent;
    }

    .el-table tr {
        background-color: transparent;
    }

    .el-menu {
        border-right-color: rgba(0, 0, 0, 0);
        background-color: transparent;
    }

    *::-webkit-scrollbar {
        width: 7px;
        height: 10px;
        background-color: transparent;
    }

    *::-webkit-scrollbar-track {
        background-color: #f0f6ff;
    }

    *::-webkit-scrollbar-thumb {
        background-color: #73abb1;
        border-radius: 6px;
    }

    .warehouseForm {
        margin-left: 20px;
    }

    .el-dialog {
        background-color: #EBEEF5;
        border-radius: 15px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    }

    .el-message-box {
        margin-bottom: 220px;
        background-color: #EBEEF5;
        border-radius: 15px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    }

    .el-message-box__btns .el-button:nth-child(2) {
        float: left;
        margin-left: 65%;
    }
</style>
</html>

src/main/webapp/equipment.html

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>装备系统</title>
	<link rel="shortcut icon" href="#">
</head>

<body>
<!--标签部分-->
<div id="app">
	<el-container>
		<el-header>
			<el-row>
				<el-col :span="20">Hello, {{ message }}</el-col>
				<el-col :span="4">
					<el-button type="primary" icon="el-icon-house" @click="backToHome"></el-button>
				</el-col>
			</el-row>
		</el-header>
		<el-main id="box">
			<el-form :inline="true">
				<el-form-item>
					<!--新增用户-->
					<el-button type="primary" round @click="dialogVisible = true">新增装备</el-button>
				</el-form-item>
			</el-form>
			<!--表格-->
			<el-table
					:data="equipment"
					style="width: 100%"
					v-loading.lock='loading'
					element-loading-background="rgba(233, 238, 243, 0.1)">
				<!--序列-->
				<el-table-column
						type="index"
						width="50">
				</el-table-column>
				<!--表格数据-->
				<el-table-column
						prop="type"
						label="种类">
				</el-table-column>
				<el-table-column
						prop="equipmentName"
						label="装备名">
				</el-table-column>
				<!--操作-->
				<el-table-column
						label="操作"
						width="170">
					<template v-slot="scope">
						<el-button
								size="mini"
								type="danger"
								@click="handleDelete(scope.$index, scope.row)">删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!--新增装备弹窗-->
			<el-dialog
					title="新增装备"
					:visible.sync="dialogVisible"
					width="500px">
				<span>
					<el-form ref="form" :model="addEquipmentByDialog" label-width="80px">
						<el-form-item label="种类">
							<el-select v-model="addEquipmentByDialog.type" placeholder="请优先选择种类">
								<el-option label="小型舰炮" value="小型舰炮"></el-option>
                                <el-option label="中型舰炮" value="中型舰炮"></el-option>
                                <el-option label="大型舰炮" value="大型舰炮"></el-option>
								<el-option label="战斗机" value="战斗机"></el-option>
								<el-option label="鱼雷机" value="鱼雷机"></el-option>
								<el-option label="轰炸机" value="轰炸机"></el-option>
								<el-option label="设备" value="设备"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="装备名">
							<el-autocomplete
									v-model="addEquipmentByDialog.equipmentName"
									:fetch-suggestions="querySearchAsync"
									placeholder="请选择以下内容"
							></el-autocomplete>
						</el-form-item>
					</el-form>
				</span>
				<span slot="footer" class="dialog-footer">
					<el-button type="primary" @click="addEquipment">确 定</el-button>
                    <el-button @click="dialogVisible = false">取 消</el-button>
                </span>
			</el-dialog>
		</el-main>
	</el-container>
</div>

<!--引入Vue-->
<script src="node_modules/vue/dist/vue.js"></script>
<!--引入Element-->
<link rel="stylesheet" href="node_modules/element-ui/lib/theme-chalk/index.css">
<script src="node_modules/element-ui/lib/index.js"></script>
<!--引入axios-->
<script src="node_modules/axios/dist/axios.min.js"></script>
<script src="node_modules/default-passive-events/dist/index.js"></script>
<!--引入vue-cookies-->
<script src="node_modules/vue-cookies/vue-cookies.js"></script>
<!--关闭开发者提示-->
<script>Vue.config.productionTip = false</script>

<!--JavaScript部分-->
<script type="module">
    new Vue({
        el: '#app',
        data() {
            return {
                // 用户名
                message: '',
                // 表格
                equipment: [],
                // 弹框
                dialogVisible: false,
                // 新增装备
                addEquipmentByDialog: {},
                // 根据装备种类返回的装备名称
                options: [],
                loading: true
            }
        },
        mounted() {
            this.message = this.$cookies.get('userName');
            this.selectAllEquipment();
        },
        methods: {
            // 返回首页
            backToHome() {
                location.href = "http://localhost:8080/warship-demo/"
            },
            // 显示所有数据
            selectAllEquipment() {
                this.loading = true;
                axios({
                    method: "post",
                    url: "http://localhost:8080/warship-demo/equipment/selectAllEquipment",
                    data: this.message
                }).then(resp => {
                    this.equipment = resp.data;
                    this.loading = false;
                })
            },
            // 删除
            handleDelete(index, row) {
                axios({
                    method: "get",
                    url: "http://localhost:8080/warship-demo/equipment/deleteEquipment?userName=" + this.message + "&equipmentName=" + row.equipmentName
                }).then(resp => {
                    if (resp.data === "success") {
                        this.$message({
                            message: '删除成功',
                            type: "success"
                        })
                        this.selectAllEquipment();
                    }
                })
            },
            // 新增数据
            addEquipment() {
                axios({
                    method: "get",
                    url: "http://localhost:8080/warship-demo/equipment/addEquipment?userName=" + this.message + "&equipmentName=" + this.addEquipmentByDialog.equipmentName
                }).then(resp => {
                    if (resp.data === "success") {
                        this.$data.addEquipmentByDialog = this.$options.data().addEquipmentByDialog;
                        this.dialogVisible = false;
                        this.$message({
                            message: '添加成功',
                            type: "success"
                        })
                        this.selectAllEquipment();
                    }
                })
            },
            // 根据种类显示名称
            querySearchAsync(queryString, cb) {
                axios({
                    method: "post",
                    url: "http://localhost:8080/warship-demo/equipment/responseEquipment",
                    data: this.addEquipmentByDialog.type
                }).then(resp => {
                    this.options = resp.data;
                    let arr = [];
                    for (let i = 0; i < this.options.length; i++) {
                        arr.push({
                            value: this.options[i].equipmentName,
                            id: this.options[i].id,
                            type: this.options[i].type
                        })
                    }
                    cb(arr)
                })
            }
        }
    })
</script>
</body>
<style>
    .el-header {
        background-color: rgba(144, 147, 153, 0.5);
        color: #606266;
        text-align: center;
        line-height: 60px;
        border-radius: 15px;
        margin: 5% 20% 3% 20%;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    }

    .el-main {
        background-color: rgba(233, 238, 243, 0.5);
        color: #333;
        text-align: center;
        line-height: 100%;
        border-radius: 15px;
        margin: 0 10% 0 10%;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    }

    #box:before {
        width: 90%;
        height: 90%;
        background-image: url("image/cut.png");
        background-repeat: no-repeat;
        background-size: 100%;
        position: absolute;
        top: 5%;
        left: 5%;
        content: "";
        z-index: -1;
        opacity: 45%;
        filter: blur(5px);
    }

    .el-table {
        background-color: transparent;
    }

    .el-table th.el-table__cell {
        color: #606266;
        background-color: transparent;
    }

    .el-table tr {
        background-color: transparent;
    }

    .el-dialog {
        background-color: #EBEEF5;
        border-radius: 15px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    }
</style>
</html>