4.4 service实现类
package com.caq.boot.service.Impl; import com.caq.boot.mapper.UserMapper; import com.caq.boot.pojo.User; import com.caq.boot.service.Crud; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import java.util.List; @Service public class CrudImpl implements Crud { @Autowired UserMapper userMapper; @Override public User getAcc(String name, String age) { return userMapper.selectByNameAndAge(name,age); } @Override public void insertAcc(String name, int age, String email) { userMapper.insertUser(name,age,email); } @Override public void updateAcc(String name, int age, String email,int id) { userMapper.updateUser(name, age, email, id); } @Override public User selectById(int id) { return userMapper.SelectById(id); } @Override public void deleteUserById(int id) { userMapper.deleteUser(id); } @Override public List<User> listAllAcc() { return userMapper.selectAll(); } }
4.5 LoginController
控制登录相关的请求
package com.caq.boot.controller; import com.caq.boot.pojo.User; import com.caq.boot.service.Impl.CrudImpl; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestParam; import javax.servlet.http.HttpSession; @Controller public class LoginController { @Autowired CrudImpl crud; //跳转到登录页 @GetMapping({"/", "/login"}) public String login() { return "login"; } //提交表单进行验证 @PostMapping("/login") public String index(@RequestParam("name") String name, @RequestParam("age") String age, HttpSession session, Model model) { User acc = crud.getAcc(name,age); if (acc != null){ session.setAttribute("login",acc); return "redirect:/index"; }else { model.addAttribute("msg","账号或密码错误"); return "login"; } } // 重定向后的判断 @GetMapping("/index") public String index(HttpSession session, Model model){ Object login = session.getAttribute("login"); if (login != null){ return "index"; }else { model.addAttribute("msg","请重新登录"); return "login"; } } }
4.5 RegisterController
package com.caq.boot.controller; import com.caq.boot.service.Impl.CrudImpl; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestParam; import javax.servlet.http.HttpSession; @Controller public class RegisterController { @Autowired CrudImpl crud; @GetMapping("register.html") public String register(){ return "register"; } @PostMapping("register") public String submit(@RequestParam("name") String name, @RequestParam("age") int age, @RequestParam("email") String email ){ crud.insertAcc(name,age,email); return "redirect:/login.html"; } @GetMapping("/login.html") public String login(){ return "login"; } }
4.6 tablesController
表格相关的控制
package com.caq.boot.controller; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.GetMapping; @Controller public class TableController { @GetMapping("/tables.html") public String tables(){ return "tables"; } }
4.7 Crud相关的控制
package com.caq.boot.controller; import com.caq.boot.pojo.User; import com.caq.boot.service.Impl.CrudImpl; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.PathVariable; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestParam; import javax.servlet.http.HttpSession; import java.util.List; @Controller public class CrudController { @Autowired CrudImpl crud; @GetMapping("tables") public String listAll(Model model, HttpSession session) { if (session.getAttribute("login") != null){ List<User> users = crud.listAllAcc(); model.addAttribute("listUsers", users); return "tables"; }else { model.addAttribute("msg","请先登录"); return "login"; } } //新增用户点击的处理 @GetMapping("insert_page") public String insert(){ return "insert_page"; } //新增用户后提交表单的处理 @PostMapping("insert_page") public String insertAcc(@RequestParam("name") String name, @RequestParam("age") int age, @RequestParam("email") String email) { crud.insertAcc(name, age, email); return "redirect:/tables"; } //同上 @GetMapping("update_page/{id}") public String update(@PathVariable("id") int id, Model model){ User user = crud.selectById(id); model.addAttribute("user",user); return "update_page"; } @PostMapping("update_page") public String update(@RequestParam("name") String name, @RequestParam("age") int age, @RequestParam("email") String email, @RequestParam("id") int id ){ crud.updateAcc(name,age,email,id); return "redirect:/tables"; } //删除用户的请求处理 @GetMapping("delete/{id}") public String delete(@PathVariable("id")int id){ crud.deleteUserById(id); return "redirect:/tables"; } }
4.8 前端页面的处理
前端框架
前端页面可以通过网上的UI模板套用
主要是关键的位置，会出现什么样的请求我们处理好这些请求即可
前端页面用到了很多Thymeleaf的知识，下面我会着重写这一块相关的
Layui - 经典开源模块化前端 UI 框架（官方文档镜像站） (layuiweb.com)
Examples · Bootstrap (getbootstrap.com)
能在这里拿很多你想要的样式，表单啊、按钮…等等
个性化提示
我们定位到登录页，可以在这里做一个错误提示
例如：如果没有登录就去访问类路径下的资源，那么提示一些警告。
我们在Welcome Back!下面新建一行，这一行来提示错误信息。通过在controller层的判断，如果没有登录就用Model忘请求域中存入错误信息Model.addAttribute(“msg”,密码或账户错误)
我们存取过后呢，在前端页面怎么显示？通过thymeleaf来获取即可
<p style="color: red" th:text="${msg}"></p> 1 <div class="text-center"> <h1 class="h4 text-gray-900 mb-4">Welcome Back!</h1> <p style="color: red" th:text="${msg}"></p> </div> <form class="user" method="post" th:action="@{/login}"> <div class="form-group"> <input name="name" type="email" class="form-control form-control-user" id="exampleInputEmail" aria-describedby="emailHelp" placeholder="Enter Email Address..."> </div> <div class="form-group"> <input name="age" type="password" class="form-control form-control-user" id="exampleInputPassword" placeholder="Password"> </div> <div class="form-group"> <div class="custom-control custom-checkbox small"> <input type="checkbox" class="custom-control-input" id="customCheck"> <label class="custom-control-label" for="customCheck">Remember Me</label> </div> </div> <input type="submit" class="btn btn-primary btn-user btn-block"> </form>
input标签的说明
input标签要注意加上name属性，不然提交的时候请求域中获取不到输入的值
概念
payload，翻译过来是有效载荷
payload 字面意思“有效载荷，有效负荷，有效载重”。
要解释什么是有效载重，用货运行业打个比方：
比如有一位客户需要支付一笔费用委托货车司机运送一车石油，石油本身的重量、车子的重量、司机的重量等等，这些都属于载重(load)。但是对于该客户来说，他关心的只有石油的重量，所以石油的重量是有效载重(payload，也就是付费的重量)。
所以抽象一下，payload 可以理解为一系列信息中最为关键的信息。
对于程序员来说就是在程序中 起关键作用的代码。
安全方面：
通常在传输数据时，为了使数据传输更可靠，要把原始数据分批传输，并且在每一批数据的头和尾都加上一定的辅助信息，
比如数据量的大小、校验位等，这样就相当于给已经分批的原始数据加一些外套，这些外套起标示作用，使得原始数据不易丢失，
一批数据加上“外套”就形成了传输通道的基本传输单元，叫做数据帧或数据包，而其中的原始数据就是payload
我来模拟一个登录请求，查看一下它提交的信息
表单提交的说明
表单提交是post请求
thymeleaf的循环
th:each 迭代 th:each="user:${listUsers}"
其中listUsers是一个数组，user是遍历的元素
通过这种方式就可以把数据库所有的数据展示到表格中了==(获取到对象后，通过对象的get方法获取对应的属性)==
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0"> <!-- <button class="layui-btn layui-btn-sm" οnclick="window.location.href='insert_page.html'" type="button" >新增</button>--> <a th:href="@{/insert_page}" class="layui-btn layui-btn-sm">新增</a> <thead> <tr> <th>id</th> <th>name</th> <th>age</th> <th>email</th> <th>操作</th> </tr> </thead> <tbody> <tr th:each="user:${listUsers}"> <td th:text="${user.getId()}"></td> <td th:text="${user.getName()}"></td> <td th:text="${user.getAge()}"></td> <td th:text="${user.getEmail()}"></td> <td> <a th:href="@{/update_page/ } + ${user.getId()}" class="layui-btn layui-btn-warm layui-btn-sm">编辑</a> <a th:href="@{/delete/} + ${user.getId()}" class="layui-btn layui-btn-danger layui-btn-sm">删除</a> </td> </tr> </tbody> </table>
编辑和删除按钮的使用
把按钮改成超链接标签更好使用，可以直接选择跳转
刚开始学习的时候面临一个问题，如果能够点击按钮的时候获取到id的值呢？因为我们删除和编辑都是基于id进行的
当然还是thymeleaf的方式，通过路径的拼接即可获得
前面我们通过thymeleaf的遍历把数据库中所有的数据都遍历了出来，这样我们就可以通过调用对象的get方法获取用户的id值了
<td> <a th:href="@{/update_page/ } + ${user.getId()}" class="layui-btn layui-btn-warm layui-btn-sm">编辑</a> <a th:href="@{/delete/} + ${user.getId()}" class="layui-btn layui-btn-danger layui-btn-sm">删除</a> </td>
5.自我总结
后端算刚刚入门了，前期的学习有点仓促。
后面的学习中还是要稳扎稳打，学一段时间后一定要进行复习，然后通过项目进行练习所学的技术。
以上共勉！
