Microsoft.AspNetCore.Components.WebAssembly.Server
app.UseBlazorFrameworkFiles(); app.UseStaticFiles(); app.UseRouting();
app.MapFallbackToFile("index.html");
Microsoft.AspNetCore.Components.WebAssembly.Server
app.UseBlazorFrameworkFiles(); app.UseStaticFiles(); app.UseRouting();
app.MapFallbackToFile("index.html");
> dotnet run Project TestApp (.NETCoreApp,Version=v1.0) was previously compiled. Skipping compilation. Hosting environment: Production Content root path: C:\Projects\TestApp Now listening on: http://localhost:5000 Application started. Press Ctrl+C to shut down.
>set ASPNETCORE_ENVIRONMENT "Development" SUCCESS: Specified value was saved.
using System; using System.Data.Entity; namespace UsingNgen { public class NgenDbContex : DbContext { } class Program { static void Main() { var nGenCtx = new NgenDbContex(); Console.WriteLine("Press a key to exit..."); Console.ReadKey(); } } }
بعد از ذخیره فایل، در پنجره بالا دکمهای به نام Open in WPA ظاهر میشود. WPA مخفف Windows Performance Analyzer میباشد. آن را کلیک کنید تا محیط آنالایزر باز شود.
حال در سمت چپ این پنجره انواع آنالایزرها را مشاهده میکنید. روی آنالایزر Computation کلیک کنید و از زیرمجموعهی آن، CPU Usage را انتخاب کنید. آمار مربوط به برنامه خودمان را در تصویر بالا مشاهده میکنید. کل برنامه 164 میلی ثانیه زمان برده و فایل Clr.dll حدود 47 میلی ثانیه و یک فایل clrjit.dll نیز برای تولید کد JIT وجود دارد. حال برای تسریع در عمل شروع، از تکنیک Ngen به صورت زیر استفاده میکنیم.
3- دوباره به نوار جستجوی ویندوز رفته و ابزار Developer Command Prompt for VsXXXX را با امتیاز دسترسی از نوع Admin اجرا کنید. XXXX نسخهی ویژوال استودیو میباشد.
حال به محل ذخیره فایل اجرایی برنامه رفته و دستور Ngen Install EntityFramework.dll را تایپ کنید تا یک ایمیج کد Native از entityframework.dll ساخته شود. دوباره ابزار Windows Performance Recorder را لود کرده و روی دکمه Start کلیک کنید و فایل اجرایی برنامه را اجرا نمایید. پس از اتمام عملیات ثبت جزئیات، آن را در Windows Performance Analyzer باز نمایید.
همانطور که مشاهده میکنید کل برنامه ما 89 میلی ثانیه زمان برده و Clr.dll 29 ثانیه و به جای clrjit.dll فایل EntityFramework به صورت native تولید شده است.
C:\Users\Vahid>dotnet --version 1.0.1
The following error occurred attempting to run the project model server process (1.0.1). Unable to start the process. No executable found matching command "dotnet-projectmodel-server"
\.vs\restore.dg(1,1): error MSB4025: The project file could not be loaded. Data at the root level is invalid. Line 1, position 1.
"C:\Program Files\dotnet\dotnet.exe" restore "D:\project1\.vs\restore.dg"
نام پارامتر | شرح کارکرد |
c- یا collection-- | میتواند پشتیبانی گیری را به یک کالکشن خاص محدود کند. |
d- یا db-- | از دیتابیسی مشخص استفاده کند. |
u- یا username- | نام کاربری سرور |
p- یا password-- | کلمه عبور سرور |
dbpath-- | مسیر پوشهای را که دیتاها داخل آن است، دریافت میکند و بجای ایجاد یک Instance مستقیم پشتیبانی گیری را آغاز میکند. توجه : در این حالت پوشه به طور کامل قفل خواهد شد و سرور نباید در حالت اجرا قرار گرفته باشد. |
DirectoryPerDb-- | در صورتیکه هر دیتابیسی دارای محل جداگانهای برای پشتیبان گیری باشد. |
o- یا out-- | محل خروجی و ذخیره پشتیبان را مشخص میکند. |
q- یا query-- | پشتیبان، در قالب کوئریهای جیسون خواهد بود. |
repair-- | اصلاح اسناد در صورت خراب شدن دیتابیس. در این حالت باید مکان ذخیره و نام دیتابیس، با پارامترهای بالا ذکر شود. |
به عنوان مثال دستور زیر از دیتابیس publisher و کالکشن Books، پشتیبان تهیه میکند و در مسیر گفته شده آن را ذخیره میکند:
D:\Program Files\MongoDB\Server\3.4\bin>mongodump --db "publisher" --collection books --out "D:\mydumps" 2017-03-04T21:23:04.615+0330 writing publisher.books to 2017-03-04T21:23:04.637+0330 done dumping publisher.books (7 documents)
D:\Program Files\MongoDB\Server\3.4\bin>mongodump
پارامتر | شرح کارکرد |
c- یا collection-- | میتواند پشتیبانی گیری را به یک کالکشن خاص محدود کند. |
d- یا db-- | از دیتابیسی مشخصی استفاده کند. |
u- یا username- | نام کاربری سرور |
p- یا password-- | کلمه عبور سرور |
port-- | شماره پورت سرور |
host-- | هاست مونگو ، ترکیب hostname:port میتواند استفاده از سوییچ port را بی نیاز کند. |
ipv6-- | فعال سازی IPV6 |
dbpath-- | مسیر پوشهای را که دیتاها داخل آن است، دریافت میکند و بجای ایجاد یک Instance مستقیم پشتیبانی گیری را آغاز میکند. توجه : در این حالت پوشه به طور کامل قفل خواهد شد و سرور نباید در حالت اجرا قرار گرفته باشد. |
DirectoryPerDb-- | در صورتی که هر دیتابیسی دارای محل جداگانهای برای پشتیبان گیری باشد. |
keepIndexVersion -- | موقع بازگردانی، ایندکسها را با نسخه جدید به روزرسانی نمیکند. |
mongorestore "D:\mydumps"
mongorestore "D:\mydumps\publisher\books.bson" --db publisher -c books
mongorestore
npm install electron-packager --save-dev
"build":"electron-packager . myapp --platform=all --arch=all --overwrite"
darwin | سیستم عامل مکینتاش |
linux | سیستم عامل لینوکس |
win32 | سیستم عامل ویندوز |
فلگ بعدی معماری سیستم عامل را نشان میدهد که برای سیستمهای 32 بیتی مقدار ia32 و برای سیستمهای 64 بیتی مقدار x64 میباشد. ولی در صورتیکه همه مقادیر را در نظر دارید، میتوانید همانند خط بالا از مقدار all استفاده کنید.
در همه حالات بالا اگر فقط تعدادی از آنها را بخواهید وارد کنید، میتوانید هر عبارت را با , از هم جدا سازید؛ مانند darwin,linux که برای این دو پلتفرم تنها نسخه اجرایی تولید میشود.
فلگ آخر اجباری نیست، ولی برای دفعات بعدی بسیار مناسب است. اگر از قبل یک بسته بندی وجود دارد، بسته بندی جدید بر روی قبلیها رونویسی خواهد شد.
حال با دستور زیر در nodejs، عملیات بسته بندی را آغاز میکنیم:
npm run build
--ignore=node_modules/<package_name> یا --ignore=node_modules/electron_[0-9]*
aap-version | نسخه برنامه |
app-copyright | متنی برای قانون کپی رایت |
asar | موقعی که برنامهای را بسته بندی میکنید، در دایرکتوری Resources/App، هنوز سورس برنامه وجود دارد که فایل اجرایی شما بدون آن قادر به ادامه فعالیت نیست. ولی اگر بخواهیم این سورس را در اختیار شخصی قرار ندهیم، باید از ویژگی asar استفاده کنیم. با استفاده از این فلگ، فایلی با نام app.asar جای این دایرکتوری ایجاد خواهد شد و دیگر نیازی نیست تا سورس برنامه همراه آن باشد. |
icon | در صورتیکه قصد استفاده از آیکنی بجز آیکون الکترون را دارید. |
out | به طور پیش فرض برنامه نهایی در دایرکتوری کاری پروژه اضافه میشود. در صورتیکه قصد دارید آنرا در دایرکتوری بجز دایرکتوری کاری قرار دهید، از این ویژگی استفاده کنید. |
version-string | این خصوصیت برای نسخه بندی برنامه است که فقط برای ویندوز کاربرد دارد و شامل خصوصیاتی چون نام محصول، نام سازنده، توصیف برنامه و ... میباشد:--version-string.ProductName="Product" Properties supported: - CompanyName - FileDescription - OriginalFilename - ProductName - InternalName |
prune | استفاده از این فلگ باعث میشود کلیه بستههای معرفی شده در dev-dependency به بسته نهایی اضافه نشوند |
دستور بسته بندی بالا را نیز میتوان به طور خلاصهتر نیز نوشت :
electron-packager . --all
ng generate component [name] یا ng g c [name]
<template> <v-app> <v-toolbar app> <v-toolbar-title> <span>Vuetify</span> <span>MATERIAL DESIGN</span> </v-toolbar-title> <v-spacer></v-spacer> <v-btn flat href="https://github.com/vuetifyjs/vuetify/releases/latest" target="_blank" > <span>Latest Release</span> </v-btn> </v-toolbar> <v-content> <HelloWorld/> </v-content> </v-app> </template> <script> export default { name: 'App', components: { }, data () { return { // } } } </script>
<template> <v-container v-if="loading"> <div> <v-progress-circular indeterminate :size="150" :width="8" color="green"> </v-progress-circular> </div> </v-container> <v-container v-else grid-list-xl> <v-layout wrap> <v-flex xs4 v-for="(item, index) in wholeResponse" :key="index" mb-2> <v-card> <v-img :src="item.Poster" aspect-ratio="1" ></v-img> <v-card-title primary-title> <div> <h2>{{item.Title}}</h2> <div>Year: {{item.Year}}</div> <div>Type: {{item.Type}}</div> <div>IMDB-id: {{item.imdbID}}</div> </div> </v-card-title> <v-card-actions> <v-btn flat color="green" @click="singleMovie(item.imdbID)" >View</v-btn> </v-card-actions> </v-card> </v-flex> </v-layout> </v-container> </template> <script> import movieApi from '@/services/MovieApi' export default { data () { return { wholeResponse: [], loading: true } }, mounted () { movieApi.fetchMovieCollection('indiana') .then(response => { this.wholeResponse = response.Search this.loading = false }) .catch(error => { console.log(error) }) }, methods: { singleMovie (id) { this.$router.push('/movie/' + id) } } } </script> <style scoped> .v-progress-circular margin: 1rem </style>
<template> <v-container v-if="loading"> <div> <v-progress-circular indeterminate :size="150" :width="8" color="green"> </v-progress-circular> </div> </v-container> <v-container v-else> <v-layout wrap> <v-flex xs12 mr-1 ml-1> <v-card> <v-img :src="singleMovie.Poster" aspect-ratio="2" ></v-img> <v-card-title primary-title> <div> <h2>{{singleMovie.Title}}-{{singleMovie.Year}}</h2> <p>{{ singleMovie.Plot}} </p> <h3>Actors:</h3>{{singleMovie.Actors}} <h4>Awards:</h4> {{singleMovie.Awards}} <p>Genre: {{singleMovie.Genre}}</p> </div> </v-card-title> <v-card-actions> <v-btn flat color="green" @click="back">back</v-btn> </v-card-actions> </v-card> </v-flex> </v-layout> <v-layout row wrap> <v-flex xs12> <div> <v-dialog v-model="dialog" width="500"> <v-btn slot="activator" color="green" dark> View Ratings </v-btn> <v-card> <v-card-title primary-title > Ratings </v-card-title> <v-card-text> <table style="width:100%" border="1" > <tr> <th>Source</th> <th>Ratings</th> </tr> <tr v-for="(rating,index) in this.ratings" :key="index"> <td align="center">{{ratings[index].Source}}</td> <td align="center"><v-rating :half-increments="true" :value="ratings[index].Value"></v-rating></td> </tr> </table> </v-card-text> <v-divider></v-divider> <v-card-actions> <v-spacer></v-spacer> <v-btn color="primary" flat @click="dialog = false" > OK </v-btn> </v-card-actions> </v-card> </v-dialog> </div> </v-flex> </v-layout> </v-container> </template> <script> import movieApi from '@/services/MovieApi' export default { props: ['id'], data () { return { singleMovie: '', dialog: false, loading: true, ratings: '' } }, mounted () { movieApi.fetchSingleMovie(this.id) .then(response => { this.singleMovie = response this.ratings = this.singleMovie.Ratings this.ratings.forEach(function (element) { element.Value = parseFloat(element.Value.split(/\/|%/)[0]) element.Value = element.Value <= 10 ? element.Value / 2 : element.Value / 20 } ) this.loading = false }) .catch(error => { console.log(error) }) }, methods: { back () { this.$router.push('/') } } } </script> <style scoped> .v-progress-circular margin: 1rem </style>
<template> <v-container v-if="loading"> <div> <v-progress-circular indeterminate :size="150" :width="8" color="green"> </v-progress-circular> </div> </v-container> <v-container v-else-if="noData"> <div> <h2>No Movie in API with {{this.name}}</h2> </div> </v-container> <v-container v-else grid-list-xl> <v-layout wrap> <v-flex xs4 v-for="(item, index) in movieResponse" :key="index" mb-2> <v-card> <v-img :src="item.Poster" aspect-ratio="1" ></v-img> <v-card-title primary-title> <div> <h2>{{item.Title}}</h2> <div>Year: {{item.Year}}</div> <div>Type: {{item.Type}}</div> <div>IMDB-id: {{item.imdbID}}</div> </div> </v-card-title> <v-card-actions> <v-btn flat color="green" @click="singleMovie(item.imdbID)" >View</v-btn> </v-card-actions> </v-card> </v-flex> </v-layout> </v-container> </template> <script> // در همه کامپوننتها جهت واکشی اطلاعات ایمپورت میشود import movieApi from '@/services/MovieApi' export default { // route پارامتر مورد استفاده در props: ['name'], data () { return { // آرایه ای برای دریافت فیلمها movieResponse: [], // جهت نمایش لودینگ در زمان بارگذاری اطلاعات loading: true, // مشخص کردن آیا اطللاعاتی با سرچ انجام شده پیدا شده یا خیر noData: false } }, // تعریف متدهایی که در برنامه استفاده میکنیم methods: { // این تابع باعث میشود که // route // تعریف شده با نام // Movie // فراخوانی شود و آدرس بار هم تغییر میکنید به آدرسی شبیه زیر // my-site/movie/tt4715356 singleMovie (id) this.$router.push('/movie/' + id) }, fetchResult (value) { movieApi.fetchMovieCollection(value) .then(response => { if (response.Response === 'True') { this.movieResponse = response.Search this.loading = false this.noData = false } else { this.noData = true this.loading = false } }) .catch(error => { console.log(error) }) } }, // جز توابع // life cycle // vue.js // میباشد و زمانی که تمپلیت رندر شد اجرا میشود // همچنین با هر بار تغییر در // virtual dom // این تابع اجرا میشود mounted () { this.fetchResult(this.name) }, // watchها // کار ردیابی تغییرات را انجام میدهند و به محض تغییر مقدار پراپرتی // name // کد مورد نظر در بلاک زیر انجام میشود watch: { name (value) { this.fetchResult(value) } } } </script> <style scoped> .v-progress-circular margin: 1rem </style>
import axios from 'axios'
import axios from 'axios' export default { fetchMovieCollection (name) { return axios.get('&s=' + name) .then(response => { return response.data }) }, fetchSingleMovie (id) { return axios.get('&i=' + id) .then(response => { return response.data }) } }
axios.defaults.baseURL = 'http://www.omdbapi.com/?apikey=b76b385c&page=1&type=movie&Content-Type=application/json'
import Vue from 'vue' import VueRouter from 'vue-router' // برای رجیستر کردن کامپوننتها در بخش روتر، آنها را ایمپورت میکنیم import LatestMovie from '@/components/LatestMovie' import Movie from '@/components/Movie' import SearchMovie from '@/components/SearchMovie' Vue.use(VueRouter) export default new VueRouter({ routes: [ { // مسیری هست که برای این کامپوننت در نظر گرفته شده(صفحه اصلی)بدون پارامتر path: '/', // نام روت name: 'LatestMovie', // نام کامپوننت مورد نظر component: LatestMovie }, { // پارامتری هست که به این کامپوننت ارسال میشه id // برای دستیابی به این کامپوننت نیاز هست با آدرسی شبیه زیر اقدام کرد // my-site/movie/tt4715356 path: '/movie/:id', name: 'Movie', // در کامپوننت جاری یک پراپرتی وجود دارد //id که میتوان با نام // به آن دسترسی پیدا کرد props: true, component: Movie }, { path: '/search/:name', name: 'SearchMovie', props: true, component: SearchMovie } ], // achieve URL navigation without a page reload // When using history mode, the URL will look "normal," e.g. http://oursite.com/user/id. Beautiful! // در آدرس # قرار نمیگیرد mode: 'history' })
npm install