docker run --rm -v $(pwd):$(pwd) -w $(pwd)\ jrottenberg/ffmpeg \ -f lavfi -i testsrc=size=1280x720 -t 60 -pix_fmt yuv420p testsrc.mp4
docker run --rm -v $(pwd):$(pwd) -w $(pwd)\ jrottenberg/ffmpeg \ -f lavfi -i testsrc=size=1280x720 -t 60 -pix_fmt yuv420p testsrc.mp4
قبل از اینکه این موضوع را بررسی کنیم باید با دستور Truncate و Delete آشنا شویم.
DELETE FROM table_name WHERE some_column=some_value
DELETE FROM Customers WHERE Country=’USA’ GO
اما نکته مهمی که دستور Delete دارد این است کار این دستور به شکل Transactional میباشد. یعنی یا کلیه رکوردهایی که Country آنها USA است حذف میشود و یا هیچکدام از آنها. پس اگر شما 200000 رکورد داشته باشید که در این شرط صدق کند اگر وسط کار Delete (البته اگر عملیات حذف طولانی باشد) منصرف شوید میتوانید با Cancel کردن این دستور عملیات Rollback Transaction را به خودکار توسط SQL Server داشته باشید. در صورتیکه عملیات Cancel را انجام دهید SQL Server از Log File برای بازگرداندن مقادیر حذف شده استفاده خواهد کرد.
شکل کلی استفاده از این دستور به صورت زیر میباشد.
TRUNCATE TABLE table_name GO
TRUNCATE TABLE Customers GO
A simple terminal UI for both docker and docker-compose, written in Go with the gocui library.
یکی از بهترین کاربردهای React، ترکیب کردن چند کامپوننت برای ساخت یک کامپوننت است. کامپوننت ساخته شده به این روش هر چند مشخص است چه کاری انجام میدهد، اما خود کامپوننت تگها را نمیسازد و شبیه یک لگو با قطعات مختلف است. مثلا در جایی از سایت میخواهیم اطاعات کاربری را نمایش دهیم. این اطلاعات به زیر مجموعههایی تقسیم میشوند؛ مثل اطلاعات شخصی، اطلاعات مربوط به شغل، اطلاعات تماس و عکس. به جای جمع کردن همه موارد در یک کامپوننت بهتر است هر بخش ویژه را در یک کامپوننت جدا و مستقل نمایش داده و ایجاد کنیم. با این کار از هر کامپوننت میشود به صورت جداگانه در قسمتهای دیگر سایت استفاده کرد. مثلا نمایش عکس کاربر به تنهایی در بخشهای دیگر سایت. در نهایت با این روش حجم کدها هم کمتر میشود. کامپوننتی که از اجزای کوچکتر ساخته میشود، مالک کامپوننتهای زیر مجموعه خود است.
کامپوننت مالک میتواند دادههای ورودی را برای اجزای سازنده خود به صورت یک سویه (one-way data binding) فراهم کند. گاهی دادههای مورد نیاز فرزندان، به طور مستقیم به مالک و از مالک به طور غیر مستقیم به فرزندان ارسال میشود. اما ممکن است لازم باشد که دادهها در اثر محاسبه در کامپوننت مالک، ایجاد و نتیجه به فرزندان ارسال شود. به هر صورت باید دقت داشته باشیم که در هر دو حالت اگر منبع داده و یا محسابه تغییر کنند، در به روز رسانیها، توسط React بازتاب آن را خواهیم داشت. در مثال زیر کامپوننت DisplayAllInfos تشکیل شده از چهار کامپوننت دیگر است.
class DisplayAllInfos extends React.Component{ render(){ return ( <div classID="something" className="something"> <ProfilePhoto src={} /> <UserPersonalInfo userInfo={}/> <UserJobInfo jobInfo={}/> <UserContactInfo contactInfo={}/> </div> ) } }
حتی میشود تگ <div> در مثال بالا را بصورت یک کامپوننت درآورد و سایر کامپوننتها را به عنوان فرزند به آن کامپوننت معرفی کرد. روش کار به صورت زیر است.
class Container extends React.Component{ render(){ <div classID="something" className="something"> {this.props.children} </div> } } class DisplayAllInfos extends React.Component{ render(){ return ( <Container> <ProfilePhoto src={} /> <UserPersonalInfo userInfo={}/> <UserJobInfo jobInfo={}/> <UserContactInfo contactInfo={}/> </Container> ) } }
توسط خاصیت this.proprs.children در کامپوننت Container فرزندانی که برای این کامپوننت در نظر گرفته شده را نمایش میدهیم و به آنها دسترسی داریم.
روش دیگر فرزند خواندگی یک کامپوننت مالک، از طریق ایجاد آرایهای از کامپوننتهای فرزند است که در مثال نوشیدنیها آورده شد. این روش میتواند دچار اشکال شود. اگر عضوی از این آرایه حذف شود، یا اعضای آن درون آرایه تغییر مکان دهند و مسائلی از این دست که برای آرایهها پیش میآید، React قادر به تشخیص ترتیب فرزندها نیست و نمیتواند آنها را دوباره فراخوانی و ایجاد کند. برای رفع چنین مشکلی باید برای هر فرزندی که به یک مالک اضافه میکنیم، یک کلید در نظر بگیریم. از این پس وقتی آرایهای از فرزندها دچار تغییر شدند، React از روی کلیدهای منحصر به فرد آنها میتواند تغییرات را تشخیص داده و دوباره کامپوننت فرزند را به درستی بسازد. به مثال زیر توجه کنید.
var hotDrinks = [ {id: 1, item: "Tea", price: "7000" }, {id: 2, item: "Espresso", price: "10000" }, {id: 3, item: "Hot Chocolate", price: "12000" } ]; // {this.state.menuList.map(item => <MenuItem {...item} />)} var Menu = React.createClass({ render: function () { return ( <div className="row"> <div className="col-md-4"> <ul className="list-group"> {this.state.menuList.map(item => <MenuItem key={item.id} {...item} />)} </ul> </div> </div> ) } });
آن خط کدی که به صورت کامنت گذاشته شده همان روش قبل در مثال نوشیدنیهاست. در حالت اصلاح شده برای هر یک از MenuItemها یک id در نظر گرفته شده. باید توجه داشته باشیم که کلیدها حتما یگانه باشند و نکته دیگر اینکه این کلیدها فقط در زمان معرفی کامپوننت استفاده میشوند و نمیتوانیم داخل خود کامپوننت آنها را داشته باشیم. برای مثال در یک کامپوننت MenuItem مقدار this.props.key قابل استفاده نیست. هیچگاه از اندیس خود اعضای آرایه به عنوان کلید استفاده نکنید، چرا که با حذف یک مورد، در عمل وضعیت کلیدها را بهم ریختهاید و شاهد رفتاری غیرقابل پیشبینی خواهید شد.
در قسمت بعدی اعتبارسنجی را در کتابخانه React بررسی میکنیم.
<mat-card> Main Theme: <button mat-raised-button color="primary"> Primary </button> <button mat-raised-button color="accent"> Accent </button> <button mat-raised-button color="warn"> Warning </button> </mat-card>
@import '~@angular/material/theming'; @include mat-core(); $candy-app-primary: mat-palette($mat-indigo); $candy-app-accent: mat-palette($mat-pink, A200, A100, A400); $candy-app-warn: mat-palette($mat-red); $candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn); @include angular-material-theme($candy-app-theme);
ng new MyProjectName --style=sass
"styles": [ "node_modules/material-design-icons/iconfont/material-icons.css", "src/styles.css", "src/custom.theme.scss" ],
/* @import "~@angular/material/prebuilt-themes/indigo-pink.css"; */ body { margin: 0; }
@import '~@angular/material/theming'; @include mat-core(); $my-app-primary: mat-palette($mat-blue-grey); $my-app-accent: mat-palette($mat-pink, 500, 900, A100); $my-app-warn: mat-palette($mat-deep-orange); $my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn); @include angular-material-theme($my-app-theme); .alternate-theme { $alternate-primary: mat-palette($mat-light-blue); $alternate-accent: mat-palette($mat-yellow, 400); $alternate-theme: mat-light-theme($alternate-primary, $alternate-accent); @include angular-material-theme($alternate-theme); }
<mat-card class="alternate-theme"> Alternate Theme: <button mat-raised-button color="primary"> Primary </button> <button mat-raised-button color="accent"> Accent </button> <button mat-raised-button color="warn"> Warning </button> </mat-card>
<mat-menu #menu="matMenu"> <button mat-menu-item (click)="openAddContactDialog()">New Contact</button> <button mat-menu-item (click)="toggleTheme.emit()">Toggle theme</button> </mat-menu>
export class ToolbarComponent implements OnInit { @Output() toggleTheme = new EventEmitter<void>();
<app-toolbar (toggleTheme)="toggleTheme()" (toggleSidenav)="sidenav.toggle()"></app-toolbar>
export class SidenavComponent { isAlternateTheme = false; toggleTheme() { this.isAlternateTheme = !this.isAlternateTheme; } }
<mat-sidenav-container fxLayout="row" class="app-sidenav-container" fxFill [class.alternate-theme]="isAlternateTheme">
<mat-menu #menu="matMenu"> <button mat-menu-item (click)="openAddContactDialog()">New Contact</button> <button mat-menu-item (click)="toggleTheme.emit()">Toggle theme</button> <button mat-menu-item (click)="toggleDir.emit()">Toggle dir</button> </mat-menu>
export class ToolbarComponent implements OnInit { @Output() toggleDir = new EventEmitter<void>();
<app-toolbar (toggleDir)="toggleDir()" (toggleTheme)="toggleTheme()" (toggleSidenav)="sidenav.toggle()"></app-toolbar>
export class SidenavComponent implements OnInit, OnDestroy { dir = "ltr"; toggleDir() { this.dir = this.dir === "ltr" ? "rtl" : "ltr"; } }
<mat-sidenav-container fxLayout="row" class="app-sidenav-container" fxFill [dir]="dir" [class.alternate-theme]="isAlternateTheme">
npm install -g vue-cli
vue init webpack-simple dntVue
npm install
<template> <div> <!-- Write your HTML with Vue in here --> </div> </template> <script> export default { // Write your Vue component logic here } </script> <style scoped> /* Write your styles for the component in here */ </style>
import { New } from "./components/New.vue"; export default { components: { New } }
npm install -g @vue/cli
3.0.0-beta.11
vue create my-project
Vue CLI v3.0.0-beta.11 ? Please pick a preset: (Use arrow keys) ❯ default (babel, eslint) Manually select features
{ "useConfigFiles": true, "router": true, "vuex": true, "cssPreprocessor": "sass", "plugins": { "@vue/cli-plugin-babel": {}, "@vue/cli-plugin-eslint": { "config": "airbnb", "lintOn": ["save", "commit"] } } }
<!-- MyCard.vue --> <template> <div class="card"> <h1>Card Title</h1> <p>Card content goes here. Make sure it's not Lorem.</p> </div> </template>
npm install -g @vue/cli-service-global
vue serve MyCard.vue
خروجی:
قابل ذکر است که هر سه package manager معروف npm، bower و Nuget در ویژوال استدیو 2015 به صورت توکار موجود هستند.جزیات بیشتر در مستندات مایکروسافت
Install-Package Bower
مشاهده میکنید که فولدر .bin به پروژهی شما اضافه شده است.
حال درون صفحهی cmd (توجه کنید cmd، نه package manager console) به آدرس پروژه (نه solution) با دستور زیر منتقل شوید:
cd <Project Location>
که به جای project location آدرس فایل پروژه را قرار میدهیم. شکل زیر نمایانگر این مسیر است:
با اجرای دستور زیر bower.json را به پروژه اضافه میکنیم:
bower init
مشاهده میکنید که پس از دستور bower init مواردی که قرار است درون bower قرار گیرد، مقدار دهی میشوند. من مقادیر را به صورت زیر (حالتهای پیش فرض) تکمیل کردم:
حال باید تا اینجای کار یک فایل bower.json برای شما در روت پروژه ساخته شده باشد. حال بیایید اولین اسکریپت رفرنس را به پروژه اضافه نماییم. من قصد دارم تا با دستور زیر JQuery را به پروژه اضافه کنم:
bower install jquery
پکیج JQuery به صورت زیر دانلود میشود و در پوشهی bower_component در روت پروژه قرار میگیرد.
به همین صورت شما میتوانید تمامی نیازمندیهای پروژه را از Git با استفاده از bower package manager دریافت کنید.
import svelte from 'rollup-plugin-svelte'; import resolve from 'rollup-plugin-node-resolve'; import commonjs from 'rollup-plugin-commonjs'; import livereload from 'rollup-plugin-livereload'; import { terser } from 'rollup-plugin-terser'; const production = !process.env.ROLLUP_WATCH; export default { input: 'src/main.js', output: { sourcemap: true, format: 'iife', name: 'app', file: 'public/bundle.js' }, plugins: [ svelte({ // enable run-time checks when not in production dev: !production, // we'll extract any component CSS out into // a separate file — better for performance css: css => { css.write('public/bundle.css'); } }), // If you have external dependencies installed from // npm, you'll most likely need these plugins. In // some cases you'll need additional configuration — // consult the documentation for details: // https://github.com/rollup/rollup-plugin-commonjs resolve(), commonjs(), // Watch the `public` directory and refresh the // browser on changes when not in production !production && livereload('public'), // If we're building for production (npm run build // instead of npm run dev), minify production && terser() ], watch: { clearScreen: false } };
{ "name": "svelte-app", "version": "1.0.0", "devDependencies": { "npm-run-all": "^4.1.5", "rollup": "^1.10.1", "rollup-plugin-commonjs": "^9.3.4", "rollup-plugin-livereload": "^1.0.0", "rollup-plugin-node-resolve": "^4.2.3", "rollup-plugin-svelte": "^5.0.3", "rollup-plugin-terser": "^4.0.4", "sirv-cli": "^0.4.0", "svelte": "^3.0.0" }, "scripts": { "build": "rollup -c", "autobuild": "rollup -c -w", "dev": "run-p start:dev autobuild", "start": "sirv public", "start:dev": "sirv public --dev" } }
build | برای ساخت و ایجاد خروجیهای برنامه توسط rollup مورد قرار استفاده میگیرد. |
autobuild | مانند build برای ساخت خروجیهای نهایی برنامه استفاده میشود. ولی تفاوتی که دارد پس از هر تغییر در سورس کد برنامه به صورت خودکار build جدیدی پس از اجرای آن گرفته میشود. |
dev | برنامه را درحالت Developer Mode اجرا میکند که برای مشاهده تغییرات به صورت خودکار در browser، بدون نیاز به رفرش صفحه و همینطور عیب یابی برنامه مناسب است. |
start | از طریق sirv که یک وب سرور سبک برای هاست کردن سایتهای استاتیک است، برنامه را هاست میکند. |
start:dev | مانند start است با این تفاوت که برنامه را در حالت Developer Mode هاست میکند که میتواند برای عیب یابی برنامه از آن استفاده کرد؛ چرا که سورس برنامه از طریق source Map قابل دسترس خواهد بود. |
<script> export let name; </script> <style> h1 { color: purple; } </style> <h1>Hello {name}!</h1>
import App from './App.svelte'; const app = new App({ target: document.body, props: { name: 'world' } }); export default app;
در این مقاله قصد داریم یک Api تحت وب را با استفاده از فریمورک ASP.NET Core توسعه دهیم تا عملیات CRUD را بر روی دیتابیس MongoDb که یکی از محبوبترین دیتابیسهای NoSql است، انجام دهد. قبل از شروع کار باید ویژوال استودیو نسخهی 2019 را نصب داشته باشید؛ بهطوریکه ورک لود ASP.NET and web development را هم حتما همراه آن نصب کرده باشید. علاوه بر آن باید .Net Core SDK 3.0+ و دیتابیس MongoDb را هم نصب کنید که میتوانید آنها را از آدرسهای زیر دانلود کنید. نگران نصب MongoDb هم نباشید چون نکته خاصی ندارد.
https://docs.mongodb.com/manual/tutorial/install-mongodb-on-windows/
https://dotnet.microsoft.com/download/dotnet-core
نسخهی جاری MongoDb، 4.4 است که پس از نصب، به صورت پیشفرض در آدرس C:\Program Files\MongoDB قرار میگیرد. در مسیر C:\Program Files\MongoDB\Server\4.4\bin فایلهای اصلی MongoDb قرار دارند و برای تعامل با MongoDb، به این فایلها نیاز خواهیم داشت. پس برای اینکه به راحتی بتوان در هر جای سیستم از طریق پاورشل به این فایلها دسترسی داشته باشید، این مسیر را به Path environment variable ویندوز اضافه کنید.
MongoDb دارای یک بخش اصلی یا اصطلاحا یکdaemon است که وظیفهی آن، پردازش درخواستهایی است که برای کار با دادهها صادر میشود. در حقیقت همه کارهایی که ما با دادهها انجام میدهیم مثلا دسترسی به دادهها و دستکاری آنها، از طریق این daemon انجام میگیرد و پشت صحنهی این daemon، با Storage Engine کار خواهد کرد. برای اجرای daemon، پاور شل را باز کنید و دستور mongod را وارد کنید. اگر با تنظیمات پیشفرض اجرا کنید، بر روی پورت 27017 بالا آمده و فایلهای دیتابیس را هم در مسیر C:\data\db قرار میدهد. اگر این مسیر را نداشته باشید، با خطا مواجه میشوید. یا باید این مسیر را تعریف کنید و یا از سوئیچ dbpath -- استفاده کنید تا مسیر فایل دیتابیس را تغییر دهید. پس پاور شل را باز کنید و دستور زیر را وارد کنید.
>> mongod --dbpath C:\BooksData
>> mongo
>> use BookstoreDb
بعد از ساختن دیتابیس، باید یک کالکشن بسازید. کالکشنها را میتوان معادل جداول، در دیتابیسهای رابطهای تصور کرد. با دستور createCollection می توان اینکار را انجام داد. برای اینکار دستور زیر را وارد کنید.
>> db.createCollection('Books')
بعد از ساختن کالکشن، میخواهیم مقداری دیتا را در آن قرار دهیم. معادل رکورد در دیتابیسهای رابطهای، در دیتابیس مونگو دیبی، Document نام دارد که مانند رکوردهای دیتابیسهای رابطهای نیست و ساختار و اسکیمای خاصی ندارد؛ یعنی میتوان هر دیتایی را با هر ساختاری در آن ذخیره کرد. میخواهیم دو Document را به کالکشن Books اضافه کنیم. پس دستور زیر را وارد میکنیم. توجه کنید دادهها با ساختار json وارد میشوند.
>> db.Books.insertMany([{'Name':'Design Patterns','Price':54.93,'Category':'Computers','Author':'Ralph Johnson'}, {'Name':'Clean Code','Price':43.15,'Category':'Computers','Author':'Robert C. Martin'}])
{ "acknowledged" : true, "insertedIds" : [ ObjectId("5bfd996f7b8e48dc15ff215d"), ObjectId("5bfd996f7b8e48dc15ff215e") ] }
>> db.Books.find().pretty()
{ "_id" : ObjectId("5bfd996f7b8e48dc15ff215d"), "Name" : "Design Patterns", "Price" : 54.93, "Category" : "Computers", "Author" : "Ralph Johnson" }, { "_id" : ObjectId("5bfd996f7b8e48dc15ff215e"), "Name" : "Clean Code", "Price" : 43.15, "Category" : "Computers", "Author" : "Robert C. Martin" }