SSM-CRUD SSM+VUE版本 (尚硅谷教程)

最新推荐文章于 2024-05-09 11:13:47 发布

Crazy_August

最新推荐文章于 2024-05-09 11:13:47 发布

阅读量1.5k

点赞数 2

分类专栏： Java 前端文章标签： vue.js java maven tomcat 后端

本文链接：https://blog.csdn.net/weixin_45454773/article/details/122931487

版权

Java 同时被 2 个专栏收录

12 篇文章 1 订阅

订阅专栏

前端

5 篇文章 0 订阅

订阅专栏

SSM-CRUD SSM+VUE版本 (尚硅谷教程)

项目说明:

后端: Spring、SpringMVC、Mybatis、Tomcat9

前端: Vue3、Element-plus

工具:IDEA2021、Navicat

1.创建Maven项目

2.整合SSM

见ssm整合步骤_CrazyAugust的博客-CSDN博客!

3.CRUD 项目搭建

1.后端代码

1.导入相关依赖

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>
    <repositories>
        <repository>
            <id>aliyunmaven</id>
            <name>aliyun maven</name>
            <url>https://maven.aliyun.com/repository/central</url>
            <layout>default</layout>
            <!-- 是否开启发布版构件下载 -->
            <releases>
                <enabled>true</enabled>
            </releases>
            <!-- 是否开启快照版构件下载 -->
            <snapshots>
                <enabled>false</enabled>
            </snapshots>
        </repository>
    </repositories>
    <groupId>com.august.ssm</groupId>
    <artifactId>SSM_01_CRUD</artifactId>
    <version>1.0-SNAPSHOT</version>
    <packaging>war</packaging>
    <properties>
        <maven.compiler.source>8</maven.compiler.source>
        <maven.compiler.target>8</maven.compiler.target>
        <version.spring>5.3.15</version.spring>
    </properties>
    
    <build>
        <resources>
            <resource>
                <directory>src/main/java</directory>
                <includes>
                    <include>**/*.properties</include>
                    <include>**/*.xml</include>
                </includes>
                <filtering>false</filtering>
            </resource>
            <resource>
                <directory>src/main/resources</directory>
                <includes>
                    <include>**/*.properties</include>
                    <include>**/*.xml</include>
                </includes>
                <filtering>false</filtering>
            </resource>
            <resource>
                <directory>src/main/resources/mapper</directory>
                <includes>
                    <include>**/*.properties</include>
                    <include>**/*.xml</include>
                </includes>
                <filtering>false</filtering>
            </resource>
        </resources>
    </build>

    <dependencies>
        <!--    SpringMVC依赖    -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-webmvc</artifactId>
            <version>${version.spring}</version>
        </dependency>
        <!--    Spring-jdbc-->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-jdbc</artifactId>
            <version>${version.spring}</version>
        </dependency>
        <!--        spring面向切片-->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-aspects</artifactId>
            <version>${version.spring}</version>
        </dependency>
        <!-- spring单元测试-->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-test</artifactId>
            <version>${version.spring}</version>
            <scope>test</scope>
        </dependency>

        <!--  Mybatis-->
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis</artifactId>
            <version>3.5.6</version>
        </dependency>
        <!--        Mybatis-spring适配包-->
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis-spring</artifactId>
            <version>2.0.6</version>
        </dependency>
        <!--        数据库连接池,驱动-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.2.8</version>
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.22</version>
        </dependency>

        <!--  其他  (servlet,junit)-->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>4.0.1</version>
            <scope>provided</scope>
        </dependency>
        <!--分页插件-->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper</artifactId>
            <version>5.3.0</version>
        </dependency>
        <!-- json处理-->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.13.1</version>
        </dependency>

        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.13.1</version>
            <scope>test</scope>
        </dependency>

        <!-- 日志-->
<!--        <dependency>-->
<!--            <groupId>ch.qos.logback</groupId>-->
<!--            <artifactId>logback-classic</artifactId>-->
<!--            <version>1.2.3</version>-->
<!--            <scope>test</scope>-->
<!--        </dependency>-->

    </dependencies>
</project>

2.数据库

Employee类(POJO)----> teb_emp表

CREATE TABLE `tab_emp` (
  `emp_id` int NOT NULL AUTO_INCREMENT,
  `emp_name` varchar(32) DEFAULT NULL,
  `gender` char(1) DEFAULT NULL,
  `email` varchar(32) DEFAULT NULL,
  `d_id` int DEFAULT NULL,
  PRIMARY KEY (`emp_id`)
)

Department类(POJO)----> teb_dept表

CREATE TABLE `tab_dept` (
  `dept_id` int NOT NULL AUTO_INCREMENT,
  `dept_name` varchar(32) DEFAULT NULL,
  PRIMARY KEY (`dept_id`)
)

3.POJO类

Employees.java

/**
 * @author : Crazy_August
 * @description : 员工类
 * @Time: 2022-02-12   11:27
 */
public class Employees {
    private Integer empId;
    private String empName;
    private String email;
    private String gender;
    private Integer dId;
    private Department deptName;
    
    ....get、set.....
}

Department.java

/**
 * @author : Crazy_August
 * @description : 部门类
 * @Time: 2022-02-12   11:29
 */

public  class Department {
    private Integer deptId;
    private String deptName;
    
     ....get、set.....
}

4.Dao类

EmployeesMapper.java

public interface EmployeesMapper {
    /**
     * 查询所有员工信息(不包含部门)
     * @return
     */
    List<Employees> queryAllEmployees();
    
    /**
     * 查询所有员工信息(包含部门)
     * @return
     */
    List<Employees> queryAllEmployeesWithDepartment();
    
    /**
     * 通过id查员工(不包含部门)
     * @param id
     * @return
     */
    Employees queryEmployeesById(Integer id);

    /**
     * 通过id查员工(包含部门)
     * @param id
     * @return
     */
    Employees queryEmployeesByIdWithDepartment(Integer id);

    /**
     * 通过id删除员工
     * @param id
     * @return
     */
    int deleteEmployeesById(Integer id);

    /**
     *  批量删除员工
     * @param ids
     * @return
     */
    int deleteBatchEmployeesById(List<Integer> ids);

    /**
     * 添加员工
     * @param emp
     * @return
     */
    int addEmployees(Employees emp);

    /**
     * 通过id更新员工信息
     * @param emp
     * @return
     */
    int updateEmployee(Employees emp);

}

Employees接口对应的Mapper文件:

EmployeesMapper.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.august.dao.EmployeesMapper">
    <!--    List<Employees> queryAllEmployees();-->
    <select id="queryAllEmployees" resultType="employees">
        SELECT
        <include refid="empFieldSql"/>
        FROM tab_emp
    </select>
    <!--    List<Employees> queryAllEmployeesWithDepartment();-->
    <resultMap id="empResultMap" type="employees">
        <id property="empId" column="emp_id"/>
        <result property="empName" column="emp_name"/>
        <result property="email" column="email"/>
        <result property="gender" column="gender"/>
        <result property="dId" column="dept_id"/>
        <!-- 其他类的映射使用 association-->
        <association property="deptName" javaType="department">
            <id property="deptId" column="dept_id"/>
            <result property="deptName" column="dept_name"/>
        </association>
    </resultMap>
    <select id="queryAllEmployeesWithDepartment" resultMap="empResultMap">
        SELECT
        <include refid="empWithFieldSql"/>
        FROM tab_emp e
        LEFT JOIN tab_dept d
        ON e.d_id = d.dept_id
    </select>
    <!--Employees queryEmployeesById(Integer id);-->
    <select id="queryEmployeesById" resultType="employees">
        SELECT
        <include refid="empFieldSql"/>
        FROM tab_emp where emp_id = #{empId}
    </select>
    <!--  Employees queryEmployeesByIdWithDepartment(Integer id);  -->
    <select id="queryEmployeesByIdWithDepartment" resultMap="empResultMap">
        SELECT
        <include refid="empWithFieldSql"/>
        FROM tab_emp e
        LEFT JOIN tab_dept d
        ON e.d_id = d.dept_id
        WHERE e.emp_id =#{empId}
    </select>
    <!--int deleteEmployeesById(Integer id);-->
    <delete id="deleteEmployeesById">
        DELETE	FROM tab_emp	WHERE emp_id = #{empId}
    </delete>

    <!--int addEmployees(Employees emp);-->
    <insert id="addEmployees" parameterType="employees" useGeneratedKeys="true" keyProperty="empId">
        INSERT INTO tab_emp(emp_name, email, gender, d_id)
        VALUES (#{empName}, #{email}, #{gender}, #{dId})
    </insert>

    <!-- int updateEmployee(Employees emp);-->
    <update id="updateEmployee" parameterType="employees">
        UPDATE tab_emp SET
        <trim suffixOverrides="," suffix="">
            <if test="empName != null">
                emp_name = #{empName},
            </if>
            <if test="email != null">
                email= #{email},
            </if>
            <if test="gender != null">
                gender=#{gender},
            </if>
            <if test="dId != null">
                d_id=#{dId}
            </if>
        </trim>
        WHERE emp_id = #{empId}
    </update>
    
    <!--  批量删除  -->
    <!--  int deleteBatchEmployeesById(Integer[] ids);-->
    <delete id="deleteBatchEmployeesById" parameterType="list">
        DELETE FROM tab_emp WHERE emp_id IN
        <foreach collection="list" item="empId" open="(" separator="," close=")">
            #{empId}
        </foreach>
    </delete>

    <!-- sql重用语句 -->
    <sql id="empFieldSql">
        emp_id,emp_name,email,gender,d_id
    </sql>
    <sql id="empWithFieldSql">
        e.emp_id,e.emp_name,e.email,gender,d.dept_id,d.dept_name
    </sql>
</mapper>

DepartmentMapper.java

public interface DepartmentMapper {
    /**
     * 查询所有部门
     * @return
     */
    List<Department> queryAllDepartment();

    /**
     * 通过id查部门
     * @param departmentId
     * @return
     */
    Department queryDepartmentById(Integer departmentId);
}

Department接口对应的Mapper文件:

<?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.august.dao.DepartmentMapper">

    <!--List<Department> queryAllDepartment();-->
    <select id="queryAllDepartment" resultType="department">
        SELECT
		<include refid="departmentFieldSql"/>
        FROM tab_dept
    </select>

<!-- Department queryDepartmentById(Integer departmentId);-->
    <select id="queryDepartmentById" resultType="department">
        SELECT
        <include refid="departmentFieldSql"/>
        FROM tab_dept where dept_id = #{deptId}
    </select>

    <sql id="departmentFieldSql">
        dept_id,dept_name
    </sql>
</mapper>

5.service类

EmployeesService.java

/**
 * @author : Crazy_August
 * @description :service和dao交互
 * @Time: 2022-02-12   19:51
 */
@Service
public class EmployeesService {

    @Autowired
    EmployeesMapper employeesMapper;

    public List<Employees> getAllEmployeesWithDepartment() {
        return employeesMapper.queryAllEmployeesWithDepartment();
    }

    public void addEmployees(Employees employees) {
        employeesMapper.addEmployees(employees);
    }

    public void updateEmployees(Employees employees) {
        employeesMapper.updateEmployee(employees);
    }

    public void deleteEmployees(Integer id) {
        employeesMapper.deleteEmployeesById(id);
    }

    public Employees getEmployee(Integer empId) {
        return employeesMapper.queryEmployeesById(empId);
    }

    /**
     * 批量删除
     * @param empIds
     */
    public void deleteBatchEmployees(List<Integer>  empIds) {
        employeesMapper.deleteBatchEmployeesById(empIds);
    }
}

DepartmentService.java

/**
 * @author : Crazy_August
 * @description :部门Service
 * @Time: 2022-02-13   18:19
 */
@Service
public class DepartmentService {

    @Autowired
    DepartmentMapper departmentMapper;

    public List<Department> getAllDependencies() {
        return departmentMapper.queryAllDepartment();
    }

}

6.封装数据类

Msg.java

/**
 * @author : Crazy_August
 * @description : 处理信息类
 * @Time: 2022-02-13   17:03
 */
public class Msg {

    //状态码 200成功  100失败
    private int status;
    //提示信息
    private String msg;
    // 返回给用户的数据
    private Map<String, Object> data = new HashMap<String, Object>();
    
    public static Msg success() {
        Msg result = new Msg();
        result.setStatus(200);
        result.setMsg("请求成功");
        return result;
    }

    public static Msg failed() {
        Msg result = new Msg();
        result.setStatus(100);
        result.setMsg("请求失败");
        return result;
    }

    //添加封装数据
    public Msg add(String key, Object value) {
        this.getData().put(key, value);
        return this;
    }

    ....get、set....
}

7.解决跨域过滤filter类

package com.august.filter;
import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/**
 * @author : Crazy_August
 * @description :
 * @Time: 2022-02-12   22:20
 */
public class crossDomainFilter implements Filter {
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
    }
    
    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
        try {
            HttpServletRequest httpRequest = (HttpServletRequest) request;
            HttpServletResponse httpResponse = (HttpServletResponse) response;
            // 跨域
            String origin = httpRequest.getHeader("Origin");
            if (origin == null) {
                httpResponse.addHeader("Access-Control-Allow-Origin", "*");
            } else {
                httpResponse.addHeader("Access-Control-Allow-Origin", origin);
            }
            httpResponse.addHeader("Access-Control-Allow-Headers",
                    "Origin, x-requested-with, Content-Type, Accept,X-Cookie");
            httpResponse.addHeader("Access-Control-Allow-Credentials", "true");
            httpResponse.addHeader("Access-Control-Allow-Methods", "GET,POST,PUT,OPTIONS,DELETE");
            if (httpRequest.getMethod().equals("OPTIONS")) {
                httpResponse.setStatus(HttpServletResponse.SC_OK);
                return;
            }
            chain.doFilter(request, response);
        } catch (Exception e) {
            throw e;
        }
    }

    @Override
    public void destroy() {
    }
}

在web.xml添加過濾

 <!-- 允许跨域 -->
<filter>
    <filter-name>crossDomainFilter</filter-name>
    <!-- 跨域过滤器路径 -->
    <filter-class>com.august.filter.crossDomainFilter</filter-class>
</filter>
<filter-mapping>
    <filter-name>crossDomainFilter</filter-name>
    <!-- 允许所有接口都能被跨域访问 -->
    <url-pattern>/*</url-pattern>
</filter-mapping>

8.web工程配置文件Spring+SpringMVC+Mybatis配置文件

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    <!--  1.启动Spring容器-->
    <context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>classpath:applicationContext.xml</param-value>
    </context-param>
    <listener>
        <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
    </listener>
    <!--    2.SpringMVC的前端控制器,拦截所有请求-->
    <servlet>
        <servlet-name>DispatcherServlet</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:springmvc.xml</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>DispatcherServlet</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>

    <!--    3.字符编码过滤器,一定放在所有过滤器之前-->
    <filter>
        <filter-name>CharacterEncodingFilter</filter-name>
        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
        <init-param>
            <param-name>encoding</param-name>
            <param-value>UTF-8</param-value>
        </init-param>
        <init-param>
            <param-name>forceRequestEncoding</param-name>
            <param-value>true</param-value>
        </init-param>
        <init-param>
            <param-name>forceResponseEncoding</param-name>
            <param-value>true</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>CharacterEncodingFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
    <!--  4.Rest风格过滤器  -->
    <filter>
        <filter-name>HiddenHttpMethodFilter</filter-name>
        <filter-class>org.springframework.web.filter.HiddenHttpMethodFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>HiddenHttpMethodFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
    <!-- 允许跨域 -->
    <filter>
        <filter-name>crossDomainFilter</filter-name>
        <!-- 跨域过滤器路径 -->
        <filter-class>com.august.filter.crossDomainFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>crossDomainFilter</filter-name>
        <!-- 允许所有接口都能被跨域访问 -->
        <url-pattern>/*</url-pattern>
    </filter-mapping>

</web-app>

applicationContext.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx"
       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/aop https://www.springframework.org/schema/aop/spring-aop.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx.xsd">
    <!--  Spring的配置文件,只要配置和业余相关的,(数据源,事务控制)  -->
    <context:component-scan base-package="com.august">
        <!--排除 controller 控制器的包-->
<!--        <context:exclude-filter type="annotation" expression="org.springframework.stereotype.Controller"/>-->
    </context:component-scan>
    <!--    2.引入配置文件-->
    <context:property-placeholder location="classpath:jdbc.properties"/>

    <bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource"  init-method="init"  destroy-method="close" lazy-init="false">
        <property name="driverClassName" value="${jdbc.driverClassName}"/>
        <property name="url" value="${jdbc.url}"/>
        <property name="username" value="${jdbc.username}"/>
        <property name="password" value="${jdbc.password}"/>

        <!-- 初始化连接池中的连接数，取值应在minPoolSize与maxPoolSize之间，默认为3-->
        <property name="initialSize" value="${jdbc.initialSize}"/>
        <!--连接池中保留的最大连接数。默认值: 15 -->
        <property name="maxActive" value="${jdbc.maxActive}"/>
        <!-- 连接池中保留的最小连接数，默认为：3-->
        <property name="minIdle" value="${jdbc.minIdle}"/>
        <!--最大空闲时间，60秒内未使用则连接被丢弃。若为0则永不丢弃。默认值: 0 -->
        <property name="maxWait" value="${jdbc.maxWait}"/>

        <!--每60秒检查所有连接池中的空闲连接。默认值: 0，不检查 -->
        <property name="timeBetweenEvictionRunsMillis" value="${jdbc.timeBetweenEvictionRunsMillis}"/>
        <!-- 当连接池连接耗尽时，客户端调用getConnection()后等待获取新连接的时间，超时后将抛出SQLException，如设为0则无限期等待。单位毫秒。默认: 0 -->
        <property name="minEvictableIdleTimeMillis" value="${jdbc.minEvictableIdleTimeMillis}"/>
    </bean>

    <!--    3.mybatis整合spring-->
    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <!-- 配置Mybatis的全局配置文件位置-->
        <property name="configLocation" value="classpath:mybatis-config.xml"/>
        <property name="dataSource" ref="dataSource"/>
        <!-- 配置Mybatis的Mapper配置文件位置-->
        <property name="mapperLocations" value="classpath:mapper/*.xml"/>
    </bean>
    <!--配置扫描器,  mybatis接口的实现到ioc容器-->
    <bean id="mapperScannerConfigurer" class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <!--扫描dao下的实现-->
        <property name="basePackage" value="com.august.dao"/>
    </bean>

    <!--4.事物控制配置-->
    <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <!--  控制数据源-->
        <property name="dataSource" ref="dataSource"/>
    </bean>
    <!-- 开启基于注解或者xml(常用)配置形式的事物-->
    <aop:config>
        <aop:pointcut id="txPointcut" expression="execution(* com.august.service..*(..))"/>
        <!-- 配置事物增强-->
        <aop:advisor advice-ref="txAdvice" pointcut-ref="txPointcut"/>
    </aop:config>
    <!--    配置事物增强,如何切入-->
    <tx:advice id="txAdvice">
        <tx:attributes>
            <!--所有方法都是事物方法-->
            <tx:method name="*"/>
            <!--所有get开头都是事物方法-->
            <tx:method name="get*" read-only="true"/>
        </tx:attributes>
    </tx:advice>
<!--    <tx:annotation-driven transaction-manager="transactionManager"/>-->

</beans>

jdbc.properties

jdbc.driverClassName=com.mysql.cj.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/ssm?useSSL=false&useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai
jdbc.username=root
jdbc.password=123456
jdbc.initialSize=5
jdbc.maxActive=20
jdbc.minIdle=3
jdbc.maxWait=0
jdbc.timeBetweenEvictionRunsMillis=0
jdbc.minEvictableIdleTimeMillis=30000

mybatis-config.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
        PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-config.dtd">
<!--MyBatis的配置文件-->
<configuration>
    <settings>
        <setting name="mapUnderscoreToCamelCase" value="true"/>
    </settings>
    <typeAliases>
        <package name="com.august.bean"/>
    </typeAliases>
    <plugins>
        <!-- com.github.pagehelper为PageHelper类所在包名 -->
        <plugin interceptor="com.github.pagehelper.PageInterceptor">
        </plugin>
    </plugins>

    <mappers>
        <package name="com.august.dao"/>
    </mappers>
</configuration>

springmvc.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd">
    <!--SpringMVC的配置文件。包含网站跳转逻辑控制配置-->
    <!--    1.配置扫描包-->
    <context:component-scan base-package="com.august" use-default-filters="false">
        <!--    只扫描控制器-->
        <context:include-filter type="annotation" expression="org.springframework.stereotype.Controller"/>
    </context:component-scan>
    <!--    2.两个标准配置-->
    <!--    将SpringMVC不能处理的请求交给Tomcat,动态静态资源都能访问成功-->
    <mvc:default-servlet-handler/>
    <!--    注解驱动-->
    <mvc:annotation-driven/>
</beans>

2.前端代碼

1.index.html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SSMCRUD</title>
</head>
<script type="text/javascript" src="./static/js/vue.js"></script>
<link rel="stylesheet" href="./static/css/element.css"/>
<script type="text/javascript" src="./static/js/element.js"></script>
<link rel="stylesheet" href="./static/css/style.css"/>
<script type="text/javascript" src="./static/js/axios.js"></script>

<body>
<div id="app">
    <div class="common-layout">
        <el-container>
            <el-header>员工信息SSM-CRUD</el-header>
            <el-main>
                <el-row :gutter="20">
                    <el-col :span="6" :push="18">
                        <el-button type="warning" @click="handleAdd">添加</el-button>
                        <el-button type="danger" @click="handleBatchDelete">删除</el-button>
                    </el-col>
                </el-row>
                <el-table stripe :data="tableData" style="width: 100%" @selection-change="selection">
                    <el-table-column type="selection" width="30"></el-table-column>
                    <el-table-column prop="empId" label="编号" width="70"></el-table-column>
                    <el-table-column prop="empName" label="姓名"></el-table-column>
                    <el-table-column prop="gender" label="性别"></el-table-column>
                    <el-table-column prop="email" label="邮箱"></el-table-column>
                    <el-table-column prop="deptName.deptName" label="部门"></el-table-column>
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button size="small" type="primary" @click="handleEdit(scope.row)">编辑
                            </el-button>
                            <el-button size="small" type="danger" @click="handleDelete(scope.row)">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <div class="demo-pagination-block">
                    <div class="page-style">
                        <el-pagination :currentPage="page.pageNum"
                                       :page-size="pageSize"
                                       :page-sizes="[5, 10,20, 30, 50]"
                                       layout="total, sizes, prev, pager, next, jumper"
                                       :total="page.total"
                                       @size-change="handleSizeChange" @current-change="handleCurrentChange">
                        </el-pagination>
                    </div>
                </div>
            </el-main>
        </el-container>
    </div>

    <!-- 编辑dialog添加框 -->
    <el-dialog v-model="editDialogFormVisible" :title="editNameDisabled?'编辑员工':'添加员工'" @close="dialogClose">
        <el-form :model="editEmpForm" :rules="editEmpFormRules" ref="formRef">
            <el-form-item label="姓名" prop="empName">
                <el-input v-model="editEmpForm.empName" :disabled="editNameDisabled"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="editEmpForm.email"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="gender">
                <div>
                    <el-radio v-model="editEmpForm.gender" label="男" size="large">男</el-radio>
                    <el-radio v-model="editEmpForm.gender" label="女" size="large">女</el-radio>
                </div>
            </el-form-item>
            <el-form-item label="部门">
                <el-select v-model="editEmpForm.did" placeholder="选择部门">
                    <el-option v-for="(item,index) in dept" key="index" :label="item.deptName"
                               :value="item.deptId"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
                <span class="dialog-footer">
                    <el-button @click="resetForm">取消</el-button>
                    <el-button type="primary" @click="addSubmit">确定</el-button>
                </span>
        </template>
    </el-dialog>
    <!-- ================================== -->
</div>

</body>

<script type="text/javascript">

    window.onload = function () {
        const VueApp = {
            data() {
                return {
                    editEmpForm: {},
                    //表单验证
                    editEmpFormRules: {
                        empName: [
                            {
                                required: true,
                                message: 'Please input Activity name',
                                trigger: 'blur',
                            },
                            {
                                min: 1,
                                max: 15,
                                message: 'Length should be 1 to 15',
                                trigger: 'blur',
                            },
                        ],
                        email: [
                            {
                                required: true,
                                message: '请输入正确邮箱',
                                trigger: 'blur',
                                pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
                            },
                        ],
                        gender: [
                            {
                                required: true,
                                message: '请选择性别',
                                trigger: 'blur',
                            },
                        ],
                        deptName: [
                            {
                                required: true,
                                message: '请选择部门',
                                trigger: 'blur',
                            },
                        ],
                    },
                    editDialogFormVisible: false,
                    //可编辑
                    editNameDisabled: false,
                    //表格数据
                    tableData: [],
                    page: {},
                    pageSize: 5,
                    currentPage: 1,
                    //部门
                    dept: [],
                    //最大页数
                    maxPage: 1,
                    deleteEmpsId: []
                }
            },
            methods: {
                //获取所有员工信息
                getEmpApi(page, pageSize) {
                    axios.get('http://localhost:8080/SSM/emps', {
                        params: {
                            page: page,
                            pageSize: pageSize
                        }
                    }).then(data => {
                        this.tableData = data.data.data.pageInfo.list
                        this.page = data.data.data.pageInfo
                        this.maxPage = this.page.pages
                    }).catch(error => {
                            console.log(error);
                        }
                    )
                },
                getSingEmpApi(empId) {
                    axios.get('http://localhost:8080/SSM/emp', {
                        params: {
                            empId,
                        }
                    }).then(data => {
                        this.editEmpForm = data.data.data.emp
                        console.log(this.editEmpForm)
                    }).catch(error => {
                            console.log(error);
                        }
                    )
                },
                //更新员工信息
                updateEmpApi(params) {
                    axios.put('http://localhost:8080/SSM/emps', {...params}).then(data => {
                        if (data.data.status == 200) {
                            this.$message.success("更新成功")
                            this.getEmpApi(this.currentPage, this.pageSize)
                            return
                        }
                        this.$message.error("更新失败")
                    }).catch(error => {
                            console.log(error);
                        }
                    )
                },
                //添加员工信息
                addEmpApi(params) {
                    axios.post('http://localhost:8080/SSM/emps', {...params}).then(data => {
                        if (data.data.status == 200) {
                            this.$message.success("添加成功")
                            this.getEmpApi(this.maxPage, this.pageSize)
                            return
                        }
                        this.$message.error("添加失败")
                    }).catch(error => {
                            console.log(error);
                        }
                    )
                },

                deleteEmpApi(empId) {
                    axios.delete(`http://localhost:8080/SSM/emps/${empId}`).then(data => {
                        if (data.data.status == 200) {
                            this.getEmpApi(this.currentPage, this.pageSize)
                            this.$message.success("删除成功")
                            return
                        }
                        this.$message.error("删除失败")
                    }).catch(error => {
                            console.log(error);
                        }
                    )
                },

                deleteBatchEmpApi(Ids) {
                    //判断是否为空
                    if (Object.keys(Ids).length === 0) {
                        return this.$message.error("请选择删除员工")
                    }
                    let arrayId = []
                    Ids.forEach(id => {
                        arrayId.push(id)
                    })
                    // arrayId.shift();
                    console.log(arrayId)
                    axios.delete('http://localhost:8080/SSM/emps', {
                        data: {
                            empIds: arrayId
                        }
                    }).then(data => {
                        if (data.data.status == 200) {
                            this.getEmpApi(this.currentPage, this.pageSize)
                            this.deleteEmpsId = []
                            return this.$message.success("批量删除成功")
                        }
                        this.$message.error("批量删除失败")
                    }).catch(error => {
                            console.log(error);
                        }
                    )
                },

                //获取部门信息
                getDeptApi() {
                    axios.get('http://localhost:8080/SSM/dept').then(data => {
                        this.dept = data.data.data.dept
                    }).catch(error => {
                            console.log(error);
                        }
                    )
                },

                //编辑按钮
                handleEdit(row) {
                    this.getSingEmpApi(row.empId)
                    this.getDeptApi()
                    this.editNameDisabled = true
                    this.editDialogFormVisible = true;
                },
                // 删除按钮
                handleDelete(row) {
                    this.deleteEmpApi(row.empId)
                },
                // 添加按钮
                handleAdd() {
                    this.getDeptApi()
                    this.editNameDisabled = false
                    this.editDialogFormVisible = true;
                },
                // 批量删除按钮
                handleBatchDelete() {
                    this.deleteBatchEmpApi(this.deleteEmpsId)
                },
                //提交
                addSubmit() {
                    const valid = this.submitForm()
                    if (valid) {
                        if (this.editNameDisabled) {
                            this.updateEmpApi(this.editEmpForm)
                        } else {
                            this.addEmpApi(this.editEmpForm)
                        }
                        this.editDialogFormVisible = false
                    }

                },

                selection(emps) {
                    this.deleteEmpsId = []
                    emps.forEach(emp => {
                        this.deleteEmpsId.push(emp.empId)
                    })

                },

                handleSizeChange(size) {
                    this.pageSize = size
                    this.getEmpApi(this.currentPage, size)
                },

                handleCurrentChange(current) {
                    this.currentPage = current
                    this.getEmpApi(current, this.pageSize)
                },

                //表单验证
                submitForm() {
                    let flag = false;
                    this.$refs.formRef.validate((valid) => {
                        if (valid) {
                            flag = true;
                        } else {
                            flag = false;
                            return false;
                        }
                    });
                    return flag
                },

                resetForm() {
                    this.$refs.formRef.resetFields();
                    this.editDialogFormVisible = false
                },

                dialogClose() {
                    this.$refs.formRef.resetFields();
                }

            },
            beforeMount() {
                this.getEmpApi();
            },
        }
        // 需要声明使用插件
        const app = Vue.createApp(VueApp)
        // app.config.globalProperties
        app.use(ElementPlus).mount('#app')
    }
</script>
</html>

2.靜態資源

也可以直接CDN引入 Vue3 、element-push和axios

4.总结:

前端部分没有使用构建工具时,使用element-push也需要这样app.use(ElementPlus).mount('#app'),否则Vue不能解析.

在使用axios发请求时,

axios.post(url, {params:{
    id:xx
    user:xx
}).then(data => {}).catch(error => {})
axios.post(url, {data:{
    id:xx
    user:xx
}).then(data => {}).catch(error => {})

params是以id=xx&user=xxx&key=value形式传输

data是以json格式传输=={ “id”: “xx”, “user”: “xx”}.==

@RequestParam、@PathViriable

区别:@RequestParam:用于获取传入参数的值

@RequestMapping("/emps/{empId}")

@PathViriable:用于定义路径参数值
@ResponseBody

@ResponseBody:作用于方法上，可以将return整个返回结果以某种格式返回，如json或xml格式。这个时候视图解析器不在起作用
@RestController这个注解是@ResponseBody和@Controller的组合

已经同步项目gitee: https://gitee.com/xiao-zaiyi/ssm-curd

个人博客: https://xiaozaiyi.xyz/

Crazy_August

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
5
评论
SSM-CRUD SSM+VUE版本 (尚硅谷教程)

SSM-CRUD SSM+VUE版本 (尚硅谷教程)项目说明:后端: Spring、SpringMVC、Mybatis、Tomcat9前端: Vue3、Element-plus工具:IDEA2021、Navicat1.创建Maven项目2.整合SSM见ssm整合步骤_CrazyAugust的博客-CSDN博客!3.CRUD 项目搭建1.后端代码1.导入相关依赖pom.xml<?xml version="1.0" encoding="UTF-8"?><projec
复制链接

扫一扫