Springboot+MySQL 实现从数据库获取数据展示到前端

1.运行效果效果图如下：2.创建数据库表数据库名为"springboot",数据库表名为"user"，数据库表里面放了5条数据，字段分别为：“id”，“name”，“age”，“email”。3.新建SpringBoot项目1、选择Spring Initial...

Space Tripper

8168人浏览 · 2021-07-04 13:10:31

Space Tripper · 2021-07-04 13:10:31 发布

1.运行效果

效果图如下：
在这里插入图片描述

2.创建数据库表

数据库名为"springboot",数据库表名为"user"，数据库表里面放了5条数据，字段分别为：“id”，“name”，“age”，“email”。
在这里插入图片描述

3.新建SpringBoot项目

1、选择Spring Initializr，在本地路径下选择对应的SDK文件，选择默认的Service URL，选择Next。
在这里插入图片描述
2、把Version改为“1.0.0-SNAPSHOT”，选择Next。

3、这里需要导入3个依赖，选择Web-Spring Web，选择SQL-MySQL Driver，选择Developer Tool-Lombok。

4、选择存放路径。
在这里插入图片描述
5、创建项目时可能会出现这种error。

5.1、打开settings，找到http Proxy，选择Auto-detect proxy settings，选择Check connection，输入“https://start.aliyun.com/”。

在这里插入图片描述

5.2、按之前的步骤把项目重新创建一次，选择“Custom”输入“https://start.aliyun.com/”，其他的步骤不变。

在这里插入图片描述
6.创建好的项目是这样子的。

7.右下角的Maven提示选择“Enable Auto-Import”，pom有添加依赖时自动导入。

4.运行SpringBoot

1、先写个小页面让SpringBoot跑起来，在demo包下新建“controller”包，“controller”包下新建“HelloController”类。
2、在“HelloController”方法上添加注解“@RestController”，意思是返回json数据，“@Controller”是返回页面。
3、写个Hello方法，String返回值类型，在方法上添加”@RequestMapping“返回json数据，@RequestMapping("/hello")括号里面的内容是等下要访问的路径名，方法里面直接return ”Hello“。
4、默认是8080端口。
在这里插入图片描述

5.配置application.properties

在这里插入图片描述

application.properties 代码如下：

spring.mvc.view.prefix=/WEB-INF/jsp/
spring.mvc.view.suffix=.jsp
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/springboot?characterEncoding=UTF-8&serverTimezone=UTC
spring.datasource.username=root
spring.datasource.password=root
spring.datasource.driver-class-name=com.mysql.jdbc.Driver

6.导入依赖

除了之前导入的”依赖还需要下面这些依赖。

		<!--内置tomcat对Jsp支持的依赖，用于编译Jsp-->
        <dependency>
            <groupId>org.apache.tomcat.embed</groupId>
            <artifactId>tomcat-embed-jasper</artifactId>
            <scope>provided</scope>
        </dependency>
        <!-- mybatis -->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>1.1.1</version>
        </dependency>
        <!--引入jsp相关-->
        <dependency>
            <groupId>javax.servlet.jsp</groupId>
            <artifactId>jsp-api</artifactId>
            <version>2.2</version>
        </dependency>
        <!--引入Servlet-->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>3.1.0</version>
        </dependency>
        <!--引入jstl-->
        <dependency>
            <groupId>jstl</groupId>
            <artifactId>jstl</artifactId>
            <version>1.2</version>
        </dependency>

 
 
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

7.开始写项目

一般的顺序是：pojo → Mapper/Dao → Controller → Service
Entity：实体层，数据库在项目中的类。pojo 实体类 User.java
Dao：持久层，主要与数据库交互。Mapper UserMapper(接口，需要写实现类)
Service层：业务层控制业务。（接口，需要写实现类）
Controller层：控制层控制业务逻辑。 UserController.java

1、在demo包下新建pojo包，pojo包下新建User类。
在这里插入图片描述
2、User.java 中添加数据库表user中的四个字段，”id、name、age、email“和getter和setter方法。
User.java

package com.example.demo.pojo;

public class User {
private Integer id;
private String name;
private Integer age;
private String email;

<span class="token keyword">public</span> Integer <span class="token function">getId</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    <span class="token keyword">return</span> id<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">setId</span><span class="token punctuation">(</span>Integer id<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>id <span class="token operator">=</span> id<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">public</span> String <span class="token function">getName</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    <span class="token keyword">return</span> name<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">setName</span><span class="token punctuation">(</span>String name<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> name<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">public</span> Integer <span class="token function">getAge</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    <span class="token keyword">return</span> age<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">setAge</span><span class="token punctuation">(</span>Integer age<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>age <span class="token operator">=</span> age<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">public</span> String <span class="token function">getEmail</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    <span class="token keyword">return</span> email<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">setEmail</span><span class="token punctuation">(</span>String email<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>email <span class="token operator">=</span> email<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

}

8.编写Mapper

1、demo包下创建mapper包，mapper包下创建UserMapper接口。
在这里插入图片描述
2、UserMapper 是接口，@Mapper为了把mapper这个DAO交给Spring管理，方法里面的内容是从user表中查询所有的数据。

UserMapper.java

package com.example.demo.mapper;

import com.example.demo.pojo.User;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;

import java.util.List;

@Mapper
public interface UserMapper {

<span class="token annotation punctuation">@Select</span><span class="token punctuation">(</span><span class="token string">"select * from user"</span><span class="token punctuation">)</span>
List<span class="token generics function"><span class="token punctuation">&lt;</span>User<span class="token punctuation">&gt;</span></span> <span class="token function">findAll</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

}

9.编写Controller

1、在controller包下新建UserController类。
在这里插入图片描述

2、@Controller 是返回页面，需要调用UserMapper，所以用@AutoWired
自动注入UserMapper，return ”user“ 返回的是一个页面，所以需要创建一个
user.jsp。

UserController.java

package com.example.demo.controller;

import com.example.demo.mapper.UserMapper;
import com.example.demo.pojo.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.List;

@Controller
public class UserControll {
@Autowired
UserMapper userMapper;

<span class="token annotation punctuation">@RequestMapping</span><span class="token punctuation">(</span><span class="token string">"/user"</span><span class="token punctuation">)</span>
<span class="token keyword">public</span> String <span class="token function">userMapper</span><span class="token punctuation">(</span>Model m<span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
    List<span class="token generics function"><span class="token punctuation">&lt;</span>User<span class="token punctuation">&gt;</span></span> users <span class="token operator">=</span> userMapper<span class="token punctuation">.</span><span class="token function">findAll</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    m<span class="token punctuation">.</span><span class="token function">addAttribute</span><span class="token punctuation">(</span><span class="token string">"user"</span><span class="token punctuation">,</span>users<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token string">"user"</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

}

10. 创建前端页面

1、在src/main下创建webapp文件夹，webapp文件夹下创建WEB-INF文件夹，WEB-INF文件夹下创建jsp文件夹。
src
-main
–webapp
—WEB-INF
----jsp

在这里插入图片描述
2、打开file中的Project Stucture。

3、选择Modules，选择项目demo，选择Web，选择右边的+号，添加webapp的路径。

4、webapp就被标记成web文件夹，在jsp文件夹下新建user.jsp文件。

如果jsp页面报错的话，可以看下pom文件的依赖是否都导入成功。

user.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>

<%@ taglib uri=“http://java.sun.com/jsp/jstl/core” prefix=“c”%>

<table align=‘center’ border=‘1’ cellspacing=‘0’>
<tr>
<td>id</td>
<td>name</td>
<td>age</td>
<td>email</td>
</tr>
<c:forEach items=" $KaTeX parse error: Expected 'EOF', got '&' at position 31: \dots varStatus="st"&̲gt; &lt\dots$ {u.id}</td>
<td> $KaTeX parse error: Expected 'EOF', got '&' at position 9: {u.name}&̲lt;/td> \dots$ {u.age}</td>
<td>${u.email}</td>
</tr>
</c:forEach>
</table>

11.运行效果

在这里插入图片描述

腾讯云开发者社区

腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。

更多推荐

腾讯云建官网：一个完整的自助建站的过程，不用代码，2小时就可以制作自己的网站

腾讯云开发者社区

数据库实验二数据库的简单查询和连接查询实验

– l）用Transact-SQL语句表示下列操作．在学生选课库中实现其数据查询操作．– ①求数学系学生的学号和姓名。select sno,sname from student where sdept='MA';– ②求选修了课程的学生学号。select distinct sno from sc;– ③求选修C1课程的学生学号和成绩，并要求对查询结果按成绩降序排列，如果成绩相同则按学号升序排列。s

腾讯云开发者社区

金仓数据库KingbaseES用户管理--如何启用/禁用角色

关键字：KingbaseES、数据库、角色、启用/禁用内容正文：1.问题：如何在KingbaseES数据库中启用/禁用角色？2.什么角色的启用/禁用？KingbaseES数据库中启用/禁用角色功能是指在不删除角色的前提下，在本地库内使角色失效,使失效的角色再生效。3.KingbaseES角色的启用/禁用KingbaseES通过插件的方式来启用/禁用角色。这种方式更为灵活，当数据库的实用场景需要该功