سلام
من یه سوال دارم
خاصیت Base که شامل Basically Available ، Soft State ، Eventual Consistency به چه معنی هست؟
میشه توضیح بدید؟
import { Subject } from “rxjs/Subject”; public countdown: number = 0; private countdownEndSource = new Subject<void>(); public countdownEnd$ = this.countdownEndSource.asObservable();
ng g m ServiceComponentCommunication -m app.module --routing ng g c ServiceComponentCommunication/First ng g c ServiceComponentCommunication/Second ng g c ServiceComponentCommunication/Third ng g c ServiceComponentCommunication/Final ng g s ServiceComponentCommunication/Sample
import { Injectable } from "@angular/core"; import { BehaviorSubject } from "rxjs/BehaviorSubject"; @Injectable() export class SampleService { private msgSource = new BehaviorSubject<string>("default service value"); telecast$ = this.msgSource.asObservable(); constructor() { } editMsg(newMsg: string) { this.msgSource.next(newMsg); } }
import { SampleService } from "./../sample.service"; import { Component, OnInit, OnDestroy } from "@angular/core"; import { Subscription } from "rxjs/Subscription"; @Component({ selector: "app-first", templateUrl: "./first.component.html", styleUrls: ["./first.component.css"] }) export class FirstComponent implements OnInit, OnDestroy { editedMsg: string; sampleSubscription: Subscription; constructor(private sampleService: SampleService) { } ngOnInit() { this.sampleSubscription = this.sampleService.telecast$.subscribe(message => { this.editedMsg = message; }); } editMsg() { this.sampleService.editMsg(this.editedMsg); } ngOnDestroy() { this.sampleSubscription.unsubscribe(); } }
<div class="panel panel-default"> <div class="panel-heading"> <h2 class="panel-title">First Component</h2> </div> <div class="panel-body"> <p> {{editedMsg}}</p> <input class="form-control" type="text" [(ngModel)]="editedMsg"> <button (click)="editMsg()" class="btn btn-primary">Change</button> </div> </div>
import { SampleService } from "./../sample.service"; import { Component, OnInit, OnDestroy } from "@angular/core"; import { Subscription } from "rxjs/Subscription"; @Component({ selector: "app-third", templateUrl: "./third.component.html", styleUrls: ["./third.component.css"] }) export class ThirdComponent implements OnInit, OnDestroy { message: string; sampleSubscription: Subscription; constructor(private sampleService: SampleService) { } ngOnInit() { } subscribe() { this.sampleSubscription = this.sampleService.telecast$.subscribe(message => { this.message = message; }); } ngOnDestroy() { if (this.sampleSubscription) { this.sampleSubscription.unsubscribe(); } } }
<div class="panel panel-default"> <div class="panel-heading"> <h2 class="panel-title">Third Component</h2> </div> <div class="panel-body"> <p>{{message}}</p> <button (click)="subscribe()" class="btn btn-success">Subscribe</button> </div> </div>
<div class="row"> <div class="col-md-4"> <app-first></app-first> </div> <div class="col-md-4"> <app-second></app-second> </div> <div class="col-md-4"> <app-third></app-third> </div> </div>
Vue.component('todo-item', { template: '\ <li>\ {{ title }}\ <button v-on:click="$emit(\'remove\')">Remove</button>\ </li>\ ' })
Vue.component('custom-input', { template: ` <input v-bind:value="value" v-on:input="$emit('input', $event.target.value)" > ` })
<script type="x-template" id="my-template" src="template.js"> </script> <div id="app"></div> new Vue({ el: '#app', template: '#my-template' })
<div id="app"> <gallery inline-template> .... Vue.component('gallery', { ...
const template = ` <ul> <li v-for="item in items"> {{ item }} </li> </ul>`; const compiledTemplate = Vue.compile(template); new Vue({ el: '#app', data() { return { items: ['Item1', 'Item2'] } }, render(createElement) { return compiledTemplate.render.call(this, createElement); } });
new Vue({ el: '#app', data: { msg: 'Show the message' }, methods: { hello () { alert('Here is the message') } }, render (createElement) { return createElement( 'span', { class: { 'my-class': true }, on: { click: this.hello } }, [ this.msg ] ); }, });
new Vue({ el: '#app', data: { msg: 'Show the message.' }, methods: { hello () { alert('This is the message.') } }, render(h) { return ( <span class={{ 'my-class': true }} on-click={ this.hello } > { this.msg } </span> ) } });
{ "jti": "b2921057-32a4-fbb2-0c18-5889c1ab8e70", "iss": "https://localhost:5001/", "iat": 1576402824, "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/nameidentifier": "1", "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name": "Vahid N.", "DisplayName": "Vahid N.", "http://schemas.microsoft.com/ws/2008/06/identity/claims/userdata": "1", "http://schemas.microsoft.com/ws/2008/06/identity/claims/role": "Admin", "nbf": 1576402824, "exp": 1576402944, "aud": "Any" }
class App extends Component { state = {};
> npm install --save jwt-decode
import jwtDecode from "jwt-decode"; // ... class App extends Component { state = {}; componentDidMount() { try { const jwt = localStorage.getItem("token"); const currentUser = jwtDecode(jwt); console.log("currentUser", currentUser); this.setState({ currentUser }); } catch (ex) { console.log(ex); } }
render() { return ( <React.Fragment> <ToastContainer /> <NavBar user={this.state.currentUser} /> <main className="container">
const NavBar = ({ user }) => {
{!user && ( <React.Fragment> <NavLink className="nav-item nav-link" to="/login"> Login </NavLink> <NavLink className="nav-item nav-link" to="/register"> Register </NavLink> </React.Fragment> )}
{user && ( <React.Fragment> <NavLink className="nav-item nav-link" to="/logout"> Logout </NavLink> <NavLink className="nav-item nav-link" to="/profile"> {user.DisplayName} </NavLink> </React.Fragment> )}
this.props.history.push("/");
window.location = "/";
<NavLink className="nav-item nav-link" to="/logout"> Logout </NavLink>
import Logout from "./components/logout"; // ... class App extends Component { render() { return ( // ... <Switch> // ... <Route path="/logout" component={Logout} />
import { Component } from "react"; class Logout extends Component { componentDidMount() { localStorage.removeItem("token"); window.location = "/"; } render() { return null; } } export default Logout;
const tokenKey = "token"; export async function login(email, password) { const { data: { access_token } } = await http.post(apiEndpoint + "/login", { email, password }); console.log("JWT", access_token); localStorage.setItem(tokenKey, access_token); }
const { data } = this.state; await auth.login(data.username, data.password); window.location = "/";
export function logout() { localStorage.removeItem(tokenKey); }
import * as auth from "../services/authService"; class Logout extends Component { componentDidMount() { auth.logout();
import jwtDecode from "jwt-decode"; //... export function getCurrentUser() { try { const jwt = localStorage.getItem(tokenKey); const currentUser = jwtDecode(jwt); console.log("currentUser", currentUser); return currentUser; } catch (ex) { console.log(ex); return null; } }
import * as auth from "./services/authService"; class App extends Component { state = {}; componentDidMount() { const currentUser = auth.getCurrentUser(); this.setState({ currentUser }); }
export function loginWithJwt(jwt) { localStorage.setItem(tokenKey, jwt); }
import * as auth from "../services/authService"; // ... const response = await userService.register(this.state.data); auth.loginWithJwt(response.headers["x-auth-token"]);
var entityConfigurations = Assembly.GetAssembly(typeof(UserConfiguration)).GetTypes()
.Where(w => w.GetInterfaces()
.Any(x => x.IsGenericType && x.GetGenericTypeDefinition() == typeof(IEntityTypeConfiguration<>)))
.ToList();
foreach (var config in entityConfigurations)
{
dynamic configurationInstance = Activator.CreateInstance(config);
modelBuilder.ApplyConfiguration(configurationInstance);
}
<location path="Glimpse.axd" > <system.web> <authorization> <allow users="Administrator" /> <deny users="*" /> </authorization> </system.web> </location>
<glimpse defaultRuntimePolicy="Off" xdt:Transform="SetAttributes"> </glimpse>
using Glimpse.AspNet.Extensions; using Glimpse.Core.Extensibility; namespace Test { public class GlimpseSecurityPolicy:IRuntimePolicy { public RuntimePolicy Execute(IRuntimePolicyContext policyContext) { // You can perform a check like the one below to control Glimpse's permissions within your application. // More information about RuntimePolicies can be found at http://getglimpse.com/Help/Custom-Runtime-Policy var httpContext = policyContext.GetHttpContext(); if (!httpContext.User.IsInRole("Administrator ")) { return RuntimePolicy.Off; } return RuntimePolicy.On; } public RuntimeEvent ExecuteOn { get { return RuntimeEvent.EndRequest; } } } }
<httpModules> <remove name="Session"/> </httpModules>
<sessionState mode="Off" />
[SessionState(SessionStateBehavior.Disabled)] public class AjaxTestController : Controller { //... }
[SessionState(SessionStateBehavior.ReadOnly)]
<a class="btn btn-primary" href="#" role="button">Link</a> <button class="btn btn-primary" type="submit">Button</button> <input class="btn btn-primary" type="submit" value="Input">
<button class="btn btn-primary">Primary</button> <button class="btn btn-secondary">Secondary</button> <button class="btn btn-success">Success</button> <button class="btn btn-danger">Danger</button> <button class="btn btn-warning">Warning</button> <button class="btn btn-info">Info</button> <button class="btn btn-light">Light</button> <button class="btn btn-dark">Dark</button>
<button class="btn btn-outline-primary">Primary</button> <button class="btn btn-outline-secondary">Secondary</button> <button class="btn btn-outline-success">Success</button> <button class="btn btn-outline-danger">Danger</button> <button class="btn btn-outline-warning">Warning</button> <button class="btn btn-outline-info">Info</button> <button class="btn btn-outline-light">Light</button> <button class="btn btn-outline-dark">Dark</button>
<button class="btn btn-primary">Default</button> <button class="btn btn-primary btn-lg">Large</button> <button class="btn btn-primary btn-sm">Small</button> <button class="btn btn-primary btn-block">Block</button>
<h2>States</h2> <h3>Active</h3> <button class="btn btn-primary active">Active Button</button> <h3>Disabled</h3> <button class="btn btn-primary disabled">Disabled Button</button> <a class="btn btn-primary disabled" href="#">Disabled Link Button</a>
<div class="btn-toolbar" aria-label="All pets"> <div class="btn-group mb-2 mr-2" aria-label="Common pets"> <button type="button" class="btn btn-primary active">Cat</button> <button type="button" class="btn btn-primary">Dog</button> <button type="button" class="btn btn-primary">Fish</button> <button type="button" class="btn btn-primary">Bird</button> </div> <div class="btn-group mb-2" aria-label="Exotic pets"> <button type="button" class="btn btn-primary">Amphibian</button> <button type="button" class="btn btn-primary active">Reptile</button> <button type="button" class="btn btn-primary">Other</button> </div> </div>
<div class="btn-group-vertical mb-2" aria-label="Exotic pets"> <button type="button" class="btn btn-primary">Amphibian</button> <button type="button" class="btn btn-primary active">Reptile</button> <button type="button" class="btn btn-primary">Other</button> </div>
<div class="container"> <div class="row"> <section class="col-12"> <h1>Our Commitment <span class="badge badge-info">to you</span></h1> <h3>Grooming <span class="badge badge-danger badge-pill">new</span></h3> </section> </div><!-- row --> </div><!-- content container -->
<ul class="list-group mb-3"> <li class="list-group-item active">Grooming</li> <li class="list-group-item list-group-item-action"> General Health </li> <li class="list-group-item list-group-item-action">Nutrition</li> <li class="list-group-item list-group-item-action"> Pest Control </li> <li class="list-group-item list-group-item-action">Vaccinations</li> </ul>
در اینجا برای تشکیل لیستی با ظاهری شکیلتر، میتوان ابتدا کلاس list-group را به ul انتساب داد و سپس به هر کدام از liهای آن کلاس list-group-item انتساب داده میشود. با افزودن کلاس active به اولین مورد، ظاهر آن با رنگی متمایز نمایان میشود. همچنین اگر علاقمند بودیم تا هر کدام از آیتمها با عبور ماوس بر روی آنها، با رنگ ملایمی مشخص شوند، میتوان از کلاس list-group-item-action استفاده کرد.
<div class="list-group mb-3"> <a class="list-group-item active" href="#">Grooming</a> <a class="list-group-item list-group-item-action list-group-item-success" href="#">Nutrition</a> <a class="list-group-item list-group-item-action list-group-item-info" href="#"> Pest Control </a> <a class="list-group-item list-group-item-action list-group-item-warning" href="#">Vaccinations</a> </div>
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"> Nutrition <span class="badge badge-info badge-pill">12</span> </li>