目录
前篇讲了相关的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中字段 | 说明 |
picid | picid | 图片id |
没有 | picurl | pic连接地址,由表的“图片IP+savename”组成 |
savename | 没 | 变成picurl部分 |
lable | lable | 图片名 |
describe | describe | 说明 |
没有 | 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中了。