SpringMVC学习(三)----SSM整合

SSM整合的步骤---后端编写

1.创建数据库表

2.新建一个maven的项目,webapp的模板

3.修改目录

4.修改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>SpringMVC_SSM</artifactId>
  <version>1.0-SNAPSHOT</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>
        <!--mybaits与spring整合的依赖-->
        <mybatis.spring.version>1.3.1</mybatis.spring.version>
        <!--mybatis支持的分页插件的依赖-->
        <mybatis.paginator.version>1.2.15</mybatis.paginator.version>
        <!--mysql的依赖-->
        <mysql.version>5.1.32</mysql.version>
        <!--slf4j日志依赖-->
        <slf4j.version>1.6.4</slf4j.version>
        <!--阿里的数据库连接池-->
        <druid.version>1.1.12</druid.version>
        <!--分页插件的依赖-->
        <pagehelper.version>5.1.2</pagehelper.version>
        <!--JSTL的依赖(jsp的标准标签库)-->
        <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>
        <!--jackson的依赖,springmvc框架默认进行JSON转换的依赖工具-->
        <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>

    </dependencies>

    <!-- 插件配置 -->
    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <configuration>
                    <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>

5.添加jdbc.properties文件(数据库信息文件)

jdbc.driverClassName=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/**?useUnicode=true&characterEncoding=utf-8
jdbc.username=****
jdbc.password=****

6.添加SqlMapCofig.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>
    <!--设置日志输出语句,显示相应操作的sql语名-->
    <settings>
        <setting name="logImpl" value="STDOUT_LOGGING"/>
    </settings>
    
</configuration>

7.添加applicationContext_mapper.xml文件(数据访问层的核心配置文件----Spring控制MyBatis)

<?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">
    <!--读取属性文件jdbc.properties-->
    <context:property-placeholder location="classpath:jdbc.properties"></context:property-placeholder>
    <!--    创建数据源-->
    <bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource">
        <property name="driverClassName" value="${jdbc.driverClassName}"></property>
        <property name="url" value="${jdbc.url}"></property>
        <property name="password" value="${jdbc.password}"></property>
        <property name="username" value="${jdbc.username}"/>
    </bean>
    <!--    配置SqlSessionFactoryBean类-->
    <bean class="org.mybatis.spring.SqlSessionFactoryBean">
        <!--    配置数据源-->
        <property name="dataSource" ref="dataSource"/>
        <!-- 配置MyBatis的核心配置文件-->
        <property name="configLocation" value="classpath:SqlMapConfig.xml"></property>
        <!--  注册实体类的的别名-->
        <property name="typeAliasesPackage" value="com.ys.pojo"></property>
    </bean>
    <!--    注册mapper.xml-->
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <property name="basePackage" value="com.ys.mapper"/>
    </bean>


</beans>

8.添加applicationContext_service.xml文件(业务逻辑层的核心配置文件----Spring)

<?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.ys.service"></context:component-scan>
<!--   添加事务管理器 -->
    <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <property name="dataSource" ref="dataSource"></property>
    </bean>
<!--    配置事务切面-->
    <tx:advice id="interceptor" transaction-manager="transactionManager">
        <tx:attributes>
            <tx:method name="*select*" read-only="true"/>
            <tx:method name="*find*" read-only="true"/>
            <tx:method name="*serach*" 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="*insert*" propagation="REQUIRED"/>
            <tx:method name="*" propagation="SUPPORTS"/>
        </tx:attributes>
    </tx:advice>
<!--    配置切入点+绑定事务-->
<aop:config>
<!--    * com.ys.service.*.*(..)->任意返回值的com.ys.service包的任意类 任意方法名任意参数的方法-->
    <aop:pointcut id="cut" expression="execution(* com.ys.service.*.*(..))"/>
    <aop:advisor advice-ref="interceptor" pointcut-ref="cut"></aop:advisor>
</aop:config>
</beans>

9.添加springmvc文件(界面层----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.ys.controller"></context:component-scan>

    <!--    添加注解驱动(ajax和date都必须要)-->
    <mvc:annotation-driven></mvc:annotation-driven>

</beans>

10.删除web.xml新建一个版本高一点的web.xml并注册springmvc,设置中文编码并注册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>
        <!--  查看CharacterEncodingFilter中,得到的三个变量
	private String encoding; 字符格式
	private boolean forceRequestEncoding = false;  请求的强制转换编码
	private boolean forceResponseEncoding = false; 响应的强制转换编码
-->
        <!--        配置参数-->
        <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>
<!--    绑定Spring配置文件-->
    <context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>classpath:applicationContext_*.xml</param-value>
    </context-param>
</web-app>

11.创建实体类User

package com.ys.pojo;

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

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

    public Integer getUserId() {
        return userId;
    }

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

    public String getCardType() {
        return cardType;
    }

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

    public Integer getCardNo() {
        return cardNo;
    }

    public void setCardNo(Integer 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 Integer getUserAge() {
        return userAge;
    }

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

    public String getUserRole() {
        return userRole;
    }

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

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

    public User() {
    }

    private String userRole;
}

12.新建UserMapper.java接口

package com.ys.mapper;

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

import java.util.List;

public interface UserMapper {
//    分页
  List<User>selectUserPage(
          @Param("userName") String userName,//作为筛选的条件
          @Param("userSex") String userSex,//作为筛选的条件
          @Param("startRow") int startRow);
  //startRow用于返回分页时的起始行,在分页的limit中不能有表达式,所以t_user3应该提前算出并返回

//    将数据表中的除主键的其他字段封装在user中
//    增加
    int createUser(User user);

//    删除   根据用户编码做删除(主键)
    int deleteUserById(String userId);

//    获取总行数
    int getRowCount(@Param("userName") String userName,//作为筛选的条件
                    @Param("userSex") String userSex);//作为筛选的条件
}

13.新建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.ys.mapper.UserMapper">
<!--   实体类的变量与数据库表中的字段名不同,需要先完成实体类与表中字段的映射
    private Integer userId;
    private String cardType;
    private Integer cardNo;
    private String userName;
    private String userSex;
    private Integer userAge;
    private String userRole;
    -->
    <resultMap id="usermap" type="user">
        <id property="userId" column="user_id"></id>
        <result property="cardType" column="card_type"></result>
        <result property="cardNo" column="card_no"></result>
        <result property="userName" column="user_name"></result>
        <result property="userSex" column="user_sex"></result>
        <result property="userAge" column="user_age"></result>
        <result property="userRole" column="user_role"></result>
    </resultMap>
<!--    定义全部的列名的别名-->
    <sql id="allColumns">
        user_id,card_type,card_no,user_name,user_sex,user_age,user_role
    </sql>
<!--    分页查询-->
    <select id="selectUserPage" resultMap="usermap">
        select <include refid="allColumns"></include>
        from user
        <where>
            <if test="userName != null and userName !='' ">
                and user_name like concat('%',#{userName},'%')
            </if>
            <if test="userSex != null and userSex !=''">
                and user_sex =#{userSex}
            </if>
        </where>
        limit #{startRow},5
    </select>

<!--    增加 values中的值和表中字段顺序相同-->
    <insert id="createUser" parameterType="user">
        insert into user values(#{userId},#{cardType},#{cardNo},#{userName},#{userSex},#{userAge},#{userRole})
    </insert>

<!--    删除-->
    <delete id="deleteUserById" parameterType="String">
       delete from  user  where user_id =#{userId}
    </delete>

<!--    计算总行数-->
    <select id="getRowCount" resultType="int">
        select count(*) from user
        <where>
            <if test="userName != null and userName !='' ">
                and user_name like concat('%',#{userName},'%')
            </if>
            <if test="userSex != null and userSex !=''">
                and user_sex =#{usersex}
            </if>
        </where>
    </select>
</mapper>

14.新建service接口和实现类

package com.ys.service;

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

import java.util.List;

public interface UserService {
//  分页查询
    List<User> selectUSerPage(String userName, String userSex, int startRow);
//增加
    int createUser(User user);
//    删除
     int deleteUserById(String userId);
//    计算总行数
int getRowCount(String userName, String userSex);

}

package com.ys.service.Impl;

import com.ys.mapper.UserMapper;
import com.ys.pojo.User;
import com.ys.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
    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);
    }
}

15.新建测试类,完成所有功能的测试

在测试添加功能时,如果出现错误,但是数据库中又出现了该数据,可能是重复提交所造成的修改方法如下:进入下列文件中,取消掉勾选

package test;

import com.ys.pojo.User;
import com.ys.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)//启动Spring容器
@ContextConfiguration(locations = {"classpath:applicationContext_mapper.xml","classpath:applicationContext_service.xml"})
//使用Spring接管测试
public class MyTest {
    @Autowired
    UserService userService;
    @Test
    public void selectUSerPageTest(){
        List<User> list=userService.selectUSerPage("三","男",0);
        list.forEach(user -> System.out.println(user));
    }
    @Test
    public void createUserTest(){
        User user=new User(154568793,"2",3,"4","5",6,"7");
        int list=userService.createUser(user);
        System.out.println(list);
    }

    @Test
    public void deleteUserByIdTest(){
        int list=userService.deleteUserById("154568793");
        System.out.println(list);
    }

    @Test
    public void getRowCount(){
       int list=userService.getRowCount(null,null);
      System.out.println(list);
    }


}

file->setting->Buid,Execution,Deployment->Build Tools->Maven->Runner

 

16.新建控制器,完成所有功能

package com.ys.controller;

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

import java.util.List;

//@RestController  如果本类中的请求全部都是ajax请求,那么可以使用此注解,
// 则方法上的@ResponseBody注解可以不写  且@RestController是替换的@Controller
@Controller
@RequestMapping("/user")//添加虚拟路径
public class UserController {
    //    界面层必须有业务逻辑层的对象
    @Autowired
    UserService userService;
    //    定义每页的数据条数
    public static final int Page_Size = 5;

    @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);
    }


    //    获取总行数
    @RequestMapping("/getRowCount")
    @ResponseBody
    public int getRowCount(String userName, String userSex) {
        return userService.getRowCount(userName, userSex);
    }

    //    增加
    @RequestMapping("/createUser")
    @ResponseBody
    public int createUser(User user) {
        int userId=(int)(Math.random()*999999999);
        user.setUserId(userId);
        return userService.createUser(user);
    }

    //    删除
    @RequestMapping("/deleteUserById")
    @ResponseBody
    public int createUser(String userId) {
        return userService.deleteUserById(userId);
    }
}

17.浏览器测试功能

 

 

18.完整目录一览

 SSM整合Vue---前端编写(使用Element UI框架

Element的官网Element - The world's most popular Vue UI framework

在UserController中的@Controller上面一行添加

@CrossOrigin//支持跨域访问,即前后端的端口不一致时也支持访问

安装node.js---默认路径,一直下一步即可

验证node.js 是否安装成功

使用命令行进入到当前要运行的vue的项目的目录下,运行以下命令进行项目搭建.

<vuedemo01是已经完成实现功能的前段项目,该资源私聊可发>

cd E:\vuedemo01  进入到当前项目的目录下

npm i element -ui -S  下载elementUI的框架

npm install  //打包项目

npm install --save vue-axios  //下载跨域访问组件axios

 在idea安装Vue

在SSM整合的项目中,修改Tomcat服务器,并进行启动

 使用idea打开vuedemo01文件,在新窗口打开,点击配置选择npm进行如下配置后运行Tomcat

 弹出如下页面

 点击UserHome进入页面,前后端完整数据交互

vue项目内容详解

build 项目构建(webpack)相关代码

config 配置目录,包括端口号等。我们初学可以使用默认的。

node_modules npm 加载的项目依赖模块

src 这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:

    assets: 放置一些图片,如logo等。

    components: 目录里面放了一个组件文件,可以不用。

    App.vue: 项目入口文件,我们也可以直接将组件写这里,而不使用 components 目录。

    main.js: 项目的核心文件。

static 静态资源目录,如图片、字体等。

test 初始测试目录,可删除

.xxxx文件 这些是一些配置文件,包括语法配置,git配置等。

index.html 首页入口文件,你可以添加一些 meta 信息或统计代码啥的。

package.json 项目配置文件。

README.md 项目的说明文档,markdown 格式

 UserHome.vue解析

UserHome.vue是所有功能实现的组件.与后台跨域访问,分页显示数据,并实现增加,按主键删除,批量删除,更新,多条件查询等功能.


A.首先确定钩子函数中的启动访问函数
	  created() {
	    this.handlePageChange();           ===>分页
	    this.getRowCount();                ===>计算总行数
	  }
B.分页函数解析
		 handlePageChange() {
		 //定义变量,封装将要提交的数据
	     let postData=this.qs.stringify({
	        page:this.currentPage,
	        userName:this.formInline.search1,
	        userSex:this.formInline.search2
	      });
	      this.$axios({                    ==>发出跨域访问的请求,参考$.ajax();
	        method:'post',                 ==>请求提交的方式
	        url:'/api/user/selectUserPage',==>服务器的地址
	        data:postData  //this.qs.stringify==>{"page":1,"userName":"","userSex":""}                               ==>提交的数据
	      }).then(response=>{              ==>成功后进入到这里
	        this.tableData=response.data;  ==>数据绑定,返回的5个用户的json数据,一下子绑定给表格
	      }).catch(error=>{                ==>出错了进入到这里
	        console.log(error);
	      })
	    }
 C.计算总行数函数分析
	      getRowCount() {
	      //创建变量,提取文本框和下拉列表框中的数据
	      let postData=this.qs.stringify({
	        userName:this.formInline.search1,
	        userSex:this.formInline.search2
	      });
	      this.$axios({                  ==>发出跨域访问的请求,参考$.ajax();
	        method:'post',               ==>请求提交的方式
	        url:'/api/user/getRowCount', ==>服务器的地址
	        data:postData                ===>提交的数据
	      }).then(response=>{
	        this.total=response.data;    ==>返回的总行数赋值给变量total
	      }).catch(error=>{
	        console.log(error);
	      })
	    },
D.按主键删除分析
	  //弹出提示框,让用户确定是否删除 
      this.$confirm('删除操作, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'                      ==>黄色的警告图标
      }).then(() => {                        ==>用户点击确定后进入到这里
        let postData = this.qs.stringify({   ==>封装成JSON数据格式
          userId: row.userId,                ==>将要提交的主键值
        });
        this.$axios({                      ==>发出跨域访问的请求,参考$.ajax();
          method: 'post',                    ==>请求提交的方式
          url: '/api/user/deleteUserById',
          data: postData  //{"userId":15968162893439470}
        }).then(response => {                ==>跨域请求成功后进入这里
          this.getRowCount();     ==>计算删除后的总行数,进行分页插件的页码变化
          ...
          this.handlePageChange();            ==>删除后重新分页
          this.$message({                     ==>删除成功后弹框
            type: 'success',
            message: '删除成功!'
          });          
        }).catch(error => {
          console.log(error);
        });

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值