Нормализация — это процесс организации данных в базе данных, включающий создание таблиц и установление отношений между ними в соответствии с правилами, которые обеспечивают защиту данных и делают базу данных более гибкой, устраняя избыточность и несогласованные зависимости.
<template>
<div class="text-center">
<v-dialog
v-model="progress_dialog_visible"
hide-overlay
persistent
width="300"
>
<v-card
color="#c04a3c"
dark
>
<v-card-text>
{{message}}
<v-progress-linear
:indeterminate="progress === -1"
color="white"
class="mb-0"
:value="progress"
></v-progress-linear>
</v-card-text>
</v-card>
</v-dialog>
</div>
</template>
<script>
export default {
model: {
prop: 'visible',
event: 'change'
},
data() {
return {
message: "Подождите...",
progress: -1,
progress_dialog_message: "",
progress_dialog_visible: false,
}
},
mounted() {
this.$root.$on("progress-dialog-show", (message = "Подождите...") => {
this.message = message
this.progress_dialog_visible = true
})
this.$root.$on("progress-dialog-hide", () => {
this.progress_dialog_visible = false
})
this.$root.$on("progress-dialog-set-progress", ({message, progress}) => {
this.message = message || ""
this.progress = progress || 0
})
},
};
</script><v-app>
...
<progress-dialog />
</v-app>
</template>
<script>
import ProgressDialog from "../components/ProgressDialog/ProgressDialog";
...
</script>this.$root.$emit("progress-dialog-show", "Подождите...")Я так понимаю примеси это как трейт на php)
Mixins - Mixins are a flexible way to distribute reusable functionalities for Vue components. A mixin object can contain any component options. When a component uses a mixin, all options in the mixin will be “mixed” into the component’s own options.
<template>
<div class="form-group"
:class="[
{'input-group': hasIcon},
{'has-danger': error},
{'input-group-focus': focused},
{'has-label': label || $slots.label}]">
<slot name="label">
<label v-if="label" :class="labelClasses">
{{label}}
<span v-if="required">*</span>
</label>
</slot>
<slot name="addonLeft">
<div v-if="addonLeftIcon" class="input-group-prepend">
<i class="input-group-text" :class="addonLeftIcon"></i>
</div>
</slot>
<slot>
<input
:value="value"
v-on="listeners"
v-bind="$attrs"
class="form-control"
:class="[{valid: value && !error}, inputClasses]"
aria-describedby="addon-right addon-left"
:type="type"
:autocomplete="autocomplete ? 'on':'off'"
>
</slot>
<slot name="addonRight">
<span v-if="addonRightIcon" class="input-group-addon input-group-append">
<i class="input-group-text" :class="addonRightIcon"></i>
</span>
</slot>
<slot name="infoBlock"></slot>
<slot name="helpBlock">
<div class="text-danger invalid-feedback" style="display: block;" :class="{'mt-2': hasIcon}" v-if="error">
{{ error }}
</div>
</slot>
</div>
</template>
<script>
export default {
inheritAttrs: false,
name: 'fg-input',
props: {
autocomplete: {
type: [Boolean],
default: false
},
required: Boolean,
label: String,
error: String,
labelClasses: String,
inputClasses: String,
value: {
type: [String, Number],
default: ''
},
addonRightIcon: String,
addonLeftIcon: String,
type: {
type: [String],
default: 'text'
},
},
data() {
return {
focused: false
}
},
computed: {
listeners() {
return {
...this.$listeners,
input: this.updateValue,
focus: this.onFocus,
blur: this.onBlur
}
},
hasIcon() {
const {addonRight, addonLeft} = this.$slots;
return addonRight !== undefined || addonLeft !== undefined || this.addonRightIcon !== undefined || this.addonLeftIcon !== undefined
}
},
methods: {
updateValue(evt) {
let value = evt.target.value;
this.$emit('input', value);
},
onFocus(value){
this.focused = true;
this.$emit('focus', value);
},
onBlur(value){
this.focused = false;
this.$emit('blur', value);
}
}
}
</script>
<style>
</style><!-- NAME -->
<fg-input
class="no-border input-lg"
addon-left-icon="now-ui-icons mdi mdi-textbox"
placeholder="Your name"
v-model="name"
type="text"
>
</fg-input>
<!-- EMAIL -->
<fg-input
class="no-border input-lg"
addon-left-icon="now-ui-icons mdi mdi-at"
placeholder="Email"
v-model="email"
>
</fg-input>
<!-- PASSWORD -->
<fg-input
class="no-border input-lg"
addon-left-icon="now-ui-icons mdi mdi-textbox-password"
placeholder="Password"
type="password"
v-model="password"
>
</fg-input>
<!-- REPEAT PASSWORD -->
<fg-input
class="no-border input-lg"
addon-left-icon="now-ui-icons mdi mdi-textbox-password"
placeholder="Repeat password"
type="password"
v-model="confirm_password"
>
</fg-input>/**
* Add new nodes
* @param node
*/
async addNodes(node) {
this.showProgressDialog("Подождите...")
this.new_node_dialog_visible = false
let items = this.new_node_dialog_textarea.split("\n")
let new_node = {
owner_id: node.id,
items
}
await this.$axios.$post(`${process.env.api}/categories.add`, new_node)
.then(({code, msg}) => {
// что-то сообщаем пользователю о завершении операции
})
this.hideProgressDialog()
}
В PHP есть два оператора для работы со строками (string). Первый - оператор конкатенации ('.'), который возвращает строку, представляющую собой соединение левого и правого аргумента. Второй - оператор присваивания с конкатенацией ('.='), который присоединяет правый аргумент к левому. Для получения более полной информации ознакомьтесь с разделом
import {ACCESS_TOKEN} from "../store/mutation-types";
const DO_NOT_SET_TOKEN_FOR = [
/\/security\.checkAccessToken/,
/\/security\.getAccessToken/,
]
export default function ({ $axios, redirect, store }) {
$axios.onRequest(config => {
let not_set_token = false
if (store.getters[ACCESS_TOKEN]) {
for (let index in DO_NOT_SET_TOKEN_FOR) {
if (DO_NOT_SET_TOKEN_FOR[index].test(config.url)) {
not_set_token = true
break
}
}
}
if (not_set_token === false) {
console.log(config.headers.common.Authorization = `Bearer ${store.getters[ACCESS_TOKEN]}`)
}
})
$axios.onResponse(({data}) => {
if (data.code === 5) {
redirect("/login")
}
})
$axios.onError(error => {
const code = parseInt(error.response && error.response.status)
if (code === 400) {
redirect('/400')
}
})
}plugins: [
'~plugins/axios',
...
]
vm-root
vm-emit