جستجوی سریع یکی از تعاملی ترین بخش های هر اپلیکیشن وب هست که به کاربر اجازه میده که چطور جستجوی واژه ها, نتایج رو به بار میاره و اینطوری کاربران میتونند کلیدواژه های بهتری رو انتخاب کنند. گوگل و فیسبوک هم این کار رو در وبسایتشون انجام داده اند و به بهترین نحو این رو اجرا کردند.
در این مقاله میخواهیم یک باکس داشته باشیم که ورودی کاربر رو دریافت کرده و نتیجه رو درلحظه نمایش میده. Jquery برای اینکار قدیمی شده و اکثرا به سمت تکنولوژی های جدید مثل Angular و Node رفته اند. بنابراین ما از اینها برای این پروژه استفاده می کنیم.
مسیرهای پروژه ما به این شکل هست :
قبل از پیاده سازی پروژه میخواهیم درمورد کلیت کار توضیح بدیم. ما از 'ng-repeat' استفاده میکنیم تا جستجوی درلحظه رو داشته باشیم. این به ما اجازه میده که اطلاعاتی که برای جستجو نیاز داریم رو در client-end قرار بدیم, پس برای هر کلید ورودی یک فراخوانی دیتابیس نداریم که باعث میشه کارایی سیستم بالاتر بره. اینجا یک ترسیم گرافیکی از کاری که میخواهیم انجام بدیم هست :
بیایید یک دیتابیس ساده بسازیم و تعدادی دیتا وارد کنیم. دیتابیس من در MySQL بنام demos هست و جدولی با نام demo_cfg دارم. این ساختار جدول منه :
فایل 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 src="angular.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<script src="core.js" type="text/javascript"></script>
<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 بروید.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید