SpringBoot+Mybatis后台管理系统（二）-阿里云开发者社区

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.自我总结

后端算刚刚入门了，前期的学习有点仓促。

后面的学习中还是要稳扎稳打，学一段时间后一定要进行复习，然后通过项目进行练习所学的技术。

以上共勉！

SpringBoot+Mybatis后台管理系统（二）

4.4 service实现类

4.5 RegisterController

4.6 tablesController

4.7 Crud相关的控制

4.8 前端页面的处理

5.自我总结

热门文章

最新文章

相关课程

相关电子书

相关实验场景