Jadual Kandungan
回复内容:
Rumah pembangunan bahagian belakang tutorial php javascript - 标签技术,是怎么实现的?

javascript - 标签技术,是怎么实现的?

Jun 06, 2016 pm 08:12 PM
html javascript php

后台是用ThinkPHP框架的,前台页面呈现的Tag标签技术,怎么实现呢?
就比如segmentFault的这种标签技术?
在“问题”这张表格里有一个叫做tag的字段?
怎么实现像segmentFault的这种标签效果呢?

javascript - 标签技术,是怎么实现的?

更具体的问题在这里:
https://segmentfault.com/q/1010000004909...

回复内容:

后台是用ThinkPHP框架的,前台页面呈现的Tag标签技术,怎么实现呢?
就比如segmentFault的这种标签技术?
在“问题”这张表格里有一个叫做tag的字段?
怎么实现像segmentFault的这种标签效果呢?

javascript - 标签技术,是怎么实现的?

更具体的问题在这里:
https://segmentfault.com/q/1010000004909...

使用select2、tag-it等等,我使用的是tag-it。
整个的流程大致是:在输入框输入字符的时候,会把当前的value值与数据库中的数据对比(ajax请求,data参数就是当前的value值),看看是否有备选项,如下面这样:
javascript - 标签技术,是怎么实现的?
有的话,后台就返回相应的value和id,直接选中添加即可;
没有的话就是新创建标签:
javascript - 标签技术,是怎么实现的?
sf的逻辑是这样的:当你创建新标签的时候,后台直接创建,然后返回相应的id值。它是把创建标签作为了一个单独的过程,和当前提问或发表文章并不是“100%挂钩”,即当你创建一个新标签之后,你又取消了相关的提问,这时虽然你没有提问,但是你创建的标签已经在数据库中存在了,下次搜索标签时这个标签已经作为备选项存在了。关于是在创建新标签的时候就写入到数据库中还是在最后一步点击“提交”时再写入数据库,Tag-it插件的使用:如何传递额外数据给服务器?,我在这个问题的答案最后简单讨论了一下,有兴趣的可以看一下。

最后提交时,获取每个标签的id值,与问题的id值再关联起来,就知道每个问题对应哪些标签了。

问题表 标签表 问题标签关联表
标签应该还有一级二级之分吧 也就是每个标签需要记录它的父级标签

楼上所述方法是利用传统SQL来实现,我说一个利用NoSQL来实现的。

题主可以看一下这本书:

Redis入门指南

其中有一章讲到了 利用Redis 来实现你描述的需求。

最后提交的时候,应该怎么取得已选择的标签的内容呢?
我的意思是说,最后,已经选择的标签的内容,应该要记录进数据库吧,怎么取出,已经选择的标签的列表呢?

嗯,主要的问题是,怎么从隐藏域里移除已经添加的tag

实现这样的效果从代码层方面,有两种方法:
首先来说第一种,一开始就把所有的父类ID和子类ID标签数据都读取出来显示在页面上(利用CSS显示、隐藏),然后jquery事件,click或者focus来切换选中的父类标签,来展示父类标签对应的子类标签;这种方法显示效果最快,但是一开始就读取了数据,数据量大的时候对加载会有那么一点点影响,但问题应该不是很大;

第二种就是,利用ajax的原理实现,实现局部刷新,同样的需要用到jquery事件,click或focus,选中时候获得父类标签ID,拿到ID用ajax传递到后台,从数据库读取数据返回前台,刷新子标签;这种即时显示数据的效果获取可能会差点,但避免了方法一的一开始就加载大量数据拖慢效率的缺点;

还有一种,利用缓存

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Konfigurasi Projek CakePHP Konfigurasi Projek CakePHP Sep 10, 2024 pm 05:25 PM

Dalam bab ini, kita akan memahami Pembolehubah Persekitaran, Konfigurasi Umum, Konfigurasi Pangkalan Data dan Konfigurasi E-mel dalam CakePHP.

Panduan Pemasangan dan Naik Taraf PHP 8.4 untuk Ubuntu dan Debian Panduan Pemasangan dan Naik Taraf PHP 8.4 untuk Ubuntu dan Debian Dec 24, 2024 pm 04:42 PM

PHP 8.4 membawa beberapa ciri baharu, peningkatan keselamatan dan peningkatan prestasi dengan jumlah penamatan dan penyingkiran ciri yang sihat. Panduan ini menerangkan cara memasang PHP 8.4 atau naik taraf kepada PHP 8.4 pada Ubuntu, Debian, atau terbitan mereka

Tarikh dan Masa CakePHP Tarikh dan Masa CakePHP Sep 10, 2024 pm 05:27 PM

Untuk bekerja dengan tarikh dan masa dalam cakephp4, kami akan menggunakan kelas FrozenTime yang tersedia.

Muat naik Fail CakePHP Muat naik Fail CakePHP Sep 10, 2024 pm 05:27 PM

Untuk mengusahakan muat naik fail, kami akan menggunakan pembantu borang. Di sini, adalah contoh untuk muat naik fail.

Penghalaan CakePHP Penghalaan CakePHP Sep 10, 2024 pm 05:25 PM

Dalam bab ini, kita akan mempelajari topik berikut yang berkaitan dengan penghalaan ?

Bincangkan CakePHP Bincangkan CakePHP Sep 10, 2024 pm 05:28 PM

CakePHP ialah rangka kerja sumber terbuka untuk PHP. Ia bertujuan untuk menjadikan pembangunan, penggunaan dan penyelenggaraan aplikasi lebih mudah. CakePHP adalah berdasarkan seni bina seperti MVC yang berkuasa dan mudah difahami. Model, Pandangan dan Pengawal gu

Susun Atur Jadual HTML Susun Atur Jadual HTML Sep 04, 2024 pm 04:54 PM

Panduan untuk Susun Atur Jadual HTML. Di sini kita membincangkan Nilai Susun Atur Jadual HTML bersama-sama dengan contoh dan output n perincian.

Cara Menyediakan Kod Visual Studio (Kod VS) untuk Pembangunan PHP Cara Menyediakan Kod Visual Studio (Kod VS) untuk Pembangunan PHP Dec 20, 2024 am 11:31 AM

Kod Visual Studio, juga dikenali sebagai Kod VS, ialah editor kod sumber percuma — atau persekitaran pembangunan bersepadu (IDE) — tersedia untuk semua sistem pengendalian utama. Dengan koleksi sambungan yang besar untuk banyak bahasa pengaturcaraan, Kod VS boleh menjadi c

See all articles