SpringBoot2 学习2 实现查询用户Controller and 用户管理页面

浅浅的花香味﹌ 2021-09-30 14:14 271阅读 0赞

# 效果 #

![在这里插入图片描述][20190804205733698.png]

# controller代码 #

package com.zz.controller;
    
    import java.util.List;
    
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RestController;
    
    import com.zz.entity.User;
    import com.zz.service.UserService;
    
    @RestController
    public class UserController {
    	
    	@RequestMapping("all")
    	public List<User> getAll(){
    		UserService us=new UserService();
    		List<User> userlist=us.selectAll();
    		return userlist;
    	}
    
    }

# Service #

package com.zz.service;
    
    import java.sql.Connection;
    import java.sql.ResultSet;
    import java.sql.SQLException;
    import java.sql.Statement;
    import java.util.ArrayList;
    import java.util.List;
    
    import com.zz.entity.User;
    import com.zz.util.JDBCComon;
    
    
    public class UserService {
    	JDBCComon jdbc=new JDBCComon();
    	//登录
    	public User login(String name,String pwd){
    		User user=null;
    		try {
    			Connection conn=jdbc.getConnection();
    			Statement st=conn.createStatement(); 
    			String sql="select * from user where  name='"+name+"' and pwd='"+pwd+"'";
    			System.out.println("sql--->"+sql);
    			ResultSet rss=st.executeQuery(sql);
    			//rss.next()只要 结果集合里，至少有一条记录，next方法就会返回true
    			if(rss.next()){
    				user=new User();
    				user.setId(rss.getString("id"));
    				user.setName(rss.getString("name"));
    			}
    			//从下往上关
    			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 user;
    	}
    	
    	//验证用户名是否存在
    	public User checkName(String name){
    		User user=null;
    		try {
    			Connection conn=jdbc.getConnection();
    			Statement st=conn.createStatement(); 
    			String sql="select * from user where  name='"+name+"' ";
    			System.out.println("sql--->"+sql);
    			ResultSet rss=st.executeQuery(sql);
    			//rss.next()只要 结果集合里，至少有一条记录，next方法就会返回true
    			if(rss.next()){
    				user=new User();
    				user.setId(rss.getString("id"));
    				user.setName(rss.getString("name"));
    			}
    			//从下往上关
    			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 user;
    	}
    	
    	
    		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.setAge(rss.getInt("age"));
    					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;
    		}
    
    }

# 代码结构 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2gzNTYzNjM_size_16_color_FFFFFF_t_70]

# 用户管理页面 #

*  效果  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2gzNTYzNjM_size_16_color_FFFFFF_t_70 1]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2gzNTYzNjM_size_16_color_FFFFFF_t_70 2]

*  html 代码

<!DOCTYPE html>
    <html>
    <head>
      <title>用户管理</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
      <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
      <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
      <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <div class="container">
      <h2>用户管理</h2>
      <div class="table-responsive">          
      <table class="table  table-bordered">
        <thead>
          <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>年龄</th>
             <th>操作</th>
          </tr>
        </thead>
        <tbody id="tbodymainbtn">
        </tbody>
    </table>
      </div>
    </div>
    <script type="text/javascript" src="js/table.js"></script>
    </body>
    </html>

*  js 代码

$(document).ready(function(){
    	  // 在这里写你的代码...
    	 $.getJSON("all", function(json){
    		   console.log(json);
    		   $("#tbodymainbtn").empty();
    		   for(var i=0;i<json.length;i++){
    			   $("#tbodymainbtn").append(
    				"<tr id='tridval"+i+"'>"  
    				+"<td>"+ json[i].id  
    				+"</td>"
    				+"<td>"+ json[i].name  
    				+"</td>"
    				+"<td>"+ json[i].age  
    				+"</td>"
    				+"<td><button type='button' name='btn001' class='btn btn-info btn-sm' id='btn1"+i+"'>修改</button>" 
    				+"</td></tr>" 
    			   );
    			   $("#tbodymainbtn").append(
    						"<tr style='display:none' id='tridval2"+i+"'><form>"  
    						+"<td><input type='text'  value='"+ json[i].id  
    						+"'/></td>"
    						+"<td><input type='text' id='name2"+i+"'  value='"+ json[i].name  
    						+"'/></td>"
    						+"<td><input type='text' id='age2"+i+"' value='"+ json[i].age  
    						+"'/></td>"
    						+"<td><button type='button' name='btn002'  class='btn btn-primary btn-sm' id='btn2"+i+"'>保存</button>" 
    						+"</td></form></tr>" 
    					   );
    		   }
    		   
    		   
    		   //jquery 样式查找 “点+样式名字”
    			 $("button[name='btn001']").click(function(){
    				 var id=this.id;
    				 //从最后面开始，截取一位
    				 var numb = id.substr(-1);
    				 console.log("****************"+id);
    				 $("#tridval"+numb).hide();
    				 $("#tridval2"+numb).show();
    				 
    			 });
    			 
    			 
    			 $("button[name='btn002']").click(function(){
    				 var id=this.id;
    				 //从最后面开始，截取一位
    				 var numb = id.substr(-1);
    				 console.log("****************"+id);
    				 var nval=$("#name2"+numb).val();
    				 var aval=$("#age2"+numb).val();
    				 console.log("********name2********"+nval);
    				 console.log("********age2********"+aval);
    				 
    				 $("#tridval"+numb).show();
    				 $("#tridval2"+numb).hide();
    				 
    				 
    			 });
    			 
    			 
    			 
    		});//$.getJSON("UserServlet", function(json){
    		  
    	  });

*  代码结构  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2gzNTYzNjM_size_16_color_FFFFFF_t_70 3]

# 删除功能 #

*  效果

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2gzNTYzNjM_size_16_color_FFFFFF_t_70 4]

*  代码
 *  js

$(document).ready(function(){
    	  // 在这里写你的代码...
    	 $.getJSON("all", function(json){
    		   console.log(json);
    		   $("#tbodymainbtn").empty();
    		   for(var i=0;i<json.length;i++){
    			   $("#tbodymainbtn").append(
    				"<tr id='tridval"+i+"'>"  
    				+"<td>"+ json[i].id  
    				+"</td>"
    				+"<td>"+ json[i].name  
    				+"</td>"
    				+"<td>"+ json[i].age  
    				+"</td>"
    				+"<td><button type='button' name='btn001' class='btn btn-info btn-sm' id='btn1"+i+"'>修改</button>" +"&nbsp&nbsp&nbsp<button type='button' name='btn003' class='btn btn-danger btn-sm' id='btn3"+json[i].id +"'>删除</button>"
    				+"</td></tr>" 
    			   );
    			   $("#tbodymainbtn").append(
    						"<tr style='display:none' id='tridval2"+i+"'><form>"  
    						+"<td><input type='text'  value='"+ json[i].id  
    						+"'/></td>"
    						+"<td><input type='text' id='name2"+i+"'  value='"+ json[i].name  
    						+"'/></td>"
    						+"<td><input type='text' id='age2"+i+"' value='"+ json[i].age  
    						+"'/></td>"
    						+"<td><button type='button' name='btn002'  class='btn btn-primary btn-sm' id='btn2"+i+"'>保存</button>" 
    						+"</td></form></tr>" 
    					   );
    		   }
    		   
    		   
    		   //jquery 样式查找 “点+样式名字”
    			 $("button[name='btn001']").click(function(){
    				 var id=this.id;
    				//截取剩余
    				 var numb = id.slice(4);
    				 console.log("****************"+id);
    				 $("#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 aval=$("#age2"+numb).val();
    				 console.log("********name2********"+nval);
    				 console.log("********age2********"+aval);
    				 
    				 $("#tridval"+numb).show();
    				 $("#tridval2"+numb).hide();
    				 
    				 
    			 });
    			 
    			 
    			 $("button[name='btn003']").click(function(){
    				 var id=this.id;
    				 //截取剩余
    				 var numb = id.slice(4);
    				 console.log("****************"+id);
    				 console.log("****************"+numb);
    				 
    				 $.getJSON("delete", { uid: numb}, function(json){
    					 console.log("******delete**********"+numb,json);
    					 window.location.href="table.html"
    					});
    				 
    				 
    				 
    				 
    			 });
    			 
    			 
    			 
    		});//$.getJSON("UserServlet", function(json){
    		  
    	  });

*  controller

package com.zz.controller;
    
    import java.util.HashMap;
    import java.util.List;
    import java.util.Map;
    
    import javax.servlet.http.HttpServletRequest;
    
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RestController;
    
    import com.zz.entity.User;
    import com.zz.service.UserService;
    
    @RestController
    public class UserController {
    	
    	@RequestMapping("all")
    	public List<User> getAll(){
    		UserService us=new UserService();
    		List<User> userlist=us.selectAll();
    		return userlist;
    	}
    	
    	@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.put("result", rs);
    		return map;
    	}
    
    }

[20190804205733698.png]: /images/20210726/e1e16038c3e4483b983ace9d63eb4027.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2gzNTYzNjM_size_16_color_FFFFFF_t_70]: /images/20210726/9a915ec4397e46f1a00f827f4e35a1ce.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2gzNTYzNjM_size_16_color_FFFFFF_t_70 1]: /images/20210726/c0a03eca61ea4eed8d7964d95814bb4d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2gzNTYzNjM_size_16_color_FFFFFF_t_70 2]: /images/20210726/eac90f7c480946adb638788d1660b3dc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2gzNTYzNjM_size_16_color_FFFFFF_t_70 3]: /images/20210726/9193a07201284a04b15727e427934a7b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2gzNTYzNjM_size_16_color_FFFFFF_t_70 4]: /images/20210726/943c55ae3a8b4a9b8fab20990e0be39c.png