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=falsespring.thymeleaf.encoding=utf-8spring.thymeleaf.prefix=classpath:/templates/spring.thymeleaf.content-type=text/htmlspring.thymeleaf.suffix=.htmlspring.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 mapperPUBLIC "-//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
{@AutowiredSongMapper songMapper;@Overridepublic 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 {@AutowiredSongService service;@PostMapping("searchSong")@ResponseBodypublic 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")@ResponseBodypublic 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>

springboot+vue+thymeleaf+mybatis+pageHelper创建项目相关推荐

视频教程-Springboot+Vue前后的分离整合项目实战-Java
Springboot+Vue前后的分离整合项目实战 10多年互联网一线实战经验,现就职于大型知名互联网企业,架构师, 有丰富实战经验和企业面试经验:曾就职于某上市培训机构数年,独特的培训思路,培训体系 ...
springboot 、thymeleaf、pagehelper 、springsecurity实现登录，用户认证，分页的前端使用妹子UI
springboot .thymeleaf.pagehelper .springsecurity 实现登录,用户认证,分页的前端使用妹子UIhttp://tpl.amazeui.org/. 项目下 ...
Springboot+Vue实现在线聊天室项目-修改头像、添加好友接口的实现
Springboot+Vue实现在线聊天室项目该聊天室为大二上学期计算机网络大作业,并且是本人第一次使用vue实现前后端分离的项目,前端架构尚未熟悉可能会出现一些不妥之处,还请大佬们指出.(本文章写 ...
@vue/cli3--使用命令创建项目--方法/实例
原文网址:@vue/cli3--使用命令创建项目--方法/实例_IT利刃出鞘的博客-CSDN博客简介说明本文用实例来介绍vue-cli3如何使用命令来创建项目. 系列文章 Vue-cli2--使 ...
vue ui 可视化界面创建项目报错：command failed: yarn --json。。。。。
清除npm缓存 npm cache clean --force 然后重新启动 vue ui,这次创建项目成功了
《SpringBoot+vue全栈开发实战项目》笔记
前言 Spring 作为一个轻量级的容器,在JavaEE开发中得到了广泛的应用,但是Spring 的配置繁琐臃肿,在和各种第三方框架进行整合时代码量都非常大,并且整合的代码大多是重复的,为了使开发者能 ...
Web前端技术课程设计——技术栈【SpringBoot+Vue+MySQL+MyBatis】的在线英语考试系统
一.技术简介本网站使用了前后端分离的开发技术,是基于SpringBoot + VUE的在线英语考试系统,支持选择题.填空题.判断题.多选题.系统包含三种角色(管理员.老师.考生),实现的功能包含在线 ...
vue的视图化创建项目_vue-cli3用图形化的方式创建项目
Vue脚手架可以快速生成Vue项目基础的架构. A.安装3.x版本的Vue脚手架: npm install -g @vue/cli B.基于3.x版本的脚手架创建Vue项目: 1).使用命令创建Vue ...
Vue 3 + TypeScript + Vite创建项目并安装常用插件
创建项目创建项目 npm init vite √ Project name: ... wego-admin √ Select a framework: » vue √ Select a varian ...

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

springboot+vue+thymeleaf+mybatis+pageHelper创建项目相关推荐

最新文章

热门文章