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

仲夏幻境

已于 2022-04-23 07:54:36 修改

阅读量2k

点赞数

分类专栏： SpringBoot 文章标签： spring boot

于 2022-04-22 20:11:32 首次发布

本文链接：https://blog.csdn.net/weixin_52472152/article/details/124324636

版权

SpringBoot 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、创建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<Song> searchSong(Song song);
}

4、在resources目录下的mapper文件夹下创建SongMapper.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.example.demo.mapper.SongMapper">
    <resultMap id="songResult" type="com.example.demo.entity.Song">
        <result property="id" column="song_id"/>
        <result property="name" column="song_name"/>
        <result property="singer" column="singer_name"/>
    </resultMap>
    <sql id="selectSongs">
        select song_id,song_name,singer_name from song_info
    </sql>
    <select id ="searchSong" resultMap="songResult" parameterType="com.example.demo.entity.Song">
        <include refid="selectSongs"></include>
        <where>
            <if test ="name != null and name !=''"> and song_name like concat('%' #{name},'%') </if>
            <if test ="singer != null and singer !=''"> and singer_name like concat('%',#{singer},'%')</if>
        </where>
    </select>
</mapper>

备注：在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<Song> 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<Song> 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<String,Object> 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<Song> list = service.searchSong(song);
        Map<String,Object> map1 = new HashMap<>();
        PageInfo<Song> 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<String,Object> searchSong1(){
        Map<String,Object> map = new HashMap<>();
        List<Song> 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名称空间

<html lang="en" xmlns:th="http://www.thymeleaf.org">

引入jquery.min.js文件

<script src ="../static/js/jquery.min.js"></script>

引入vue.global.js

<script src="../static/js/vue.global.js"></script>

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


#若无此配置则在文件中无法引入static下的js、css文件
spring.mvc.static-path-pattern=/static/**

完整html文件如下：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <script src="../static/js/jquery.min.js"></script>
    <script src="../static/js/vue.global.js"></script>
    <title>Title</title>
</head>
<body>
    <div id = "app">
        <div id ="div-search" align="center">
            <label>歌曲</label><input id ="songName"/><br>
            <label>歌手</label><input id ="singerName"/><br>
            <button @click="searchSong()">搜索</button>
        </div>
        <table border="1px" align="center">
            <thead>
                <tr>
                    <td>编号</td>
                    <td>歌曲</td>
                    <td>歌手</td>
                </tr>
            </thead>
            <tbody id ="list" v-for ="song in songList">
                <tr>
                    <td>{{song.id}}</td>
                    <td>{{song.name}}</td>
                    <td>{{song.singer}}</td>
                </tr>
            </tbody>
        </table>
        <div id = "div_navigate">
            <a @click ="prePage()">上一页</a>{{pageNum}}/{{pages}} 每页<input v-model ="pageSize" size ="1"/>条<a @click ="nextPage()">下一页</a>
        </div>
    </div>
    <script>
        const app = Vue.createApp({
            data(){
                return {
                    pageNum:1,
                    pageSize:5,
                    pages:1,
                    songList:null
                    }
            },
            methods:{
                prePage:function(){
                    this.pageNum = --this.pageNum >0 ? this.pageNum:this.pages;
                    this.searchSong();
                },
                nextPage:function(){
                    this.pageNum = ++this.pageNum > this.pages ? 1:this.pageNum;
                    this.searchSong();
                },
                searchSong:function(){
                    let temp ="";
                    let song ={
                        "name":$("#songName").val(),
                        "singer":$("#singerName").val()
                    };
                    let pageDomain ={
                        "pageNum":this.pageNum,
                        "pageSize":this.pageSize,
                        "pages":this.pages
                    }
                    console.log("song:" + song);

                    //在ajax方法中的this指向ajax本身，所以此处必须用一个变量将指向Vue本身的this存起来以便在ajax中使用，否则无法给

                    var that = this;
                    $.ajax({
                        url:"/searchSong",
                        type:"post",
                        data:JSON.stringify({song,pageDomain}),
                        contentType:"application/json",
                        dataType:"json",
                        async:true,
                        success: function(data){
                            that.songList = data.pageInfo.list;
                            that.pages = data.pageInfo.pages;
                            console.log("print this:")
                            for(let key in this){
                                console.log(key + ":" + this[key]);
                            }
                            console.log("print that");
                            for(let key in that){
                                console.log(key + ":" + that[key]);
                            }
                            /*this.$forceUpdate();*/
                        },
                        error: function(){
                            console.info("获取数据失败！");
                        }
                    });
        }
            }
        }).mount("#app");
    </script>
</body>
</html>