使用ajax重构商品模块的crud

目录结构

依赖

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

效果