- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在为我的定制吉他公司建立网站,我刚刚意识到数据库需要工作的方式有一些我似乎无法理解的东西——或者我想得太多了,把自己弄糊涂了。
我需要将两个表相互关联:Artists
表和Projects
表。 artists
表存储有关个人艺术家的信息,Projects
表存储有关乐队/项目的信息。
创建 Artists
表并将其主键用作 Projects
表中的外键非常容易;如果一位艺术家参与了多个项目,那么这种安排也没有问题。不过,我想到的是,一个项目也完全有可能与不止一位艺术家相关联。
我知道在 Projects
表中将 artist_id
字段作为外键是不符合正常形式的,如果它有多个值(非原子);但我不确定我还能如何实现这一目标。
它也可能有助于了解用例:
我正在构建一个 Django-REST 后端,它将被 Angular 前端使用。有一个包含艺术家个人资料的页面,Angular 使用 *ngFor
从 JSON 中解析出来。因此,使用 *ngFor
添加到 DOM
的每个 html block 都会显示艺术家姓名、简历和图片;艺术家关联的项目通过内部 ngFor 循环添加到 DOM
。
以下是 Angular 端的数据结构:
import {ArtistSocialMediaModel} from './artist-social-media.model';
export class ArtistProfilesModel {
public artist_name: string;
public artist_image: string;
// the second string is a range of active dates for a given project
// which I will convert to a string in Django before serializing
public projects: Array<[string, string]>;
public description: string;
public band_website: string;
public social_media: ArtistSocialMediaModel[];
constructor(name: string, image: string, projects,
description: string, website: string, social) {
this.artist_name = name;
this.artist_image = image;
this.projects = projects;
this.description = description;
this.band_website = website;
this.social_media = social;
}
}
这是您在上面看到的社交媒体模型,但这将是与 Artists_Social
表的直接一对一关系:
export class ArtistSocialMediaModel {
public facebook: string;
public twitter: string;
public instagram: string;
constructor(facebook: string, twitter: string, instagram: string) {
this.facebook = facebook;
this.twitter = twitter;
this.instagram = instagram;
}
}
这是显示数据的模板:
<div *ngFor="let profile of artistProfiles; let i = index"
class="profiles-div">
<div *ngIf="resolveIndex(i) === 'left'; then left else right">ignored</div>
<ng-template #left>
<div class="row">
<div class="col-6 col-md-5">
<img [src]="profile.artist_image"
[alt]="profile.artist_name"
class="img-thumbnail img-fluid"
[ngStyle]="{ 'float': resolveIndex(i)}">
<h1 class="artists-jumbo-header"
[ngStyle]="{ 'text-align': resolveIndex(i)}">
Projects:
</h1>
<p *ngFor="let project of profile.projects"
[ngStyle]="{ 'text-align': resolveIndex(i)}"
class="artists-p">
{{project[0] + ": " + project[1]}}
</p>
<h1 class="artists-jumbo-header"
[ngStyle]="{ 'text-align': resolveIndex(i)}">
Website:
</h1>
<a href="https:{{profile.band_website}}"
target="_blank">
<p [ngStyle]="{ 'text-align': resolveIndex(i)}"
class="artists-p">
{{profile.band_website}}
</p>
</a>
<h1 class="artists-jumbo-header"
[ngStyle]="{ 'text-align': resolveIndex(i)}">
Social Media:
</h1>
<a href="https://{{profile.social_media['facebook']}}"
target="_blank">
<p [ngStyle]="{ 'text-align': resolveIndex(i)}"
class="artists-p">{{profile.social_media['facebook']}}</p>
</a>
<a href="https://{{profile.social_media['twitter']}}"
target="_blank">
<p [ngStyle]="{ 'text-align': resolveIndex(i)}"
class="artists-p">{{profile.social_media['twitter']}}</p>
</a>
<a href="https://{{profile.social_media['instagram']}}"
target="_blank">
<p [ngStyle]="{ 'text-align': resolveIndex(i)}"
class="artists-p">
{{profile.social_media['instagram']}}</p>
</a>
</div>
<div class="col-6 col-md-7">
<h1 class="artists-jumbo-header">{{ profile.artist_name }}
</h1>
<br>
<p class="artists-p">{{ profile.description }}</p>
</div>
</div>
</ng-template>
<ng-template #right>
<div class="row ng-template-right">
<div class="col-6 col-md-7">
<h1 class="artists-jumbo-header">{{ profile.artist_name }}
</h1>
<br>
<p class="artists-p">{{ profile.description }}</p>
</div>
<div class="col-6 col-md-5">
<img [src]="profile.artist_image"
[alt]="profile.artist_name"
class="img-thumbnail"
[ngStyle]="{ 'float': resolveIndex(i)}">
<div class="container">
<h1 class="artists-jumbo-header"
[ngStyle]="{ 'text-align': resolveIndex(i)}">
Projects:
</h1>
<p *ngFor="let project of profile.projects"
[ngStyle]="{ 'text-align': resolveIndex(i)}"
class="artists-p">
{{project[0] + ": " + project[1]}}
</p>
<h1 class="artists-jumbo-header"
[ngStyle]="{ 'text-align': resolveIndex(i)}">
Website:
</h1>
<a href="https:{{profile.band_website}}"
target="_blank">
<p [ngStyle]="{ 'text-align': resolveIndex(i)}"
class="artists-p">
{{profile.band_website}}
</p>
</a>
<h1 class="artists-jumbo-header"
[ngStyle]="{ 'text-align': resolveIndex(i)}">
Social Media:
</h1>
<a href="https://{{profile.social_media['facebook']}}"
target="_blank">
<p [ngStyle]="{ 'text-align': resolveIndex(i)}"
class="artists-p">{{profile.social_media['facebook']}}</p>
</a>
<a href="https://{{profile.social_media['twitter']}}"
target="_blank">
<p [ngStyle]="{ 'text-align': resolveIndex(i)}"
class="artists-p">{{profile.social_media['twitter']}}</p>
</a>
<a href="https://{{profile.social_media['instagram']}}"
target="_blank">
<p [ngStyle]="{ 'text-align': resolveIndex(i)}"
class="artists-p">
{{profile.social_media['instagram']}}</p>
</a>
</div>
</div>
</div>
</ng-template>
<hr>
</div>
最佳答案
我对Django一无所知,但你问的是多对多关系。在大多数数据库系统中,多对多是通过第三个表实现的,该表具有指向您正在链接的表的外键。某些数据库系统允许您将数组存储为行的成员,这可用于此目的。然而,这是很少见的事情(通常只存在于层次数据库中)。第三表方法应用最广泛。
在您的情况下,您的表格看起来像这样。请注意,Artist_Projects
表的主键是一个组合键 -- 它是 artist_id
和 project_id
的组合那是主键。但是每个字段都是单独表的外键。
+----------------+ +----------------------+
| Artists | | Artist_Projects | +-----------------+
+----------------+ +----------------------+ | Projects |
| artist_id (PK) | <--- | artist_id (PK) (FK) | +-----------------+
+----------------+ | project_id (PK) (FK) | ---> | project_id (PK) |
+----------------------+ +-----------------+
关于具有多个外键的 SQL 关系,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52617047/
我试图弄清楚如何为聊天气泡制作外 Angular 圆形设计,以获得所需的结果: 我必须使用气泡作为不同背景的组件,没有相同和纯色,但有一些设计元素,所以气泡周围的空间必须是透明的: 我试过将元素添加为
我尝试了 display:table-cell 但它没有用。我怎样才能在div中显示这个词。现在它显示溢出了 div。我在我的网页上使用 CSS2。提前致谢。 Visit W3Schools
我有一个使用 CSS 隐藏在 View (对于移动设备)之外的菜单: #filter-column { position:absolute; left:-400px; } 当用户单击链
我想创建一个这样的问题行 http://imageshack.us/photo/my-images/200/questionh.png/ 此时我的html源是: question label
我要mock a class with Ruby . 如何编写处理样板代码的方法? 以下代码: module Mailgun end module Acani def self.mock_mail
请不要担心循环,但我的问题是关于这些关键字:outer、middle 和 inner。它们不是声明为实例变量,为什么IDE让代码编译?我在谷歌上搜索了一下,这是java标签吗? Java中的某种关键字
我有一个数据框(df),看起来像, Id Name Activity. 1 ABC a;sldkj kkkdk 2 two
Elasticsearch内存中有哪些东西可以使搜索如此快速? 是所有json本身都在内存中,还是仅倒排索引和映射将在内存中24 * 7? 最佳答案 这是一个很好的问题,然后简而言之就是: 不仅仅是数
我正在尝试添加用户在用户界面上选择的值。对于数据库中的特定列,我已经与数据库建立了连接,当我按“保存”时,新的 id 会添加到数据库中,控制台中不会显示任何错误,但我要提交的值不会放入数据库,我怎样才
我不确定这个问题是否应该涉及电子领域,但由于它是关于编程的,所以我在这里问了它。 我正在制作一个数字时钟,使用由移位寄存器供电的 LED,而不是 7 段显示器。无论如何,当使用 CCS 编译代码时,我
我希望用户在 div 中选择文本 (html)。然而,这样做会在浏览器中显示选择背景,也在 div 之外。 我可以用(参见 http://jsfiddle.net/lborgman/aWbgT/)来防
我有以下 Razor View @{ ViewBag.Title = "UserCost"; }
我使用 KineticJS 和 D3.js 制作了以下内容。当用户将鼠标悬停在其中一个点上时,我使用 KineticJS 让我弹出工具提示。但是,由于 Canvas 的边界,工具提示似乎被切断了。有没
关闭。这个问题需要更多focused .它目前不接受答案。 想改进这个问题吗? 更新问题,使其只关注一个问题 editing this post . 关闭 2 年前。 Improve this qu
我正在使用 primefaces 学习 Java Web 和 jsf。 我的项目当前只有一个index.xhtml 文件,当我访问localhost:8080/appname/时,index.xhtm
我是 ios 新手。 我有一个 View ,其中我使用 Quarts 核心绘制了一个圆圈。 我在该圆圈中放置了一个 UIButton,并赋予了拖放该按钮的功能。 现在我想要限制按钮不能被拖出那个圆圈区
这个问题已经有答案了: How to add two strings as if they were numbers? [duplicate] (20 个回答) How to force JS to
我正在创建简单的文本从右侧滑动到页面的 css 动画。我正在使用 jQuery 通过向元素添加一个类来触发动画。但是起始位置必须在视口(viewport)之外,这会触发底部滚动条出现。如何预防? 这是
我编写了一个简单的代码来评估一段代码并将输出写入文件。这样它减少了我的一些,因为我需要很多很多文件,每一行都包含返回值! 无论如何,我正在使用的代码是: #!/usr/bin/ruby -w def
所以我试图在我的一款游戏中加入一个非常基本的“手电筒”式的东西。 我让它工作的方式是在我的游戏屏幕顶部有一个层,这个层会绘制一个黑色矩形,不透明度约为 80%,在我的游戏场景顶部创建黑暗的外观。 cc
我是一名优秀的程序员,十分优秀!