首頁>ASP源碼>其他類別
下載
Asp.Net Core Web API ile React te Resim Yukleme Guncelleme ve Silme

使用 Asp.Net Core Web API 在 React 中上傳、更新和刪除影像

我討論瞭如何使用 Asp.Net Core WebAPI 在 Reactjs 中載入映像。我們正在建立 Asp.Net Core Web API 並建立具有實體框架核心的 SQL Server 資料庫。然後我建立了一個用於映像載入的 asp.net Core API 控制器。

我們在 Reactjs 中創建了客戶端應用程式。為此設計了帶有圖像上傳器的表單。單獨顯示所選影像預覽。在表單提交事件中，我將所選圖像載入到 Asp.Net Web API 中。

使用的技術

工具： VS Code、Visual Studio、SSMS、Postman

客戶端： Reactjs

API： Asp.Net Core WebAPI

專案的原始碼和註解行

員工控制器

該控制器連接到資料庫連接，並透過處理 HTTP GET、POST、PUT 和 DELETE 請求來提供列出、插入、更新和刪除員工記錄的方法。

該控制器透過與員工表單互動來工作，員工可以在其中上傳圖像。此表單是在React端設計的，是使用專案根目錄下的npx create-react-app命令建立的。

為GET、POST、PUT和DELETE操作提供了相關方法。透過 GET 請求，將列出所有現有員工記錄。 PUT 要求更新指定的員工記錄，也用於變更員工的個人資料圖片。 POST 要求新增新的員工記錄並上傳員工的個人資料照片。 DELETE 要求刪除指定的員工記錄。

此外，還提供了兩種特殊方法 SaveImage() 和 DeleteImage()，用於載入和刪除員工記錄中的影像。這些方法處理員工個人資料圖像的上傳和刪除。

>> GetEmployees() { return await _context.Employees .Select(x => new EmployeeModel() { EmployeeID = x.EmployeeID, EmployeeName = x.EmployeeName, Occupation = x.Occupation, ImageName = x.ImageName, ImageSrc = String.Format("{0}://{1}{2}/Images/{3}", Request.Scheme, Request.Host, Request.PathBase, x.ImageName) }) .ToListAsync(); } // GET: api/Employee/5 [HttpGet("{id}")] public async Task> GetEmployeeModel(int id) { var employeeModel = await _context.Employees.FindAsync(id); if (employeeModel == null) { return NotFound(); } return employeeModel; } // PUT: api/Employee/5 // To protect from overposting attacks, enable the specific properties you want to bind to, for // more details, see https://go.microsoft.com/fwlink/?linkid=2123754. [HttpPut("{id}")] public async Task PutEmployeeModel(int id, [FromForm] EmployeeModel employeeModel) { if (id != employeeModel.EmployeeID) { return BadRequest(); } if (employeeModel.ImageFile != null) { DeleteImage(employeeModel.ImageName); employeeModel.ImageName = await SaveImage(employeeModel.ImageFile); } _context.Entry(employeeModel).State = EntityState.Modified; try { await _context.SaveChangesAsync(); } catch (DbUpdateConcurrencyException) { if (!EmployeeModelExists(id)) { return NotFound(); } else { throw; } } return NoContent(); } // POST: api/Employee // To protect from overposting attacks, enable the specific properties you want to bind to, for // more details, see https://go.microsoft.com/fwlink/?linkid=2123754. [HttpPost] public async Task> PostEmployeeModel([FromForm] EmployeeModel employeeModel) { employeeModel.ImageName = await SaveImage(employeeModel.ImageFile); _context.Employees.Add(employeeModel); await _context.SaveChangesAsync(); return StatusCode(201); } // DELETE: api/Employee/5 [HttpDelete("{id}")] public async Task> DeleteEmployeeModel(int id) { var employeeModel = await _context.Employees.FindAsync(id); if (employeeModel == null) { return NotFound(); } DeleteImage(employeeModel.ImageName); _context.Employees.Remove(employeeModel); await _context.SaveChangesAsync(); return employeeModel; } private bool EmployeeModelExists(int id) { return _context.Employees.Any(e => e.EmployeeID == id); } [NonAction] public async Task SaveImage(IFormFile imageFile) { string imageName = new String(Path.GetFileNameWithoutExtension(imageFile.FileName).Take(10).ToArray()).Replace(' ', '-'); imageName = imageName + DateTime.Now.ToString("yymmssfff") + Path.GetExtension(imageFile.FileName); var imagePath = Path.Combine(_hostEnvironment.ContentRootPath, "Images", imageName); using (var fileStream = new FileStream(imagePath, FileMode.Create)) { await imageFile.CopyToAsync(fileStream); } return imageName; } [NonAction] public void DeleteImage(string imageName) { var imagePath = Path.Combine(_hostEnvironment.ContentRootPath, "Images", imageName); if (System.IO.File.Exists(imagePath)) System.IO.File.Delete(imagePath); } } }">
 using System ;
using System . Collections . Generic ;
using System . Linq ;
using System . Threading . Tasks ;
using Microsoft . AspNetCore . Http ;
using Microsoft . AspNetCore . Mvc ;
using Microsoft . EntityFrameworkCore ;
using EmployeeRegisterAPI . Models ;
using System . IO ;
using Microsoft . AspNetCore . Hosting ;

namespace EmployeeRegisterAPI . Controllers
{ 
    [ Route ( "api/[controller]" ) ]
    [ ApiController ]
    public class EmployeeController : ControllerBase
    {
        private readonly EmployeeDbContext _context ;
        private readonly IWebHostEnvironment _hostEnvironment ;

        public EmployeeController ( EmployeeDbContext context , IWebHostEnvironment hostEnvironment )
        {
         
            _context = context ;
            this . _hostEnvironment = hostEnvironment ;
        }

        // GET: api/EmployeeModels
        [ HttpGet ]
        public async Task < ActionResult < IEnumerable < EmployeeModel > > > GetEmployees ( )
        {

            return await _context . Employees
                . Select ( x => new EmployeeModel ( )
                {
                    EmployeeID = x . EmployeeID ,
                    EmployeeName = x . EmployeeName ,
                    Occupation = x . Occupation ,
                    ImageName = x . ImageName ,
                    ImageSrc = String . Format ( "{0}://{1}{2}/Images/{3}" , Request . Scheme , Request . Host , Request . PathBase , x . ImageName )
                } )
                . ToListAsync ( ) ;
        }
        // GET: api/Employee/5
        [ HttpGet ( "{id}" ) ]
        public async Task < ActionResult < EmployeeModel > > GetEmployeeModel ( int id )
        {
            var employeeModel = await _context . Employees . FindAsync ( id ) ;

            if ( employeeModel == null )
            {
                return NotFound ( ) ;
            }

            return employeeModel ;
        }

        // PUT: api/Employee/5
        // To protect from overposting attacks, enable the specific properties you want to bind to, for
        // more details, see https://go.microsoft.com/fwlink/?linkid=2123754.
        [ HttpPut ( "{id}" ) ]
        public async Task < IActionResult > PutEmployeeModel ( int id , [ FromForm ] EmployeeModel employeeModel )
        {
            if ( id != employeeModel . EmployeeID )
            {
                return BadRequest ( ) ;
            }

            if ( employeeModel . ImageFile != null )
            {
                DeleteImage ( employeeModel . ImageName ) ;
                employeeModel . ImageName = await SaveImage ( employeeModel . ImageFile ) ;
            }

            _context . Entry ( employeeModel ) . State = EntityState . Modified ;

            try
            {
                await _context . SaveChangesAsync ( ) ;
            }
            catch ( DbUpdateConcurrencyException )
            {
                if ( ! EmployeeModelExists ( id ) )
                {
                    return NotFound ( ) ;
                }
                else
                {
                    throw ;
                }
            }

            return NoContent ( ) ;
        }

        // POST: api/Employee
        // To protect from overposting attacks, enable the specific properties you want to bind to, for
        // more details, see https://go.microsoft.com/fwlink/?linkid=2123754.
        [ HttpPost ]
        public async Task < ActionResult < EmployeeModel > > PostEmployeeModel ( [ FromForm ] EmployeeModel employeeModel )
        {
            employeeModel . ImageName = await SaveImage ( employeeModel . ImageFile ) ;
            _context . Employees . Add ( employeeModel ) ;
            await _context . SaveChangesAsync ( ) ;

            return StatusCode ( 201 ) ;
        }

        // DELETE: api/Employee/5
        [ HttpDelete ( "{id}" ) ]
        public async Task < ActionResult < EmployeeModel > > DeleteEmployeeModel ( int id )
        {
            var employeeModel = await _context . Employees . FindAsync ( id ) ;
            if ( employeeModel == null )
            {
                return NotFound ( ) ;
            }
            DeleteImage ( employeeModel . ImageName ) ;
            _context . Employees . Remove ( employeeModel ) ;
            await _context . SaveChangesAsync ( ) ;

            return employeeModel ;
        }

        private bool EmployeeModelExists ( int id )
        {
            return _context . Employees . Any ( e => e . EmployeeID == id ) ;
        }

        [ NonAction ]
        public async Task < string > SaveImage ( IFormFile imageFile )
        {
            string imageName = new String ( Path . GetFileNameWithoutExtension ( imageFile . FileName ) . Take ( 10 ) . ToArray ( ) ) . Replace ( ' ' , '-' ) ;
            imageName = imageName + DateTime . Now . ToString ( "yymmssfff" ) + Path . GetExtension ( imageFile . FileName ) ;
            var imagePath = Path . Combine ( _hostEnvironment . ContentRootPath , "Images" , imageName ) ;
            using ( var fileStream = new FileStream ( imagePath , FileMode . Create ) )
            {
                await imageFile . CopyToAsync ( fileStream ) ;
            }
            return imageName ;
        }

        [ NonAction ]
        public void DeleteImage ( string imageName )
        {
            var imagePath = Path . Combine ( _hostEnvironment . ContentRootPath , "Images" , imageName ) ;
            if ( System . IO . File . Exists ( imagePath ) )
                System . IO . File . Delete ( imagePath ) ;
        }
    }
}

員工.js

此表單允許使用者新增或編輯員工。該元件提供了一個表單，您可以在其中上傳圖像並輸入有關員工姓名和工作的資訊。此表單由一個圖像上傳區域和兩個文字輸入欄位組成。

使用了許多變數。 defaultImageSrc 變數保存預設影像路徑。 initialFieldValues變數包含組件初始狀態下要使用的初始值。使用 useState，可以在元件內追蹤值的狀態。

useEffect函數在組件加載過程中使用，當recordForEdit變數發生變化時，會觸發組件重新加載，並使用setValues函數更新values變數。

當文字輸入欄位變更時，將呼叫handleInputChange 函數。函數使用e.target.name和e.target.value捕獲更改欄位的名稱和值，並使用setValues函數更新values變數。

如果圖片上傳區域發生變化，就會呼叫showPreview函數。此函數將所選檔案的路徑保存在 imageFile 變數中，並使用 FileReader 物件建立檔案預覽並更新 imageSrc 變數。

驗證函數驗證表單的正確性。此函數用於確保正確填充values變數。 setErrors 函數更新錯誤變量，resetForm 函數重置表單並清除錯誤變數。

提交表單時呼叫handleFormSubmit 函數。此函數使用 FormData 物件檢索表單數據，並透過呼叫 addOrEdit 函數將資料傳送到伺服器。

applyErrorClass 函數將無效字段類別應用於錯誤字段，從而導致這些字段顯示錯誤。

該元件提供了一個表單，您可以在其中上傳圖像並輸入有關員工姓名和工作的資訊。此表單由一個圖像上傳區域和兩個文字輸入欄位組成。

x == true) } const resetForm = () => { setValues(initialFieldValues) document.getElementById('image-uploader').value = null; setErrors({}) } const handleFormSubmit = e => { e.preventDefault() if (validate()) { const formData = new FormData() formData.append('employeeID', values.employeeID) formData.append('employeeName', values.employeeName) formData.append('occupation', values.occupation) formData.append('imageName', values.imageName) formData.append('imageFile', values.imageFile) addOrEdit(formData, resetForm) } } const applyErrorClass = field => ((field in errors && errors[field] == false) ? ' invalid-field' : '') return ( <>

) }">
 import React , { useState , useEffect } from 'react'

const defaultImageSrc = '/img/3135715.png'

const initialFieldValues = {
    employeeID : 0 ,
    employeeName : '' ,
    occupation : '' ,
    imageName : '' ,
    imageSrc : defaultImageSrc ,
    imageFile : null
}

export default function Employee ( props ) {

    const { addOrEdit , recordForEdit } = props

    const [ values , setValues ] = useState ( initialFieldValues )
    const [ errors , setErrors ] = useState ( { } )


    useEffect ( ( ) => {
        if ( recordForEdit != null )
            setValues ( recordForEdit ) ;
    } , [ recordForEdit ] )

    const handleInputChange = e => {
        const { name , value } = e . target ;
        setValues ( {
            ... values ,
            [ name ] : value
        } )
    }

    const showPreview = e => {
        if ( e . target . files && e . target . files [ 0 ] ) {
            let imageFile = e . target . files [ 0 ] ;
            const reader = new FileReader ( ) ;
            reader . onload = x => {
                setValues ( {
                    ... values ,
                    imageFile ,
                    imageSrc : x . target . result
                } )
            }
            reader . readAsDataURL ( imageFile )
        }
        else {
            setValues ( {
                ... values ,
                imageFile : null ,
                imageSrc : defaultImageSrc
            } )
        }
    }

    const validate = ( ) => {
        let temp = { }
        temp . employeeName = values . employeeName == "" ? false : true ;
        temp . imageSrc = values . imageSrc == defaultImageSrc ? false : true ;
        setErrors ( temp )
        return Object . values ( temp ) . every ( x => x == true )
    }

    const resetForm = ( ) => {
        setValues ( initialFieldValues )
        document . getElementById ( 'image-uploader' ) . value = null ;
        setErrors ( { } )
    }

    const handleFormSubmit = e => {
        e . preventDefault ( )
        if ( validate ( ) ) {
            const formData = new FormData ( )
            formData . append ( 'employeeID' , values . employeeID )
            formData . append ( 'employeeName' , values . employeeName )
            formData . append ( 'occupation' , values . occupation )
            formData . append ( 'imageName' , values . imageName )
            formData . append ( 'imageFile' , values . imageFile )
            addOrEdit ( formData , resetForm )
        }
    }

    const applyErrorClass = field => ( ( field in errors && errors [ field ] == false ) ? ' invalid-field' : '' )

    return (
        < >
            < div className = "container text-center" >
                < p className = "lead" >  p >
             div >
            < form autoComplete = "off" noValidate onSubmit = { handleFormSubmit } >
                < div className = "card" style = { { backgroundColor : '#ced114' } } >
                    < img src = { values . imageSrc } className = "card-img-top" />
                    < div className = "card-body" >
                        < div className = "form-group" >
                            < input type = "file" accept = "image/*" className = { "form-control-file" + applyErrorClass ( 'imageSrc' ) }
                                onChange = { showPreview } id = "image-uploader" />
                         div >
                        < div className = "form-group"  style = { { backgroundColor : '#ced114' } } >
                            < input className = { "form-control" + applyErrorClass ( 'employeeName' ) } placeholder = "Employee Name" name = "employeeName"
                                value = { values . employeeName }
                                onChange = { handleInputChange } />
                         div >
                        < div className = "form-group" >
                            < input className = "form-control" placeholder = "Occupation" name = "occupation"
                                value = { values . occupation }
                                onChange = { handleInputChange } />
                         div >
                        < div className = "form-group text-center" >
                            < button type = "submit" className = "btn btn-light" style = { { color : '#ced114' } } > Submit  button >
                         div >
                     div >
                 div >
             form >
         >
    )
}

員工列表.js

此 React 元件處理建立、編輯、刪除和檢視員工記錄。

它使用 useState 和 useEffect React 掛鉤。 useState 為組件的狀態定義狀態變數並傳回 setState。 useEffect 運行一個函數來回應載入或重繪元件等事件。

Axios 用於進行 RESTful Web 服務呼叫。名為employeeAPI 的輔助函數實例化RESTful 調用，並且可以使用Axios 的功能來變更資源URL。

freshEmployeeList 函數從伺服器擷取員工記錄，並使用 setEmployeeList 將其設定為元件的狀態。

addOrEdit 函數處理建立或更新員工記錄。 FormData 物件包含員工記錄的使用者條目。

onDelete 函數要求使用者確認是否要刪除記錄，然後向伺服器發送 DELETE 請求。

imageCard 函數用來顯示員工名片。該卡包含員工的照片、姓名、工作說明和刪除按鈕。

最後，該元件包括一個大螢幕標題、一個員工表單和一個員工卡表。此表顯示具有三列的員工卡以及第三列未被佔用的附加行。

{ refreshEmployeeList(); }, []) const employeeAPI = (url = 'https://localhost:44334/api/Employee/') => { return { fetchAll: () => axios.get(url), create: newRecord => axios.post(url, newRecord), update: (id, updatedRecord) => axios.put(url + id, updatedRecord), delete: id => axios.delete(url + id) } } function refreshEmployeeList() { employeeAPI().fetchAll() .then(res => { setEmployeeList(res.data) }) .catch(err => console.log(err)) } const addOrEdit = (formData, onSuccess) => { if (formData.get('employeeID') == "0") employeeAPI().create(formData) .then(res => { onSuccess(); refreshEmployeeList(); }) .catch(err => console.log(err)) else employeeAPI().update(formData.get('employeeID'), formData) .then(res => { onSuccess(); refreshEmployeeList(); }) .catch(err => console.log(err)) } const showRecordDetails = data => { setRecordForEdit(data) } const onDelete = (e, id) => { e.stopPropagation(); if (window.confirm('Are you sure to delete this record?')) employeeAPI().delete(id) .then(res => refreshEmployeeList()) .catch(err => console.log(err)) } const imageCard = data => (
{ showRecordDetails(data) }}>
{data.employeeName}
{data.occupation}
) return (

Employee Register

{ //tr > 3 td [...Array(Math.ceil(employeeList.length / 3))].map((e, i) => ) }
{imageCard(employeeList[3 * i])} {employeeList[3 * i + 1] ? imageCard(employeeList[3 * i + 1]) : null} {employeeList[3 * i + 2] ? imageCard(employeeList[3 * i + 2]) : null}
) } ">
 import React , { useState , useEffect } from 'react'
import Employee from './Employee'
import axios from "axios" ;

export default function EmployeeList ( ) {
    const [ employeeList , setEmployeeList ] = useState ( [ ] )
    const [ recordForEdit , setRecordForEdit ] = useState ( null )

    useEffect ( ( ) => {
        refreshEmployeeList ( ) ;
    } , [ ] )

    const employeeAPI = ( url = 'https://localhost:44334/api/Employee/' ) => {
        return {
            fetchAll : ( ) => axios . get ( url ) ,
            create : newRecord => axios . post ( url , newRecord ) ,
            update : ( id , updatedRecord ) => axios . put ( url + id , updatedRecord ) ,
            delete : id => axios . delete ( url + id )
        }
    }

    function refreshEmployeeList ( ) {
        employeeAPI ( ) . fetchAll ( )
            . then ( res => {
                setEmployeeList ( res . data )
            } )
            . catch ( err => console . log ( err ) )
    }

    const addOrEdit = ( formData , onSuccess ) => {
        if ( formData . get ( 'employeeID' ) == "0" )
            employeeAPI ( ) . create ( formData )
                . then ( res => {
                    onSuccess ( ) ;
                    refreshEmployeeList ( ) ;
                } )
                . catch ( err => console . log ( err ) )
        else
            employeeAPI ( ) . update ( formData . get ( 'employeeID' ) , formData )
                . then ( res => {
                    onSuccess ( ) ;
                    refreshEmployeeList ( ) ;
                } )
                . catch ( err => console . log ( err ) )

    }

    const showRecordDetails = data => {
        setRecordForEdit ( data )
    }

    const onDelete = ( e , id ) => {
        e . stopPropagation ( ) ;
        if ( window . confirm ( 'Are you sure to delete this record?' ) )
            employeeAPI ( ) . delete ( id )
                . then ( res => refreshEmployeeList ( ) )
                . catch ( err => console . log ( err ) )
    }

    const imageCard = data => (
        < div className = "card" onClick = { ( ) => { showRecordDetails ( data ) } } >
            < img src = { data . imageSrc } className = "card-img-top rounded-circle" />
            < div className = "card-body" >
                < h5 > { data . employeeName }  h5 >
                < span > { data . occupation }  span > < br />
                < button className = "btn btn-light delete-button" onClick = { e => onDelete ( e , parseInt ( data . employeeID ) ) } >
                    < i className = "far fa-trash-alt" >  i >
                 button >
             div >
         div >
    )


    return (
        < div className = "row" >
            < div className = "col-md-12" style = { { backgroundColor : '#ced114' } } >
                < div className = "jumbotron jumbotron-fluid py-4" style = { { backgroundColor : '#ced114' } } >
                    < div className = "container text-center" style = { { backgroundColor : '#ced114' } } >
                        < h1 className = "display-4" style = { { backgroundColor : '#ced114' , color : 'yellow' } } > Employee Register  h1 >
                     div >
                 div >
             div >
            < div className = "container text-center" >
                < p className = "lead" >  p >
             div >
            < div className = "col-md-4" >
                < Employee
                    addOrEdit = { addOrEdit }
                    recordForEdit = { recordForEdit }
                />
             div >
            
            < div className = "col-md-8" >
                < table >
                    < tbody >
                        {
                            //tr > 3 td
                            [ ... Array ( Math . ceil ( employeeList . length / 3 ) ) ] . map ( ( e , i ) =>
                                < tr key = { i } >
                                    < td > { imageCard ( employeeList [ 3 * i ] ) }  td >
                                    < td > { employeeList [ 3 * i + 1 ] ? imageCard ( employeeList [ 3 * i + 1 ] ) : null }  td >
                                    < td > { employeeList [ 3 * i + 2 ] ? imageCard ( employeeList [ 3 * i + 2 ] ) : null }  td >
                                 tr >
                            )
                        }
                     tbody >
                 table >
             div >
         div >
    )
}

讓我們創建專案的結構

讓我們建立我們的 .Net WebApi 項目

我在我的專案中使用.Net Core 6.0。下面列出了專案中需要下載的Nuget套件。

Microsoft.VisualStudio.Web.CodeGeneration.Design 

PM > NuGet I nstall-Package Microsoft.VisualStudio.Web.CodeGeneration.Design -Version 6.0.13

Microsoft.EntityFrameworkCore 

PM > NuGet I nstall-Package Microsoft.EntityFrameworkCore -Version 7.0.4

Microsoft.EntityFrameworkCore.SqlServer 

PM > NuGet I nstall-Package Microsoft.EntityFrameworkCore.SqlServer -Version 7.0.4

Microsoft.EntityFrameworkCore.Tools 

PM > NuGet I nstall-Package Microsoft.EntityFrameworkCore.Tools -Version 7.0.4

微軟.AspNetCore.Cors 

PM > NuGet I nstall-Package Microsoft.AspNetCore.Cors -Version 2.2.0

讓我們創建我們的模型

首先，讓我們在 Models 資料夾中新增一個類別。我將其命名為 EmployeeModel。 

 public class EmployeeModel
    {    
        [ Key ]
        public int EmployeeID { get ; set ; }

        [ Column ( TypeName = "nvarchar(50)" ) ]
        public string EmployeeName { get ; set ; }

        [ Column ( TypeName = "nvarchar(50)" ) ]
        public string Occupation { get ; set ; }

        [ Column ( TypeName = "nvarchar(100)" ) ]
        public string ImageName { get ; set ; }   
    }

讓我們在 Models 資料夾中建立一個 Context 類別。 

  using Microsoft . EntityFrameworkCore ;

 
namespace EmployeeRegisterAPI . Models
{
    public class EmployeeDbContext : DbContext //burada ef Dbcontext den kalitim aldirdik
    {
        
        public EmployeeDbContext ( DbContextOptions < EmployeeDbContext > options ) : base ( options )
        {


        }

        public DbSet < EmployeeModel > Employees { get ; set ; }
    }
}

讓我們轉到 Startup.cs 資料夾並為 ConfigureServices 方法建立一個連接字串。

(options => options.UseSqlServer(Configuration.GetConnectionString("DevConnection"))); }">
 public void ConfigureServices ( IServiceCollection services )
        {
            services . AddControllers ( ) ;

            //Baglanti dizesini olusturduk ve bu kodda sql server icin bir ConnectionString olusturduk "DevConnection" diye bunula baglanti bilgilerimizi appsettings de belirtecegiz
            services . AddDbContext < EmployeeDbContext > ( options => options . UseSqlServer ( Configuration . GetConnectionString ( "DevConnection" ) ) ) ;
        }

我們來到appsettings.json，這裡我們將連接資訊寫入到json檔案中，如下所示

  "Logging" : {
    "LogLevel" : {
      "Default" : "Information" ,
      "Microsoft" : "Warning" ,
      "Microsoft.Hosting.Lifetime" : "Information"
    }
  } ,
  "AllowedHosts" : "*" ,
  //buradan sonraki kod satirlaridir
  "ConnectionStrings" : {
    "DevConnection" : "Server=LAPTOP-6OAEM3JA; Database=EmployeeDB; Trusted_Connection=True; MultipleActiveResultSets=True;"
  }
}

然後，我們建立項目，轉到套件管理器並執行遷移操作。 

PM > Add-Migration " InitialCreate "

讓我們使用該命令創建遷移並建立我們的項目，然後給出此命令。 

PM > update-database

然後讓我們檢查資料庫是否已從MSSQL 建立。

然後讓我們為我們的模型建立一個控制器，我將使用 API 控制器以及使用 EF 控制器的操作。

圖片將在這裡，其中 2 張

我們創建了控件，指定了模型和上下文文件，並指定了控制器名稱。

筆記

5 這些服務稱為 AddDb.AddDbContext(options => options.UseSqlServer(Configuration.GetConnectionString("DevConnection")));每次我們向該 EmployeeController 發出請求時，該函數都會為該員工控制器建立請求。 EmployeeController的建構子是 public EmployeeController(EmployeeDbContext context) 這段程式碼中的EmployeeDbContext值就是這個asp.net依賴注入方法，它是由框架本身自動管理的，所以這個控制器中的請求現在將與db通訊。

讓我們創建我們的 React 項目

現在，讓我們設計客戶端，使其與員工表單反應以上傳員工個人資料圖片。 

 npx create-react-app employee-register-client

用於客戶端的 Oxios 指令

$ npm install react-axios

從現在開始，我們已經建立了專案的結構，我希望您在我的儲存庫中查看我的程式碼。祝你好運 ：）

API使用

帶上所有物品

  GET /api/Employee
範圍藥品解釋
api_key string必要的。您的 API 金鑰。

帶物品

  GET /api/Employee/${id}
範圍藥品解釋
id string必要的。被呼叫的item的key值
 { "employeeID" : 3 , "employeeName" : " piedhorse " , "occupation" : " C# " , "imageName" : " capture_20231646962.jpeg " , "imageFile" : null , "imageSrc" : " https://localhost:44334/Images/capture_20231646962.jpeg " }
展開
附加信息
相關應用
爲您推薦
相關資訊 全部