目录

一.预备步骤

二.后端功能

1. pojo层

2.mapper层

3.service层

4.controller层

三.后端功能测试

 四.前端功能

五.出现的bug

完成一个前后端分离的Vue+SSM小项目

一.预备步骤

Step1：创建表

Step2:创建maven项目，添加web框架，继承tomcat。

Step3：修改pom.xml文件

    4.0.0

    org.example
    Pro1
    1.0-SNAPSHOT
    
        
        
            jstl
            jstl
            1.2
        
        
        
            com.fasterxml.jackson.core
            jackson-databind
            2.9.8
        
        
            com.github.pagehelper
            pagehelper
            5.2.0
        

        
            junit
            junit
            4.12
            test
        
        
            org.springframework
            spring-web
            5.3.19
        
        
        
            org.springframework
            spring-webmvc
            5.3.19
        
        
        
            javax.servlet
            javax.servlet-api
            3.1.0
        

        
            org.mybatis
            mybatis
            3.5.7
        

        
            mysql
            mysql-connector-java
            8.0.27
        
        
        
            log4j
            log4j
            1.2.12
        


        
        
            org.springframework
            spring-jdbc
            5.3.19
        
        
        
            org.springframework
            spring-context
            5.3.19
        
        
            org.springframework
            spring-beans
            5.3.19
        
        
        
            org.springframework
            spring-aspects
            5.3.19
        
        
        
            org.springframework
            spring-aop
            5.3.19
        
        
            org.springframework
            spring-context-support
            5.3.19
        
        
            org.springframework
            spring-test
            5.3.19
        
        
            org.springframework
            spring-jms
            5.3.19
        
        
        
            org.mybatis
            mybatis-spring
            1.3.1
        
        
        
            com.alibaba
            druid
            1.1.12
        
        
            javax.servlet
            jsp-api
            2.0
        

    

    
    
        

            
                org.apache.maven.plugins
                maven-compiler-plugin
                
                    16
                    16
                    UTF-8
                
            
        
        
        
            
                src/main/java
                
                    ***.xml
                
                false
            
            
                src/main/resources
                
                    ***.xml
                
                false
            
        
    

Step4：添加jdbc.properties属性文件

jdbc.driverClassName=com.mysql.cj.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/ssmuser
jdbc.username=root
jdbc.password=niit

Step5：添加SqlMapConfig.xml文件

Step6：添加数据访问层的核心配置文件（也是spring核心配置文件之一）applicationContext-mapper.xml文件

1.注意要加classPath，表示在编译后的类路径下去找。但凡指定路径去读取文件都要加classpath。

2. 配置数据源，引用上方的数据源,mybatis核心配置文件也要配置，因为spring无法接管所有的mybatis功能配置,注册实体类，实体类就是数据库数据的映射。

3.思考applicationContext-mapper中各个标签存在的必要性

mapper层首先要访问数据库，所以要配置访问数据库的有关信息-即属性文件和数据源的作用

sqlSessionFactoryBean就是提供与数据库的对话对象

配置mapper，具体的mapper通过sqlSession来访问具体的数据

4.mapper                ->   sqlSession          ->               数据库信息（数据源-》来自属性文件）

Step7:添加业务逻辑层的核心配置文件（也是spring核心配置文件之一）applicationContext-service.xml文件

Step8:添加springmvc配置文件

Step9：配置web.xml配置文件

    
        encode
        org.springframework.web.filter.CharacterEncodingFilter
        
        
            encoding
            UTF-8
        
        
            forceRequestEncoding
            true
        
        
            forceResponseEncoding
            true
        
    
    
        encode
        
        /*
    

    
        springmvc
        org.springframework.web.servlet.DispatcherServlet
        
        
            contextConfigLocation
            classpath:springmvc/springmvc.xml
        
    
    
        springmvc
        
        /
    

    
        org.springframework.web.context.ContextLoaderListener
    
    
        contextConfigLocation
        classpath:spring/applicationContext-*.xml
    

Step10：数据库可视化

这个按钮可以实现编写sql语句

二.后端功能

1. 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;
}

2.mapper层

(1)创建UserMapper接口

public interface UserMapper {
    //方法要根据页面中要查询的内容来写
    List selectUser (@Param("userName") String userName, @Param("userSex") String userSex, @Param("startRow") int startRow);
    //添加用户
    int createUser(User user);
    //根据id删除用户
    int deleteUserById(String userId);
    //获取页面总页数（根据查询结果的不同）
    int getRowCount(@Param("userName") String userName,@Param("userSex") String userSex);
}

(2)创建UserMapper.xml

    
        
        
        
        
        
        
        
    

    
        user_id,card_type,card_no,user_name,user_sex,user_age,user_role
    


     
         select 
         from user
         
            
                and user_name like concat('%',#{userName},'%')
            
            
                and user_sex = #{userSex}
            
         
        limit #{startRow},5
     

     
         insert into user values (#{userId},#{cardType},#{cardNo},#{userName},#{userSex},#{userAge},#{userRole})
     

     
         delete from user where user_id = #{userid}
     

    
        select count(*) from user
        
            
                and user_name like concat ('%',#{userName},'%')
            
            
                and user_sex = #{userSex}
            
        
    

limit （当前页码-1）*每页条数，每页条数 

传进来的是需要显示的页数，也就是当前页码，但是limit不支持运算，所以要将当前页码-1   *每页条数，所以要在业务层或界面层处理。

3.service层

(1)业务接口

public interface UserService {
    List selectUserPage(String userName,String userSex,int startCount);

    int createUser(User user);

    int deleteUserById(String userId);

    int getRowCount(String userName,String userSex);
}

(2)业务实现

@Service
public class UserServiceImpl  implements UserService {
    @Autowired
    UserMapper userMapper;
    @Override
    public List selectUserPage(String userName, String userSex, int startCount) {
        return userMapper.selectUser(userName,userSex,startCount);
    }

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

4.controller层

@Controller
public class UserController {
    @Autowired
    UserService userService;

    public static final int PAGE_SIZE = 5;

    @RequestMapping("/selectUserPage")
    @ResponseBody
    public List 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("/deleteUserById")
    @ResponseBody
    public int deleteUserById(String userId){
        return userService.deleteUserById(userId);
    }
    @RequestMapping("/createUser")
    @ResponseBody
    public int createUser(User user){
        String userId = System.currentTimeMillis()+"";
        user.setUserId(userId);
        return  userService.createUser(user);
    }
    @RequestMapping("/getRowCount")
    @ResponseBody
    public int getCount(String userName,String userSex){
        return userService.getRowCount(userName,userSex);
    }
}

1.@ResponseBody表示是以Ajax请求方式返回

如果这个类的每个方法都是Ajax请求方式返回，那么可以在类名上添加注解@RestController来代替所有的@ResponseBody

2.在类上的RequestMapping是虚拟路径，就像包名一样。

三.后端功能测试

最好每实现一层就测，但是业务逻辑层很简单，所以可以实现了mapper层和service层再测。

@RunWith(SpringJUnit4ClassRunner.class)
@ContextConfiguration(locations = {"classpath:spring/applicationContext-mapper.xml","classpath:spring/applicationContext-service.xml"})
public class MyTest {
    @Autowired
    UserService userService;
    @Test
    public void testSelect(){
        List list = userService.selectUserPage(null,null,0);
        list.forEach(user -> System.out.println(user));
    }
    @Test
    public void testCreate(){
        int num = userService.createUser(new User("123","身份证","456","大西瓜","男","8","幼儿园小学生"));
        System.out.println(num);
    }
    @Test
    public void testDelete(){
        int num = userService.deleteUserById("123");
        System.out.println(num);
    }
    @Test
    public void testGet(){
        int num = userService.getRowCount(null,"男");
        System.out.println(num);
    }
}

 四.前端功能

Vue实现，非SSM整合重点，不予叙述。

五.出现的bug

1.出现找不到org.springframework.web.context.ContextLoaderListener的问题。

 在项目结构中找到你的项目，点击置于Output Root，检查WEB-INF下是否有lib，出现bug的原因就是因为没有lib。

2.依赖的问题

按照展示的pom.xml来就没问题，但具体是因为哪个导致的错误暂不清楚。

3.配置文件的命名空间的问题

按照展示的applicationContext-mapper.xml和applicationContext-service.xml来，具体因为哪个导致的错误暂不清楚。

特别注意

这个标签有重名的命名空间，要用mvc为结尾的命名空间。