目录结构
依赖
mysql驱动依赖,jdbc连接池依赖,mybatis持久层框架依赖,springmvc依赖,thympleaf依赖,lombak依赖。
<?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 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.4.6</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.cy</groupId>
<artifactId>aaaaaaaaaaa</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>aaaaaaaaaaa</name>
<description>Demo project for Spring Boot</description>
<properties>
<java.version>1.8</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-jdbc</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.1.4</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<configuration>
<excludes>
<exclude>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</exclude>
</excludes>
</configuration>
</plugin>
</plugins>
</build>
</project>
配置文件
server.port=8080
spring.datasource.url=jdbc:mysql:///dbgoods?serverTimezone=GMT%2B8&characterEncoding=utf8
spring.datasource.username=root
spring.datasource.password=root
spring.thymeleaf.cache=false
logging.level.com.cy=debug
po
package com.cy.po;
import java.util.Date;
import org.springframework.format.annotation.DateTimeFormat;
import com.fasterxml.jackson.annotation.JsonFormat;
import lombok.Data;
@Data
public class Goods {
private Long id;//id bigint primary key auto_increment
private String name;//name varchar(100) not null
private String remark;//remark text
private Date createdTime;//createdTime datetime
}
controller
package com.cy.controller;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
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 com.cy.po.Goods;
import com.cy.service.GoodService;
@Controller
@RequestMapping("/")
public class GoodsController {
@Autowired
GoodService gs;
//返回页面
@RequestMapping("pa")
public String page() {
return "test";
}
//查询所有
@RequestMapping("findAll")
@ResponseBody
public List<Goods> findAll(){
System.out.println(gs.findAll());
return gs.findAll();
}
//删除
@ResponseBody
@RequestMapping("delete")
public String deleteById(Integer id) {
int row=gs.deleteById(id);
//return "goods";//同步刷新
return "delete ok";
}
//添加数据
@ResponseBody
@RequestMapping("Addaa")
public String addAA(Goods goods) {
int rows=gs.addPage(goods);
return "save ok";
}
//更新·
@RequestMapping("findById")
@ResponseBody
public Goods findById(Integer id) {
return gs.findById(id);
}
@RequestMapping("update")
@ResponseBody
public String updateOrAdd(Goods goods) {
int rows=gs.updateId(goods);
return "ok";
}
}
service
package com.cy.service;
import java.util.List;
import com.cy.po.Goods;
public interface GoodService {
List<Goods> findAll();
int deleteById(Integer id);
int addPage(Goods goods);
Goods findById(Integer id);
int updateId(Goods goods);
}
serviceImpl
package com.cy.service.impl;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.cy.mapper.GoodsMapper;
import com.cy.po.Goods;
import com.cy.service.GoodService;
@Service
public class GoodsServiceImpl implements GoodService {
@Autowired
GoodsMapper gp;
@Override
public List<Goods> findAll() {
// TODO Auto-generated method stub
return gp.findAll();
}
@Override
public int deleteById(Integer id) {
// TODO Auto-generated method stub
return gp.deleteById(id);
}
@Override
public int addPage(Goods goods) {
// TODO Auto-generated method stub
return gp.addPage(goods);
}
@Override
public Goods findById(Integer id) {
// TODO Auto-generated method stub
return gp.findById(id);
}
@Override
public int updateId(Goods goods) {
// TODO Auto-generated method stub
return gp.updateId(goods);
}
}
dao
package com.cy.mapper;
import java.util.List;
import org.apache.ibatis.annotations.Delete;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
import org.apache.ibatis.annotations.Update;
import com.cy.po.Goods;
@Mapper
public interface GoodsMapper {
//查询
@Select("select * from tb_goods ")
List<Goods> findAll();
//删除
@Delete("delete from tb_goods where id=#{id}")
int deleteById(Integer id);
//添加
@Insert("insert into tb_goods(name,remark,createdTime) values (#{name},#{remark},now())")
int addPage(Goods goods);
//更新
@Select("select * from tb_goods where id=#{id}")
Goods findById(Integer id);
@Update("update tb_goods set name=#{name},remark=#{remark},createdTime=now() where id=#{id}")
int updateId(Goods goods);
}
页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="/jquery-1.8.3.min.js"></script><!--注意引入jquery放在上面 -->
<script type="text/javascript" src="/test.js"></script>
</head>
<body>
<div id="page">
<p1>首页</p1>
<input type="button" value="添加" onclick="add()"/>
<table>
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>remark</th>
<th>createdTime</th>
<th colspan="2">操作</th>
</tr>
</thead>
<tbody id="findAll">
<tr >
<td colspan="5">页面正在加载......</td>
</tr>
</tbody>
</table>
</div>
<div id="add">
<p1 id="aa">添加页面</p1>
<ul>
<li>name:</li>
<li><input name="name" type="text" id="addna"/></li>
<li>remark:</li>
<li><input name="remark" type="text" id="addre" /></li>
<li><input name="save" type="button" onclick="sava()" value="save"/></li>
</ul>
</div>
<div id="update">
<p1 id="bb">更新页面</p1>
<input type="text" name="id" hidden id="id"/>
<ul>
<li>name:</li>
<li><input name="name" type="text" id="na"/></li>
<li>remark:</li>
<li><input name="remark" type="text" id="re" /></li>
<li><input name="save" type="button" onclick="upp()" value="update"/></li>
</ul>
</div>
</body>
</html>
js
$(function(){
findPage();
});
//查询
function findPage(){
$("#page").show();
$("#add").hide();
$("#update").hide();
$("#findAll").empty();
//3.发送异步请求
$.ajax({
type:"POST",
url:"/findAll",
dataType:"json",
async:true,
success:function(result){
var le=result.length;
for(var i=0;i<le;i++){
//ES6新语法:模板字符串。
var html=`<tr>
<td>${
result[i].id}</td>
<td>${
result[i].name}</td>
<td>${
result[i].remark}</td>
<td>${
result[i].createdTime}</td>
<td><a onclick="dele(${result[i].id})">删除</a></td>
<td><a onclick="up(${result[i].id})">更新</a></td>
</tr>`;
$("#findAll").append(html);
}
// ES6之前的写法
// var html="";
// for(var i=0;i<le;i++){
// html+='<tr>';
// html+='<td>'+result[i].id+'</td>';
// html+='<td>'+result[i].name+'</td>';
// html+='<td>'+result[i].remark+'</td>';
// html+='<td>'+result[i].createdTime+'</td>';
// html+='<td><a οnclick="del('+result[i].id+')">删除</a></td>';
// html+='<td><a οnclick="updatel('+result[i].id+')">更新</a></td>';
// html+='</tr>';
// }
// $("#findAll").html(html);
},
error:function(result){
console.log("删除失败");
}
});
}
//删除
function dele(ids){
$.ajax({
type:"POST",
data:{
id:ids},
url:"/delete",
dataType:"text",
async:false,
success:function(result){
alert(result);
findPage();
}
});
}
//添加页面
function add(){
$("#page").hide();
$("#add").show();
$("#update").hide();
}
//添加数据
function sava(){
var params={
name:$("#addna").val(),
remark:$("#addre").val()
};
$.ajax({
type:"POST",
data:params,
url:"/Addaa",
dataType:"text",
async:false,
success:function(result){
alert(result);
findPage();
}
});
}
//携带数据 到页面更新
function up(ids){
$("#page").hide();
$("#add").hide;
$("#update").show();
$.ajax({
type:"POST",
data:{
id:ids},
url:"/findById",
dataType:"json",
async:false,
success:function(result){
console.log("result");
$("#id").val(result.id);
$("#na").val(result.name);
$("#re").val(result.remark);
}
});
}
//更新
function upp(){
var params={
id:$("#id").val(),
name:$("#na").val(),
remark:$("#re").val()
};
$.ajax({
type:"POST",
data:params,
url:"/update",
dataType:"text",
async:false,
success:function(result){
alert(result);
findPage();
}
});
}