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

最新推荐文章于 2023-12-04 23:08:44 发布
最新推荐文章于 2023-12-04 23:08:44 发布
阅读量246 收藏 1
点赞数
分类专栏： 进阶篇3 vue.js专业前端入门 文章标签： hualinux vue vue 数据表 vue element数据表
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hualinux/article/details/115793511
版权

目录

一、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中了。

hualinux
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端网页技术之 Vue进阶
cgblpx的博客
08-03 3万+
文章目录安装 element-ui安装修改 main.js修改 Item.vue基础知识布局 layout容器 container图标 icon按钮 button表格 table当前行 scope表单 form输入框 input扩展:JavaScript APIspliceObject.assigncopyObject项目案例：商品后台管理系统界面原型 安装 element-ui 安装 访问https://element.eleme.cn/#/zh-CN/component/installation 在工程
iOS测试之接口测试总结
甫式人生
08-07 4340
本文主要分为两个部分：　　第一部分：主要从问题出发，引入接口测试的相关内容并与前端测试进行简单对比，总结两者之前的区别与联系。但该部分只交代了怎么做和如何做？并没有解释为什么要做？　　第二部分：主要介绍为什么要做接口测试，并简单总结接口持续集成和接口质量评估相关内容。第一部分： 首先，在做接口测试的过程中，经常有后端开发会问： 1.后端接口都测试什么？怎么测的？ 2.后端接口测试一遍 ，前端也测试
018-Vue项目生成模拟数据
赳赳万里鲲
07-24 245
开发过程中，与后端未搭建好联调环境时，没有数据。 此时前端无法进行测试，开发起来就比较头疼了。 使用mockjs，拦截Ajax请求，并且随机生成和后端协商好的数据格式， 这样即使服务端环境无法使用，前端也可以愉快的coding了。 接下来聊聊它的使用方法吧： 一、node环境 1、在项目中初始化mock.js npm i mockjs 2、创建mock数据文件 // 引入Mock对象 import...
2.Vue中使用mock模拟数据的生成
qq_46016217的博客
01-18 611
Vue中使用mock模拟数据的生成
hualinux 进阶 vue 5.4：用Element实现增删改查（四）后端thinkphp代码编写
hualinux（阿华的linux）
04-17 786
前篇写的vue后端对应的mysql数据表，这篇继续讲后端thinkphp代码。 需要的知识点：thinkphp，推荐《ThinkPHP6.0完全开发手册》 thinkphp使用的是mvc框架，因为前后端分离，我这里只使用了mc，并没有使用它的模板视图v，现在前后端分离是主流，所以后端的话一般不用学v。 一、需要修改的thinkphp目录文件 红色框的需要添加或修改的，其它不动 二、TP数据库的配置 2.1 配置数据库（config/database.php） 前篇说有my...
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透出
vue-form-generator：Vue.js的基于模式的表单生成器组件
02-06
Vue形式生成器 Vue.js的基于架构的表单生成器组件。 演示版 产品特点 基于模式的React形式 多对象编辑 21种字段类型 内置验证器 核心和完整捆绑包（压缩后分别为41kb和50kb） 自举友好模板 可定制的样式 可以使用自定义字段轻松扩展 ...等等 文献资料 依存关系 vue-form-generator在内部使用和 。 尽管内置字段不需要外部依赖关系，但可选字段可能需要其他库。 这些依赖关系分为两个阵营：jQuery或Vanilla。 您可以在两种风格中找到几乎相同的功能。 最后，您可以选择是否依赖jQuery。 您可以在每个特定组件下的官方找到有关依赖项的详细信息。
基于SpringBoot+Vue+Redis开发的在线考试系统源码+数据库+设计报告+环境配置文档(含前端+后端).zip
最新发布
07-01
基于SpringBoot+Vue+Redis开发的在线考试系统源码+数据库+设计报告+环境配置文档(含前端+后端).zip 【1】项目代码完整且功能都验证ok，确保稳定可靠运行后才上传。欢迎下载使用！在使用过程中，如有问题或建议，请...
Vue实战篇一： 使用Vue搭建注册登录界面
Bejpse的博客
03-09 5155
系列文章目录 Vue基础篇一：编写第一个Vue程序 Vue基础篇二：Vue组件的核心概念 Vue基础篇三：Vue的计算属性与侦听器 Vue基础篇四：Vue的生命周期（秒杀案例实战） Vue基础篇五：Vue的指令 Vue基础篇六：Vue使用JSX进行动态渲染 Vue提高篇一：使用Vuex进行状态管理 Vue提高篇二：使用vue-router实现静态路由 Vue提高篇三：使用vue-router实现动态路由 Vue提高篇四：使用Element UI组件库 Vue提高篇五：使用Jest进行单元测试 Vue提高篇六
Vue.js与Element UI实现前后端分离的全栈开发
# 1....前端负责实现页面的展示和用户交互，后端负责处理业务逻辑和数据的存储。通过API接口的方式，前后端可以独立开发和部署，提高了开发效率和代码的可维护性。 ## 1.2 Vue.js和Element UI的介绍
Vue3 + Vite+ Element-Plus + TypeScript 搭建系统
weixin_45044818的博客
12-04 1310
一种新的专门的编程语言，编译后成正常的CSS文件。为CSS增加一些编程的特性，无需考虑浏览器的兼容问题，让CSS更加简洁，适应性更强，可读性更佳，更易于代码的维护等诸多好处。创建 variables.scss 变量文件，注意规范变量以 $ 开头 @styles/variables.scss。上面导出的scss全局变量在ts不生效的，需要创建一个以.module.scss 结尾的文件。添加scss @styles/normalize.scss。vite导入variables.scss。
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后续有待加强及完善 动态表单（满足基本的需求）/
php基于element实现增删改查
qq_36596869的博客
07-29 382
跨域问题解决，在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
vue-cli生成项目下webpack运行测试数据
gongzhonghua的博客
01-16 632
最近遇到一个这样的问题，最新版本的vue-cli生成的build文件夹下没有dev-server.js文件。压根不知道怎样运行测试数据，后来找到了解决方案，在文件webpack.dev.conf.js中增加如下代码，如下图： 1.在 const portfinder = require('portfinder')这行后面加下面代码 const express = require('expr
js 表单设计器_准备迎接Vue3，使用Vue Composition API生成干净可扩展的表单
weixin_39625305的博客
11-22 269
表单是前端开发中最棘手的部分之一，您可能会在其中发现很多混乱的代码。Vue.js 2之类的基于组件的框架在提高前端代码的可伸缩性方面做了很多工作，但是形式问题仍然存在。在本教程中，我将向您展示新的Vue Composition API(属于Vue 3)将如何使您的表单代码更加整洁和可扩展。为什么表单代码经常很烂像Vue这样的基于组件的框架的关键设计模式是组件组合。该模式告诉我们将应用程序的特性抽象...
hualinux 进阶 vue 3.3：静态化站及相关vue静态化工具介绍
hualinux（阿华的linux）
04-14 2394
目录 一、为什么要静态化优缺点 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 1569
目录 一、使用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 1.3：vue实例参数el data说明
hualinux（阿华的linux）
04-06 1038
目录 一、前章vue代码回顾 二、vue实例参数：el挂载点（必填） 2.1 说明 三、Vue实例参数：data数据显示（数据显示） 3.1 说明 3.2 原生js与vue对比 四、注意事项 前章我们讲了vue的简单例子，现在讲vue基础语法：挂载点、模板、实例 一、前章vue代码回顾 为了更好的对语法说明，我这里要借助一下上章vue的例子，代码如下： <!DOCTYPE html> <html lang="en"> <head> &.
hualinux 进阶 vue 5.0：vue UI组件介绍及Element UI
hualinux（阿华的linux）
04-14 1023
目录 一、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、移动端、小程序、桌面端等，在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值