SpringBoot+MybatisPlus+MySQL展示数据到前端页面

1、准备数据(用python爬取某动漫网站下的数据)

SpringBoot+MybatisPlus+MySQL展示数据到前端页面_第1张图片

2、创建springboot项目

SpringBoot+MybatisPlus+MySQL展示数据到前端页面_第2张图片

3、pom.xml


<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0modelVersion>
    <parent>
        <groupId>org.springframework.bootgroupId>
        <artifactId>spring-boot-starter-parentartifactId>
        <version>2.4.5version>
        <relativePath/> 
    parent>
    <groupId>com.zougroupId>
    <artifactId>reptile_showartifactId>
    <version>0.0.1-SNAPSHOTversion>
    <properties>
        <java.version>1.8java.version>
    properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.bootgroupId>
            <artifactId>spring-boot-starterartifactId>
        dependency>

        <dependency>
            <groupId>org.projectlombokgroupId>
            <artifactId>lombokartifactId>
            <optional>trueoptional>
        dependency>
        <dependency>
            <groupId>org.springframework.bootgroupId>
            <artifactId>spring-boot-starter-testartifactId>
            <scope>testscope>
        dependency>

        
        <dependency>
            <groupId>com.baomidougroupId>
            <artifactId>mybatis-plus-boot-starterartifactId>
            <version>3.4.2version>
        dependency>
        <dependency>
            <groupId>mysqlgroupId>
            <artifactId>mysql-connector-javaartifactId>
            <version>6.0.5version>
        dependency>
        <dependency>
            <groupId>com.alibabagroupId>
            <artifactId>druidartifactId>
            <version>1.1.10version>
        dependency>
        <dependency>
            <groupId>junitgroupId>
            <artifactId>junitartifactId>
        dependency>
        <dependency>
            <groupId>org.springframework.bootgroupId>
            <artifactId>spring-boot-testartifactId>
        dependency>
        <dependency>
            <groupId>org.springframeworkgroupId>
            <artifactId>spring-testartifactId>
        dependency>
        <dependency>
            <groupId>org.springframework.bootgroupId>
            <artifactId>spring-boot-starter-webartifactId>
        dependency>

        
        <dependency>
            <groupId>javax.servlet.jspgroupId>
            <artifactId>jsp-apiartifactId>
            <version>2.2version>
        dependency>
        
        <dependency>
            <groupId>jstlgroupId>
            <artifactId>jstlartifactId>
            <version>1.2version>
        dependency>
        
        <dependency>
            <groupId>org.apache.tomcat.embedgroupId>
            <artifactId>tomcat-embed-jasperartifactId>
        dependency>
        
        <dependency>
            <groupId>org.springframework.bootgroupId>
            <artifactId>spring-boot-starter-tomcatartifactId>
        dependency>
    dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.bootgroupId>
                <artifactId>spring-boot-maven-pluginartifactId>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.projectorsgroupId>
                            <artifactId>lombokartifactId>
                        exclude>
                    excludes>
                configuration>
            plugin>
        plugins>
    build>

project>

4、编写实体类

SpringBoot+MybatisPlus+MySQL展示数据到前端页面_第3张图片

package com.zou.entity;

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

/**
 * @author: 邹祥发
 * @date: 2021/5/18 13:10
 */
@Data
@AllArgsConstructor
@NoArgsConstructor
@TableName("comic")
public class Comic {
    @TableId(type = IdType.AUTO)
    private Integer did;
    private String name;
    private String url;
    private String type;
    private String author;
}

5、编写mapper类

SpringBoot+MybatisPlus+MySQL展示数据到前端页面_第4张图片

package com.zou.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.zou.entity.Comic;

/**
 * @author: 邹祥发
 * @date: 2021/5/18 13:21
 */
public interface ComicMapper extends BaseMapper<Comic> {
}

6、编写controller类

SpringBoot+MybatisPlus+MySQL展示数据到前端页面_第5张图片

package com.zou.controller;

import com.zou.entity.Comic;
import com.zou.mapper.ComicMapper;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.annotation.Resource;
import java.util.List;

/**
 * @author: 邹祥发
 * @date: 2021/5/18 13:26
 */
@Controller
public class ComicController {

    @Resource
    ComicMapper comicMapper;

    @RequestMapping("/comic")
    public String showAll(Model m) {
        List<Comic> lists = comicMapper.selectList(null);
        m.addAttribute("comic",lists);
//        System.out.println(lists);

        return "comic";
    }
}

7、配置webapp

右击main,创建一个目录webapp,子目录再创建一个WEB-INF,jsp,comic.jsp,如图

SpringBoot+MybatisPlus+MySQL展示数据到前端页面_第6张图片

新建的webapp目录中心没有蓝点,即没有生效,下面讲解如何使它生效

SpringBoot+MybatisPlus+MySQL展示数据到前端页面_第7张图片

SpringBoot+MybatisPlus+MySQL展示数据到前端页面_第8张图片

8、配置yml

SpringBoot+MybatisPlus+MySQL展示数据到前端页面_第9张图片

server:
  port: 8081
  servlet:
    context-path: /
spring:
  datasource:
    username: root
    password: 123456
    url: jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=utf-8&useSSL=true&serverTimezone=UTC
    type: com.alibaba.druid.pool.DruidDataSource
    driver-class-name: com.mysql.cj.jdbc.Driver
  mvc:
    view:
      suffix: .jsp
      prefix: /WEB-INF/jsp/

9、编写前端页面

SpringBoot+MybatisPlus+MySQL展示数据到前端页面_第10张图片

<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>


    数据展示页面




        
id name url type author
${u.did} ${u.name} ${u.url} ${u.type} ${u.author}

10、SpringBoot主函数

SpringBoot+MybatisPlus+MySQL展示数据到前端页面_第11张图片

@SpringBootApplication(scanBasePackages = {"com.zou.controller"})
@MapperScan("com.zou.mapper")

11、测试

① 运行springboot主函数

SpringBoot+MybatisPlus+MySQL展示数据到前端页面_第12张图片

② 在浏览器中输入http://localhost:8081/comic

SpringBoot+MybatisPlus+MySQL展示数据到前端页面_第13张图片

你可能感兴趣的:(java,spring,boot,mysql)