جستجوی سریع Ajax با استفاده از AngularJs و Node

ترجمه و تالیف : امیررضا سیستانه ای
تاریخ انتشار : 13 خرداد 98
خواندن در 1 دقیقه
دسته بندی ها : جاوا اسکریپت , نود جی اس

جستجوی سریع یکی از تعاملی ترین بخش های هر اپلیکیشن وب هست که به کاربر اجازه میده که چطور جستجوی واژه ها, نتایج رو به بار میاره و اینطوری کاربران میتونند کلیدواژه های بهتری رو انتخاب کنند. گوگل و فیسبوک هم این کار رو در وبسایتشون انجام داده اند و به بهترین نحو این رو اجرا کردند. 

جستجوی سریع Ajax با استفاده از AngularJs و Node

در این مقاله میخواهیم یک باکس داشته باشیم که ورودی کاربر رو دریافت کرده و نتیجه رو درلحظه نمایش میده. Jquery برای اینکار قدیمی شده و اکثرا به سمت تکنولوژی های جدید مثل Angular و Node رفته اند. بنابراین ما از اینها برای این پروژه استفاده می کنیم.

مسیرهای پروژه ما به این شکل هست :

جستجوی سریع Ajax با استفاده از AngularJs و Node

قبل از پیاده سازی پروژه میخواهیم درمورد کلیت کار توضیح بدیم. ما از 'ng-repeat' استفاده میکنیم تا جستجوی درلحظه رو داشته باشیم. این به ما اجازه میده که اطلاعاتی که برای جستجو نیاز داریم رو در client-end قرار بدیم, پس برای هر کلید ورودی یک فراخوانی دیتابیس نداریم که باعث میشه کارایی سیستم بالاتر بره. اینجا یک ترسیم گرافیکی از کاری که میخواهیم انجام بدیم هست :

جستجوی سریع Ajax با استفاده از AngularJs و Node

بیایید یک دیتابیس ساده بسازیم و تعدادی دیتا وارد کنیم. دیتابیس من در MySQL بنام demos هست و جدولی با نام demo_cfg دارم. این ساختار جدول منه :

جستجوی سریع Ajax با استفاده از AngularJs و Node

فایل package.json

{

"name": "demos-cfg",

"version": "0.0.1",

"description": "Live search using Angular and Node",

"main": "Server.js",

"dependencies": {

"ejs": "^1.0.0",

"express": "^4.8.6",

"mysql": "^2.4.3"

}

}

ما میخواهیم یک سرور Express بسازیم که روی پورت 7001 هست. دو مسیر / , load/ رو داراست. در درخواست مسیر اول صفحه ی home و دومی هم نتایج رو از دیتابیس میگیره. 

فایل Server.js

var express = require('express');

var app = express();

var mysql = require('mysql');

var connection = mysql.createConnection({

host : 'localhost',

user : 'mysql user (generally root)',

password : 'Mysql password (generally blank)',

database : 'Your database, in my case it is demos'

});



connection.connect(function(){

console.log("MySQL Database is Connected");

});



app.use(express.static(__dirname + '/css'));

app.use(express.static(__dirname + '/js'));



app.set('views', __dirname + '/views');

app.engine('html', require('ejs').renderFile);



app.get('/',function(req,res){



res.render('index.html');



});



app.get('/load',function(req,res){



connection.query("select * from cfg_demos",

function(err,rows,fields){

if(err) throw err;

res.end(JSON.stringify(rows));

});


});


app.listen(7001,function(){

console.log("App is started at PORT 7001");

});

همینطور که مشاهده می کنید ما اول وابستگی ها رو تعریف کردیم سپس به دیتابیس وصل شدیم و بعد مکان فایل های front-end رو تعریف کردیم, درنهایت هم مسیرها رو مشخص کردیم. 

ما دو فایل جاوا اسکریپت app.js و core.js داریم. در اولی اپلیکیشن angular تعریف کردیم و در دومی کنترلر اون قرار گرفته. 

فایل js/app.js

var app = angular.module('demos_cfg', []);

فایل js/core.js


app.controller('main_control',function($scope,$http){

load_demos();

function load_demos(){

$http.get("http://localhost:7001/load").success(function(data){

$scope.loaded_demos=data;

})

}

});

ما براحتی درخواست GET رو میدیم و اطلاعات رو در متغیر scope.loaded_demos$ ذخیره می کنیم. حالا تعدادی خط کد در فایل HTML وارد میکنیم. این فایل index.html :

<script class='lozad' data-src='angular.js' type="text/javascript"></script>

<script class='lozad' data-src='app.js' type="text/javascript"></script>

<script class='lozad' data-src='core.js' type="text/javascript"></script>


&nbsp;

<div id="container"><span id="header">CodeforGeek</span><span id="demo">Demo's</span>

<input id="search" size="40" type="search" placeholder="Search for tutorials,demos and downloads..." />

<table id="showit">

<tbody>

<tr>

<td>Post Title</td>

<td>Tutorial link</td>

<td>Demo Link</td>

<td>Download link</td>

</tr>

<tr>

<td>{{data.title}}</td>

<td><button id="article"><a href="{{data.link}}" target="_blank">Read Article</a></button></td>

<td><button id="demobutton"><a href="{{data.demo_link}}" target="_blank">Live Demo</a></button></td>

<td><button id="downloadbutton"><a href="{{data.download}}" target="_blank">Download</a></button></td>

</tr>

</tbody>

</table>

</div>

به این خط توجه کنید :

ng-repeat=”data in loaded_demos | filter:search

این پایه ی جستجوی ما در loaded_demos هست. که دیتای دیتابیس هست. 

دموی پروژه - دریافت کد

برای اجرای دمو اول دیتابیس و جداول رو ایجاد کنید. سپس با دستور npm install اون رو نصب و با دستور node Server.js اجرا کنید. برای نمایش خروجی به localhost:7001 بروید.

منبع

دیدگاه‌ها و پرسش‌ها

برای ارسال نظر لازم است ابتدا وارد سایت شوید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید