प्रौद्योगिकी साझेदारी

ग्रीष्मकालीनावकाशस्य समये जालस्य अग्रभागस्य पृष्ठभागस्य च विकासस्य अभ्यासं कुर्वन्तु - टिप्पण्यानि

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

(मुख्यतया अग्रभागस्य विकासः, पृष्ठभागः न। प्रथमं एकं परियोजनां परिचययामि यत् अग्रभागं पृष्ठभागं च कार्यान्वितं करोति)

1. MoreMall इति परियोजनां संस्थाप्य चालयन्तु

1.प्रकल्पस्य परिचयः MoreMall

अग्रभागः पृष्ठभागः च परस्परं संवादं कर्तुं शक्नोति, अग्रभागः: क्लायन्ट्, पृष्ठभागः: सर्वरः दत्तांशकोशः mall.sql इत्यत्र लिखितुं शक्यते;

2.पर्यावरणस्य स्थापना


1) Node.js संस्थापयन्तु: Node.js इति कजावास्क्रिप्ट् रनटाइम् वातावरणम् , सर्वर-पक्षीय-अनुप्रयोगानाम् निर्माणार्थम् । Node.js इत्यस्य समुचितं संस्करणं आधिकारिकजालस्थले [Node.js](https://nodejs.org/) इत्यत्र डाउनलोड् कृत्वा संस्थापयन्तु । node.js इत्यस्य वातावरणविन्यासः तुल्यकालिकरूपेण जटिलः अस्ति ।

२) mysql संस्थापयन्तु
३) निर्भरतां संस्थापनम् : परियोजनायाः मूलनिर्देशिकायां `npm install` चालयन्तु, यत्...`package.json` सञ्चिका परियोजनायाः कृते आवश्यकानि सर्वाणि आश्रयाणि संस्थापयति ।

(MySQL):https://blog.csdn.net/chuci0910/लेख/विवरण/138770174
(नोडजेएस):https://zhuanlan.zhihu.com/p/686043568

2. Vue परियोजनां रचयन्तु

1. Vue CLI इत्यस्य उपयोगेन परियोजनां रचयन्तु

1) vue project संस्थाप्य रचयन्तु: project file - cmd इत्येतत् file directory - `vue create my-project` - मध्ये स्थापयितुं नूतनं फोल्डर् रचयन्तु
2) Project directory structure: `src` निर्देशिकायां `components` तथा `views` इत्यादीनि उपनिर्देशिकाः सन्ति, येषां उपयोगः घटकानां पृष्ठानां च संग्रहणार्थं भवति ।

३) इ<template>लिप्यां दत्तांशलेखनम्
- **दत्तांशं परिभाषयतु**: Vue घटके` <script>`部分定义数据，通过`data`函数返回数据对象。
- **दत्तांशं प्रदर्शयतु**: Vue घटके`<template> `प्रक्षेपणव्यञ्जनानां आंशिकप्रयोगः`{{ }}` अथवा `v-bind` इत्यादि आदेशः दत्तांशं प्रदर्शयितुं ।

उदाहरणम् : घटकः—foo.vue

  1. <template>
  2. 	<div>{{msg}}</div>
  3. </template>
  4.  
  5. <script>
  6. export default{
  7. 	name:'foo',
  8. 	data(){
  9. 		return{
  10. 			msg:'foo page'
  11. 		}
  12. 	}
  13. }
  14. </script>
  15.  
  16. <style>
  17. </style>

3. vue-router संस्थाप्य उपयोगं कुर्वन्तु

अत्र परियोजनामार्गपरीक्षणं दर्शितम् अस्ति

1. vue-router संस्थापयन्तु


१) संस्थापनम् : project file directory इत्यस्य अधः cmd यत्र भवान् एतत् वस्तु योजयितुम् इच्छति - `npm install vue-router`
2) रूटिंग् विन्यस्तं कुर्वन्तु: भिन्न-भिन्न-घटकेषु भिन्न-भिन्न-मार्गान् मैप् कर्तुं `src/router/index.js` इत्यस्मिन् मार्ग-नियमान् विन्यस्यताम् ।

उदाहरण:

src/router/index.js सञ्चिकायां कोडः:

  1. import { createRouter, createWebHistory } from 'vue-router';
  2. import Home from '../components/Home.vue'; // 示例组件路径，请根据实际情况调整
  3. import Bar from '../components/Bar.vue'; // 示例组件路径，请根据实际情况调整
  4. import Foo from '../components/Foo.vue'; // 示例组件路径，请根据实际情况调整
  5.  
  6. const routes = [
  7.   {
  8.     path: '/',
  9.     name: 'Home',
  10.     component: Home
  11.   },
  12.   {
  13.     path: '/bar',
  14.     name: 'Bar',
  15.     component: Bar
  16.   },
  17.   {
  18.     path: '/foo',
  19.     name: 'Foo',
  20.     component: Foo
  21.   }
  22.   // 其他路由配置
  23. ];
  24.  
  25. const router = createRouter({
  26.   history: createWebHistory(process.env.BASE_URL),
  27.   routes
  28. });
  29.  
  30. export default router;

३) प्रयोगः<router-link>तथा<router-view>
<router-link>: नेविगेशन लिङ्क् निर्मातुं उपयुज्यते, यत् क्लिक् कृत्वा तत्सम्बद्धं रूटिंग् पृष्ठं प्रति स्विच् कर्तुं शक्यते ।
<router-view>: मेलकृतमार्गघटकानाम् प्रदर्शनार्थं उपयुज्यते ।

उदाहरणम् : App.vue:

  1. <template>
  2.   <div id="app">
  3.       <router-link to="/bar">Bar</router-link>|
  4.       <router-link to="/foo">Foo</router-link>  
  5.     <router-view></router-view> <!-- 确保包含这个标签 -->
  6.   </div>
  7. </template>

पृष्ठप्रदर्शनम् : (बन्दरसङ्ख्यायां ध्यानं दत्तव्यम्)

bar इत्यत्र क्लिक् कुर्वन्तु: तर्हि मम पोर्ट् सङ्ख्या '/bar' इति किमर्थम् इति उच्यते?

यतः भवन्तः स्मर्यन्ते यत् रूटरः कुत्र विन्यस्तः अस्ति, यः मार्गः अस्ति अत्र नाम लापरवाहीपूर्वकं चिन्वितुं शक्यते, परन्तु सामान्यतया घटकनाम्ना सह सङ्गतम् अस्ति, तथा च घटकनाम परिवर्तयितुं न शक्यते, तत्सम्बद्धं नाम च component-xx.vue अस्ति .

किमर्थं कूर्दितुं क्लिक् कुर्वन्तु - तस्य कारणात्<router-link> ,तथा<router-view> पृष्ठे विशिष्टं कार्यं पश्चात् चर्चा भविष्यति।

4. प्रथमं एलिमेण्ट्-प्लस् एप्लेट् निर्मायताम्

1. उपरि router+element-plus इत्यस्य उपयोगं कुर्वन्तु

element-plus इत्येतत् अग्रे-अन्त-पृष्ठ-प्रतिपादनार्थं संकुल-संकुलस्य श्रृङ्खलारूपेण अवगन्तुं शक्यते (सार्वभौमिकं संकुलम् एवं अवगन्तुं शक्यते, प्रोग्रामरः प्रोग्रामरः न सन्ति, वयं केवलं संकुल-पोर्टर्-रूपेण स्मः)

2. तेषां घटकसङ्केतस्य उपयोगः कथं भवति

आधिकारिकजालस्थले क्लिक् कुर्वन्तुअवलोकन घटक अवलोकन |.

 

3.तत्त्व-प्लस् संस्थापयन्तु


१) संस्थापनम् : cmd—`npm install element-plus` इति परियोजनासञ्चिकायां यत् भवान् उपयोक्तुं इच्छति ।
2) element-plus इत्यस्य परिचयं कुर्वन्तु: `main.js` इत्यस्मिन् Element Plus तथा style files इत्यस्य परिचयं कुर्वन्तु

  1. import ElementPlus from 'element-plus'//引入elementplus
  2. import 'element-plus/dist/index.css'//引入elementplus样式文件


३) घटकानां उपयोगः : Vue घटकेषु Element Plus UI घटकानां उपयोगः, यथा `<el-button> `,` इति<el-input> `तिष्ठतु।

उदाहरणम् : App.vue, तथापि, सह<el->आरम्भः इति

  1. <template>
  2.   <el-container class="layout-container-demo" style="height: 500px">
  3.       <el-aside width="200px">
  4.         <el-scrollbar>
  5.           <el-menu :default-openeds="['1', '3']">
  6.             <el-sub-menu index="1">
  7.               <template #title>
  8.                 <el-icon><Message /></el-icon>Navigator One
  9.               </template>
  10.               <el-menu-item-group>
  11.                 <template #title>Group 1</template>
  12.                 <el-menu-item index="1-1">
  13. 					<router-link to="/optionOne">Option 1</router-link>
  14. 				</el-menu-item>
  15.                 <el-menu-item index="1-2">
  16. 					<router-link to="/optionTwo">Option 2</router-link>
  17. 				</el-menu-item>
  18.               </el-menu-item-group>
  19.               <el-menu-item-group title="Group 2">
  20.                 <el-menu-item index="1-3">
  21. 					<router-link to="/optionThree">Option 3</router-link>
  22. 				</el-menu-item>
  23.               </el-menu-item-group>
  24.               <el-sub-menu index="1-4">
  25.                 <template #title>Option4</template>
  26.                 <el-menu-item index="1-4-1">Option 4-1
  27. 					<router-link to="/optionFour">Option4</router-link>
  28. 				</el-menu-item>
  29.               </el-sub-menu>
  30.             </el-sub-menu>
  31.             <el-sub-menu index="2">
  32.               <template #title>
  33.                 <el-icon><icon-menu /></el-icon>Navigator Two
  34.               </template>
  35.               <el-menu-item-group>
  36.                 <template #title>Group 1</template>
  37.                 <el-menu-item index="2-1">Option 1</el-menu-item>
  38.                 <el-menu-item index="2-2">Option 2</el-menu-item>
  39.               </el-menu-item-group>
  40.               <el-menu-item-group title="Group 2">
  41.                 <el-menu-item index="2-3">Option 3</el-menu-item>
  42.               </el-menu-item-group>
  43.               <el-sub-menu index="2-4">
  44.                 <template #title>Option 4</template>
  45.                 <el-menu-item index="2-4-1">Option 4-1</el-menu-item>
  46.               </el-sub-menu>
  47.             </el-sub-menu>
  48.             <el-sub-menu index="3">
  49.               <template #title>
  50.                 <el-icon><setting /></el-icon>Navigator Three
  51.               </template>
  52.               <el-menu-item-group>
  53.                 <template #title>Group 1</template>
  54.                 <el-menu-item index="3-1">Option 1</el-menu-item>
  55.                 <el-menu-item index="3-2">Option 2</el-menu-item>
  56.               </el-menu-item-group>
  57.               <el-menu-item-group title="Group 2">
  58.                 <el-menu-item index="3-3">Option 3</el-menu-item>
  59.               </el-menu-item-group>
  60.               <el-sub-menu index="3-4">
  61.                 <template #title>Option 4</template>
  62.                 <el-menu-item index="3-4-1">Option 4-1</el-menu-item>
  63.               </el-sub-menu>
  64.             </el-sub-menu>
  65.           </el-menu>
  66.         </el-scrollbar>
  67.       </el-aside>
  68.   
  69.       <el-container>
  70.         <el-header style="text-align: right; font-size: 12px">
  71.           <div class="toolbar">
  72.             <el-dropdown>
  73.               <el-icon style="margin-right: 8px; margin-top: 1px">
  74.                 <setting />
  75.               </el-icon>
  76.               <template #dropdown>
  77.                 <el-dropdown-menu>
  78.                   <el-dropdown-item>View</el-dropdown-item>
  79.                   <el-dropdown-item>Add</el-dropdown-item>
  80.                   <el-dropdown-item>Delete</el-dropdown-item>
  81.                 </el-dropdown-menu>
  82.               </template>
  83.             </el-dropdown>
  84.             <span>Tom</span>
  85.           </div>
  86.         </el-header>
  87.   
  88.         <el-main>
  89.           <el-scrollbar>
  90.             <router-view></router-view>
  91.           </el-scrollbar>
  92.         </el-main>
  93. 		
  94.       </el-container>
  95.     </el-container>
  96. </template>

४) अत्र व्याख्यातव्यम्<router-view> परिणाम:

उपरि चित्रे '3' कुत्र गतं मया तस्य स्थितिं समायोजितस्य अनन्तरं भवन्तः पश्यन्ति। स्थानधारकत्वेन अवगम्यते।

  1.         <el-main>
  2.           <el-scrollbar>
  3.             
  4.           </el-scrollbar>
  5.         </el-main>
  6. 		
  7.       </el-container>
  8.     </el-container>
  9. 	<router-view></router-view>
  10. </template>

4. पृष्ठकूदः अपि अत्र कार्यान्वितः भवति, कथं


1) मार्गविन्यासविन्यासः : `src/router/index.js` इत्यस्मिन् मार्गनिर्धारणं विन्यस्यताम्, प्रत्येकं मार्गः घटकेन सह सङ्गच्छते ।

उदाहरणम् : वैसे यदि मार्गः '/' अस्ति तर्हि प्रथमं यत् पृष्ठं आगच्छति तत् एतत् एव इति अर्थः ।

परियोजना कथं चालितव्यम् इति न वदति इव: project file directory मध्ये cmd-npm run serve इति

  1. import{createRouter,createWebHistory} from 'vue-router';//导入外部组件，声明vue路由
  2. import HelloWorld from '../components/HelloWorld.vue';
  3. import OptionOne from '../components/OptionOne.vue';
  4. import OptionTwo from '../components/OptionTwo.vue';
  5. import OptionThree from '../components/OptionThree.vue';
  6. import OptionFour from '../components/OptionFour.vue';
  7.  
  8. const routes=[//路由器配置
  9. 	{
  10. 		path:'/',//这样的话就最先进入的是helloworld页面了
  11. 		name:'HelloWorld',
  12. 		component:HelloWorld
  13. 	},
  14. 	{
  15. 		path:'/optionOne',
  16. 		name:'OptionOne',
  17. 		component:OptionOne
  18. 	},
  19. 	{
  20. 		path:'/optionTwo',
  21. 		name:'OptionTwo',
  22. 		component:OptionTwo
  23. 	},
  24. 	{
  25. 		path:'/optionThree',
  26. 		name:'OptionThree',
  27. 		component:OptionThree
  28. 	},
  29. 	{
  30. 		path:'/optionFour',
  31. 		name:'OptionFour',
  32. 		component:OptionFour
  33. 	}
  34. ];
  35.  
  36. const router=createRouter({
  37. 	history: createWebHistory(process.env.Base_URL),
  38. 	routes
  39. });
  40.  
  41. export default router;


२) नेविगेशनलिङ्काः: ` इत्यस्य उपयोगं कुर्वन्तु<router-link> `एकं नेविगेशनलिङ्कं रचयन्तु, तत् नुदन्तु तत्सम्बद्धपृष्ठं प्रति कूर्दन्तु, उपयोगं कुर्वन्तु`<router-view> `मार्गनिर्धारणघटकाः प्रदर्शयन्तु।

  1. <el-menu-item index="1-3">
  2.       <router-link to="/optionThree">Option 3</router-link>  
  3. </el-menu-item>

5. Vue-router, element-plus तथा axios इत्येतयोः संयुक्तप्रयोगः

1. अक्षांशं स्थापयतु

१) उपरिष्टाद् इव, संस्थापनादेशः: `npm install axios`
2) axios विन्यस्तं कुर्वन्तु: `main.js` मध्ये axios उदाहरणं विन्यस्तुं, पूर्वनिर्धारितं baseURL इत्यादीनि वैश्विकविन्यासान् सेट् कुर्वन्तु ।

2. अग्र-अन्त-पृष्ठ-अन्त-लघु-कार्यक्रमं कार्यान्वितं कुर्वन्तु


- **परिभाषा-अन्तरफलकं**: सर्वर-पक्षे एपिआइ-अन्तरफलकं परिभाषयन्तु, अग्र-अन्त-अनुरोधं संसाधयन्तु, आँकडान् च प्रत्यागच्छन्तु ।
- **अग्र-अन्त-अनुरोध-दत्तांशः**: अनुरोधं प्रेषयितुं, दत्तांशं प्राप्तुं, पृष्ठे प्रदर्शयितुं च अग्र-अन्त-घटकस्य अक्षयोः उपयोगं कुर्वन्तु ।
- **डायनामिक डाटा स्विचिंग्**: मेनू इत्यस्य डायनामिक डाटा स्विचिंग् इत्यस्य साक्षात्कारं कर्तुं Element Plus घटकानां Vue Router इत्यस्य च संयोजनं कुर्वन्तु, यथा भिन्न-भिन्न-मेनू-वस्तूनाम् अनुसारं भिन्न-भिन्न-सामग्री-प्रदर्शनम्।

विशिष्टानि पदानि : १.
१) एकं axios उदाहरणं रचयन्तु तथा च विन्यस्यन्तु :

  1. import axios from 'axios';  
  2. // 创建一个 axios 实例  
  3. const http = axios.create({  
  4.   baseURL: 'http://localhost:3000/',  
  5.   // 其他配置...  
  6. });  
  7.   
  8. // 创建一个 Vue 应用  
  9. const app = createApp(App);  
  10.   
  11. // 将 axios 实例添加到 Vue 应用的原型上  
  12. app.config.globalProperties.$http = http;  
  13.   
  14. // 挂载 Vue 应用  
  15. app.mount('#app');

२) अनुरोधं प्रेषयितुं Vue घटके axios इत्यस्य उपयोगं कुर्वन्तु:
  

  1. <script>
  2. const tableData = [];
  3. export default {
  4.   name: 'HelloWorld',
  5.   created() {
  6.       this.getUserList();  
  7.     }, 
  8.     data() {  
  9.         return {  
  10.           // 假设我们从API获取的是一个用户列表  
  11.           tableData
  12.         };  
  13.     }, 
  14.     methods: {  
  15.     getUserList() {
  16.       this.$http.get('/').then(response => {  
  17.             console.log(response.data)
  18.             this.tableData = response.data; 
  19.         })  
  20.         .catch(error => {  
  21.             console.log(error)  
  22.         });  
  23.     } 
  24.     }
  25.   
  26. }
  27. </script>

३) डायनामिक मेनू कार्यान्वितुं Element Plus तथा Vue Router इत्येतयोः संयोजनं कुर्वन्तु: यथा पूर्वं व्याख्यातं।

3.अक्षिकाः किं कुर्वन्ति ?

Axios ब्राउजर्-मध्ये Node.js-वातावरणेषु च HTTP-अनुरोधानाम् कृते Promise-आधारितः HTTP-क्लायन्ट् अस्ति । एतेन भवन्तः अतुल्यकालिकनिवेदनानि अधिकसुलभतया प्रेषयितुं प्रतिक्रियादत्तांशं संसाधितुं च शक्नुवन्ति । Vue.js परियोजनायां, भवान् Axios इत्यस्य उपयोगं बैक-एण्ड् API इत्यनेन सह संवादं कर्तुं शक्नोति, यथा आँकडा प्राप्तुं, प्रपत्रदत्तांशं प्रेषयितुं, सञ्चिका-अपलोड्-प्रक्रियाकरणं, अन्ये च कार्याणि । axios एकं सरलं एपिआइ प्रदाति यत् अनुरोध-प्रतिसाद-अवरोधकान्, अनुरोध-रद्दीकरणं, वैश्विक-विन्यासम् अन्यकार्यं च समर्थयति, येन अग्रे पृष्ठे च अन्तः आँकडा-अन्तर्क्रिया अधिका कुशलं नियन्त्रणीयं च भवति

१) प्रथमं पूर्वप्रकल्पस्य आधारेण src/server/index.js इत्येतत् निम्नलिखितरूपेण योजयन्तु

  1. const express = require('express');  
  2. const app = express();  
  3. const port = 3000; // 你可以选择任何未被占用的端口  
  4.   
  5. // 设置中间件以允许跨域请求（可选，根据你的需求）  
  6. app.use((req, res, next) => {  
  7.   res.header("Access-Control-Allow-Origin", "*");  
  8.   res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");  
  9.   next();  
  10. });  
  11.   
  12. // 设置路由和响应  
  13. app.get('/', (req, res) => {  
  14.   // 创建一个对象，其中包含你想要返回的数据  
  15.   const data = [  
  16.   { id: 1, name: 'Alice', age:18, email: '[email protected]' },  
  17.   { id: 2, name: 'Bob', age:19, email: '[email protected]' },  
  18.   // ...更多用户  
  19.   ];  
  20.   
  21.   // 使用res.json()方法发送JSON响应  
  22.   res.json(data);  
  23. });  
  24.   
  25. // 启动服务器  
  26. app.listen(port, () => {  
  27.   console.log(`Server is running on http://localhost:${port}`);  
  28. });

अस्य कोडस्य वर्णनम् : १.

इदं कोडस्निपेट् सरलं सर्वरं निर्मातुं Node.js तथा Express framework इत्यस्य उपयोगं करोति । अत्र कोडस्य पङ्क्ति-पङ्क्ति-व्याख्यानम् अस्ति ।

1. **Express मॉड्यूलम् आयात्य अनुप्रयोगदृष्टान्तं रचयन्तु**:
```जावास्क्रिप्ट्
const express = आवश्यकता ('अभिव्यक्त करें');
const app = व्यक्त ();
   ```

- `express` इति जाल-अनुप्रयोगानाम् निर्माणार्थं एकः रूपरेखा अस्ति । अत्र `require('express')` मार्गेण आयातितं भवति तथा च `express()` मार्गेण अनुप्रयोगदृष्टान्तः निर्मितः भवति ।

2. **सर्वर-श्रवण-पोर्टं सेट् कुर्वन्तु**:
```जावास्क्रिप्ट्
const port = 3000; // भवान् किमपि रिक्तं पोर्ट् चिन्वितुं शक्नोति
   ```

- `port` चरः पोर्ट् सङ्ख्यां परिभाषयति यस्मिन् सर्वरः शृणोति, अत्र `3000` इति सेट् भवति ।

3. **मध्यवेयरसेटिंग्स् ये क्रॉस्-डोमेन् अनुरोधानाम् अनुमतिं ददति**:
```जावास्क्रिप्ट्
app.use ((req, res, अगला) =&gt; {
res.header ("प्रवेश-नियन्त्रण-अनुमति-उत्पत्ति", "*");
res.header ("प्रवेश-नियन्त्रण-अनुमति-शीर्षक", "उत्पत्ति, एक्स-अनुरोध-सह, सामग्री-प्रकार, स्वीकार");
अग्रिम();
   });  
   ```

- एषः कोडः क्रॉस्-ओरिजिन् अनुरोधानाम् (CORS) अनुमतिं दातुं मध्यवेयरं स्थापयति । एतत् कस्यापि मूलतः अनुरोधानाम् अनुमतिं ददाति तथा च कतिपयानां शीर्षकक्षेत्राणां अनुमतिं ददाति । `next()` फंक्शन् सुनिश्चितं करोति यत् अनुरोधः अग्रिम-मध्यम-वेयर-अथवा मार्ग-सञ्चालकं प्रति निरन्तरं भवति ।

4. **मार्गान् प्रतिक्रियाश्च परिभाषयन्तु**:
```जावास्क्रिप्ट्
app.get ('/', (req, res) =&gt; {
//भवता यत् दत्तांशं प्रत्यागन्तुं इच्छति तत् युक्तं वस्तु रचयन्तु
const data = [ 1999।
{ id: 1, नाम: 'एलिस', आयु:18, ईमेल: '[email protected]' },
{ id: 2, नाम: 'बॉब', आयु:19, ईमेल: '[email protected]' },
// ...अधिकप्रयोक्तारः
     ];  
     
// JSON प्रतिक्रियां प्रेषयितुं res.json() मेथड् इत्यस्य उपयोगं कुर्वन्तु
res.json (डेटा);
   });  
   ```

- `app.get('/', ...)` GET अनुरोधानाम् एकं मार्गं परिभाषयति यदा क्लायन्ट् मूलमार्गं `/` अभिगच्छति तदा एतत् हैण्डलर फंक्शन् आह्वयते ।
- हैंडलर फंक्शन् उपयोक्तृदत्तांशं युक्तं वस्तु `data` निर्माति तथा च `res.json(data)` इत्यस्य उपयोगेन JSON प्रतिक्रियारूपेण क्लायन्ट् प्रति प्रत्यागच्छति ।

5. **सर्वरं आरभत**:
```जावास्क्रिप्ट्
app.listen (पोर्ट, () =&gt; {
console.log(`सर्वरः http://localhost:${port}` इत्यत्र चालितः अस्ति);
   });  
   ```

- `app.listen(port, ...)` सर्वरं आरभ्य परिभाषिते पोर्ट् मध्ये श्रोतुं ददाति ।
- यदा सर्वरः सफलतया आरभ्यते तदा कन्सोल् प्रति सन्देशः निर्गच्छति यत् सर्वरः चालितः अस्ति तथा च `http://localhost:3000` मार्गेण अभिगम्यते इति सूचयति ।

सारांशः: एषः कोडस्निपेट् एकं सरलं Express सर्वरं निर्माति यत् मूलमार्गे `/` GET अनुरोधानाम् प्रतिक्रियां ददाति तथा च उपयोक्तृदत्तांशं युक्तं JSON प्रतिक्रियां प्रत्यागच्छति । क्रॉस्-डोमेन् अनुरोधानाम् अनुमतिं दातुं मध्यवेयरः अपि स्थापितः अस्ति । `3000` पोर्ट् इत्यत्र एतत् सर्वरं चालयित्वा, `http://localhost:3000` इत्यत्र प्रवेशार्थं, प्रत्यागतं JSON-दत्तांशं द्रष्टुं च ब्राउजर् अथवा अन्यस्य HTTP क्लायन्ट् इत्यस्य उपयोगं कर्तुं शक्नुवन्ति ।

२) धावतु

cmd—सर्वरसञ्चिकानिर्देशिकायां node index.js

पृष्ठभूमिदत्तांशं द्रष्टुं शक्नोति

ततः project file directory मध्ये cmd-npm run serve चालयन्तु, ततः भवान् द्रष्टुं शक्नोति यत् data अस्ति! !

अहं पृष्ठभागदत्तांशं कथं प्रबन्धयामि ?

केवलं नवीनतया योजितस्य server/index.js सञ्चिकायां:

  1. // 设置路由和响应  
  2. app.get('/', (req, res) => {  
  3.   // 创建一个对象，其中包含你想要返回的数据  
  4.   const data = [  
  5.   { id: 1, name: 'Alice', age:18, email: '[email protected]' },  
  6.   { id: 2, name: 'Bob', age:19, email: '[email protected]' },  
  7.   // ...更多用户  
  8.   ];

षड् पञ्चयोः आधारेण, पृष्ठभागः अपि च

प्रथमस्य परियोजनायाः पृष्ठभागेन सह पञ्च परियोजनानि कथं चालनीयाः MoreMall अग्रे पृष्ठभागयोः संयोजनं भवति ।

1. द्वे वस्तूनि सज्जीकरोतु

१)mysql.sql

  1. create database test;
  2. use test;
  3. CREATE TABLE user (  
  4.     id INT AUTO_INCREMENT PRIMARY KEY,  
  5.     name VARCHAR(255) NOT NULL, 
  6.     password VARCHAR(255) NOT NULL,
  7.     age VARCHAR(255) NOT NULL,
  8.     email  VARCHAR(255) NOT NULL
  9. );
  10. INSERT INTO user (name, password,age,email) VALUES ('Bob', '123','23','[email protected]');
  11. INSERT INTO user (name, password,age,email) VALUES ('Tom', '123','23','[email protected]');

२)सर्वरः

scr सञ्चिकायाः ​​अधः स्थापयन्तु, परन्तु समानान्तरं अपि कर्तुं शक्यते अहं पूर्वं त्यक्तवान् तथापि, npm run serve अपि भिन्न-भिन्न-सञ्चिकानिर्देशिकासु सम्भवति ।

सर्वरस्य अधः द्वौ सञ्चिकाः : १.

(1)db.js

  1. let mysql = require('mysql')
  2. //配置链接数据库的参数
  3. let db = mysql.createPool({
  4.     host: '127.0.0.1',
  5.     user: 'root',
  6. 	port:'3306',
  7.     password: 'root',
  8.     database: 'test'
  9. })
  10.  
  11. module.exports = db

दृष्टान्तरूपेण दर्शयतु : १.

अस्य कोडस्य उद्देश्यं Node.js तथा `mysql` मॉड्यूलस्य उपयोगेन MySQL आँकडाधारं प्रति संयोजनपूलं निर्मातुं अन्यमॉड्यूलेषु उपयोगाय निर्यातयितुं च अस्ति ।

विशिष्टव्याख्यानं यथा ।

1. **आयात `mysql` मॉड्यूल**:
```जावास्क्रिप्ट्
let mysql = आवश्यकता ('mysql');
   ```
कोडस्य एषा पङ्क्तिः `mysql` मॉड्यूलम् आयातयति, यत् MySQL आँकडाधारैः सह सम्बद्धं कर्तुं संचालनं च कर्तुं प्रयुक्तं Node.js पुस्तकालयः अस्ति ।

2. **संयोजनकुण्डं रचयन्तु**:
```जावास्क्रिप्ट्
let db = mysql.createPool ({ 1।
मेजबानः '१२७.०.०.१', २.
प्रयोक्ता: 'मूल', .
पोर्टः '३३०६', २.
गुप्तशब्दः 'मूल', .
database: 'परीक्षा' इति ।
   });
   ```
एषः कोडः `mysql.createPool` मेथड् इत्यस्य उपयोगेन कनेक्शन् पूल् निर्माति । संयोजनपूलः दत्तांशकोशसंयोजनानां समुच्चयः अस्ति यत् बहुभिः क्लायन्ट्-द्वारा साझां कर्तुं पुनः उपयोक्तुं च शक्यते । संयोजनपूलस्य निर्माणेन कार्यक्षमतायाः उन्नतिः भवितुम् अर्हति यतोहि प्रत्येकं अनुरोधेन सह दत्तांशकोशसम्बन्धस्य पुनः स्थापनां परिहरति ।

- `host: '127.0.0.1'`: दत्तांशकोशसर्वरस्य होस्ट्-सङ्केतः । एषः स्थानीयसर्वरः अस्ति ।
- `उपयोक्ता: 'मूल'`: दत्तांशकोशप्रयोक्तृनाम।
- `पोर्ट: '3306'`: डाटाबेस पोर्ट सङ्ख्या। MySQL कृते पूर्वनिर्धारितं पोर्ट् 3306 अस्ति ।
- `गुप्तशब्द: 'मूल'`: दत्तांशकोशगुप्तशब्द।
- `database: 'test'`: संयोजनीयस्य दत्तांशकोशस्य नाम ।

3. **निर्यातसंयोजनकुण्डम्**: .
```जावास्क्रिप्ट्
module.exports = db;
   ```
कोडस्य एषा रेखा संयोजनपूलवस्तु `db` निर्यातयति येन अन्ये मॉड्यूल् `require` पद्धत्या एतत् संयोजनपूलम् आयातयितुं उपयोक्तुं च शक्नुवन्ति ।

एतस्य संयोजनकुण्डस्य उपयोगेन भवान् अन्येषु मॉड्यूलेषु परिचययितुं शक्नोति तथा च दत्तांशकोशप्रश्नानि कर्तुं तस्य उपयोगं कर्तुं शक्नोति । उदाहरणतया:

```जावास्क्रिप्ट्
//दत्तांशकोशसंयोजनपूलस्य परिचयं कुर्वन्तु
const db = require ('. / मार्ग / / इस / मॉड्यूल');

//दत्तांशकोशप्रश्नं निष्पादयन्तु
db.query ('SELECT * FROM उपयोक्तृ', (त्रुटि, परिणाम) =&gt; {
यदि (त्रुटिः) {
console.error ('प्रश्न निष्पादने त्रुटि:', त्रुटि);
निर्वतनम्;
    }
console.log ('प्रश्न परिणाम:', परिणाम);
});
```

एषा पद्धतिः दत्तांशकोशसंयोजनानां प्रबन्धनं उपयोगं च सुलभं करोति, विशेषतः येषु अनुप्रयोगेषु नित्यं दत्तांशकोशप्रवेशस्य आवश्यकता भवति ।

(2) अनुक्रमणिका.ज

  1. const express = require('express');  
  2. const app = express();  
  3. const port = 3000; // 你可以选择任何未被占用的端口  
  4. const db = require('./db')
  5.  
  6. // 设置中间件以允许跨域请求（可选，根据你的需求）  
  7. app.use((req, res, next) => {  
  8.   res.header("Access-Control-Allow-Origin", "*");  
  9.   res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");  
  10.   next();  
  11. });  
  12.  
  13. //配置对外接口
  14. app.get('/', (req, res) => {
  15.   var sql = 'select * from user'
  16.   db.query(sql, (err, data) => {
  17.       if(err) {
  18.           return res.send({
  19.             status: 400,
  20.             message: "查询失败"
  21.           })
  22.       } else{
  23.         console.log('查询结果：', data)
  24. 		res.json(data); 
  25.       }
  26.   })
  27. });
  28.  
  29. // 设置路由和响应  
  30. /*
  31. app.get('/', (req, res) => {  
  32.   // 创建一个对象，其中包含你想要返回的数据  
  33.   const data = [  
  34.   { id: 1, name: 'Alice', age:18, email: '[email protected]' },  
  35.   { id: 2, name: 'Bob', age:19, email: '[email protected]' },  
  36.   // ...更多用户  
  37.   ];  
  38.   
  39.   // 使用res.json()方法发送JSON响应  
  40.   res.json(data);  
  41. });  
  42. */
  43. // 启动服务器  
  44. app.listen(port, () => {  
  45.   console.log(`Server is running on http://localhost:${port}`);  
  46. });

2. नौसिखिया ज्ञान के पूरक

यदि भवन्तः न अवगच्छन्ति तर्हि अधिकं पठन्तु:/

  • सेवा-टर्मिनल：

    • Express सर्वरं रचयन्तु तथा च database connection pool स्थापयन्तु ।
    • क्रॉस्-डोमेन् अनुरोधानाम् अनुमतिं ददाति इति मध्यवेयरं स्थापयन्तु ।
    • दत्तांशकोशं पृच्छितुं दत्तांशं च प्रत्यागन्तुं GET मार्गं परिभाषयन्तु ।

  • ग्राहिका：

    • Vue घटके सर्वरं प्रति HTTP अनुरोधं प्रेषयितुं Axios इत्यस्य उपयोगं कुर्वन्तु ।
    • दत्तांशं प्राप्य पृष्ठे प्रदर्शयन्तु।

"एतत् संयोजनकुण्डं उपयुज्य अन्येषु मॉड्यूलेषु तस्य परिचयं कर्तुं शक्नोति तथा च दत्तांशकोशप्रश्नानि कर्तुं तस्य उपयोगं कर्तुं शक्नोति।" - अन्ये मॉड्यूलाः के सन्ति?

सर्वरे सर्वर-पक्षीयः कोडः अस्ति ।

अस्मिन् सन्दर्भे "अन्यमॉड्यूल्" प्रायः भवतः Node.js परियोजनायां अन्यजावास्क्रिप्ट् सञ्चिकाः निर्दिशति, न तु Vue घटकस्य `.vue` सञ्चिकायाः ​​अन्तः । विशेषतः, एते अन्ये मॉड्यूल् सामान्यतया सर्वर-पक्षीयसङ्केताः सन्ति ये HTTP-अनुरोधं, आँकडाधार-अन्तर्क्रियाः च नियन्त्रयति ।

एकः विशिष्टः परियोजनासंरचना एतादृशी दृश्यते :

```
प्रकल्प/
├── सर्वर/ ९.
│ ├── db.js // भवता प्रदत्तः दत्तांशकोशसंयोजनपुलसङ्केतः
│ ├── routes.js // एपिआइ रूटिंग् परिभाषयति यत् मॉड्यूल्
│ └── server.js // यत् सञ्चिका सर्वरं आरभते, यत् अहम् अत्र अनुरूपं करोमि तत् अस्ति
└── ग्राहक/ .
├── src/ ९.
│ ├── घटक/ .
│ │ ├── YourComponent.vue // भवतः Vue घटकः
│ ├── main.js // Vue परियोजना प्रविष्टि सञ्चिका
│ └── ... // अन्ये अग्रभागीयसञ्चिकाः
└── संकुल.json
```

अस्मिन् संरचनायां `server/` पुटे सर्वर-पक्षीयसङ्केतः भवति, यदा तु `client/` पुटे अग्रे-अन्त-Vue-सङ्केतः भवति ।

### उदाहरणम् : सर्वरपक्षे database connection pool इत्यस्य उपयोगः

भवतः समीपे पूर्वमेव `server/db.js` सञ्चिका अस्ति इति कल्पयित्वा यत् दत्तांशकोशसंयोजनपूलं परिभाषयति, ततः भवान् `server/routes.js` सञ्चिकायां परिचययितुं उपयोक्तुं च शक्नोति:

```जावास्क्रिप्ट्
// सर्वर/मार्गाः.js
const express = आवश्यकता ('अभिव्यक्त करें');
const db = require ('./db'); //दत्तांशकोश संयोजन पूल परिचय

const router = express.Router();// routers.js इत्यस्य अस्य विभागस्य मम कोऽपि उपयोगः नास्ति अन्ये भागाः index.js इत्यत्र एकत्र स्थापिताः सन्ति, तथा च मिलित्वा वयं "एकं database connection pool-setting cross-domain settings इत्यस्य परिचयं कुर्मः।" आवश्यकतानुसारम्" अभिगमः? -मार्गनिर्धारणं सेट्-(अन्तिमप्रयोजनम्) सर्वरं आरभ्यताम्" इति ।

//उदाहरणमार्गं परिभाषयन्तु
router.get ('/उपयोक्ताओं', (req, res) =&gt; {
db.query ('SELECT * FROM उपयोक्तृ', (त्रुटि, परिणाम) =&gt; {
यदि (त्रुटिः) {
return res.status (500).json ({ त्रुटि: त्रुटि.संदेश });
        }
res.json (परिणाम);
    });
});

module.exports = रूटर;
```

ततः, `server/server.js` सञ्चिकायां Express सर्वरं सेट् कृत्वा आरभ्य परिभाषितमार्गाणां उपयोगं कुर्वन्तु:

```जावास्क्रिप्ट्
// सर्वर/सर्वर.js
const express = आवश्यकता ('अभिव्यक्त करें');
const app = व्यक्त ();
const routes = require ('./routes');

app.use ('/api', मार्गाः); // मार्गनिर्धारणस्य उपयोगं कुर्वन्तु

const पोर्ट = 3000;
app.listen (पोर्ट, () =&gt; {
console.log(`सर्वरः http://localhost:${port}` इत्यत्र चालितः अस्ति);
});
```

### Vue घटकेषु API इत्यस्य उपयोगः

स्वस्य Vue घटके, उपरि परिभाषितं API प्रति HTTP अनुरोधं प्रेषयितुं भवान् Axios इत्यस्य उपयोगं कर्तुं शक्नोति:

```वुए
<template>
  <div>
<h2>उपयोक्तारः</h2>
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ उपयोक्तृ.नाम }} - {{ उपयोक्ता.ईमेल }}
      </li>
    </ul>
  </div>
</template>

<script>
'अक्षिकाः' इत्यस्मात् अक्षतानां आयातः;

निर्यात पूर्वनिर्धारित { .
दत्तांश() {
निर्वतनम् {
उपयोक्तारः : []
    };
  },
घुड़सवार() { .
axios.get('http://localhost:3000/api/उपयोक्तारः')
.ततः(प्रतिक्रिया =&gt; { .
this.users = प्रतिक्रिया.दत्तांश;
      })
.catch(त्रुटि =&gt; { .
console.error ('उपयोक्तृन् आनेतुं त्रुटिः:', त्रुटिः);
      });
  }
};
</script>
```

एवं प्रकारेण, अग्रे-अन्त-पृष्ठ-अन्त-तर्कं पृथक् कृत्वा, भवान् कोडं उत्तमरीत्या व्यवस्थितं कर्तुं प्रबन्धयितुं च शक्नोति, तथैव सुनिश्चितं करोति यत् सर्वर-पक्षः दत्तांशकोश-अन्तर्क्रियाः सम्पादयति, यदा तु अग्रभागः एपिआइ-माध्यमेन आँकडा-अधिग्रहणं प्रदर्शनं च सम्पादयति

3.

१) सर्वरः अवश्यं शृणोति! ! निरीक्षणकाले एव परियोजनां चालयितुं पृष्ठभूमिदत्तांशं च द्रष्टुं शक्नुवन्ति । केवलं निम्नलिखितपदार्थाः : १.

परियोजना/src/server/——cmd——node index.js आदेशः, दृश्यं आरभत

सम्यक् निरीक्षणं दर्शयति यत् : १.

द्वितीयं मया ज्ञातं यत् अहं उपयोक्तुं शक्नोमिhttp://localhost:3000/api/उपयोक्तारःअहं सम्यक् JSON-दत्तांशं पश्यामि, परन्तु http://localhost:3000 इत्यस्य उपयोगं कर्तुं न शक्नोमि ।

optionOne.vue परिवर्तनं कुर्वन्तु:

  1. export default {
  2.   data() {
  3.     return {
  4.       users: []
  5.     };
  6.   },
  7.   mounted() {
  8.    // axios.get('http://localhost:3000/api/users')//服务端的信息
  9. 	axios.get('http://localhost:3000')//服务端的信息
  10.       .then(response => {
  11.         this.users = response.data;
  12.       })
  13.       .catch(error => {
  14.         console.error('Error fetching users:', error);
  15.       });
  16.   }
  17. };

4. प्रवेशपृष्ठं कथं योजयितव्यम्

प्रथमं, assets फोल्डर् मध्ये योजयन्तु: img इति पृष्ठप्रतिबिम्बं यत् आरम्भे लॉग् इन कृतम् आसीत्, css फोल्डर् च

ततः Login.vue इति Login इत्यस्य रूटरं योजयन्तु

अन्तिमः सोपानः पूर्वपृष्ठं समायोजयितुं, App.vue (कुलं) पृथक् कृत्वा, तत् समाहितं कृत्वा, पृथक् Bar.vue कर्तुं पृष्ठस्य वामभागे एकं फ्रेमं आकर्षयितुं, ततः यदि भवान् प्रत्येकस्मिन् एतत् Bar द्रष्टुम् इच्छति पृष्ठं, भवद्भिः प्रत्येकस्मिन् पृष्ठे योजितव्यम् ।

उदाहरण:

विकल्पद्वयम्।vue:

  1. <template>
  2.   <el-main>
  3.     <el-container>
  4.       <Bar />
  5.         {{msg}}
  6.         <!-- 根据当前的路由显示内容 -->
  7.         <router-view></router-view>
  8.     </el-container>
  9.   </el-main>
  10. </template>
  11.  
  12. <script>
  13. import Bar from './Bar.vue';
  14.  
  15. export default {
  16.   name: 'optionTwo',
  17.   components:{
  18. 		Bar
  19.   },
  20.   data () {
  21.     return {
  22.       msg: 'Option Two'
  23.     }
  24.   }
  25. }
  26. </script>

optionOne.vue: 1.1.

  • यद्यपि<script>里面import了Bar，但是模块中也要用<Bar />
  • import axios इत्यस्य टिप्पणीं कुर्वन्तु यतः अस्य वाक्यस्य प्रभावः अस्य समानः अस्ति।$http.get('/optionone').then(response =&gt;.
  • यदि भवान् इच्छति यत् दत्तांशकोशे दत्तांशः स्तम्भनामानां अनन्तरं सम्यक् प्रदर्शितः भवतु, तर्हि प्रथमयोः स्तम्भनामयोः मापदण्डं सेट् कुर्वन् विस्तारं सेट् कर्तव्यं, अन्तिमस्तम्भनामस्य विस्तारं न सेट् कर्तव्यम्
  1. <template>
  2.   <el-main>
  3.     <el-container>
  4.       <Bar />
  5.         <el-table :data="information">
  6.           <el-table-column prop="users" label="Users" width="140" />
  7.           <el-table-column prop="sex" label="Sex" width="140" />
  8.           <el-table-column prop="mood" label="mood" />
  9.         </el-table>
  10.         <!-- 根据当前的路由显示内容 -->
  11.         <router-view></router-view>
  12.     </el-container>
  13.   </el-main>
  14. </template>
  15.  
  16. <script>
  17. //import axios from 'axios';
  18. import Bar from './Bar.vue';
  19.  
  20. export default {
  21.   data() {
  22.     return {
  23.       information: []
  24.     };
  25.   },
  26.   created() {
  27.     this.getUserList();
  28.   },
  29.   methods: {
  30.     getUserList() {
  31.       this.$http.get('/optionone').then(response => {
  32.         console.log(response.data);
  33.         this.information = response.data;
  34.       })
  35.       .catch(error => {
  36.         console.log(error);
  37.       });
  38.     }
  39.   },
  40.   // mounted() {
  41.   //   axios.get('http://localhost:3000/api/users')
  42.   //     .then(response => {
  43.   //       this.users = response.data;
  44.   //     })
  45.   //     .catch(error => {
  46.   //       console.error('Error fetching users:', error);
  47.   //     });
  48.   // },
  49.   name: 'OptionOneComponent',
  50.   components: {
  51.     Bar
  52.   }
  53. };
  54. </script>
  55.  
  56. <style>
  57. .layout-container-demo .el-header {
  58.   position: relative;
  59.   background-color: var(--el-color-primary-light-7);
  60.   color: var(--el-text-color-primary);
  61. }
  62. .layout-container-demo .el-main {
  63.   padding: 0;
  64. }
  65. .layout-container-demo .toolbar {
  66.   display: inline-flex;
  67.   align-items: center;
  68.   justify-content: center;
  69.   height: 100%;
  70.   right: 20px;
  71. }
  72. </style>

अवश्यं, अहं भवतः कृते एतेषां प्रश्नानाम् उत्तरं दातुं शक्नोमि-

### 1. प्रत्येकस्य सञ्चिकायाः ​​भूमिकां कथं एकत्र कार्यं कुर्वन्ति इति अवगच्छन्तु

**db.js (पृष्ठभूमिदत्तांशकोशविन्याससञ्चिका)**
- कार्यं: MySQL आँकडाधारसंयोजनपूलं निर्माय निर्यातयन्तु।
- ते एकत्र कथं कार्यं कुर्वन्ति: index.js द्वारा database operations कर्तुं उपयुज्यते।

**index.js (पृष्ठभूमिसर्वर मुख्यसञ्चिका)**
- भूमिका: एक्स्प्रेस् सर्वरं स्थापयतु, मार्गनिर्धारणं मध्यवेयरं च विन्यस्तुं, एपिआइ-अनुरोधं च नियन्त्रयन्तु ।
- एकत्र कथं कार्यं कर्तव्यम् : दत्तांशकोशेन सह सम्बद्धं कर्तुं तथा च अग्रभागात् अनुरोधानाम् प्रतिक्रियां दातुं db.js इत्यस्य उपयोगं कुर्वन्तु ।

**main.js (अग्रभागस्य मुख्यसञ्चिका)**
- कार्यं: Vue अनुप्रयोगं रचयन्तु, Vue Router तथा axios विन्यस्तुं, अनुप्रयोगं माउण्ट् कुर्वन्तु।
- कथं एकत्र कार्यं करोति: उपयोक्तृ-अन्तरफलकं नेविगेशनं च वर्धयितुं Element Plus तथा Vue Router इत्येतयोः उपयोगं कुर्वन्तु, पृष्ठभागेन सह संवादं कर्तुं अक्षिभिः सह।

**index.js (Vue Router विन्याससञ्चिका)**
- कार्यम् : अग्रभागस्य मार्गनिर्धारणं परिभाषयन्तु तथा च भिन्नमार्गेभ्यः अनुरूपं Vue घटकं निर्दिशन्तु ।
- एकत्र कार्यं कथं कर्तव्यम्: पृष्ठमार्गनिर्धारणं कार्यान्वितुं main.js मध्ये Vue उदाहरणेन सह एकीकृत्य।

### 2. बैकएण्ड् तथा फ्रन्टएण्ड् सर्वर्स् कथं आरभ्यत इति प्रदर्शयन्तु

**पृष्ठभागसर्वरं आरभत**:
- Express सर्वरं आरभ्य `node index.js` चालयन्तु ।
- MySQL सेवा चालिता इति सुनिश्चितं कुर्वन्तु।

**अग्रभागस्य सर्वरं आरभत**:
- यदि Vue CLI इत्यस्य उपयोगं करोति तर्हि हॉट्-पुनः लोड् कृतं विकाससर्वरं आरभ्य `npm run serve` चालयन्तु ।
- अग्र-अन्त-अनुप्रयोगं द्रष्टुं ब्राउजर् मध्ये निर्दिष्टं पतां (प्रायः localhost तथा ​​च निश्चितं पोर्ट्) अभिगन्तु ।

### 3. अग्रभागस्य पृष्ठं उपयोक्तृ-अन्तर्क्रिया-प्रक्रिया च प्रदर्शयन्तु

- यदा उपयोक्ता अनुप्रयोगं उद्घाटयति तदा Vue Router URL अनुसारं तत्सम्बद्धं घटकं रेण्डर् करिष्यति ।
- उपयोक्ता एकं कार्यं करोति (यथा प्रवेशप्रपत्रं पूरयति), तथा च दत्तांशः प्रपत्रद्वारा पृष्ठभागं प्रति प्रस्तौति ।
- उपयोक्ता प्रतिक्रियाफलं (प्रवेशं सफलं वा असफलं वा) पश्यति तथा च परिणामाधारितं भिन्नपृष्ठेषु गच्छति।

### 4. एपिआइ अनुरोधस्य प्रतिक्रियायाश्च प्रक्रियां व्याख्यातव्यम्

- अग्रभागः HTTP अनुरोधं पृष्ठभागं प्रति प्रेषयितुं axios इत्यस्य उपयोगं करोति ।
- बैकएण्ड् एक्स्प्रेस् सर्वरः अनुरोधं प्राप्य दत्तांशकोशक्रियाः करोति ।
- पृष्ठभागः प्रतिक्रियारूपेण दत्तांशकोशप्रश्नपरिणामान् अथवा त्रुटिसूचनाः पुनः अग्रभागं प्रति प्रेषयति ।
- अग्रभागः प्रतिक्रियां प्राप्नोति तथा च पृष्ठस्य स्थितिं अद्यतनं करोति अथवा प्रतिक्रियायाः आधारेण सूचनां प्रदर्शयति।

### 5. परियोजनायां प्रयुक्तानां प्रमुखप्रौद्योगिकीनां चर्चां कुर्वन्तु

- **Vue Router**: अग्रभागस्य मार्गनिर्धारणं प्रबन्धयति तथा च एकपृष्ठीय-अनुप्रयोगेषु पृष्ठ-सञ्चारं कार्यान्वयति ।
- **axios**: HTTP अनुरोधं प्रेषयितुं प्रतिक्रियां च अग्रभागात् पृष्ठभागं यावत् संसाधितुं प्रयुक्तम् ।
- **Express**: Node.js जाल-अनुप्रयोग-रूपरेखा, यस्य उपयोगः पृष्ठ-अन्त-सर्वर्-निर्माणार्थं एपिआइ-अनुरोधानाम् नियन्त्रणाय च भवति ।
- **MySQL**: सम्बन्धात्मकदत्तांशकोशप्रबन्धनप्रणाली, यस्य उपयोगः आँकडानां संग्रहणार्थं प्रश्नार्थं च भवति ।

### 6. केषाञ्चन बहुधा पृष्टानां प्रश्नानाम् उत्तराणि सज्जीकुरुत

**CORS इत्यनेन सह कथं व्यवहारः करणीयः ? ** २.
- विशिष्टबाह्यक्षेत्राणि एपिआइ-पर्यन्तं प्रवेशं कर्तुं cors middleware इत्यस्य उपयोगं कुर्वन्तु ।

**उपयोक्तृप्रमाणीकरणं कथं कार्यान्वितम्? ** २.
- पृष्ठभागस्य एपिआइ उपयोक्तुः परिचयं सत्यापयितुं अनुरोधे प्रमाणीकरणसूचनाः (यथा JWT टोकनः) जाँचयितुं शक्नोति ।

**दत्तांशसुरक्षां कथं सुनिश्चितं कर्तव्यम्? ** २.
- HTTPS इत्यस्य उपयोगेन एन्क्रिप्टेड् डाटा स्थानान्तरयन्तु।
- उपयोक्तृगुप्तशब्दाः हैश कृत्वा संगृहीताः भवन्ति।
- SQL injection इत्यादीनां आक्रमणानां निवारणाय सर्वाणि उपयोक्तृनिवेशं प्रमाणीकृत्य।

उपर्युक्त उत्तराणां माध्यमेन भवन्तः परियोजनायाः कार्यसिद्धान्तस्य कार्यान्वयनप्रक्रियायाः च स्पष्टबोधं प्राप्तुं शक्नुवन्ति, रक्षायै च सज्जाः भवेयुः
 

व्यक्तिगत प्रोफाइल

सः ३० वर्षाणाम् अधिकं कालात् प्रौद्योगिक्याः शोधकार्यं कर्तुं समर्पितः अस्ति, तथा च जावा, लिनक्स, जावास्क्रिप्ट्, php, css इत्यादिषु विविधभाषासु प्रवीणः अस्ति, मुक्तस्रोतक्षेत्रे सः बहु योगदानं कृतवान् अस्ति विकासक दस्तावेजीकरणस्थानकं भविष्ये सन्दर्भार्थं प्रौद्योगिकीविकासे केचन विषयाः साझां कर्तुं सर्वे तत् पश्यन्तु

मम सम्पर्कसूचना

मेल