목차
回复内容:
백엔드 개발 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传递到后台,从数据库读取数据返回前台,刷新子标签;这种即时显示数据的效果获取可能会差点,但避免了方法一的一开始就加载大量数据拖慢效率的缺点;

还有一种,利用缓存

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

CakePHP 프로젝트 구성 CakePHP 프로젝트 구성 Sep 10, 2024 pm 05:25 PM

이번 장에서는 CakePHP의 환경 변수, 일반 구성, 데이터베이스 구성, 이메일 구성에 대해 알아봅니다.

Ubuntu 및 Debian용 PHP 8.4 설치 및 업그레이드 가이드 Ubuntu 및 Debian용 PHP 8.4 설치 및 업그레이드 가이드 Dec 24, 2024 pm 04:42 PM

PHP 8.4는 상당한 양의 기능 중단 및 제거를 통해 몇 가지 새로운 기능, 보안 개선 및 성능 개선을 제공합니다. 이 가이드에서는 Ubuntu, Debian 또는 해당 파생 제품에서 PHP 8.4를 설치하거나 PHP 8.4로 업그레이드하는 방법을 설명합니다.

CakePHP 날짜 및 시간 CakePHP 날짜 및 시간 Sep 10, 2024 pm 05:27 PM

cakephp4에서 날짜와 시간을 다루기 위해 사용 가능한 FrozenTime 클래스를 활용하겠습니다.

CakePHP 파일 업로드 CakePHP 파일 업로드 Sep 10, 2024 pm 05:27 PM

파일 업로드 작업을 위해 양식 도우미를 사용할 것입니다. 다음은 파일 업로드의 예입니다.

CakePHP 라우팅 CakePHP 라우팅 Sep 10, 2024 pm 05:25 PM

이번 장에서는 라우팅과 관련된 다음과 같은 주제를 학습하겠습니다.

CakePHP 토론 CakePHP 토론 Sep 10, 2024 pm 05:28 PM

CakePHP는 PHP용 오픈 소스 프레임워크입니다. 이는 애플리케이션을 훨씬 쉽게 개발, 배포 및 유지 관리할 수 있도록 하기 위한 것입니다. CakePHP는 강력하고 이해하기 쉬운 MVC와 유사한 아키텍처를 기반으로 합니다. 모델, 뷰 및 컨트롤러 gu

HTML 테이블 레이아웃 HTML 테이블 레이아웃 Sep 04, 2024 pm 04:54 PM

HTML 테이블 레이아웃 안내. 여기에서는 HTML 테이블 레이아웃의 값에 대해 예제 및 출력 n 세부 사항과 함께 논의합니다.

PHP 개발을 위해 Visual Studio Code(VS Code)를 설정하는 방법 PHP 개발을 위해 Visual Studio Code(VS Code)를 설정하는 방법 Dec 20, 2024 am 11:31 AM

VS Code라고도 알려진 Visual Studio Code는 모든 주요 운영 체제에서 사용할 수 있는 무료 소스 코드 편집기 또는 통합 개발 환경(IDE)입니다. 다양한 프로그래밍 언어에 대한 대규모 확장 모음을 통해 VS Code는

See all articles