当前位置： 首页 > news >正文

基于springboot+mybatis+vue的项目实战之前端

news 2026/5/28 12:04:45

步骤：

1、项目准备：新建项目，并删除自带demo程序，修改application.properties.

2、使用Apifox准备好json数据的mock地址

3、编写基于vue的静态页面

4、运行

整个的目录结构如下：

0、项目准备

新建项目，并删除自带demo程序，修改application.properties.

必须配置，注意必须修改为自己的数据库名称，以及数据库连接的账号密码。

# 应用服务 WEB 访问端口
server.port=8080
#下面这些内容是为了让MyBatis映射
#指定Mybatis的Mapper文件
mybatis.mapper-locations=classpath:mappers/*xml
#指定Mybatis的实体目录
mybatis.type-aliases-package=com.example.mybatis.entity#数据库连接
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/heima
spring.datasource.username=root
spring.datasource.password=123
#开启mybatis的日志输出
mybatis.configuration.logimpl=org.apache.ibatis.logging.stdout.StdOutImpl
#开启数据库表字段
#实体类属性的驼峰映射
mybatis.configuration.map-underscore-to-camel-case=true

一、使用Apifox准备好json数据的mock地址

1、登录网页版Apifox

Apifox - API 文档、调试、Mock、测试一体化协作平台。拥有接口文档管理、接口调试、Mock、自动化测试等功能，接口开发、测试、联调效率，提升 10 倍。最好用的接口文档管理工具，接口自动化测试工具。Apifox = Postman + Swagger + Mock + JMeter。集接口文档工具、接口Mock工具、接口自动化测试工具、接口调试工具于一体，提升 10 倍研发效率。是最好用的API文档工具，API自动化测试工具，API Mock工具，接口文档管理工具，接口文档生成工具。icon-default.png?t=N7T8https://apifox.com/2、在Apifox中新建项目，新建接口，以及设置地址、请求和响应参数等。

没有特别合适的视频教程，可以参考，从10:53开始看，理解大概的原理。具体操作参照截图所示。Day03-03. 前端工程化_哔哩哔哩_bilibili

根据contrller文件中的访问地址，设置apifox的访问地址。

点击“快捷请求”，会出现测试数据。这个云端地址就是我们前端页面要使用的mock地址。

mock地址的json数据测试成功。

{"code": 1,"msg": "success","data": [{"id": 1,"author": "陶渊明","gender": "1","dynasty": "东晋末至南朝宋初期","title": "诗人和辞赋家","style": "古今隐逸诗人之宗"},{"id": 3,"author": "李商隐","gender": "2","dynasty": "唐代","title": "诗坛鬼才","style": "无"},{"id": 4,"author": "李白","gender": "1","dynasty": "唐代","title": "诗仙","style": "豪放飘逸的诗风和丰富的想象力"},{"id": 5,"author": "李清照","gender": "2","dynasty": "宋代","title": "女词人","style": "婉约风格"},{"id": 6,"author": "杜甫","gender": "1","dynasty": "唐代","title": "诗圣","style": "反映社会现实和人民疾苦"},{"id": 7,"author": "苏轼","gender": "1","dynasty": "北宋","title": "文学家、书画家，诗神","style": "清新豪健的诗风和独特的艺术表现力"},{"id": 9,"author": "王维","gender": "1","dynasty": "11","title": "11","style": "11"},{"id": 12,"author": "王维","gender": "0","dynasty": "唐代11","title": "诗佛11","style": "空灵、寂静11"},{"id": 13,"author": "2221111","gender": "22","dynasty": "22","title": "22","style": "22"},{"id": 14,"author": "王维","gender": "1","dynasty": "唐代","title": "诗佛","style": "空灵、寂静"},{"id": 17,"author": "0000","gender": "1","dynasty": "0000","title": "000","style": "000"},{"id": 18,"author": "热帖","gender": "0","dynasty": "特瑞","title": "特热","style": "天热"},{"id": 19,"author": "热帖","gender": "0","dynasty": "特瑞","title": "特热","style": "天热"},{"id": 20,"author": "热舞","gender": "0","dynasty": "问题","title": "特","style": "他"},{"id": 21,"author": "111","gender": "1","dynasty": "11111","title": "11111","style": "1111"},{"id": 22,"author": "3333","gender": "0","dynasty": "333","title": "33","style": "33"}]
}

二、编写基于vue的静态页面

2.1 拷贝axios和vue的被包含文件

2.2 编写html文件

编写vue页面，将异步请求的地址，编写为刚刚测试成功的mock地址。

这两个包含文件，拷贝进去即可。

peot_list_nofenye.html的代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>诗人信息</title>
</head><script src="./js/vue.js"></script>
<script src="./js/axios-0.18.0.js"></script><body><h1 align="center">诗人信息列表展示</h1><div id="app" align="center"><table border="1" cellspacing="0" width="60%"><tr><th>序号</th><th>姓名</th><th>性别</th><th>朝代</th><th>头衔</th><th>风格</th><th>操作</th></tr><tr align="center" v-for="(peot,index) in tableData"><td>{{peot.id}}</td><td>{{peot.author}}</td><td>{{peot.gender}}</td><td>{{peot.dynasty}}</td><td>{{peot.title}}</td><td>{{peot.style}}</td><td class="text-center"><!--a :href="'peot_edit.html?id='+peot.id"--><!--button type="button" @click="deleteId(peot.id)-->修改删除</td></tr></table>
</div>
</body><script>new Vue({el: "#app",data() {return {tableData: []}},mounted(){//peotfindAllaxios.get('https://mock.apifox.com/m1/3761592-3393136-default/peotfindAll?apifoxApiId=171587808').then(res=>{if(res.data.code){this.tableData = res.data.data;}});},});
</script>
</html>

三、运行

3.1 启动项目

3.2 地址栏访问  http://localhost:8080/peot_list_nofenye.html

相关文章：

基于springboot+mybatis+vue的项目实战之前端

步骤&#xff1a; 1、项目准备&#xff1a;新建项目&#xff0c;并删除自带demo程序&#xff0c;修改application.properties. 2、使用Apifox准备好json数据的mock地址 3、编写基于vue的静态页面 4、运行 整个的目录结构如下&#xff1a; 0、项目准备 新建项目&#xff0…...

编程日记 2024/5/9 15:41:47

开源软件托管平台gogs操作注意事项

文章目录 一、基本说明二、gogs私有化部署三、设置仓库git链接自动生成参数四、关闭新用户注册入口 私有化部署gogs托管平台&#xff0c;即把gogs安装在我们自己的电脑或者云服务器上。 一、基本说明 系统环境&#xff1a;ubuntu 20.4docker安装 二、gogs私有化部署 前期准…...

编程日记 2024/5/9 15:40:46

Linux cmake 初窥【3】

1.开发背景 基于上一篇的基础上&#xff0c;已经实现了多个源文件路径调用&#xff0c;但是没有库的实现 2.开发需求 基于 cmake 的动态库和静态库的调用 3.开发环境 ubuntu 20.04 cmake-3.23.1 4.实现步骤 4.1 准备源码文件 基于上个试验的基础上&#xff0c;增加了动态库…...

编程日记 2024/5/9 15:39:44

centos学习- ps命令详解-进程监控的利器

ps命令详解&#xff1a;Linux进程监控的利器 在Linux系统管理中&#xff0c;进程监控是一个至关重要的环节。ps命令是Linux系统中一个功能强大的进程查看工具&#xff0c;通过它可以获取当前系统中所有进程的快照信息&#xff0c;并深入了解各个进程的详细信息。结合其各种选项…...

编程日记 2024/5/9 15:34:34

C++贪心算法

关于string的系统函数&#xff01; &#xff08;注&#xff1a;以下函数只可用于string&#xff0c;不适用其他类型的变量&#xff09; ① a.size(); 这个系统函数是用来获取这个string变量的长度的&#xff0c;我们通常会新建一个变量来保存他&#xff0c;以便之后使用。 …...

编程日记 2024/5/9 15:33:31

访问网络附加存储：nfs

文章目录 访问网络附加存储一、网络附加存储1.1、存储类型1.3、通过NFS挂载NAS1.4、NFS挂载过程服务端客户端 二、实验&#xff1a;搭建NFS服务端及挂载到nfs客户端服务端客户端测试命令合集服务端客户端 访问网络附加存储 一、网络附加存储 1.1、存储类型 DAS&#xff1a;Di…...

编程日记 2024/5/9 15:30:25

jsp 实验12 servlet

一、实验目的 掌握怎样在JSP中使用javabean 二、实验项目内容&#xff08;实验题目&#xff09; 编写代码&#xff0c;掌握servlet的用法。【参考课本 上机实验1 】 三、源代码以及执行结果截图&#xff1a; 源代碼&#xff1a; inputVertex.jsp&#xff1a; <% page lang…...

编程日记 2024/5/9 15:28:21

「 网络安全常用术语解读 」通用配置枚举CCE详解

1. 背景介绍 NIST提供了安全内容自动化协议&#xff08;Security Content Automation Protocol&#xff0c;SCAP&#xff09;为漏洞描述和评估提供一种通用语言。SCAP组件包括&#xff1a; 通用漏洞披露(Common Vulnerabilities and Exposures, CVE)&#xff1a;提供一个描述…...

编程日记 2024/5/9 15:26:18

一机游领航旅游智慧化浪潮：借助前沿智能设备，革新旅游服务效率，构建高效便捷、生态友好的旅游服务新纪元，开启智慧旅游新时代

目录 一、引言 二、一机游的定义与特点 &#xff08;一&#xff09;一机游的定义 &#xff08;二&#xff09;一机游的特点 三、智能设备在旅游服务中的应用 &#xff08;一&#xff09;旅游前的信息查询与预订支付 &#xff08;二&#xff09;旅游中的导航导览与互动体…...

编程日记 2024/5/9 15:25:16

设计模式学习笔记 - 项目实战三：设计实现一个支持自定义规则的灰度发布组件（实现）

概述 上两篇文章&#xff0c;我们讲解了灰度组件的需求和设计的思路。不管之前讲的限流、幂等框架&#xff0c;还是现在讲的灰度组件&#xff0c;功能性需求都不复杂&#xff0c;相反&#xff0c;非功能性需求是开发的重点。 本章&#xff0c;按照上篇文章的灰度组件的设计思…...

编程日记 2024/5/9 15:23:13

BJFUOJ-C++程序设计-实验2-类与对象

A 评分程序 答案&#xff1a; #include<iostream> #include<cstring>using namespace std;class Score{ private:string name;//记录学生姓名double s[4];//存储4次成绩&#xff0c;s[0]和s[1]存储2次随堂考试&#xff0c;s[2]存储期中考试&#xff0c;s[3]存储期…...

编程日记 2024/5/9 15:22:10

数据库语法复习

总结&#xff1a; DDL&#xff08;数据定义语言&#xff09; CREATE DATABASE&#xff1a;创建一个新的数据库。DROP DATABASE&#xff1a;删除一个数据库。CREATE TABLE&#xff1a;创建一个新的表。DROP TABLE&#xff1a;删除一个表。ALTER TABLE&#xff1a;修改表的结构&a…...

编程日记 2024/5/9 15:20:06

Tomcat、MySQL、Redis最大支持说明

文章目录 一、Tomcat二、MySQL三、Redis1、最大连接数2、TPS、QPS3、key和value最大支持 一、Tomcat 查看SpringBoot内置Tomcat的源码&#xff0c;如下&#xff1a; 主要就是看抽象类AbstractEndpoint&#xff0c;可以看到默认的核心线程数10&#xff0c;最大线程数200 通过…...

编程日记 2024/5/9 15:18:02

MATLAB数值计算工具箱介绍

MATLAB是一个强大的数学计算平台&#xff0c;它提供了广泛的数值计算工具箱&#xff0c;这些工具箱覆盖了从基础的线性代数到复杂的数值分析和优化问题。以下是MATLAB中一些关键工具箱的详细介绍&#xff1a; 1. 线性代数工具箱&#xff08;Linear Algebra Toolbox&#xff09…...

编程日记 2024/5/9 15:17:00

2023 广东省大学生程序设计竞赛(部分题解)

目录 A - Programming Contest B - Base Station Construction C - Trading D - New Houses E - New but Nostalgic Problem I - Path Planning K - Peg Solitaire A - Programming Contest 签到题&#xff1a;直接模拟 直接按照题目意思模拟即可&#xff0c;为了好去…...

编程日记 2024/5/9 15:12:55

ROS2学习——Docker环境下安装于使用（1）

目录 一、简要 二、ROS2和ROS1区别 三、环境搭建与安装 &#xff08;2&#xff09;拉取ubuntu22.04镜像 &#xff08;2&#xff09;安装ROS2 1. 基本设置 2.设置源 3.安装ROS2功能包 4.测试 四、相关指令学习 1.小海龟测试 2.ros2 node等指令 3.rqt 一、简要 随着R…...

编程日记 2024/5/9 15:08:50

数据仓库之Hologres

官方文档 简介 Hologres是阿里云推出的一种云原生的实时分析型数据仓库。它是基于开源项目Apache Hudi&#xff08;Hadoop Upserts Deletes and Incrementals&#xff09;进行扩展和优化的。Hologres提供了高性Hologres是阿里云推出的一种云原生的实时分析型数据仓库。它是基…...

编程日记 2024/5/9 15:04:44

MacOS搭建docker本地私有镜像库

相关环境 macOS: bigsur 11.7.8 docker desktop: 4.22.0 docker engine: 24.0.5 准备工作 本机已经安装好docker desktop&#xff0c;未安装的自行参考其他教程。如果不能翻墙&#xff0c;可以修改本地的镜像地址&#xff0c;可在docker desktop 设置中的docker engine中修…...

编程日记 2024/5/9 15:03:42

Unity Material(材质)、Texture(纹理)、Shader(着色器)简介

文章目录 一、概念二、Rendering Mode三、Main Maps三、参考文章 一、概念 Material(材质)&#xff1a;物体的“色彩”、“纹理”、“光滑度”、“透明度”、“反射率”、“折射率”、“发光度”等&#xff0c;材质的本质是shader的实例(载体)Texture(贴图)&#xff1a;附件到…...

编程日记 2024/5/9 15:02:40

《视觉十四讲》例程运行记录（1）—— 课本源码下载和3rdparty文件夹是空的解决办法

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、第二版十四讲课本源码下载1. 安装git工具 二、Pangolin下载和安装1. 源码下载2. Pangolin的安装(1) 安装依赖项(2) 源码编译安装(2) 测试是否安装成功 二、…...

编程日记 2024/5/9 15:01:39

Stitches项目架构分析：RequireJS模块化设计与Grunt构建流程完全指南 [特殊字符]

Stitches项目架构分析&#xff1a;RequireJS模块化设计与Grunt构建流程完全指南 &#x1f680; 【免费下载链接】stitches HTML5 Sprite Sheet Generator 项目地址: https://gitcode.com/gh_mirrors/sti/stitches Stitches是一个基于HTML5的雪碧图生成器&#xff0c;它采…...

编程新知 2026/5/26 4:46:24

Taotoken的TokenPlan套餐如何实现更经济的模型调用

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 Taotoken的TokenPlan套餐如何实现更经济的模型调用 1. 理解TokenPlan的计费模式 在模型应用开发过程中&#xff0c;成本的可预测性…...

编程新知 2026/5/26 3:15:58

GEMM内核与MHA中的寄存器分配优化策略

1. GEMM内核与寄存器分配基础解析通用矩阵乘法&#xff08;GEMM&#xff09;作为深度学习计算的核心算子&#xff0c;其性能表现直接决定了神经网络训练和推理的效率。在硬件层面&#xff0c;寄存器分配的优劣往往能带来数倍的性能差异。我们以典型的GEMM运算C αAB βC为例&…...

编程新知 2026/5/26 3:05:52

亚马逊卖家公开信息数据提取：反爬攻防战与 Python 批量采集实战

摘要&#xff1a; 批量获取亚马逊&#xff08;Amazon&#xff09;第三方卖家的商业名称、信用代码和注册地址等信息&#xff0c;对于跨境 B2B 拓客和供应链分析具有重要意义。然而&#xff0c;亚马逊的 Cloudflare 盾和 Robot 验证码构成了极高的反爬门槛。本文将深度解析亚马逊…...

编程新知 2026/5/26 2:43:40

6款高效降AI率工具 改写实力出众

写论文时反复检测出的AI痕迹总让你提心吊胆&#xff1f;别担心&#xff0c;这里整理了6款真正好用的论文降AI率工具&#xff0c;堪称应对AI生成特征的“得力助手”。它们能有效识别并消除AI生成的痕迹&#xff0c;改写能力出众&#xff0c;帮你快速降低查重率&#xff0c;顺利通…...

编程新知 2026/5/26 1:04:50

简单学习 --＞ SSE

我们使用AI时&#xff0c;AI对我们说的话不会一次性把全部内容弹出来&#xff0c;而是会像流水一样&#xff0c;一点点吐出来&#xff0c;那么这种丝滑的交互体验&#xff0c;背后的核心就是 SSE (Server-Sent Events)。 什么是 SSE&#xff1f; SSE&#xff08;Server-Sent …...

编程新知 2026/5/25 21:01:15

多模型聚合平台如何助力网站AIB测试与选型

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 多模型聚合平台如何助力网站AIB测试与选型 对于网站产品经理而言&#xff0c;首页文案的生成质量直接影响用户的第一印象和转化率。…...

编程新知 2026/5/25 20:28:07

Arduino ADC自检：用RC电路诊断模数转换器故障

1. 项目概述&#xff1a;当你的体重秤开始“说谎”你有没有遇到过这样的情况&#xff1a;站上家里的电子体重秤&#xff0c;屏幕上跳出来的数字让你瞬间怀疑人生&#xff1f;要么是轻得离谱&#xff0c;要么是重得吓人&#xff0c;更诡异的是&#xff0c;它可能只在两个固定的、…...

编程新知 2026/5/25 18:51:06

对比按量计费与Token Plan套餐的实际成本差异

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 对比按量计费与Token Plan套餐的实际成本差异 在构建和运营基于大模型的应用时&#xff0c;成本控制是一个核心的工程考量。Taotok…...

编程新知 2026/5/25 18:30:37

3步免费解锁Cursor Pro：告别设备限制，永久享受AI编程助手高级功能

3步免费解锁Cursor Pro&#xff1a;告别设备限制&#xff0c;永久享受AI编程助手高级功能 【免费下载链接】cursor-free-vip [Support 0.45]&#xff08;Multi Language 多语言&#xff09;自动注册 Cursor Ai &#xff0c;自动重置机器ID &#xff0c; 免费升级使用Pro 功能: …...

编程新知 2026/5/25 15:01:24