Day 24 SpringBoot基础2 对表的删改查

JS 字符串方法--------提取部分字符串

  • 有三种提取部分字符串的方法:
  • slice(start, end)
    • slice() 提取字符串的某个部分并在新字符串中返回被提取的部分。
    • 该方法设置两个参数:起始索引(开始位置),终止索引(结束位置)。
    • 如果某个参数为负,则从字符串的结尾开始计数。
    • 如果省略第二个参数,则该方法将裁剪字符串的剩余部分:
  • substring(start, end)
    • substring() 无法接受负的索引。和slice()方法相似
    • 如果省略第二个参数,则该 substring() 将裁剪字符串的剩余部分。
  • substr(start, length)
    • 该方法设置两个参数:起始索引(开始位置),规定被提取部分的长度。
    • 如果省略第二个参数,则该 substr() 将裁剪字符串的剩余部分。
    • 如果首个参数为负,则从字符串的结尾计算位置,第二个参数不能为负
      https://www.w3school.com.cn/js/js_string_methods.asp)

异常:This application has no explicit mapping for /error, so you are seeing this as a fallback.

在这里插入图片描述
出现这个异常说明了跳转页面的url无对应的值.

原因1:
  • Application启动类的位置不对.要将Application类放在最外侧,即包含所有子包

  • spring-boot会自动加载启动类所在包下及其子包下的所有组件

原因2:

在springboot的配置文件:application.yml或application.properties中关于视图解析器的配置问题:

  • 当pom文件下的spring-boot-starter-paren版本高时使用:spring.mvc.view.prefix/spring.mvc.view.suffix
  • 当pom文件下的spring-boot-starter-paren版本低时使用::spring.view.prefix/spring.view.suffix
原因3:

控制器的URL路径书写问题:

@RequestMapping(“xxxxxxxxxxxxxx”) ,实际访问的路径与”xxx”不符合
https://blog.csdn.net/liupeifeng3514/article/details/79525347)


对表的查询

service

//查询所有
		public List<User> selectAll() {
		
			List<User> ulist=new ArrayList();//多态
		try {
			Connection conn=jdbc.getconnection();
			Statement st=conn.createStatement();
			String sql="select * from user";
			System.out.println("sql--->"+sql);
			ResultSet rss=st.executeQuery(sql);
			//rss.next()只要 结果集合里,至少有一条记录,next方法就会返回true
			while (rss.next()) {
				User user=new User();//每条记录都是一个新的对象
				user.setId(rss.getString("id"));
				user.setName(rss.getString("name"));
				user.setPwd(rss.getString("pwd"));
				user.setType(rss.getString("type"));
				ulist.add(user);
			}
			//从下往上关
			rss.close();
			st.close();
			conn.close();
		} catch (ClassNotFoundException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
		return ulist;
	}

controller

@RequestMapping("all")//拦截路径
	public List<User> getAll(){
		UserService us=new UserService();
		List<User> userlist=us.selectAll();
		return userlist;
	}
  • springboot不需要转json本身就有

js

$(document).ready(function(){
					
					$.getJSON("all", function(json){//异步
						   console.log(json);//打印---数组
						 $("#tbodymainbtn").empty();//清除
						 for(var i=0;i<json.length;i++){//没有类型 都用var
							 $("#tbodymainbtn").append(//找到tbody
									 "<tr id='tridval"+i+"'>"  
										+"<td>"+ json[i].name
										+"</td>"
										+"<td>"+ json[i].pwd  
										+"</td>"
										+"<td>"+ json[i].id   
										+"</td></tr>" 
									   );
							 });
			});	

效果:
在这里插入图片描述

对表的删除

service

//根据id删除
		public boolean deleteById(String id) {
			boolean flag=false;
			try {
				Connection conn=jdbc.getconnection();
				String sql="delete from user where id=?";
				PreparedStatement st=conn.prepareStatement(sql);
				st.setString(1, id);
				
				if(	st.executeUpdate()>0) {
					flag=true;
				}
				st.close();
				conn.close();
			} catch (ClassNotFoundException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			} catch (SQLException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
			return flag;
		}

controller

@RequestMapping("delete")
	public Map Remove(HttpServletRequest request){
		UserService us=new UserService();
		String id=request.getParameter("uid");
		boolean rs=us.deleteById(id);
		Map map=new HashMap();//基本类型就要用map包一下
		map.put("result", rs);
		return map;
	}
  • 通过 HttpServletRequest request 向前端取值

js

$(document).ready(function(){				
	$.getJSON("all", function(json){//异步
		   console.log(json);//打印---数组
			 $("#tbodymainbtn").empty();//清除
				 for(var i=0;i<json.length;i++){//没有类型 都用var
				 $("#tbodymainbtn").append(//找到tbody
						 "<tr id='tridval"+i+"'>"  
						+"<td>"+ json[i].name
						+"</td>"
						+"<td>"+ json[i].pwd  
						+"</td>"
						+"<td>"+ json[i].id   
						+"</td>"
						+"<td><button type='button' class='btn btn-outline-info btn-sm' id='btn1"+i+"' name='btn001'>修改</button>" 
						+"&nbsp&nbsp&nbsp<button type='button' class='btn btn-outline-danger btn-sm' id='btn3"+json[i].id+"' name='btn003'>删除</button>"
						+"</td></tr>" 
				  );
							 
				$("button[name='btn003']").click(function(){
					var id=this.id;
					//截取剩余
					var numb=id.slice(4);
					console.log("***********"+id);
				
					$.getJSON("delete",{uid:numb}, function(json){
							console.log("*****uid******"+numb,json);
								window.location.href="table.html";
					});
				});
						 
		});
					
});	

对表的修改

service

//修改
		public boolean updatById(User user) {
			boolean flag=false;
			try {
				Connection conn=jdbc.getconnection();
				String sql="update user set name=?,pwd=? where id=?";
				PreparedStatement st=conn.prepareStatement(sql);
				st.setString(1, user.getName());
				st.setString(2, user.getPwd());
				st.setString(3, user.getId());
				if(	st.executeUpdate()>0) {
					flag=true;
				}
				st.close();
				conn.close();
			} catch (ClassNotFoundException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			} catch (SQLException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
			return flag;
		}

controller

@RequestMapping("updateu")
	public Map UpdateUser(HttpServletRequest request){
		UserService us=new UserService();
		User u=new User();
		String id=request.getParameter("uid");
		String name=request.getParameter("uname");
		String pwd=request.getParameter("upwd");
		u.setId(id);
		u.setName(name);
		u.setPwd(pwd);
		boolean rs=us.updatById(u);
		Map map=new HashMap();//基本类型就要用map包一下
		map.put("result", rs);
		return map;
	}

js

$(document).ready(function(){
					
					$.getJSON("all", function(json){//异步
						   console.log(json);//打印---数组
						 $("#tbodymainbtn").empty();//清除
						 for(var i=0;i<json.length;i++){//没有类型 都用var
						 $("#tbodymainbtn").append(//找到tbody
									 "<tr id='tridval"+i+"'>"  
										+"<td>"+ json[i].name
										+"</td>"
										+"<td>"+ json[i].pwd  
										+"</td>"
										+"<td>"+ json[i].id   
										+"</td>"
										+"<td><button type='button' class='btn btn-outline-info btn-sm' id='btn1"+i+"' name='btn001'>修改</button>" 
										+"</td></tr>" 
									   );
							 
							 $("#tbodymainbtn").append(//找到tbody
									 "<tr style='display:none' id='tridval2"+i+"'><form>"  
										+"<td><input type='text' id='name2"+json[i].id+"' value='"+ json[i].name
										+"'/></td>"
										+"<td><input type='text' id='pwd2"+json[i].id+"' value='"+ json[i].pwd  
										+"'/></td>"
										+"<td>"+ json[i].id   
										+"</td>"
										+"<td><button type='button' class='btn btn-outline-primary btn-sm' id='btn2"+json[i].id+"'name='btn002'>保存</button>" 
										+"</td></form></tr>" 
									   );
						   	}
							$("button[name='btn001']").click(function(){
								var id=this.id;
								var numb=id.slice(4);
								console.log("***********"+id);
								console.log("***********"+numb);
								$("#tridval"+numb).hide();
								$("#tridval2"+numb).show();
								
							});
							$("button[name='btn002']").click(function(){
								var id=this.id;
								var numb=id.slice(4);
								console.log("***********"+id);
								var nval=$("#name2"+numb).val();
								var pval=$("#pwd2"+numb).val();
								console.log("*****name2******"+nval);
								console.log("*****pwd2******"+pval);
								$.getJSON("updateu",{uid:numb,uname:nval,upwd:pval}, function(json){
									console.log("*****updateu******"+numb+" "+nval+" "+pval,json);
									window.location.href="table.html";
								});
								$("#tridval"+numb).show();
								$("#tridval2"+numb).hide();
								
							});
						 
						});
					
			});	

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值