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

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

news 2026/2/8 15:01:47

步骤：

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工具，接口文档管理工具，接口文档生成工具。https://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的项目实战之前端

步骤：

0、项目准备

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

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

三、运行

相关文章：

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

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

Linux cmake 初窥【3】

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

C++贪心算法

访问网络附加存储：nfs

jsp 实验12 servlet

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

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

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

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

数据库语法复习

Tomcat、MySQL、Redis最大支持说明

MATLAB数值计算工具箱介绍

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

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

数据仓库之Hologres

MacOS搭建docker本地私有镜像库

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

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

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

观成科技：隐蔽隧道工具Ligolo-ng加密流量分析

多云管理“拦路虎”：深入解析网络互联、身份同步与成本可视化的技术复杂度

synchronized 学习

从深圳崛起的“机器之眼”：赴港乐动机器人的万亿赛道赶考路

电脑插入多块移动硬盘后经常出现卡顿和蓝屏

AI编程--插件对比分析：CodeRider、GitHub Copilot及其他

Bean 作用域有哪些？如何答出技术深度？

Chrome 浏览器前端与客户端双向通信实战

Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement