InertiaCore
v0.0.9
คุณสามารถตรวจสอบตัวอย่างเหล่านี้เพื่อให้มีจุดเริ่มต้นสำหรับแอปพลิเคชันใหม่ของคุณ
PM> Install-Package AspNetCore.InertiaCoredotnet add package AspNetCore.InertiaCore คุณต้องเพิ่มบรรทัดไม่กี่บรรทัดในไฟล์ Program.cs หรือ Starup.cs
using InertiaCore . Extensions ;
[ .. . ]
builder . Services . AddInertia ( ) ;
[ .. . ]
app . UseInertia ( ) ; สร้างไฟล์ /Views/App.cshtml
@using InertiaCore
<!DOCTYPE html >
< html >
< head >
< meta charset =" utf-8 " />
< meta name =" viewport " content =" width=device-width, initial-scale=1.0 " />
< title inertia > My App </ title >
</ head >
< body >
@await Inertia.Html(Model)
< script src =" /js/app.js " > </ script >
</ body >
</ html >คุณสามารถเปลี่ยนไฟล์มุมมองรูทโดยใช้:
builder . Services . AddInertia ( options =>
{
options . RootView = "~/Views/Main.cshtml" ;
} ) ; หากต้องการส่งผ่านข้อมูลไปยังส่วนประกอบหน้าให้ใช้ Inertia.Render()
public async Task < IActionResult > Index ( )
{
var posts = await _context . Posts . ToListAsync ( ) ;
var data = new
{
Posts = posts ,
} ;
return Inertia . Render ( "Posts" , data ) ;
} ในการสร้างจุดสิ้นสุดแบบฟอร์มอย่าลืมเพิ่ม [FromBody] ลงในพารามิเตอร์โมเดลของคุณเนื่องจากข้อมูลคำขอถูกส่งผ่านโดยใช้ JSON
[ HttpPost ]
public async Task < IActionResult > Create ( [ FromBody ] Post post )
{
if ( ! ModelState . IsValid )
{
// The validation errors are passed automatically.
return await Index ( ) ;
}
_context . Add ( post ) ;
await _context . SaveChangesAsync ( ) ;
return RedirectToAction ( "Index" ) ;
} คุณสามารถเพิ่มข้อมูลที่ใช้ร่วมกันในมุมมองของคุณโดยใช้ตัวอย่างเช่น Middlewares:
using InertiaCore ;
[ .. . ]
app . Use ( async ( context , next ) =>
{
var userId = context . Session . GetInt32 ( "userId" ) ;
Inertia . Share ( "auth" , new
{
UserId = userId
} ) ;
// Or
Inertia . Share ( new Dictionary < string , object ? >
{
[ "auth" ] => new
{
UserId = userId
}
} ) ;
} ) ;คุณสามารถใช้อุปกรณ์ประกอบฉากขี้เกียจแบบ async เพื่อโหลดข้อมูลแบบอะซิงโครนัสในส่วนประกอบของคุณ สิ่งนี้มีประโยชน์สำหรับการโหลดข้อมูลที่ไม่จำเป็นสำหรับการแสดงผลเริ่มต้นของหน้า
// simply use the LazyProps the same way you normally would, except pass in an async function
public async Task < IActionResult > Index ( )
{
var posts = new LazyProp ( async ( ) => await _context . Posts . ToListAsync ( ) ) ;
var data = new
{
Posts = posts ,
} ;
return Inertia . Render ( "Posts" , data ) ;
}
หากคุณต้องการเปิดใช้งาน SSR ในแอพ Inertia ของคุณอย่าลืมเพิ่ม Inertia.Head() ลงในเค้าโครงของคุณ:
@using InertiaCore
<!DOCTYPE html >
< html >
< head >
< meta charset =" utf-8 " />
< meta name =" viewport " content =" width=device-width, initial-scale=1.0 " />
< title inertia > My App </ title >
@await Inertia.Head(Model)
</ head >
< body >
@await Inertia.Html(Model)
< script src =" /js/app.js " > </ script >
</ body >
</ html >และเปิดใช้งานตัวเลือก SSR:
builder . Services . AddInertia ( options =>
{
options . SsrEnabled = true ;
// You can optionally set a different URL than the default.
options . SsrUrl = "http://127.0.0.1:13714/render" ; // default
} ) ; คลาส Vite Helper สามารถโหลดสไตล์หรือสคริปต์ที่สร้างขึ้นโดยอัตโนมัติได้โดยใช้ตัวช่วย @Vite.Input("src/main.tsx") คุณยังสามารถเปิดใช้งาน HMR เมื่อใช้ React โดยใช้ตัวช่วย @Vite.ReactRefresh() คู่นี้เข้ากันได้ดีกับแพ็คเกจ laravel-vite-plugin NPM
ในการเริ่มต้นใช้งาน Vite Helper คุณจะต้องเพิ่มอีกหนึ่งบรรทัดในไฟล์ Program.cs หรือ Starup.cs
using InertiaCore . Extensions ;
[ .. . ]
builder . Services . AddViteHelper ( ) ;
// Or with options (default values shown)
builder . Services . AddViteHelper ( options =>
{
options . PublicDirectory = "wwwroot" ;
options . BuildDirectory = "build" ;
options . HotFile = "hot" ;
options . ManifestFilename = "manifest.json" ;
} ) ; นี่คือตัวอย่างสำหรับแอป TypeScript React ด้วย HMR:
@using InertiaCore
@using InertiaCore.Utils
<!DOCTYPE html >
< html >
< head >
< meta charset =" utf-8 " />
< meta name =" viewport " content =" width=device-width, initial-scale=1.0 " />
< title inertia > My App </ title >
</ head >
< body >
@* This has to go first, otherwise preamble error *@
@Vite.ReactRefresh()
@await Inertia.Html(Model)
@Vite.Input("src/main.tsx")
</ body >
</ html > และนี่คือ vite.config.js ที่เกี่ยวข้อง
import { defineConfig } from "vite" ;
import react from "@vitejs/plugin-react" ;
import laravel from "laravel-vite-plugin" ;
import path from "path" ;
import { mkdirSync } from "fs" ;
// Auto-initialize the default output directory
const outDir = "../wwwroot/build" ;
mkdirSync ( outDir , { recursive : true } ) ;
// https://vitejs.dev/config/
export default defineConfig ( {
plugins : [
laravel ( {
input : [ "src/main.tsx" ] ,
publicDirectory : outDir ,
} ) ,
react ( ) ,
] ,
resolve : {
alias : {
"@" : path . resolve ( __dirname , "src" ) ,
} ,
} ,
build : {
outDir ,
emptyOutDir : true ,
} ,
} ) ;นี่คือตัวอย่างสำหรับแอป TypeScript Vue พร้อมโหลดใหม่:
@using InertiaCore
@using InertiaCore.Utils
<!DOCTYPE html >
< html >
< head >
< meta charset =" utf-8 " />
< meta name =" viewport " content =" width=device-width, initial-scale=1.0 " />
< title inertia > My App </ title >
</ head >
< body >
@await Inertia.Html(Model)
@Vite.Input("src/app.ts")
</ body >
</ html > และนี่คือ vite.config.js ที่เกี่ยวข้อง
import { defineConfig } from 'vite' ;
import vue from '@vitejs/plugin-vue' ;
import laravel from "laravel-vite-plugin" ;
import path from "path" ;
import { mkdirSync } from "fs" ;
const outDir = "../wwwroot/build" ;
mkdirSync ( outDir , { recursive : true } ) ;
export default defineConfig ( {
plugins : [
laravel ( {
input : [ "src/app.ts" ] ,
publicDirectory : outDir ,
refresh : true ,
} ) ,
vue ( {
template : {
transformAssetUrls : {
base : null ,
includeAbsolute : false ,
} ,
} ,
} ) ,
] ,
resolve : {
alias : {
"@" : path . resolve ( __dirname , "src" ) ,
} ,
} ,
build : {
outDir ,
emptyOutDir : true ,
} ,
} ) ;นี่คือตัวอย่างที่เพิ่งสร้างไฟล์ CSS เดียว:
@using InertiaCore
@using InertiaCore.Utils
<!DOCTYPE html >
< html >
< head >
< meta charset =" utf-8 " />
< meta name =" viewport " content =" width=device-width, initial-scale=1.0 " />
</ head >
< body >
@await Inertia.Html(Model)
@Vite.Input("src/main.scss")
</ body >
</ html >
