springboot+vue+thymeleaf+mybatis+pageHelper创建项目

一、创建sprintboot新项目
1、点击File->new->object选择Sping Initializr点击Next输入项目信息
2、在依赖选择界面选择所需要的依赖,点击next完成项目创建

二、项目添加mybatis
1、打开pom.xml添加mybatis依赖

2、在application.peroperties中添加mybatis与数据库连接配置信息

3、在resources目录下创建mapper文件夹并在其下创建mybatis-config.xml文件，并添加配置信息

4、注意：maven添加依赖后要确保maven设置界面下WorkOffline不能被勾选，否则，maven不会自动下载相关依赖jar包,导致项目报错。

三、项目添加thymeleaf
1、打开pom.xml添加thymeleaf依赖

2、在aplication.properties文件中添加配置信息

	spring.thymeleaf.cache=false
	spring.thymeleaf.encoding=utf-8
	spring.thymeleaf.prefix=classpath:/templates/
	spring.thymeleaf.content-type=text/html
	spring.thymeleaf.suffix=.html
	spring.thymeleaf.mode=HTML

四、项目添加pageHepler
1、打开pom.xml添加pageHelper依赖
2、添加mytabis-config.xml配置信息

五、创建entity、mapper、service、controller类
1、在classpath根目录下分别创建entity、mapper、service、controller文件夹。

2、在entity文件夹下创建Song、PageDomain

package com.example.demo.entity;

public class Song {
    public String getId() {
        return id;
    }

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

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

package com.example.demo.entity;

public class PageDomain {

    private int pageNum,pageSize,pages;

    public int getPageNum() {
        return pageNum;
    }

    public void setPageNum(int pageNum) {
        this.pageNum = pageNum;
    }

    public int getPageSize() {
        return pageSize;
    }

    public void setPageSize(int pageSize) {
        this.pageSize = pageSize;
    }

    public int getPages() {
        return pages;
    }

    public void setPages(int pages) {
        this.pages = pages;
    }

}

3、在mapper文件夹下创建SongMapper接口类
注意：此类必须添加@Mapper或@Repository才可以通过@Autowired在其它类中自动装配

package com.example.demo.mapper;

import com.example.demo.entity.Song;
import org.apache.ibatis.annotations.Mapper;

import java.util.List;
@Mapper
public interface SongMapper {
    List searchSong(Song song);
}

4、在resources目录下的mapper文件夹下创建SongMapper.xml

    
        
        
        
    
    
        select song_id,song_name,singer_name from song_info
    
    
        
        
             and song_name like concat('%' #{name},'%') 
             and singer_name like concat('%',#{singer},'%')
        
    

备注：在application.propertis下添加以下配置可在后台打印sql

#查询时打印sql配置
logging.level.com.example.demo.mapper:debug

5、在service文件夹下创建SongService接口类

package com.example.demo.service;

import com.example.demo.entity.Song;
import org.springframework.stereotype.Service;
import java.util.List;

public interface SongService {
    public List searchSong(Song s);
}

6、在service文件夹下创建impl文件夹，并在其下创建SongSerive实现类SongServiceImp
注意：此类要添加@Service注释

package com.example.demo.service.impl;

import com.example.demo.entity.Song;
import com.example.demo.mapper.SongMapper;
import com.example.demo.service.SongService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;
@Service
public class SongServiceImpl implements SongService
{
    @Autowired
    SongMapper songMapper;
    @Override
    public List searchSong(Song song) {
        return songMapper.searchSong(song);
    }
}

7、在controller文件夹下创建SongController
注意：PageHelper.startPage方法必须放到数据查询之前否则查寻出来的分页数据次序不对

package com.example.demo.controller;

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import com.example.demo.entity.PageDomain;
import com.example.demo.entity.Song;
import com.example.demo.service.SongService;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

@Controller
public class SongController {
    @Autowired
    SongService service;
    @PostMapping("searchSong")
    @ResponseBody
    public Map searchSong(@RequestBody String str){
        Map map = (Map) JSON.parse(str);
        String strSong = map.get("song").toString();
        String strPageDomain = map.get("pageDomain").toString();
        Song song = JSONObject.toJavaObject(JSON.parseObject(strSong),Song.class);
        PageDomain pageDomain= JSONObject.toJavaObject(JSON.parseObject(strPageDomain),PageDomain.class);
        System.out.println(pageDomain.getPageNum());
        if(song !=null)
            System.out.println(String.format("name:%s,singer:%s",song.getName(),song.getSinger()));
        //PageHelper.startPage方法必须放到数据查询之前否则查寻出来的页面数据次序不对
        PageHelper.startPage(pageDomain.getPageNum(),pageDomain.getPageSize());
        List list = service.searchSong(song);
        Map map1 = new HashMap<>();
        PageInfo pageInfo = new PageInfo<>(list);
        map1.put("pageInfo",pageInfo);
        System.out.println("searchSong:size"+ list.size());
        return map1;
    }

    @GetMapping("/songs")
    public String songs(){
        return "songInfo";
    }


    @GetMapping("searchSong")
    @ResponseBody
    public Map searchSong1(){
        Map map = new HashMap<>();
        List list = service.searchSong(null);
        map.put("list",list);
        System.out.println("searchSong:size"+ list.size());
        return map;
    }
}

六、创建html文件
1、在resources目录的static文件夹下创建js文件夹,并将 jquery js文件放到js文件夹下

2、创建songInfo.html模板文件

添加thymeleaf名称空间

引入jquery.min.js文件

引入vue.global.js

注意：必须在appliction.properties文件中添加以下配置，否则
html文件中将无法导入static下的css、js文件

#若无此配置则在文件中无法引入static下的js、css文件
spring.mvc.static-path-pattern=/static
                        },
                        error: function(){
                            console.info("获取数据失败！");
                        }
                    });
        }
            }
        }).mount("#app");