一、基本环境
二、创建实体类
1.User.java
package bjredcross.rainbowplans.model; import bjredcross.rainbowplans.common.UUIDUtils; public class User { private String id; private String nickname; private String loginpassword; private String email; public String getId() { return id; } public void setId(String id) { this.id = id; } public String getNickname() { return nickname; } public void setNickname(String nickname) { this.nickname = nickname; } public String getLoginpassword() { return loginpassword; } public void setLoginpassword(String loginpassword) { this.loginpassword = loginpassword; } public String getEmail() { return email; } public void setEmail(String email) { this.email = email; } }
2.UserSex.java
package bjredcross.rainbowplans.model; public class UserSex { private String id; private String sexname; private String sexcode; public String getId() { return id; } public void setId(String id) { this.id = id; } public String getSexname() { return sexname; } public void setSexname(String sexname) { this.sexname = sexname; } public String getSexcode() { return sexcode; } public void setSexcode(String sexcode) { this.sexcode = sexcode; } }
三、创建映射文件
1.UserMapper.xml
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace="bjredcross.rainbowplans.dao.UserMapper"> <resultMap id="BaseResultMap" type="bjredcross.rainbowplans.model.User"> <result column="id" property="id" /> <result column="nickname" property="nickname" /> <result column="loginpassword" property="loginpassword" /> <result column="email" property="email" /> </resultMap> <parameterMap id="User" type="bjredcross.rainbowplans.model.User"/> <sql id="Base_User_List"> id, nickname, loginpassword, email </sql> <select id="findAll" resultMap="BaseResultMap"> select <include refid="Base_User_List" /> from t_user </select> <select id="findById" resultMap="BaseResultMap" parameterType="java.lang.String"> select <include refid="Base_User_List" /> from t_user where id = #{id} </select> <update id="updateUser" parameterType="bjredcross.rainbowplans.model.User"> update t_user set nickname = #{nickname}, loginpassword = #{loginpassword}, email = #{email} where id = #{id} </update> <insert id="insertUser" parameterType="bjredcross.rainbowplans.model.User"> insert into t_user (id, nickname, loginpassword, email) values (#{id}, #{nickname}, #{loginpassword}, #{email}) </insert> <delete id="deleteById" parameterType="java.lang.String"> delete from t_user where id = #{id} </delete> </mapper>
2.UserSexMapper.xml
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace="bjredcross.rainbowplans.dao.UserMapper"> <resultMap id="BaseResultMap" type="bjredcross.rainbowplans.model.User"> <result column="id" property="id" /> <result column="nickname" property="nickname" /> <result column="loginpassword" property="loginpassword" /> <result column="email" property="email" /> </resultMap> <parameterMap id="User" type="bjredcross.rainbowplans.model.User"/> <sql id="Base_User_List"> id, nickname, loginpassword, email </sql> <select id="findAll" resultMap="BaseResultMap"> select <include refid="Base_User_List" /> from t_user </select> <select id="findById" resultMap="BaseResultMap" parameterType="java.lang.String"> select <include refid="Base_User_List" /> from t_user where id = #{id} </select> <update id="updateUser" parameterType="bjredcross.rainbowplans.model.User"> update t_user set nickname = #{nickname}, loginpassword = #{loginpassword}, email = #{email} where id = #{id} </update> <insert id="insertUser" parameterType="bjredcross.rainbowplans.model.User"> insert into t_user (id, nickname, loginpassword, email) values (#{id}, #{nickname}, #{loginpassword}, #{email}) </insert> <delete id="deleteById" parameterType="java.lang.String"> delete from t_user where id = #{id} </delete> </mapper>
四、创建数据层接口
1.UserMapper.java
package bjredcross.rainbowplans.dao; import java.util.List; import bjredcross.rainbowplans.model.User; public interface UserMapper { List<User> findAll(); User findById(String id); void updateUser(User user); void insertUser(User user); void deleteById(String id); }
2.UserSexMapper.java
package bjredcross.rainbowplans.dao; import java.util.List; import bjredcross.rainbowplans.model.UserSex; public interface UserSexMapper { List<UserSex> findAll(); }
五、创建服务层接口
1.UserService.java
package bjredcross.rainbowplans.service; import java.util.List; import bjredcross.rainbowplans.model.User; public interface UserService { List<User> findAll(); User findById(String id); void updateUser(User user); void insertUser(User user); void deleteById(String id); }
2.UserSexService.java
package bjredcross.rainbowplans.service; import java.util.List; import bjredcross.rainbowplans.model.UserSex; public interface UserSexService { List<UserSex> findAll(); }
六、创建服务层类
1.UserServiceImpl.java
package bjredcross.rainbowplans.service.impl; import java.util.List; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import bjredcross.rainbowplans.dao.UserMapper; import bjredcross.rainbowplans.model.User; import bjredcross.rainbowplans.service.UserService; @Service public class UserServiceImpl implements UserService { @Autowired private UserMapper userMapper; @Override public List<User> findAll() { return userMapper.findAll(); } public User findById(String id){ return userMapper.findById(id); } public void updateUser(User user){ userMapper.updateUser(user); } public void insertUser(User user) { userMapper.insertUser(user); } public void deleteById(String id) { userMapper.deleteById(id); } }
2.UserSexServiceImpl.java
package bjredcross.rainbowplans.service.impl; import java.util.List; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import bjredcross.rainbowplans.dao.UserSexMapper; import bjredcross.rainbowplans.model.UserSex; import bjredcross.rainbowplans.service.UserSexService; @Service public class UserSexServiceImpl implements UserSexService { @Autowired private UserSexMapper userSexMapper; @Override public List<UserSex> findAll() { return userSexMapper.findAll(); } }
七、创建控制文件
UserController.java
package bjredcross.rainbowplans.controller; import java.util.List; import java.util.Map; import java.util.Set; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.ui.ModelMap; import org.springframework.util.StringUtils; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.servlet.ModelAndView; import bjredcross.rainbowplans.common.ResultUtils; import bjredcross.rainbowplans.common.UUIDUtils; import bjredcross.rainbowplans.model.User; import bjredcross.rainbowplans.model.UserSex; import bjredcross.rainbowplans.service.UserService; import bjredcross.rainbowplans.service.UserSexService; @Controller @RequestMapping("/user") public class UserController { @Autowired private UserService userService; @Autowired private UserSexService userSexService; @RequestMapping(value = "list") public ModelAndView findAll(HttpServletRequest request, HttpServletResponse response){ //String username = request.getParameter("username").trim(); String getContextPath = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+getContextPath+"/"; String getRemoteAddress=request.getRemoteAddr(); String getServletPath =request.getServletPath(); String getRequestURL =request.getRequestURL().toString(); String getRequestURI =request.getRequestURI(); String getQueryString =request.getQueryString(); String getRemoteUser =request.getRemoteUser(); Map map = request.getParameterMap(); Set<String> set = map.keySet(); for(String name : set){ //获得每个文本域所对应的值 String[] vals = (String[]) map.get(name); System.out.print(name+":"); for(String val : vals){ System.out.print(val+" "); } System.out.println(); } ModelAndView model = new ModelAndView("user/list"); model.addObject("userList",userService.findAll()); return model; } @RequestMapping(value = "findById") public ModelAndView findById(String id){ ModelAndView model = new ModelAndView("user/edit"); if (id != null && !id.equals("") ) { model.addObject("user", userService.findById(id)); List<UserSex> sexList=userSexService.findAll(); model.addObject("usersex", sexList); } return model; } @RequestMapping(value = "editUser") @ResponseBody public Object editUser(User user){ ResultUtils res = new ResultUtils(); try{ if (!user.getId().equals("")){ userService.updateUser(user); } else { user.setId(UUIDUtils.getUUID()); userService.insertUser(user); } }catch (Exception e){ return res.errorResult(); } return res.successResult(); } @RequestMapping(value = "deleteById") @ResponseBody public Object deleteById(String id){ ResultUtils res = new ResultUtils(); try{ userService.deleteById(id); }catch (Exception e){ res.errorResult(); } return res.successResult(); } }
八、创建页面文件
1.common.ftl
<link rel="icon" type="image/x-icon" href="${request.contextPath}/favicon/favicon.ico"> <link rel="stylesheet" href="${request.contextPath}/css/bootstrap.min.css"> <link rel="stylesheet" href="${request.contextPath}/css/bootstrap-theme.min.css"> <link rel="stylesheet" href="${request.contextPath}/css/fontAwesome.css"> <link rel="stylesheet" href="${request.contextPath}/css/light-box.css"> <link rel="stylesheet" href="${request.contextPath}/css/owl-carousel.css"> <link rel="stylesheet" href="${request.contextPath}/css/templatemo-style.css"> <link rel="stylesheet" href="${request.contextPath}/layer/skin/layer.css"> <script src="${request.contextPath}/js/jquery-3.3.1.min.js"></script> <script src="${request.contextPath}/js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script> <script src="${request.contextPath}/js/vendor/jquery-1.11.2.min.js"> <script src="${request.contextPath}/js/vendor/bootstrap.min.js"></script> <script src="${request.contextPath}/js/plugins.js"></script> <script src="${request.contextPath}/layer/layer.js"></script> <script src="${request.contextPath}/js/main.js"></script> <script src="${request.contextPath}/js/my.js"></script>
2.list.ftl
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>用户列表</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <#include "/common/common.ftl" /> </head> <body> <header class="nav-down responsive-nav hidden-lg hidden-md"> <button type="button" id="nav-toggle" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div id="main-nav" class="collapse navbar-collapse"> <nav> <ul class="nav navbar-nav"> <li><a href="#top">Home</a></li> </ul> </nav> </div> </header> <div class="sidebar-navigation hidde-sm hidden-xs"> <div class="logo"> <a href="#">Sen<em>tra</em></a> </div> <nav> <ul> <li> <a href="#featured"> <span class="rect"></span> <span class="circle"></span> 用户列表 </a> </li> </ul> </nav> </div> <div class="page-content"> <section id="featured" class="content-section"> <div class="section-heading"> <h1>商品<br><em>列表</em></h1> </div> <div class="section-content"> <div> <button type="button" onclick="edit(0);" class="btn btn-info" style="position: relative;float: left;margin-bottom: 10px;"> 添加 </button> </div> <table class="table table-striped"> <tr> <td>商品名称</td> <td>商品规格</td> <td>温度</td> <td>价格</td> <td>商品描述</td> <td>操作一</td> <td>操作二</td> </tr> <#list userList as user> <tr> <td>${user.id}</td> <td>${user.nickname}</td> <td>${user.loginpassword}</td> <td>${user.email}</td> <td>商品描述</td> <td> <button type="button" class="btn btn-warning" onclick="edit('${(user.id)}');"> 修改 </button> </td> <td> <button type="button" class="btn btn-danger" onclick="deleteById('${(user.id)!}')"> 删除 </button> </td> </tr> </#list> </table> </div> </section> <section id="contact" class="content-section"> </section> </div> <script> function edit(id) { var title = "新增商品"; if (id != 0) { title = "编辑商品"; } var ob = { title: "<label>"+title+"</label>", width: "800", height: "400", url: "findById?id="+id }; my.open(ob); } function reload(){ window.location.reload(); } function deleteById(id) { my.confirm('是否确认删除?','是否确认删除?',function(){ $.get("deleteById", {id: id}, function(data) { if (data.success) { layer.msg("删除成功!", {icon:6,time:1000}, function(){ reload(); }) } else { my.alert('删除失败!'); } }); }); } </script> </body> </html>
3.edit.ftl
<!DOCTYPE html> <html lang="en"> <#include "/common/common.ftl" /> <body> <form class="form-horizontal" id="editForm" enctype="multipart/form-data"> <input type="hidden" name="id" value="${(user.id)!}" size=85/> <input type="hidden" name="email" id="email" value="${(user.email)!}" size=85/> <div class="form-group"> <label class="col-sm-2 control-label">商品名称</label> <div class="col-sm-4"> <input type="text" class="form-control" name="nickname" value="${(user.nickname)!}"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">商品规格</label> <div class="col-sm-4"> <input type="text" class="form-control" name="loginpassword" value="${(user.loginpassword)!}"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">温度</label> <div class="col-sm-4"> <select class="form-control" id="selemail"> <#list usersex as sex> <#if sex.sexcode==user.email> <option value="${sex.sexcode}" selected="selected">${sex.sexname}</option> <#else> <option value="${sex.sexcode}">${sex.sexname}</option> </#if> </#list> </select> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <input onclick="submitForm();" class="btn btn-default" value="提交"> </div> </div> </form> <script> $("#selemail").change(function(){ $("#email").val($("#selemail").val()); }); function submitForm() { $.ajax({ type: "POST",//方法类型 dataType: "json",//预期服务器返回的数据类型 url: "/user/editUser", data: $('#editForm').serialize(), success: function (data) { if (data.success) { layer.msg("提交成功!", {icon:6,time:1000}, function(){ parent.reload(); }) } }, error: function () { my.alert("提交失败!"); } }); } </script> </body> </html>