(动力节点项目)SSM整合：SSM+VUE

已于 2023-03-31 16:48:41 修改
阅读量8.5k 收藏 209
点赞数 32
分类专栏： SpringMVC 文章标签： mvc spring ssm vue mybatis
于 2022-10-30 12:43:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53881899/article/details/127597349
版权

目录：

一、效果图：

请添加图片描述
请添加图片描述
请添加图片描述

二、实现步骤：

1.后端：

  1. 创建数据库。
  2. 新建Maven项目,选择webapp模板。
  3. 补全webapp缺失目录。
  4. 修改pom.xml文件，添加依赖。
  5. 添加jdbc.properties属性配置文件。
  6. 添加SqlMapConfig.xml(Mybatis核心配置文件)。
  7. 添加applicationContext_mapper.xml文件(数据访问层的核心配置文件)。
  8. 添加applicationContext_service.xml文件(业务逻辑层的核心配置文件)。
  9. 添加spirngmvc.xml文件(Springmvc核心配置文件)。
  10. web.xml文件设置中文编码，并注册spirngmvc框架，并注册Spring框架。
  11. 新建实体类user。
  12. 新建UserMapper.java接口。
  13. 新建UserMapper.xml实现增删查所有功能。
  14. 新建service接口和实现类。
  15. 新建测试类,完成所有功能的测试。
  16. 新建控制器,完成所有功能。
  17. 浏览器测试功能。

2.前端：

  1. 使用前端交付的VUE项目。
  2. cd E:\idea_workspace\ssm-vue01 进入到当前项目的目录下
  3. npm i element -ui -S 下载elementUI的框架
  4. npm install 打包项目
  5. npm install --save vue-axios 下载跨域访问组件axios
  6. 在IDEA中启动VUE项目，使用npm的配置方式部署项目。
  7. 配合后端项目进行测试。

三、后端SSM：

1.项目结构：

在这里插入图片描述

2. 实现思路：

(1)创建数据库表：

在这里插入图片描述

(2)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>org.example</groupId>
  <artifactId>ssm</artifactId>
  <version>1.0</version>
  <packaging>war</packaging>



  <!-- 集中定义依赖版本号 -->
  <properties>
    <!--单元测试的依赖-->
    <junit.version>4.12</junit.version>
    <!--spring相关依赖-->
    <spring.version>5.2.5.RELEASE</spring.version>
    <!--mybatis相关依赖-->
    <mybatis.version>3.5.1</mybatis.version>
    <!--mybatis与spring整合的依赖-->
    <mybatis.spring.version>1.3.1</mybatis.spring.version>
    <!--mybatis支持的分页插件的依赖-->
    <mybatis.paginator.version>1.2.15</mybatis.paginator.version>
    <!--mysql连接java依赖-->
    <mysql.version>8.0.26</mysql.version>
    <!--日志依赖-->
    <slf4j.version>1.6.4</slf4j.version>
    <!--阿里巴巴的德鲁伊连接池依赖-->
    <druid.version>1.1.12</druid.version>
    <!--分页插件依赖-->
    <pagehelper.version>5.1.2</pagehelper.version>
    <!--jstl标签库-->
    <jstl.version>1.2</jstl.version>
    <!--servlet依赖-->
    <servlet-api.version>3.0.1</servlet-api.version>
    <!--jsp的依赖-->
    <jsp-api.version>2.0</jsp-api.version>
    <!--springmvc默认进行依赖转化的工具-->
    <jackson.version>2.9.6</jackson.version>
  </properties>


  <dependencies>
    <!--spring-->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-context</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-beans</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-webmvc</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-jdbc</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-aspects</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-jms</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-context-support</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-test</artifactId>
      <version>5.2.5.RELEASE</version>
    </dependency>
    <!--Mybatis-->
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis</artifactId>
      <version>${mybatis.version}</version>
    </dependency>
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis-spring</artifactId>
      <version>${mybatis.spring.version}</version>
    </dependency>
    <dependency>
      <groupId>com.github.miemiedev</groupId>
      <artifactId>mybatis-paginator</artifactId>
      <version>${mybatis.paginator.version}</version>
    </dependency>
    <dependency>
      <groupId>com.github.pagehelper</groupId>
      <artifactId>pagehelper</artifactId>
      <version>${pagehelper.version}</version>
    </dependency>
    <!--MySql-->
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>${mysql.version}</version>
    </dependency>
    <!--连接池-->
    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>druid</artifactId>
      <version>${druid.version}</version>
    </dependency>
    <!--junit-->
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>${junit.version}</version>
      <scope>test</scope>
    </dependency>
    <!--JSP相关-->
    <dependency>
      <groupId>jstl</groupId>
      <artifactId>jstl</artifactId>
      <version>${jstl.version}</version>
    </dependency>
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <version>3.0.1</version>
      <scope>provided</scope>
    </dependency>
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>jsp-api</artifactId>
      <scope>provided</scope>
      <version>${jsp-api.version}</version>
    </dependency>
    <!--Jackson Json处理工具包-->
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>${jackson.version}</version>
    </dependency>
    <dependency>
      <groupId>org.json</groupId>
      <artifactId>json</artifactId>
      <version>20140107</version>
    </dependency>
    <!--文件异步上传使用的依赖-->
    <dependency>
      <groupId>commons-io</groupId>
      <artifactId>commons-io</artifactId>
      <version>2.4</version>
    </dependency>
    <dependency>
      <groupId>commons-fileupload</groupId>
      <artifactId>commons-fileupload</artifactId>
      <version>1.3.1</version>
    </dependency>
    <!-- https://mvnrepository.com/artifact/org.slf4j/slf4j-api -->
    <dependency>
      <groupId>org.slf4j</groupId>
      <artifactId>slf4j-api</artifactId>
      <version>2.0.3</version>
    </dependency>
    <!-- https://mvnrepository.com/artifact/org.slf4j/slf4j-simple -->
    <dependency>
      <groupId>org.slf4j</groupId>
      <artifactId>slf4j-simple</artifactId>
      <version>2.0.3</version>
      <scope>test</scope>
    </dependency>

  </dependencies>


  <!-- 插件配置 -->
  <build>
    <plugins>
      <plugin>
        <groupId>org.apache.maven.plugins</groupId>
        <artifactId>maven-compiler-plugin</artifactId>
        <configuration>
          <!--指定JDK版本和字符编码-->
          <!--等同于：
            <properties>
              <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
              <maven.compiler.source>1.8</maven.compiler.source>
              <maven.compiler.target>1.8</maven.compiler.target>
            </properties>
          -->
          <source>1.8</source>
          <target>1.8</target>
          <encoding>UTF-8</encoding>
        </configuration>
      </plugin>
    </plugins>
    <!--识别所有的配置文件-->
    <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>
    </resources>
  </build>

</project>

(3)添加properties属性配置文件：

jdbc.driverClassName=com.mysql.cj.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/123
jdbc.username=账号
jdbc.password=密码

(4)SqlMapConfig.xml(Mybatis核心配置文件):

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
    <!--日志输出-->
    <settings>
        <setting name="logImpl" value="STDOUT_LOGGING"/>
    </settings>
    <!--其他核心功能在spring配置文件中进行配置了-->
</configuration>

(5)applicationContext_mapper.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"
       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">
    <!--添加包扫描-->
    <context:component-scan base-package="com.user.mapper"/>
    <!--读取属性文件-->
    <context:property-placeholder location="classpath:jdbc.properties"/>
    <!--配置数据源-->
    <bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource">
        <property name="driverClassName" value="${jdbc.driverClassName}"/>
        <property name="url" value="${jdbc.url}"/>
        <property name="username" value="${jdbc.username}"/>
        <property name="password" value="${jdbc.password}"/>
    </bean>
    <!--配置SqlSessionFactoryBean-->
    <bean class="org.mybatis.spring.SqlSessionFactoryBean">
        <!--配置数据源-->
        <property name="dataSource" ref="dataSource"/>
        <!--配置SqlMapConfig.xml核心配置文件-->
        <property name="configLocation" value="classpath:SqlMapConfig.xml"/>
        <!--实体类注册别名-->
        <property name="typeAliasesPackage" value="com.user.pojo"/>
    </bean>
    <!--注册mapper.xml文件-->
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <property name="basePackage" value="com.user.mapper"/>
    </bean>
</beans>

(6)applicationContext_service.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:tx="http://www.springframework.org/schema/tx"
       xmlns:aop="http://www.springframework.org/schema/aop"
       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/tx http://www.springframework.org/schema/tx/spring-tx.xsd http://www.springframework.org/schema/aop https://www.springframework.org/schema/aop/spring-aop.xsd">
    <!--添加包扫描-->
    <context:component-scan base-package="com.user.service"/>
    <!--添加事务管理器-->
    <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <!--配置数据源-->
        <property name="dataSource" ref="dataSource"/>
    </bean>
    <!--配置事务切面-->
    <tx:advice id="myadvice" transaction-manager="transactionManager">
        <tx:attributes>
            <tx:method name="*select*" read-only="true"/>
            <tx:method name="*find*" read-only="true"/>
            <tx:method name="*search*" read-only="true"/>
            <tx:method name="*get*" read-only="true"/>
            <tx:method name="*insert*" propagation="REQUIRED"/>
            <tx:method name="*add*" propagation="REQUIRED"/>
            <tx:method name="*save*" propagation="REQUIRED"/>
            <tx:method name="*set*" propagation="REQUIRED"/>
            <tx:method name="*update*" propagation="REQUIRED"/>
            <tx:method name="*change*" propagation="REQUIRED"/>
            <tx:method name="*modify*" propagation="REQUIRED"/>
            <tx:method name="*delete*" propagation="REQUIRED"/>
            <tx:method name="*drop*" propagation="REQUIRED"/>
            <tx:method name="*remove*" propagation="REQUIRED"/>
            <tx:method name="*clear*" propagation="REQUIRED"/>
            <tx:method name="*" propagation="SUPPORTS"/>
        </tx:attributes>
    </tx:advice>
    <!--配置切入点+绑定切入点-->
    <aop:config>
        <aop:pointcut id="mycut" expression="execution(* com.user.service.Impl.*.*(..))"/>
        <aop:advisor advice-ref="myadvice" pointcut-ref="mycut"/>
    </aop:config>
</beans>

(7)spirngmvc.xml文件(Springmvc核心配置文件):

<?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">
    <!--添加包扫描-->
    <context:component-scan base-package="com.user.controller"/>
    <!--添加注解驱动-->
    <mvc:annotation-driven/>
</beans>

(8) web.xml文件设置中文编码，注册spirngmvc框架、Spring框架:

<?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">
    <!--添加中文编码过滤器-->
    <filter>
        <filter-name>encode</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>encode</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
    <!--注册springmvc框架-->
    <servlet>
        <servlet-name>springmvc</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>
    </servlet>
    <servlet-mapping>
        <servlet-name>springmvc</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>
    <!--注册spring框架，启动spring容器-->
    <listener>
        <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
    </listener>
    <context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>classpath:applicationContext_*.xml</param-value>
    </context-param>
</web-app>

(9)新建实体类user:

package com.user.pojo;

public class User {
    private String userId;
    private String cardType;
    private String cardNo;
    private String userName;
    private String userSex;
    private String userAge;
    private String userRole;

    @Override
    public String toString() {
        return "User{" +
                "userId='" + userId + '\'' +
                ", cardType='" + cardType + '\'' +
                ", cardNo='" + cardNo + '\'' +
                ", userName='" + userName + '\'' +
                ", userSex='" + userSex + '\'' +
                ", userAge='" + userAge + '\'' +
                ", userRole='" + userRole + '\'' +
                '}';
    }

    public String getUserId() {
        return userId;
    }

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

    public String getCardType() {
        return cardType;
    }

    public void setCardType(String cardType) {
        this.cardType = cardType;
    }

    public String getCardNo() {
        return cardNo;
    }

    public void setCardNo(String cardNo) {
        this.cardNo = cardNo;
    }

    public String getUserName() {
        return userName;
    }

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

    public String getUserSex() {
        return userSex;
    }

    public void setUserSex(String userSex) {
        this.userSex = userSex;
    }

    public String getUserAge() {
        return userAge;
    }

    public void setUserAge(String userAge) {
        this.userAge = userAge;
    }

    public String getUserRole() {
        return userRole;
    }

    public void setUserRole(String userRole) {
        this.userRole = userRole;
    }

    public User() {
    }

    public User(String userId, String cardType, String cardNo, String userName, String userSex, String userAge, String userRole) {
        this.userId = userId;
        this.cardType = cardType;
        this.cardNo = cardNo;
        this.userName = userName;
        this.userSex = userSex;
        this.userAge = userAge;
        this.userRole = userRole;
    }
}

(10)新建UserMapper.java接口:

package com.user.mapper;

import com.user.pojo.User;
import org.apache.ibatis.annotations.Param;

import java.util.List;

public interface UserMapper {

    /**
     * 根据条件分页获取分页数据:
     * url:
     * /user/selectUserPage?userName=z&userSex=男&page=null
     * 参数:
     * userName:表单中用户名称
     * userSex:表单中用户性别
     * page:提交的页码(第一次访问为null)
     * 结果:
     * 有数据时：
     * [{
     * "userId":"15968954638794962",
     * "cardType":"身份证",
     * "cardNo":"343343554654",
     * "userName":"撒撒旦",
     * "userSex":"女",
     * "userAge":"29",
     * "userRole":"生产、运输设备操作人员及有关人员"},
     * {...}
     * ]
     * 无数据时：
     * []
     */
    List<User> selectUserPage(
            @Param("userName")
            String userName,
            @Param("userSex")
            String UserSex,
            @Param("startRow")
            int startRow);

    /**
     * 增加用户:
     * url:
     * /user/createUser(参数见下面)
     * 参数:
     * cardType: this.ruleForm.cardType,//证件类型
     * cardNo: this.ruleForm.cardNo,//证件号码
     * userName: this.ruleForm.userName,//用户姓名
     * userSex: this.ruleForm.userSex,//用户性别
     * userAge: this.ruleForm.userAge,//用户年龄
     * userRole: this.ruleForm.userRole,//用户角色
     * 结果:
     * 增加成功时：
     * 1
     * 增加失败时:
     * 0
     */
    int createUser(User user);

    /**
     * 根据用户ID删除用户:
     * url:
     * /user/ deleteUserById?userId= 15968162087363060
     * 参数:
     * userId:删除用户的id
     * 结果:
     * 删除成功时：
     * 1
     * 删除失败时:
     * 0
     */
    int deleteUserById(String userId);

    /**
     * 获取总行数:
     * url:
     * /user/getRowCount?userName=z&userSex=男
     * 参数:
     * userName:表单中用户名称
     * userSex:表单中用户性别
     * 结果:
     * 有数据时:
     * 12
     * 无数据时:
     * 0
     */
    int getRowCount(
            @Param("userName")
            String userName,
            @Param("userSex")
            String userSex);

    /**
     * 更新用户:
     * url:
     * /user/updateUserById(参数见以下)
     * 参数:
     * userId: this.ruleForm.userId,//用户 Id
     * cardType: this.ruleForm.cardType,//证件类型
     * cardNo: this.ruleForm.cardNo,//证件号码
     * userName: this.ruleForm.userName,//用户姓名
     * userSex: this.ruleForm.userSex,//用户性别
     * userAge: this.ruleForm.userAge,//用户年龄
     * userRole: this.ruleForm.userRole,//用户角色
     * 结果:
     * 成功时：
     * 1
     * 出错时：
     * 0
     */
    int updateUserById(User user);
}

(11)新建UserMapper.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.user.mapper.UserMapper">

    <!--接口属性和表的列名映射-->
    <resultMap id="userMap" type="user">
        <id property="userId" column="user_id"/>
        <result property="cardType" column="card_type"/>
        <result property="cardNo" column="card_no"/>
        <result property="userName" column="user_name"/>
        <result property="userSex" column="user_sex"/>
        <result property="userAge" column="user_age"/>
        <result property="userRole" column="user_role"/>
    </resultMap>

    <!--动态sql，将查询字段定义为常量，方便调用-->
    <sql id="allColumns">user_id,card_type,card_no,user_name,user_sex,user_age,user_role</sql>
    <!--selectUserPage-->
    <select id="selectUserPage" resultMap="userMap">
        select <include refid="allColumns"/>
        from user
        <where>
            <if test="userName != null and userName != ''">
                and user_name like concat('%',#{userName},'%')
            </if>
            <if test="userSex != '' and userSex != null">
                and user_sex = #{userSex}
            </if>
        </where>
        limit #{startRow},5
    </select>
    <!--createUser-->
    <insert id="createUser" parameterType="user">
        insert into user values (#{userId},#{cardType},#{cardNo},#{userName},#{userSex},#{userAge},#{userRole})
    </insert>
    <!--deleteUserById-->
    <delete id="deleteUserById" parameterType="String">
        delete from user where user_id = #{userId}
    </delete>
    <!--getRowCount-->
    <select id="getRowCount" resultType="Integer">
        select count(*)
        from user
        <where>
            <if test="userName != null and userName != ''">
                and user_name like concat('%',#{userName},'%')
            </if>
            <if test="userSex != '' and userSex != null">
                and user_sex = #{userSex}
            </if>
        </where>
    </select>
    <!--updateUserById-->
    <update id="updateUserById" parameterType="user">
        update user
        set card_type = #{cardType},card_no = #{cardNo},user_name = #{userName},user_sex = #{userSex},user_age = #{userAge},user_role = #{userRole}
        where user_id = #{userId}
    </update>
</mapper>

(12)新建service接口:

package com.user.service;

import com.user.pojo.User;
import org.apache.ibatis.annotations.Param;

import java.util.List;

public interface UserService {
    /**
     * 根据条件分页获取分页数据:
     * url:
     * /user/selectUserPage?userName=z&userSex=男&page=null
     * 参数:
     * userName:表单中用户名称
     * userSex:表单中用户性别
     * page:提交的页码(第一次访问为null)
     * 结果:
     * 有数据时：
     * [{
     * "userId":"15968954638794962",
     * "cardType":"身份证",
     * "cardNo":"343343554654",
     * "userName":"撒撒旦",
     * "userSex":"女",
     * "userAge":"29",
     * "userRole":"生产、运输设备操作人员及有关人员"},
     * {...}
     * ]
     * 无数据时：
     * []
     */
    List<User> selectUserPage(String userName ,String UserSex, int startRow);

    /**
     * 增加用户:
     * url:
     * /user/createUser(参数见下面)
     * 参数:
     * cardType: this.ruleForm.cardType,//证件类型
     * cardNo: this.ruleForm.cardNo,//证件号码
     * userName: this.ruleForm.userName,//用户姓名
     * userSex: this.ruleForm.userSex,//用户性别
     * userAge: this.ruleForm.userAge,//用户年龄
     * userRole: this.ruleForm.userRole,//用户角色
     * 结果:
     * 增加成功时：
     * 1
     * 增加失败时:
     * 0
     */
    int createUser(User user);

    /**
     * 根据用户ID删除用户:
     * url:
     * /user/ deleteUserById?userId= 15968162087363060
     * 参数:
     * userId:删除用户的id
     * 结果:
     * 删除成功时：
     * 1
     * 删除失败时:
     * 0
     */
    int deleteUserById(String userId);

    /**
     * 获取总行数:
     * url:
     * /user/getRowCount?userName=z&userSex=男
     * 参数:
     * userName:表单中用户名称
     * userSex:表单中用户性别
     * 结果:
     * 有数据时:
     * 12
     * 无数据时:
     * 0
     */
    int getRowCount(String userName, String userSex);

    /**
     * 更新用户:
     * url:
     * /user/updateUserById(参数见以下)
     * 参数:
     * userId: this.ruleForm.userId,//用户 Id
     * cardType: this.ruleForm.cardType,//证件类型
     * cardNo: this.ruleForm.cardNo,//证件号码
     * userName: this.ruleForm.userName,//用户姓名
     * userSex: this.ruleForm.userSex,//用户性别
     * userAge: this.ruleForm.userAge,//用户年龄
     * userRole: this.ruleForm.userRole,//用户角色
     * 结果:
     * 成功时：
     * 1
     * 出错时：
     * 0
     */
    int updateUserById(User user);
}

(13)新建service实现类实现接口中所有功能：

package com.user.service.Impl;

import com.user.mapper.UserMapper;
import com.user.pojo.User;
import com.user.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;
@Service
public class UserServiceImpl implements UserService {
    @Autowired//IoC
    UserMapper userMapper;//数据访问层对象
    @Override
    public List<User> selectUserPage(String userName, String userSex, int startRow) {
        return userMapper.selectUserPage(userName,userSex,startRow);
    }

    @Override
    public int createUser(User user) {
        return userMapper.createUser(user);
    }

    @Override
    public int deleteUserById(String userId) {
        return userMapper.deleteUserById(userId);
    }

    @Override
    public int getRowCount(String userName, String userSex) {
        return userMapper.getRowCount(userName,userSex);
    }

    @Override
    public int updateUserById(User user) {
        return userMapper.updateUserById(user);
    }
}

(14)新建测试类,完成所有功能的测试:

package test;

import com.user.pojo.User;
import com.user.service.UserService;
import org.junit.Test;
import org.junit.runner.RunWith;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.test.context.ContextConfiguration;
import org.springframework.test.context.junit4.SpringJUnit4ClassRunner;

import java.util.List;

@RunWith(SpringJUnit4ClassRunner.class)
@ContextConfiguration(locations = {"classpath:applicationContext_mapper.xml","classpath:applicationContext_service.xml"})
public class MyTest {
    @Autowired
    UserService userService;
    @Test
    public void testSelectUserPage(){
        List<User> list = userService.selectUserPage(null,null,5);
        list.forEach(user -> {
            System.out.println(user);
        });
    }
    @Test
    public void testDeleteUserById(){
        int num = userService.deleteUserById("15968954638794962");
        System.out.println(num);
    }
    @Test
    public void testGetRowCount(){
        int num = userService.getRowCount(null,null);
        System.out.println(num);
    }
    @Test
    public void testCreatUser(){
        User user = new User("1234567891011","身份证","13354313545","彭十六","女","23","主播");
        int num = userService.createUser(user);
        System.out.println(num);
    }
    @Test
    public void testUpdateUserById(){
        User user = new User("12345678910","身份证","13354313545","彭十五","女","23","主播");
        int num = userService.updateUserById(user);
        System.out.println(num);
    }
}

(15)新建控制器,完成所有功能:

package com.user.controller;

import com.user.pojo.User;
import com.user.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;
//@RestController如果本类中全部是ajax请求，则使用此注解，方法上的@ResponseBody可省略
@Controller
@CrossOrigin //设置服务器端支持跨域访问
@RequestMapping("/user")
public class UserController {
    @Autowired//IoC
    UserService userService;//业务逻辑层对象

    public static final int PAGE_SIZE = 5;

    // /user/selectUserPage?userName=z&userSex=男&page=null
    @RequestMapping("/selectUserPage")//访问路径
    @ResponseBody//该注解用于解析ajax请求
    public List<User> selectUserPage(String userName,String userSex,Integer page){//自动注入
        //根据页码计算起始行
        int startRow = 0;
        if (page != null) {
            startRow = (page-1)*PAGE_SIZE;
        }
        return userService.selectUserPage(userName,userSex,startRow);
    }

    // /user/getRowCount?userName=z&userSex=男
    @RequestMapping("/getRowCount")//访问路径
    @ResponseBody//该注解用于解析ajax请求
    public int getRowCount(String userName,String userSex){//自动注入
        return userService.getRowCount(userName,userSex);
    }

    // /user/ deleteUserById?userId=15968162087363060
    @RequestMapping("/deleteUserById")//访问路径
    @ResponseBody//该注解用于解析ajax请求
    public int deleteUserById(String userId){//自动注入
        return userService.deleteUserById(userId);
    }

    // /user/createUser?cardType=a&cardNo=b&userName=c&userSex=d&userAge=e&userRole=f
    @RequestMapping("/createUser")//访问路径
    @ResponseBody//该注解用于解析ajax请求
    public int createUser(User user){//自动注入
        String uid = System.currentTimeMillis()+"";//为插入行添加不重复的主键
        user.setUserId(uid);
        return userService.createUser(user);
    }

    // /user/updateUserById?userId=x&cardType=a&cardNo=b&userName=c&userSex=d&userAge=e&userRole=f
    @RequestMapping("/updateUserById")//访问路径
    @ResponseBody//该注解用于解析ajax请求
    public int updateUserById(User user){//自动注入
        return userService.updateUserById(user);
    }
}

四、前端VUE：

1.项目结构：

在这里插入图片描述

2.UserHome.vue解析：


<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item><!--文本框-->
        <el-input v-model="formInline.search1" size="mini" placeholder="输入姓名查询" v-on:input="handleSearch()">
        </el-input>
      </el-form-item>
      <el-form-item><!--下拉列表框-->
        <el-select size="mini" v-model="formInline.search2" v-on:change="handleSearch()">
          <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><!--查询按钮-->
        <el-button icon="el-icon-circle-plus-outline" type="text" @click="search = true">查询</el-button>
      </el-form-item>
      <el-form-item><!--添加按钮-->
        <el-button icon="el-icon-circle-plus-outline" type="text" @click="dialogAdd = true">添加</el-button><!--点击后显示dialogAdd对话框-->
      </el-form-item>
      <el-form-item><!--删除按钮-->
        <el-button icon="el-icon-delete" type="text" @click="handleDeleteList()">删除</el-button>
      </el-form-item>
    </el-form>
    <!--表格-->
    <el-table
      ref="multipleTable"
      :data="tableData"
      border
      highlight-current-row
      style="width: 100%"
      @selection-change="handleSelectionDelete">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="用户编号">
        <template slot-scope="scope">
          <span>{{ scope.row.userId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="证件类型" prop="cardType"></el-table-column>
      <el-table-column label="证件号码" prop="cardNo"></el-table-column>
      <el-table-column label="用户姓名">
        <template slot-scope="scope"><!--鼠标悬停组件-->
          <el-popover trigger="hover" placement="right">
            <p>证件类型: {{ scope.row.cardType }}</p><!--获取该行所有数据-->
            <p>证件号码: {{ scope.row.cardNo }}</p>
            <p>用户姓名：{{ scope.row.userName }}</p>
            <p>用户性别: {{ scope.row.userSex }}</p>
            <p>用户年龄: {{ scope.row.userAge }}</p>
            <p>用户角色：{{ scope.row.userRole }}</p>
            <div slot="reference" class="name-wrapper">
              <el-button type="text">{{ scope.row.userName }}</el-button>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="用户性别" prop="userSex"></el-table-column>
      <el-table-column label="用户年龄" prop="userAge"></el-table-column>
      <el-table-column label="用户角色" prop="userRole"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button><!--编辑按钮-->
          <el-button type="text" icon="el-icon-delete" @click="handleDelete(scope.$index, scope.row)">删除</el-button><!--删除按钮-->
        </template>
      </el-table-column>
    </el-table>
 <el-dialog title="添加" :append-to-body='true' :visible.sync="dialogAdd" :before-close="handleClose">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm" size="medium">
        <el-form-item label="证件类型">
          <el-select v-model="ruleForm.cardType" placeholder="请选择证件类型" prop="cardType">
            <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-input v-model="ruleForm.cardNo"></el-input>
        </el-form-item>
        <el-form-item label="用户姓名">
          <el-input v-model="ruleForm.userName"></el-input>
        </el-form-item>
        <el-form-item label="用户性别">
          <el-radio-group v-model="ruleForm.userSex">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="用户年龄">
          <el-slider v-model="ruleForm.userAge" show-input></el-slider>
        </el-form-item>
        <el-form-item label="用户角色">
          <el-select v-model="ruleForm.userRole" placeholder="请选择用户角色" prop="userRole">
            <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-option label="不便分类的其他从业人员" value="不便分类的其他从业人员"></el-option>
            <el-option label="未知" value="未知"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
        <span slot="footer" class="dialog-footer">       <el-button @click="emptyUserData()" size="medium">取 消</el-button>      <el-button @click="addUser('ruleForm')" type="primary" size="medium">确 定</el-button>
</span>
   </el-dialog>

    <el-dialog title="编辑" :append-to-body='true' :visible.sync="dialogUpdate" :before-close="handleClose">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="70px" class="demo-ruleForm" size="medium">
        <el-form-item label="证件类型">
          <el-select v-model="ruleForm.cardType" placeholder="请选择证件类型" prop="cardType">
            <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-input v-model="ruleForm.cardNo"></el-input>
        </el-form-item>
        <el-form-item label="用户姓名">
          <el-input v-model="ruleForm.userName"></el-input>
        </el-form-item>
        <el-form-item label="用户性别">
          <el-radio-group v-model="ruleForm.userSex">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="用户年龄">
          <el-slider v-model="ruleForm.userAge" show-input></el-slider>
        </el-form-item>
        <el-form-item label="用户角色">
          <el-select v-model="ruleForm.userRole" placeholder="请选择用户角色" prop="userRole">
            <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-option label="不便分类的其他从业人员" value="不便分类的其他从业人员"></el-option>
            <el-option label="未知" value="未知"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
        <span slot="footer" class="dialog-footer"><el-button @click="emptyUserData()" size="medium">取 消</el-button>        <el-button @click="updateUser()" type="primary" size="medium">确 定</el-button>
    </span>
    </el-dialog>

    <br>
    <!--分页
    page-size：每页显示行数
    total：总行数
    current-change：当前页面数据发生改变时调用handlePageChange方法
    -->
    <el-pagination
      background
      :disabled="disablePage"
      :current-page.sync="currentPage"
      small
      layout="prev, pager, next"
      :page-size="pageSize"
      :total="total"
      @current-change="handlePageChange">
    </el-pagination>
  </div>
</template>

<script>
/* eslint-disable */
export default {
  name: 'UserHome',
  data() {
    return {
      ruleForm: {
        userId: null,//用户id
        cardType: null,//证件类型
        cardNo: null,//证件号码
        userName: null,//用户姓名
        userSex: null,//用户性别
        userAge: 25,//用户年龄
        userRole: null//用户角色
      },
      rules: {},
      tableData: [],
      formInline:{
        search1: '',
        search2: ''
      },
      dialogAdd: false,
      dialogUpdate: false,
      pageSize: 5,
      currentPage: 1,
      total: 0,
      disablePage: false,
      multipleSelection: []
    };
  },

  created() {
    this.handlePageChange();//分页
    this.getRowCount();//计算总行数
  },

  methods: {
    /**
     * 分页
     */
    handlePageChange() {
      let postData=this.qs.stringify({//构建json对象，属性为page、userName、userSex，用于封装要提交的数据
        page:this.currentPage,
        userName:this.formInline.search1,
        userSex:this.formInline.search2
      });
      this.$axios({//异步跨域ajax请求
        method:'post',//请求提交方式
        url:'/api/user/selectUserPage',//请求URL
        data:postData//携带的json数据：{"page":1,"userName":"","userSex":""}
      }).then(response=>{//成功后进入到这里,response是响应对象
        this.tableData=response.data;//数据绑定,返回的5个用户的json数据,将数据显示到表格上
      }).catch(error=>{
        console.log(error);//出错了进入到这里
      })
    },

    /**
     * 统计用户个数
     */
    getRowCount() {
      let postData=this.qs.stringify({
        userName:this.formInline.search1,
        userSex:this.formInline.search2
      });
      this.$axios({
        method:'post',
        url:'/api/user/getRowCount',
        data:postData//返回的总行数赋值给变量total
      }).then(response=>{
        this.total=response.data;
      }).catch(error=>{
        console.log(error);
      })
    },

    /**
     * 添加用户
     */
    addUser() {
      if (this.ruleForm.cardType == null || this.ruleForm.cardNo == null || this.ruleForm.userName == null || this.ruleForm.userSex == null || this.ruleForm.userRole == null) {
        this.$alert('用户信息不完整请检查', '温馨提示', {
          confirmButtonText: '确定'
        });
        return;
      }
      let postData = this.qs.stringify({
        cardType: this.ruleForm.cardType,//证件类型
        cardNo: this.ruleForm.cardNo,//证件号码
        userName: this.ruleForm.userName,//用户姓名
        userSex: this.ruleForm.userSex,//用户性别
        userAge: this.ruleForm.userAge,//用户年龄
        userRole: this.ruleForm.userRole,//用户角色
      });
      this.$axios({
        method:'post',
        url:'/api/user/createUser',
        data:postData
      }).then(response=>{
        this.handlePageChange();
        this.getRowCount();
        this.$message({
          type: 'success',
          message: '已添加!'
        });
        this.emptyUserData();
      }).catch(error=>{
        console.log(error);
      })
    },

    search(){
      this.handlePageChange();
      this.getRowCount();
    },

    handleSearch() {
      this.handlePageChange();
      this.getRowCount();
    },

    handleEdit(index, row) {
      this.dialogUpdate = true;
      row.userAge = Number(row.userAge);
      this.ruleForm = Object.assign({}, row, index); //点击更新按钮将用户数据回填到对话框，方便用户更新信息，关键！！！
    },

    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
          this.emptyUserData();
        })
        .catch(_ => {
        });
    },

    /**
     * 清空绑定数据
     */
    emptyUserData() {
      this.dialogAdd = false;
      this.dialogUpdate = false;
      this.ruleForm = {
        userId: null,//用户id
        cardType: null,//证件类型
        cardNo: null,//证件号码
        userName: null,//用户姓名
        userSex: null,//用户性别
        userAge: 25,//用户年龄
        userRole: null//用户角色
      };
    },

    /**
     * 根据 userId 删除用户
     * @param index
     * @param row
     */
    handleDelete(index, row) {//index是该行所在下标，row是行中所有数据
      //console.log(index, row);
      //弹出提示框,让用户确定是否删除
      this.$confirm('删除操作, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'//黄色的警告图标
      }).then(() => {//用户点击确定后进入到这里
        let postData = this.qs.stringify({
          userId: row.userId,
        });
        this.$axios({//点击确定后发出跨域访问的请求，后端进行删除操作
          method: 'post',
          url: '/api/user/deleteUserById',
          data: postData
        }).then(response => {//跨域请求成功后进入这里，此时后端已删除成功
          this.getRowCount();//计算删除后的总行数,进行分页插件的页码变化
          if (this.total % 5 == 1 && this.currentPage >= 1) {
            if (this.total / 5 < this.currentPage) {
              this.currentPage = this.currentPage - 1;
            }
          }
          this.handlePageChange();//删除后重新分页

          this.$message({//删除成功后弹框
            type: 'success',
            message: '删除成功!'
          });
          //console.log(response);
        }).catch(error => {
          console.log(error);
        });

      }).catch(() => {
        this.$message({//用户点击取消后进入到这里
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    
    handleSelectionDelete(val) {
      this.multipleSelection = val;
    },

    /**
     * 根据 userId 批量删除用户
     */
    handleDeleteList() {
      let userIds = "";
      this.multipleSelection.forEach(item => {
        userIds += item.userId + ',';
      })
      console.log(userIds);
      // let userIds= this.multipleSelection.map(item => item.userId).join()

      this.$confirm('删除操作, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let postData = this.qs.stringify({
          userIdList: userIds
        });
        console.log(postData);
        this.$axios({
          method: 'post',
          url: '/api/user/deleteUserByIdList',
          data: postData
        }).then(response => {
          this.getRowCount();
          if (this.total % 5 == 1 && this.currentPage >= 1) {
            if (this.total / 5 < this.currentPage) {
              this.currentPage = this.currentPage - 1;
            }
          }
          this.handlePageChange();

          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          //console.log(response);
        }).catch(error => {
          console.log(error);
        });

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },


    updateUser() {
      if (this.ruleForm.cardType == null || this.ruleForm.cardNo == null || this.ruleForm.userName == null || this.ruleForm.userSex == null || this.ruleForm.userRole == null) {
        this.$alert('用户信息不完整请检查', '温馨提示', {
          confirmButtonText: '确定'
        });
        return;
      }
      let postData = this.qs.stringify({
        userId: this.ruleForm.userId,//用户 Id
        cardType: this.ruleForm.cardType,//证件类型
        cardNo: this.ruleForm.cardNo,//证件号码
        userName: this.ruleForm.userName,//用户姓名
        userSex: this.ruleForm.userSex,//用户性别
        userAge: this.ruleForm.userAge,//用户年龄
        userRole: this.ruleForm.userRole,//用户角色
      });
      this.$axios({
        method: 'post',
        url: '/api/user/updateUserById',
        data: postData
      }).then(response => {
        this.handlePageChange();
        this.getRowCount();
        this.$message({
          type: 'success',
          message: '已编辑!'
        });
        this.emptyUserData();
        console.log(response);
      }).catch(error => {
        console.log(error);
      });
    }
  },

}
/* eslint-disable */
</script>
<style scoped>
</style>

五、附件：后端接口文档：

在这里插入图片描述

姓蔡小朋友
关注
  • 32
    点赞
  • 踩
  • 209
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 7
    评论
专栏目录
ssm+vue项目实战
11-21
vue实战项目，前端框架使用vue+bootstrap，后端框架使用的是spring+springmvc+mybatis，数据库使用mysql，包含全套代码
ssm+vue图书管理系统.zip
03-27
1、 打开页面后，跳到登录页面，输入用户名和密码(登陆时，会根据数据库校验用户名与密码，密码为MD5加密，（用户名:wal,密码:123456）此为管理员用户，其他普通用户可在管理员用户里创建，管理员用户和普通用户会根据不同的路由规则跳转到不同的页面) 2、 当用户借阅图书后，管理员可进行催还，催还后，会在普通用户登陆时弹出催还信息 3、 用户可对以借阅的图书进行打印（因为我用的是谷歌浏览器自带的生成pdf的功能，不知道其他浏览器是否支持） 4、 增加屏保功能，在登录页面时，当用户5分钟没有输入数据，则切换到屏保 5、 新增小程序二维码扫码登录功能，（目前由于userName写死为“wal”,所以登录都为管理员用户） 6、 新增将excel表中的数据导入至数据库的功能 7 其他功能为一些必要功能，大家可以自己去尝试
SSM + Vue（案例第十课）
06-30
零基础、前后端一体、SSM、Vue、添加、修改、删除、查询、搜索、分页、上传、下载、导入、导出
基于ssm+vue的购物商场的设计与实现
weixin_mtyeducation
07-12 280
本系统项目代码工整，结构清晰，适合选题：Java、JavaWeb、购物商场、商城、前后端分离等。系统采用ssm+vue整合开发，前端主要使用了element-ui框架、项目后端主要使用了ssm，数据层采用mybatis。
SSM整合项目（Vue3环境搭建）
Sun的个人博客
03-09 1002
cd ssm_vue。
【框架回顾】SSM+Vue
HappyCode
05-02 4634
文章目录框架复习一、Maven1. 概念2. 环境配置3. IDEA+Maven4. 配置Tomcat5. pom.xml 下载依赖二、Mybatis1. 概念2. 使用Mybatis3. 注解开发4. 一对多 和 多对一5. 动态sql6. 缓存三、Spring1. 概念2. IOC3. 使用spring4. 依赖注入5. 自动装配6. 使用注解开发7. AOP8. 与Mybatis 整合9. 事务四、springMVC1. 使用springMVC2. 注解开发SpringMVC3. RestFul风格4
SSM 项目学习（Vue3+ElementPlus+Axios+SSM）
qq_45895217的博客
04-05 1397
SSM框架学习：ElementPlus + Axios + SSM
ssm整合 vue+elementui+ssm
06-15
本项目将SSM后端框架与Vue.js和ElementUI结合，实现前后端分离的开发模式。 **Spring框架** 是一个全面的企业级应用开发框架，提供了依赖注入（DI）、面向切面编程（AOP）等功能，有助于简化Java应用的开发。...
Java项目:点餐管理系统(java+Springboot+SSM+Vue+mysql+Redis)
07-14
项目描述：这是一个基于SpringBoot+Vue框架开发的在线点餐系统。首先，这是一个前后端分离的项目，代码简洁规范，注释说明详细，易于理解和学习。其次，这项目功能丰富，具有一个在线点餐系统该有的所有功能。 项目...
Java项目:在线商城系统(前后端分离+java+vue+Springboot+ssm+mysql+maven+redis)
03-27
一、项目简述 本系统功能包括： 前台展示+后台管理，包括最基本的用户登录注册，下单， 购物车，购买，结算，...项目技术： Springboot + Maven + Mybatis + Vue + Redis + HTML 等 等组成，B/S模式+ Maven管理等等。
ssm931网上租车系统+vue+elementui.zip
最新发布
08-07
系统是一个很好的项目，使用了SSM（Spring + Spring MVC + MyBatis）框架 和 前端（Vue.js）技术，实现了前后端分离。 后台地址：localhost:8080/项目名称/admin/dist/index.html 前台地址：localhost:8080/项目名称...
基于vue和ssm框架的管理系统一键代码生成
11-27
基于vue和ssm框架的管理系统一键代码生成，请用idea打开 可阅读源码
elementUI+vue+ssm+java
08-28
一个elementUI+VUE+SSM+java的小demo,有elementUI的一些用法，很基础的东西，大家还 是不要下载了
基于 SSM + Vue.js 的排班管理系统
07-13
基于SSM+Vue.js+full-calendar+达梦数据库（国产）实现的排班管理系统，简单的前后端分离demo，包括用户管理，岗位管理，排班管理，值班日志管理，是一个比较完善的web系统
SpringBoot2.0整合SSM框架，Vue.js示例项目
01-06
基于SpringBoot2.0 + SSM + Vue.js + ElementUI实现的示例项目，实现了登录、注册、用户管理（增删改查）功能。 项目未实现前后端分离。 启动前请先建立数据库ssm_demo，并执行项目resources文件夹下的ssm_demo.sql文件，导入user表，以及默认的eknows管理员（name=eknows, password=123456）
ssm+vue前后端分离框架整合实现(附源码)
10-15
主要介绍了ssm+vue前后端分离框架整合实现(附源码)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
ssm927药源购物网站+vue+layui.zip
08-07
系统是一个很好的项目，使用了SSM（Spring + Spring MVC + MyBatis）框架 和 前端（Vue.js）技术，实现了前后端分离。 后台地址：localhost:8080/项目名称/admin/dist/index.html 前台地址：localhost:8080/项目名称...
详细的SSM+Vue小项目（适合新手）
qq_44654974的博客
07-26 8056
一、准备工作      1.工具准备       (1)后端：idea intellij+Mysql       (2)前端：webstorm       (3)需求文档：易文档       2.知识准备     &n
Vue和SSM搭配使用
二木成林
01-25 7869
使用SSM和Vue+axios发送POST请求来实现简单的前后端分离，这里实现的是登录功能。 项目目录如下： 其中只介绍前台login.html文件和后端处理UserController.java的代码。 login.html <!DOCTYPE html> <html xmlns:v-on="http://www.w3.org/1999/xhtml"> ...
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

姓蔡小朋友

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

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

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

打赏作者

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

抵扣说明：

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

余额充值