【前端写java接口】前端用java写一个简单的后端接口并和前端交互数据【以前端角度解释,详细注释,谁都看得懂】

news2024/11/19 17:48:37

先声明:

我不是做后端的,我是前端的,然后想要做一个后端的接口平常用来测试测试前端的页面,所以百度加上看看视频学了几天,简单的做一个,可能很多不专业的地方,后端小哥们别太严格哈,有问题可以指出来我也学习一下。

我是只在B站看了java基础语法就没看了,然后直接就去下载了idea,数据库,springboot之类的开搞。中途很多坑是百度出来的。这帖子也算是我阶段的一个小总结。如果前端小伙伴们想要自己写一个简单的接口,建议还是先java基础看一眼不然你是一脸懵逼。可能我解释的你听的懂,但是想要修改就一点都没头绪了。

需要下载的:

jdk(其实就是java,不下载没法用java语言),idea(开发工具,和vscode一样,这里可以直接创建springboot项目),MySql数据库,Navicat(就是操作数据库的可视化平台,很方便,不然数据库的命令行你还要学一遍)

后端三层架构解释:

我用前端好理解的话说,就是controller内的文件代表写给前端的接口文件,给前端访问的,entity内的是实体类也就是映射数据库字段的。mapper也就是接口,用来后端链接数据库查询操作数据的。
合起来流程就是,前端发请求访问controller内的请求,然后后端通过controller内的请求调用mapper内的方法操作数据库拿到数据并对应实体类entity的实体类的格式通过controller内的接口返回给前端数据。

创建springboot项目

直接idea新建项目,这里注意java可能你下载的版本低,就改为8,勾选我选中的那些
在这里插入图片描述
在这里插入图片描述

项目文件格式

解释一下:
创建项目后只需要看src内的就行了,其他基本不用管。和前端项目一样。然后特别解释一下是,Demo2Application这个文件是启动文件,也就是运行文件,你代码写好后可以右键它运行代码,和前端npm run dev一个意思。
也可以idea右上角有个绿色箭头直接点击运行。然后application.properties文件是配置项,类似于前端的config配置。pom.xml文件是你的项目引入的插件等配置,类似前端的package.json文件。
其他的不用管,可能你们会出现很多其他文件,我也有,只不过我给隐藏了。所以看不到,因为都用不到,只需要看我说的这些文件就行了
在这里插入图片描述

代码

Demo2Application

package com.example.demo;

import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
//这里写的是告诉spring框架mapper接口在什么位置,然后找到对应的地方扫描。不写框架会找不到接口
@MapperScan("com.example.demo.mapper")
public class Demo2Application {

    public static void main(String[] args) {
        SpringApplication.run(Demo2Application.class, args);
    }

}

application.properties


#这里输入的是url也就是数据库的地址,这里的test代表你想要访问的数据库是哪一个。对照自己的改动
spring.datasource.url=jdbc:mysql://localhost:3306/test?characterEncoding=utf-8&useSSL=false&serverTimezone=UTC
#这里是数据库的账号密码
spring.datasource.username=root
spring.datasource.password=root
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
#这里是把访问端口改成8001
server.port=8001

entity文件内的HistoryRecord

package com.example.demo.entity;
//历史记录表

import lombok.Data;
//注解Data:这是lombok的一个功能,代表了可以自动帮你生成下面的一大堆的方法。也可以手动写,我这里感觉不知道是不是引入的有问题没有生效,我又手动写了一遍,完整的就是下面的这样。
// 如果引入成功生效,就不需要写下面一大堆的方法,直接一个注解搞定。
@Data
//这里是后端常说的实体类
//实体类:其实用前端好理解的话就是他用来映射数据库字段,需要跟数据库字段一模一样才行。不一样就会出错或者调用不成功。如果不懂这个写法的照抄就行,因为涉及到基础,可以去找个b站视频看看java基础就懂了
public class HistoryRecord {
    private int id;
    private String suject;
    private String time;
    private String name;
    private int content;
    private int video;
    private int knowledge;
    private int simulation;
    private int exam;

    //这里开始下面的一大堆的方法解释:
    //前端的角度理解就是上面是变量完全映射对应了数据库的字段的。然而变量是全局的,开放的,那岂不是所有人都可以改我的数据库了。不安全对吧
    //所以,我用private这个词代表私有变量,这个变量不能访问了,但是我需要给别人一个小的接口不然如何操作数据库呢,所以就有了下面的方法。
    //相当于前端的vuex的用法,变量只能在这个组件内操作,外面如果想改这里的变量,那需要通过我这个组件内的方法调用才能改懂了不。
    //最后:这些方法是固定的,每个实体类都要写一堆这个,可以右键直接生成set和get方法的还有构造函数方法。不懂得百度一下如何生成
    public HistoryRecord() {
    }

    public HistoryRecord(Integer id, String suject, String time, String name, Integer content, Integer video, Integer knowledge, Integer simulation, Integer exam) {
        this.id = id;
        this.suject = suject;
        this.time = time;
        this.name = name;
        this.content = content;
        this.video = video;
        this.knowledge = knowledge;
        this.simulation = simulation;
        this.exam = exam;
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getSuject() {
        return suject;
    }

    public void setSuject(String suject) {
        this.suject = suject;
    }

    public String getTime() {
        return time;
    }

    public void setTime(String time) {
        this.time = time;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Integer getContent() {
        return content;
    }

    public void setContent(Integer content) {
        this.content = content;
    }

    public Integer getVideo() {
        return video;
    }

    public void setVideo(Integer video) {
        this.video = video;
    }

    public Integer getKnowledge() {
        return knowledge;
    }

    public void setKnowledge(Integer knowledge) {
        this.knowledge = knowledge;
    }

    public Integer getSimulation() {
        return simulation;
    }

    public void setSimulation(Integer simulation) {
        this.simulation = simulation;
    }

    public Integer getExam() {
        return exam;
    }

    public void setExam(Integer exam) {
        this.exam = exam;
    }
}

mapper文件内的HistoryRecordMapper

package com.example.demo.mapper;

import com.example.demo.entity.HistoryRecord;

import org.apache.ibatis.annotations.Select;

import java.util.List;

//这里可以理解为后端对数据库的接口,跟前端没啥关系,就是后端用来链接查询数据库的
//public:全局
//interface:接口文件
public interface HistoryRecordMapper {
    //注解:查询数据库的语句,这句话代表查询数据库内名字叫history_record的表
    @Select("select * from history_record")
    //List是数组对象HistoryRecord是实体类。
    //HistoryRecordAll():这个方法代表查询后的数据,不用纠结没有return之类的,反正后端格式是这样的
    //前端理解这句话:注解帮我们查询了数据库对应的数据并返回了数据。我们再下面设定接收的方法名叫HistoryRecordAll,返回的数据类型是数据对象List格式的,并且对应的字段格式是按照<HistoryRecord>内的变量来的。
    List<HistoryRecord> HistoryRecordAll();
}

controller文件内的HistoryRecordController

package com.example.demo.controller;
//这些引入是idea自带的功能,你写下面的代码的时候他会自动生成引入。如果没有生成,把这个复制一下。
//idea的这个功能解释:相当于前端你引入一个组件是import xxx from “@/xxx/xxx”这样才能下面调用,但是这里可以直接在代码中写你调用的方法之类的然后上面自动帮你引入了。懂吧!
import com.example.demo.entity.HistoryRecord;
import com.example.demo.mapper.HistoryRecordMapper;
import org.springframework.web.bind.annotation.*;
import javax.annotation.Resource;
import java.util.List;

//下面两个注解意思是给前端ajax链接的地址。必须写的。@RequestMapping("/HistoryRecord")这个小括号内的就是地址,前端访问的后台接口路由
@RestController
@RequestMapping("/HistoryRecord")
public class HistoryRecordController {
    //下面的注解:从spring容器中把userMapper引入进来,相当于前端把组件js引入后可以直接使用组件内的方法,这里是吧后端链接数据库的接口引入进来,这样可以直接调用数据库的方法找数据返回给前端用
    @Resource
    HistoryRecordMapper HistoryRecordMapper;
    //下面的注解CrossOrigin:意思是解决前端请求跨域问题,当然这种只能解决一个接口,如果你下面再写一个get接口还是要再复制一遍,也可以自行网上找配置跨域的全局写法一次解决所有。
    @CrossOrigin(origins ="*",maxAge = 3600)
    //注解GetMapping:意思是这是一个get请求接口,前端要用get请求不能post之类的。然后get的接口地址是select。配合上面的一级地址合起来就是,/HistoryRecord/select。
    // 后端会给你这个地址就代表这个接口地址,配合基础地址完整的接口地址是比如http://localhost:8080/HistoryRecord/select,这个前端应该能看得懂吧。
    @GetMapping("/select")
    //这个下面的方法解释:
    // List:代表数组对象。
    // <HistoryRecord>:代表你的数据库的实体类,也就是你创建的entity文件夹下的HistoryRecord文件。映射你的数据库字段的。这里不能写错,写错了就对应不上了。返回的数据就不成功或者字段不对或者全是null的情况
    //findHistoryRecord:这就是个方法名没啥好说的
    public List<HistoryRecord> findHistoryRecord(){
        //这里是返回给前端的数据:返回的是调用HistoryRecordMapper文件内的方法HistoryRecordAll。
        //前端角度解释:这里就是我们调用一个引入的js文件内的一个方法,那个方法也有return。所以我们调用方法()这样后可以拿到return出来的值。
        // 而那个return的值就是后端查询了数据库后返回给后端的数据,然后这个前端接口内再把返回给前端。
        return HistoryRecordMapper.HistoryRecordAll();

    }
}

运行看看

这样的没报错就代表成功运行
在这里插入图片描述

然后就可以了,前端接口调用一下测试

这里用postman测试一下接口成功。
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/409146.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【react】什么是fiber?fiber解决了什么问题?从源码角度深入了解fiber运行机制与diff执行

壹 ❀ 引 我在[react] 什么是虚拟dom&#xff1f;虚拟dom比操作原生dom要快吗&#xff1f;虚拟dom是如何转变成真实dom并渲染到页面的?一文中&#xff0c;介绍了虚拟dom的概念&#xff0c;以及react中虚拟dom的使用场景。那么按照之前的约定&#xff0c;本文来聊聊react中另一…

Vue中实现清空数组和清空el-table

场景 要实现的效果是 那么就要用到怎样将这个el-table清空&#xff0c;即在vue中怎样将数组清空。 注&#xff1a; 博客&#xff1a;霸道流氓气质的博客_CSDN博客-C#,架构之路,SpringBoot领域博主 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现 …

JavaScript 教程 (详细 全面)

文章目录JavaScript 是什么&#xff1f;JavaScript 简介1. JavaScript 的历史2. JavaScript 与 ECMAScript 的关系3. 如何运行 JavaScript4. JavaScript 具有以下特点Node.js 是什么&#xff1f;Node.js 简介1. 运行时是什么&#xff1f;2. Node.js 的诞生3. Node.js 的组成4. …

uniapp实现上拉加载更多

目录 一、添加全部 1.在主页面中添加一列 2.改云函数 3.插件市场导入 加载中组件 二、实现上拉加载 1.云函数中可以接收参数 2.获取下拉事件 3.写触发这个下拉干嘛 在 显示加载中的组件里面 一、添加全部 1.在主页面中添加一列 data.unshift({name:全部}) //添加一列 …

尚品汇项目笔记(持续更新中)

项目网络教学视频链接&#xff1a;尚硅谷VUE项目实战&#xff0c;前端项目-尚品汇(大型\重磅)_哔哩哔哩_bilibili 目录 一、 使用vue-cli脚手架去初始化项目 二、项目的其他配置 三、项目路由分析 四、创建Header和Footer非路由组件 五、完成路由组件的搭建 六、利用【路…

uniapp使用iconfonts图标不显示以及颜色问题

在uniapp中使用阿里的iconfont图标遇到了图标无法显示出来的问题&#xff0c; 以及图标显示了但是为一个小正方形的问题&#xff0c; 同时包括图标颜色不显示的问题。 以下方式解决了这三个问题&#xff08;适用class方式引入&#xff09; 1&#xff0c;iconfont图标的引入…

C++实现爬虫,深入理解爬虫原理(最详细,最简单的教程)

前言: 我目前主要学习方向是c,看到网上基本上都是用python写的爬虫,我也试过,确实非常方便,几行代码就能解决,但却就是因为python封装的太好,过于简单,使得很多人包括我最开始的时候,都很难理解爬虫原理.所以就想着能不能用c实现一个简单的爬虫. 最后我成功实现C版爬虫从某图…

vue执行配置选项npm run serve的本质

vue执行配置选项npm run serve运行开发服务器的本质 目录 vue执行配置选项npm run serve运行开发服务器的本质 一、启动开发服务器、调用“工具链”、编译、并运行当前工程 二、npm run serve内部原理分析 三、vue编译运行过程 喜欢的&#xff0c;就收藏并点个赞&#xff…

前端解决跨域问题(9个方法)

什么是跨域&#xff1f; 跨域&#xff0c;是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的&#xff0c;是浏览器对JavaScript实施的安全限制。 这里说明一下&#xff0c;无法跨域是浏览器对于用户安全的考虑&#xff0c;如果自己写个没有同源策略的浏览器&a…

微信小程序篇_01 微信小程序与Java后端接口交互

微信小程序与Java后端接口交互准备创建后端项目创建小程序项目本文主要介绍小程序前后端数据的交互&#xff0c;实践演示。 准备 创建后端项目 我这里就创建一个SpringBoot项目作为演示。 在创建项目中选择Spring Initializr 要勾选SpringWeb框架&#xff0c;当然你也可以…

在html页面以导入的方式使用axios进行异步请求

一、下载axios GitHub地址&#xff1a;https://github.com/axios/axios 注&#xff1a;该页面下面有官方的帮助文档内容。 下载zip包到本地后解压 在axios-1.x\dist\esm下找到axios.min.js文件 这个文件就是后面需要导入的文件 二、导入文件 首先在IDEA中的webapp文件夹下…

使用 Vue3 开发了四个月,回顾 emit 的用法

前言&#xff1a;不知不觉已经从 React 转 Vue3 开发四个多月了&#xff0c;但其实自从刚接触 vue 开始&#xff0c;就对 emit 这个指令似懂非懂。所以在项目中其实我还是很害怕去使用这个指令的&#xff0c;但是在有些场景又不得不使用&#xff0c;就只能看着同事的代码比葫芦…

Vue的环境配置

vue环境配置安装地址&#xff1a;安装 — Vue.js 一、Node官网地址&#xff1a;下载 | Node.js 中文网 查看node版本∶打开命令工具&#xff0c;执行"node -v"命令查看版本号。 二、git-bash命令行工具 git-bash命令行工具官网地址&#xff1a;Git 查看git版本&#…

【Vue】跳转外部链接并携带参数并触发

需求&#xff1a; 当平台运行多个系统时&#xff08;"系统一"&#xff0c;"系统二" 都是不同时间段开发的&#xff09; 可以从"系统一"点击按钮跳转到"系统二"&#xff0c;并且完成 "系统二" 登录操作&#xff0c;直接显示&…

【小程序项目开发 --- 京东商城】 启航篇之uni-app项目搭建

&#x1f935;‍♂️ 个人主页: 计算机魔术师 &#x1f468;‍&#x1f4bb; 作者简介&#xff1a;CSDN内容合伙人&#xff0c;全栈领域优质创作者。 &#x1f310; 推荐一款找工作神器网站: 点击跳转牛客网 |笔试题库|面试经验|实习招聘内推| 还没有账户的小伙伴 速速点击链接…

【VUE3】ElementUI--el-date-picker下拉控件样式修改(高亮显示设置)

ElementUI--el-date-picker下拉控件样式修改一些废话事发背景实现效果实现思路总结和完整代码参考资料一些废话 默默做前端&#xff0c;分享一些自己在项目需求实现中遇到的奇妙问题&#xff08;主要是网上搜索不到解决办法自己解决后的总结方法和解决办法但不全面&#xff0c;…

关于oss使用sts 后台签发临时token前端直传大文件的错误记录

文章目录前言遇到的问题1. NoSuchBucket : The specified bucket does not exist.2. com.aliyuncs.exceptions.ClientException: InvalidParameter.RoleSessionName : The parameter RoleSessionName is wrongly formed.3. 报错&#xff1a;Access to XMLHttpRequest at 上传ur…

servlet交互过程图详解,servlet的常见问题,创建web项目(一)

目录 一.B/S模式和C/S模式 C/S&#xff1a;客户端服务器端结构模式 B/S&#xff1a;浏览器服务器模结构模式 B/S结构图&#xff1a; 二.创建web项目 三.举例说明Servlet执行流程图&#xff1a; 四.Servlet项目中常见的问题 一.当创建web项目时&#xff0c;没有勾选Java …

一篇文章吃透 CSS3 属性: transition过渡 与 transform动画

最近有人私信我 CSS 中的 transition (过渡) 和 transform (动画) 属性&#xff0c;这两个属性的参数确实比较复杂&#xff0c;它们可以做出 CSS 的一些基础动画效果&#xff0c;平移&#xff0c;旋转&#xff0c;倾角......等等&#xff0c;这些也是我早期学习 CSS 的难记易忘…

Java Web 开发详解

一、Web基础 1、Web 概述 Web 在英文中的含义是网状物、网络。在计算机领域&#xff0c;它通常指的是后者&#xff0c;即网络。 像 WWW 是由 3 个单词组成的&#xff0c;即World Wide Web&#xff0c;中文含义是万维网。 他们的出现都是为了让我们在网络的世界中获取资源&a…