hualinux 进阶 vue 5.3：用Element实现增删改查（三）生成后端测试数据表

最新推荐文章于 2024-06-05 09:37:42 发布
原创 最新推荐文章于 2024-06-05 09:37:42 发布 · 307 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#hualinux vue #vue 数据表 #vue element数据表

本文详细介绍如何通过MySQL创建数据库及表结构，并演示了如何生成初始数据。此外，还介绍了如何将数据库表结构与Vue应用需求相结合，通过SQL查询生成符合Vue应用所需的字段。

目录

一、mysql数据库生成代码

二、表结构说明

2.1 vue数据库表相关字段及说明

2.2 字段的拼接

前篇讲了相关的nginx+php+mysql环境搭建，这篇开始写相关后端的用于测试数据。

一、mysql数据库生成代码

打开sqlyog，复制下面的sql命令，全选执行即可，我这里执行的是100条数据

/*
SQLyog Ultimate v13.1.1 (64 bit)
MySQL - 8.0.12 : Database - hua
*********************************************************************
*/

/*!40101 SET NAMES utf8 */;

/*!40101 SET SQL_MODE=''*/;

/*!40014 SET @OLD_UNIQUE_CHECKS=@@UNIQUE_CHECKS, UNIQUE_CHECKS=0 */;
/*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */;
/*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */;
/*!40111 SET @OLD_SQL_NOTES=@@SQL_NOTES, SQL_NOTES=0 */;
CREATE DATABASE /*!32312 IF NOT EXISTS*/`hua` /*!40100 DEFAULT CHARACTER SET utf8 */;

USE `hua`;

/*Table structure for table `vue` */

DROP TABLE IF EXISTS `vue`;

CREATE TABLE `vue` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT,
  `picid` varchar(36) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL,
  `savename` varchar(80) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL,
  `lable` varchar(20) DEFAULT NULL,
  `describe` varchar(300) DEFAULT NULL,
  PRIMARY KEY (`id`),
  UNIQUE KEY `picid` (`picid`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

/*Data for the table `vue` */

insert  into `vue`(`id`,`picid`,`savename`,`lable`,`describe`) values 
(1,'001','lz1.jpg','励志1','这是励志1句子!'),
(2,'002','lz2.jpg','励志2','这是励志2句子'),
(3,'003','1.jpg','风景1','这是风景1图片！'),
(4,'004','2.jpg','风景2','这是风景2图片！'),
(5,'005','hua1.jpg','花1','美丽的花朵1'),
(6,'006','hua2.jpg','花2','美丽的花朵2'),
(7,'007','lz1.jpg','励志1','这是励志1句子!'),
(8,'008','lz2.jpg','励志2','这是励志2句子'),
(9,'009','1.jpg','风景1','这是风景1图片！'),
(10,'010','2.jpg','风景2','这是风景2图片！'),
(11,'011','hua1.jpg','花1','美丽的花朵1'),
(12,'012','hua2.jpg','花2','美丽的花朵2'),
(13,'013','lz1.jpg','励志1','这是励志1句子!'),
(14,'014','lz2.jpg','励志2','这是励志2句子'),
(15,'015','1.jpg','风景1','这是风景1图片！'),
(16,'016','2.jpg','风景2','这是风景2图片！'),
(17,'017','hua1.jpg','花1','美丽的花朵1'),
(18,'018','hua2.jpg','花2','美丽的花朵2'),
(19,'019','lz1.jpg','励志1','这是励志1句子!'),
(20,'020','lz2.jpg','励志2','这是励志2句子'),
(21,'021','1.jpg','风景1','这是风景1图片！'),
(22,'022','2.jpg','风景2','这是风景2图片！'),
(23,'023','hua1.jpg','花1','美丽的花朵1'),
(24,'024','hua2.jpg','花2','美丽的花朵2'),
(25,'025','lz1.jpg','励志1','这是励志1句子!'),
(26,'026','lz2.jpg','励志2','这是励志2句子'),
(27,'027','1.jpg','风景1','这是风景1图片！'),
(28,'028','2.jpg','风景2','这是风景2图片！'),
(29,'029','hua1.jpg','花1','美丽的花朵1'),
(30,'030','hua2.jpg','花2','美丽的花朵2'),
(31,'031','lz1.jpg','励志1','这是励志1句子!'),
(32,'032','lz2.jpg','励志2','这是励志2句子'),
(33,'033','1.jpg','风景1','这是风景1图片！'),
(34,'034','2.jpg','风景2','这是风景2图片！'),
(35,'035','hua1.jpg','花1','美丽的花朵1'),
(36,'036','hua2.jpg','花2','美丽的花朵2'),
(37,'037','lz1.jpg','励志1','这是励志1句子!'),
(38,'038','lz2.jpg','励志2','这是励志2句子'),
(39,'039','1.jpg','风景1','这是风景1图片！'),
(40,'040','2.jpg','风景2','这是风景2图片！'),
(41,'041','hua1.jpg','花1','美丽的花朵1'),
(42,'042','hua2.jpg','花2','美丽的花朵2'),
(43,'043','lz1.jpg','励志1','这是励志1句子!'),
(44,'044','lz2.jpg','励志2','这是励志2句子'),
(45,'045','1.jpg','风景1','这是风景1图片！'),
(46,'046','2.jpg','风景2','这是风景2图片！'),
(47,'047','hua1.jpg','花1','美丽的花朵1'),
(48,'048','hua2.jpg','花2','美丽的花朵2'),
(49,'049','lz1.jpg','励志1','这是励志1句子!'),
(50,'050','lz2.jpg','励志2','这是励志2句子'),
(51,'051','1.jpg','风景1','这是风景1图片！'),
(52,'052','2.jpg','风景2','这是风景2图片！'),
(53,'053','hua1.jpg','花1','美丽的花朵1'),
(54,'054','hua2.jpg','花2','美丽的花朵2'),
(55,'055','lz1.jpg','励志1','这是励志1句子!'),
(56,'056','lz2.jpg','励志2','这是励志2句子'),
(57,'057','1.jpg','风景1','这是风景1图片！'),
(58,'058','2.jpg','风景2','这是风景2图片！'),
(59,'059','hua1.jpg','花1','美丽的花朵1'),
(60,'060','hua2.jpg','花2','美丽的花朵2'),
(61,'061','lz1.jpg','励志1','这是励志1句子!'),
(62,'062','lz2.jpg','励志2','这是励志2句子'),
(63,'063','1.jpg','风景1','这是风景1图片！'),
(64,'064','2.jpg','风景2','这是风景2图片！'),
(65,'065','hua1.jpg','花1','美丽的花朵1'),
(66,'066','hua2.jpg','花2','美丽的花朵2'),
(67,'067','lz1.jpg','励志1','这是励志1句子!'),
(68,'068','lz2.jpg','励志2','这是励志2句子'),
(69,'069','1.jpg','风景1','这是风景1图片！'),
(70,'070','2.jpg','风景2','这是风景2图片！'),
(71,'071','hua1.jpg','花1','美丽的花朵1'),
(72,'072','hua2.jpg','花2','美丽的花朵2'),
(73,'073','lz1.jpg','励志1','这是励志1句子!'),
(74,'074','lz2.jpg','励志2','这是励志2句子'),
(75,'075','1.jpg','风景1','这是风景1图片！'),
(76,'076','2.jpg','风景2','这是风景2图片！'),
(77,'077','hua1.jpg','花1','美丽的花朵1'),
(78,'078','hua2.jpg','花2','美丽的花朵2'),
(79,'079','lz1.jpg','励志1','这是励志1句子!'),
(80,'080','lz2.jpg','励志2','这是励志2句子'),
(81,'081','1.jpg','风景1','这是风景1图片！'),
(82,'082','2.jpg','风景2','这是风景2图片！'),
(83,'083','hua1.jpg','花1','美丽的花朵1'),
(84,'084','hua2.jpg','花2','美丽的花朵2'),
(85,'085','lz1.jpg','励志1','这是励志1句子!'),
(86,'086','lz2.jpg','励志2','这是励志2句子'),
(87,'087','1.jpg','风景1','这是风景1图片！'),
(88,'088','2.jpg','风景2','这是风景2图片！'),
(89,'089','hua1.jpg','花1','美丽的花朵1'),
(90,'090','hua2.jpg','花2','美丽的花朵2'),
(91,'091','lz1.jpg','励志1','这是励志1句子!'),
(92,'092','lz2.jpg','励志2','这是励志2句子'),
(93,'093','1.jpg','风景1','这是风景1图片！'),
(94,'094','2.jpg','风景2','这是风景2图片！'),
(95,'095','hua1.jpg','花1','美丽的花朵1'),
(96,'096','hua2.jpg','花2','美丽的花朵2'),
(97,'097','lz1.jpg','励志1','这是励志1句子!'),
(98,'098','lz2.jpg','励志2','这是励志2句子'),
(99,'099','1.jpg','风景1','这是风景1图片！'),
(100,'100','2.jpg','风景2','这是风景2图片！');

/*!40101 SET SQL_MODE=@OLD_SQL_MODE */;
/*!40014 SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS */;
/*!40014 SET UNIQUE_CHECKS=@OLD_UNIQUE_CHECKS */;
/*!40111 SET SQL_NOTES=@OLD_SQL_NOTES */;

在左边侧栏空白处按F5刷新，则可以查看到表生产

可以打开表看一下是否有数据产生。

再看一下表结构

二、表结构说明

2.1 vue数据库表相关字段及说明

这个mysql表vue有5个字段，作用如下：

id：自增的，不用管。

picid：图片的id，这个是由php代码生成的uuid放进去的，不用管。这里为了方便我使用的是3位数的字符串，并标明它是唯一，不可重复。

savename：表示图片存放的路径，默认是放在thinkphp项目vueapi的public\pic下

lable：表示图片的标签

describe：图片的说明

上面几个字段分别对应着《用Element实现增删改查（一）需求及分析》 图片中的

表字段vue中字段说明
picidpicid图片id
没有picurl

pic连接地址，由表的“图片IP+savename”组成

savename没变成picurl部分
lablelable图片名
describedescribe说明
没有isSet是否设置，这个是是手写生成的

2.2 字段的拼接

从上面看到了vue表中的字段并不是和vue一一对应的，为什么会这样，是因为没有必要写在表中。如果写在表中会怎样，我们修改一下表结构，添加2个字段，如下图所示：

再打开表看一下，我在picpath填写http://192.168.3.200/pic/ 路由，要用sql写一下并执行一下

UPDATE vue SET picpath='http://192.168.3.200/pic/';
SELECT * FROM vue;

从上面发现isSet和picpath的值都是相关的，且固定不变的，如果存在mysql中真的是浪费空间。所以可以使用拼接的方式。改写成select语句为：

SELECT picid, CONCAT('http://192.168.3.200/pic/',savename) AS picurl,lable,`describe`,0 AS isSet FROM vue;

这样是不是得到vue对应的字段，而且不用把同样的数据存在mysql中了。

基于SpringBoot 3 + Vue 3 + Element Plus构建现代化高校毕业生信息管理系统：全栈设计与实现
2201_76125393的博客
09-29 243
一个高效、稳定、安全的信息管理系统不仅能极大减轻管理人员的工作负担，还能为学校决策提供准确的数据支持，同时为毕业生和用人单位提供便捷的服务。<el-input v-model="loginForm.password" type="password" placeholder="密码" size="large" show-password><el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
iOS测试之接口测试总结
甫式人生
08-07 4478
本文主要分为两个部分：　　第一部分：主要从问题出发，引入接口测试的相关内容并与前端测试进行简单对比，总结两者之前的区别与联系。但该部分只交代了怎么做和如何做？并没有解释为什么要做？　　第二部分：主要介绍为什么要做接口测试，并简单总结接口持续集成和接口质量评估相关内容。第一部分： 首先，在做接口测试的过程中，经常有后端开发会问： 1.后端接口都测试什么？怎么测的？ 2.后端接口测试一遍 ，前端也测试
018-Vue项目生成模拟数据
赳赳万里鲲
07-24 302
开发过程中，与后端未搭建好联调环境时，没有数据。 此时前端无法进行测试，开发起来就比较头疼了。 使用mockjs，拦截Ajax请求，并且随机生成和后端协商好的数据格式， 这样即使服务端环境无法使用，前端也可以愉快的coding了。 接下来聊聊它的使用方法吧： 一、node环境 1、在项目中初始化mock.js npm i mockjs 2、创建mock数据文件 // 引入Mock对象 import...
2.Vue中使用mock模拟数据的生成
qq_46016217的博客
01-18 702
Vue中使用mock模拟数据的生成
hualinux 进阶 vue 5.4：用Element实现增删改查（四）后端thinkphp代码编写
hualinux（阿华的linux）
04-17 904
前篇写的vue后端对应的mysql数据表，这篇继续讲后端thinkphp代码。 需要的知识点：thinkphp，推荐《ThinkPHP6.0完全开发手册》 thinkphp使用的是mvc框架，因为前后端分离，我这里只使用了mc，并没有使用它的模板视图v，现在前后端分离是主流，所以后端的话一般不用学v。 一、需要修改的thinkphp目录文件 红色框的需要添加或修改的，其它不动 二、TP数据库的配置 2.1 配置数据库（config/database.php） 前篇说有my...
vue3-antd-admin:基于vue-clivite + vue3.0 + ant-design-vue2.0 +打字稿钩子的基础后台管理系统模板RBAC的权限系统，JSON架构动态表单，动态表格，漂亮的锁屏界面
03-11
vue3-antd 基于vue-cli / vite + vue3.0 + antd2.0 + ts4.0的后台管理系统模板 账号：admin，密码：123456 系统模块数据是从先前获取来的真实数据，路由也是从内部动态获取的，而只是通过内网穿透提供访问的，难免发生访问失败的情况所以如果进入页面时提示网络错误，则需要再次刷新页面请求接口 使用了Vue3.0全家桶，ant-design-vue2.0和typescript4.0，实践vue3.0的新特性以及玩法，不得不说vue3.0的组成API比例于vue2.0的Options API灵活很多，让我们可以灵活地组合组件逻辑，我们可以很轻松的使用hooks的形式去代替以前mixins等的写法。 功能，组件的封装 动态表格（扩展了伸缩列功能，以及使用JSON schema配置生成表格）// TODO后续有待加强及完善 动态表单（满足基本的需求）/
vue3-json-schema-form:基于jsonschema的vue3表单生成器
05-23
vue3-json-schema-form a form generator based on jsonschema for vue3 Project setup npm install npm run serve npm run build npm run test:unit npm run lint API 设计 <JsonSchemaForm schema={schema} value={value} xss=removed locale={locale} contextRef={someRef} uiSchema={uiSchema} /> schema json schema 对象，用来定义数据，同时也是我们定义表单的依据 value 表单的数据结果，你可以从外部改变这个 value，在表单被编辑的时候，会通过onChange透出
elementui的介绍和使用 以及使用elementui完成增删改查和登录
热门推荐
wk3510的博客
09-19 1万+
elementui的介绍和使用 以及使用elementui完成增删改查和登录
前端开发环境：Vue、Element Plus、Axios
hitmengfanchao的博客
06-05 3886
本文介绍了前端开发环境的搭建，包括：Vue项目创建、在Vue项目中引入Element-Plus和Axios。通过一个简单的登录程序说明如何开发基于Vue的前端项目。
Element-ui进阶事件处理：多选组件中的4个高级技巧
本文首先概述了多选组件的基本概念，接着深入探讨了其基础和高级事件处理技巧，如数据筛选、事件流控制、自定义事件的使用、事件委托及调试技巧。此外，本文还涉及了多选组件在实际应用中的场景，包括与表单验证的...
【爱威A9进阶调试】：掌握自定义脚本与自动化测试
随着软件开发和测试需求的不断增加，自定义脚本与自动化测试已成为提高效率和质量的关键技术。本文首先概述了自定义脚本与自动化测试的基本概念，然后深入探讨了脚本语言的选择、脚本逻辑设计原则以及错误处理机制。...
vue-form-generator：Vue.js的基于模式的表单生成器组件
02-06
Vue形式生成器 Vue.js的基于架构的表单生成器组件。 演示版 产品特点 基于模式的React形式 多对象编辑 21种字段类型 内置验证器 核心和完整捆绑包（压缩后分别为41kb和50kb） 自举友好模板 可定制的样式 可以使用自定义字段轻松扩展 ...等等 文献资料 依存关系 vue-form-generator在内部使用和 。 尽管内置字段不需要外部依赖关系，但可选字段可能需要其他库。 这些依赖关系分为两个阵营：jQuery或Vanilla。 您可以在两种风格中找到几乎相同的功能。 最后，您可以选择是否依赖jQuery。 您可以在每个特定组件下的官方找到有关依赖项的详细信息。
【前端测试进阶】：单元测试Vue组件中的WangEditor实战
![【前端测试进阶】：单元测试Vue组件中的WangEditor...首先介绍Vue组件测试的基础知识，随后详细探讨了如何选择和配置测试框架，搭建测试环境，并撰写基础的Vue组件测试案例。接着，文章专注于集成WangEditor组件到
Vue框架使用Mock随机生成数据详细方法
m0_62956518的博客
04-22 4672
Vue框架使用Mock随机生成数据详细方法
vue-cli生成项目下webpack运行测试数据
gongzhonghua的博客
01-16 687
最近遇到一个这样的问题，最新版本的vue-cli生成的build文件夹下没有dev-server.js文件。压根不知道怎样运行测试数据，后来找到了解决方案，在文件webpack.dev.conf.js中增加如下代码，如下图： 1.在 const portfinder = require('portfinder')这行后面加下面代码 const express = require('expr
php基于element实现增删改查
qq_36596869的博客
07-29 459
跨域问题解决，在index.php中添加如下代码 header("Access-Control-Allow-Origin:*"); header("Access-Control-Allow-Methods:GET, POST, OPTIONS, DELETE"); header("Access-Control-Allow-Headers:DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Con
hualinux 进阶 vue 3.3：静态化站及相关vue静态化工具介绍
hualinux（阿华的linux）
04-14 2703
目录 一、为什么要静态化优缺点 1.1 优点 1.1.1 提高速度 1.1.2 搜索引擎的收录 1.1.3 安全性 1.1.4 网站稳定性 1.1.5 缓存加速 1.2 缺点 二、vue相关的静态化工具 2.1Nuxt.js——34000 星和 280+贡献者 2.1.1 介绍（有中文） 2.1.2 优点 2.1.3 缺点 2.2VuePress——针对以内容为中心的静态站点优化 2.2.1 介绍（有中文） 2.2.2 优点 2.2.3 缺点 2.3Gridso...
hualinux 进阶 vue 4.1：axios跨源错误CORS解决
hualinux（阿华的linux）
04-14 1735
目录 一、使用php编写返回json格式的数据 1.1 安装phpStudy一键盘集成工具 1.2 编写php代码 1.3 使用axios访问 1.3.1 axios相关vue代码 1.3.2 报cros错误 二、 cros解决方法 2.1解决方法一，充许同源（网站代码上修改） 2.2解决方法二，nginx中充许同源 2.3解决方法三，在vue中添加（推荐） 2.3.1.创建webpack配置文件vue.config.js 2.3.2修改vue文件 上一篇《hualinu...
hualinux 进阶 vue 5.0：vue UI组件介绍及Element UI
hualinux（阿华的linux）
04-14 1161
目录 一、vue流行的UI介绍 1.1 un-app所有前端框架 1.2 pc浏览器 1.3小程序mpvue 1.4 移动端 1.5桌面端（客户端）Electron 二、关于饿了么pc框架element UI vue作为前端软件，前端的UI（界面）我们也挻关心的。也有很多流行的第三方vue界面。有PC、移动端、小程序、桌面端等 一、vue流行的UI介绍 vue作为前端软件，前端的UI（界面）我们也挻关心的。也有很多流行的第三方vue界面。有PC、移动端、小程序、桌面端等，在...
摘要 I Abstract II 1 引言 1 1.1 选题背景及研究意义 1 1.2 国内外文献综述 1 2 相关技术分析 3 2.1 SpringBoot框架 3 2.2 Vue.js框架 3 2.3 MySQL数据库 4 2.4 B/S架构 5 3 系统分析 5 3.1 可行性分析 5 3.2 非功能性需求分析 6 3.3 功能性需求分析 7 4 系统设计 9 4.1 功能模块 9 4.2 数据库逻辑结构设计 9 4.3 系统数据表设计 11 5 系统实现 18 5.1 学员模块实现 18 5.2 教师模块实现 21 5.3 管理员模块实现 24 6 系统测试 29 6.1 测试环境 29 6.2 测试方法 29 6.3 测试用例 29 7 结论 33 参考文献 34 致谢 35这是我的论文大纲，帮我纠正一下整体是否正确，如何进行修改，
最新发布
03-13
好的，用户需要关于论文大纲的反馈和改进建议，特别是涉及SpringBoot、Vue.js、MySQL和B/S架构的系统分析与设计。首先，我需要回顾用户提供的引用内容，看看有没有相关的系统设计结构或模块可以作为参考。 用户引用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值