Mybatis-Plus:快速入門+thymeleaf前端渲染

前言:Mybatis-Plus是Mybatis的增強插件,具有許多強大功能:如內置代碼生成器,分頁插件,CRUD操作等,專爲偷懶而生官網鏈接

~demo效果:基於官網的快速入門,體驗Mybatis-plus的便捷,結合SpringBoot渲染前端展示查詢效果

1.項目所需依賴

 <dependencies>
        <!--數據庫連接-->
        <!--連接數據庫 默認數據源-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>

        <!--mybatis-plus-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.0.5</version>
        </dependency>

        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.thymeleaf.extras</groupId>
            <artifactId>thymeleaf-extras-java8time</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

2.配置數據源+連接數據庫

  • application.yml
spring:
  datasource:
    url: jdbc:mysql://localhost:3306/mybatis_plus?serverTimezone=UTC&useUnicode=true&characterEncoding=utf-8
    username: root
    password: 123456
    driver-class-name: com.mysql.cj.jdbc.Driver
  • sql代碼
SET FOREIGN_KEY_CHECKS=0;

-- ----------------------------
-- Table structure for user
-- ----------------------------
DROP TABLE IF EXISTS `user`;
CREATE TABLE `user` (
  `id` bigint(20) NOT NULL COMMENT '主鍵ID',
  `name` varchar(30) DEFAULT NULL COMMENT '姓名',
  `age` int(11) DEFAULT NULL COMMENT '年齡',
  `email` varchar(50) DEFAULT NULL COMMENT '郵箱',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

-- ----------------------------
-- Records of user
-- ----------------------------
INSERT INTO `user` VALUES ('1', 'Jone', '18', '[email protected]');
INSERT INTO `user` VALUES ('2', 'Jack', '20', '[email protected]');
INSERT INTO `user` VALUES ('3', 'Tom', '28', '[email protected]');
INSERT INTO `user` VALUES ('4', 'Sandy', '21', '[email protected]');
INSERT INTO `user` VALUES ('5', 'Billie', '24', '[email protected]');

3.編寫Mapper繼承自BaseMapper

@Mapper
@Repository
public interface UserMapper extends BaseMapper<User> {
}

~ 測試

@SpringBootTest
class MybatisPlusSpringbootApplicationTests {
    @Autowired
    UserMapper userMapper;
    @Test
    void contextLoads() {
        // 參數是一個條件構造器 null 爲查詢表中全部數據
        List<User> users = userMapper.selectList(null);
        // 語法糖
        users.forEach(System.out::println);
    }
}

4.編寫前端控制器

@Controller
public class UserController {

    @Autowired
    UserMapper userMapper;

    /**
     * 查詢所有用戶
     * @return
     */
    @RequestMapping("/user/list")
    public String userList(Model model){
        List<User> users = userMapper.selectList(null);
        model.addAttribute("user_lists", users);
        return "user/list";
    }
}
@Controller
public class RouteController {

    // 首頁
    @RequestMapping({"/","/index"})
    public String index(){
        return "dashboard";
    }
}

5.部分前端頁面接收參數

        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
            <h2>後臺管理員列表</h2>
            <div class="table-responsive">
                <table class="table table-striped table-sm">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>姓名</th>
                        <th>年齡</th>
                        <th>郵箱</th>
                        <th>操作</th>
                    </tr>
                    </thead>

                    <!--數據 遍歷 集合-->
                    <tbody>
                    <tr th:each="user:${user_lists}">
                        <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 class="btn btn-sm btn-warning" th:href="@{/user/toupdate(id=${user.getId()})}">修改</a>
                            <span> | </span>
                            <a class="btn btn-sm btn-danger" th:href="@{/user/del(id=${user.getId()})}">刪除</a>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </main>

~效果


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章