移動(dòng)電子商務(wù)及應(yīng)用-移動(dòng)商務(wù)應(yīng)用開(kāi)發(fā)案例

移動(dòng)商務(wù)應(yīng)用開(kāi)發(fā)案例學(xué)習(xí)目標(biāo)掌握移動(dòng)商務(wù)網(wǎng)站后端開(kāi)發(fā)技術(shù)能夠?qū)崿F(xiàn)移動(dòng)商務(wù)網(wǎng)站的后端數(shù)據(jù)庫(kù)連接學(xué)習(xí)內(nèi)容網(wǎng)站后端開(kāi)發(fā)技術(shù)函數(shù)與函數(shù)傳遞Express應(yīng)用框架后臺(tái)數(shù)據(jù)庫(kù)訪問(wèn)學(xué)習(xí)進(jìn)度

Web后端開(kāi)發(fā)技術(shù)一個(gè)簡(jiǎn)單的網(wǎng)站基于模塊的應(yīng)用設(shè)計(jì)方法Web開(kāi)發(fā)的前端與后端網(wǎng)站開(kāi)發(fā)按適用范圍可分成前端開(kāi)發(fā)和后端開(kāi)發(fā)：前端開(kāi)發(fā)負(fù)責(zé)網(wǎng)頁(yè)內(nèi)容的設(shè)計(jì)和可視化展示，包括需求分析、詳細(xì)設(shè)計(jì)、美工設(shè)計(jì)、靜態(tài)與動(dòng)態(tài)網(wǎng)頁(yè)編程等后端開(kāi)發(fā)負(fù)責(zé)網(wǎng)站后臺(tái)邏輯設(shè)計(jì)、數(shù)據(jù)處理模型的構(gòu)建等網(wǎng)站前端與后端技術(shù)的分離也是MVC設(shè)計(jì)模式的直接反映前端與后端分離的Web開(kāi)發(fā)方式Web后端的構(gòu)成Web后端可能會(huì)采取多種不同的形式，然而其基本原理均是由應(yīng)用程序、文件、數(shù)據(jù)庫(kù)三個(gè)部分：應(yīng)用程序部分一般包括網(wǎng)頁(yè)與Web服務(wù)器文件部分包括各類網(wǎng)頁(yè)資源文件數(shù)據(jù)庫(kù)提供數(shù)據(jù)的存儲(chǔ)和檢索等能力Web后端開(kāi)發(fā)編程語(yǔ)言Web前端開(kāi)發(fā)主要涉及HTML5、JavaScript等，后端開(kāi)發(fā)可有多種選擇：PHPNode.jsRubyonRailsASP.NETJavaEEPythonNode.js簡(jiǎn)介基于ChromeV8引擎（GoogleChrome內(nèi)核）的JavaScript編程語(yǔ)言和運(yùn)行時(shí)環(huán)境使用事件驅(qū)動(dòng)、非阻塞式I/O的模型Node.js使得服務(wù)端可以像瀏覽器端一樣采用JavaScript進(jìn)行開(kāi)發(fā)Node.js應(yīng)用程序運(yùn)行于單線程中，用戶請(qǐng)求處理無(wú)需新建線程N(yùn)ode.js軟件的安裝可訪問(wèn)http:///download/下載安裝也可直接使用課程資源中的安裝包進(jìn)行安裝平臺(tái)支持：Windows,MacOS,LinuxNode.js軟件的安裝Node.js軟件的安裝完成安裝后，在命令行窗口運(yùn)行node–v,npm–v能夠獲取版本號(hào)則表示安裝成功Node.js應(yīng)用開(kāi)發(fā)工具有多種用于Node.js的開(kāi)發(fā)工具WebstormEclipseVisualStudioCodeVisualStudioSublimeTextNotepad++（課程資源中提供安裝包）Windows記事本學(xué)習(xí)進(jìn)度

Web后端開(kāi)發(fā)技術(shù)之Node.js

一個(gè)簡(jiǎn)單的網(wǎng)站基于模塊的應(yīng)用設(shè)計(jì)方法一個(gè)簡(jiǎn)單的Node.js網(wǎng)站創(chuàng)建并保存為hello.js文件一個(gè)簡(jiǎn)單的Node.js網(wǎng)站可以在命令行窗戶運(yùn)行nodehello.js（按下Ctrl-C可終止運(yùn)行）首次運(yùn)行若防火墻詢問(wèn)，

選擇允許node應(yīng)用一個(gè)簡(jiǎn)單的Node.js網(wǎng)站打開(kāi)瀏覽器，輸入localhost:8888或:8888即可看到結(jié)果簡(jiǎn)單網(wǎng)站的構(gòu)成varhttp=require("http");functiononRequest(request,response){

response.writeHead(200,{"Content-Type":"text/plain"});

response.write("HelloWorld");

response.end();}http.createServer(onRequest).listen(8888);//終端打印如下信息console.log('Serverrunningat:8888/');導(dǎo)入http模塊通過(guò)http模塊創(chuàng)建http服務(wù)器，監(jiān)控的端口為8888獲取http的請(qǐng)求（request）和響應(yīng)（response），利用response發(fā)送網(wǎng)站對(duì)于瀏覽器端的響應(yīng)內(nèi)容Console.log()函數(shù)可用戶打印輸出日志信息學(xué)習(xí)進(jìn)度

Web后端開(kāi)發(fā)技術(shù)

一個(gè)簡(jiǎn)單的網(wǎng)站基于模塊的應(yīng)用設(shè)計(jì)方法Node.js模塊系統(tǒng)模塊是Node.js應(yīng)用程序的基本組成部分之前的案例中通過(guò)引入http模塊獲得創(chuàng)建Web服務(wù)器的功能

var

http=require("http");

http.createServer(onRequest).listen(8888);一般而言，Node.js文件與模塊直接對(duì)應(yīng)這個(gè)文件可能是JavaScript代碼、JSON或者編譯過(guò)的C/C++擴(kuò)展基于模塊的應(yīng)用設(shè)計(jì)方法程序要加載外部的函數(shù)、對(duì)象，就需要引入對(duì)應(yīng)的模塊對(duì)模塊的使用：引入系統(tǒng)模塊 require(‘系統(tǒng)模塊名’) 引入自定義模塊 require(‘自定義模塊的路徑’)文件內(nèi)的函數(shù)、對(duì)象等需要導(dǎo)出才能作為模塊被外部訪問(wèn)

module.exports=

function()

{

...

...

}

模塊的案例//person.jsfunction

Person()

{

this.setName=

function(theName)

{

this.name=theName;

};

this.sayName

=

function()

{

console.log('Hello'

+

this.name);

};

};

module.exports=

Person;

模塊的案例//

main.jsvar

Person=

require('./person');

var

person=

new

Person();

person.setName('Mike');

person.sayName();console.log(person.name);小結(jié)Node.js采用JavaScript編程語(yǔ)言，是網(wǎng)站后端開(kāi)發(fā)的利器Node.js依靠模塊來(lái)加載各種外部的函數(shù)和對(duì)象學(xué)習(xí)內(nèi)容網(wǎng)站后端開(kāi)發(fā)技術(shù)函數(shù)與函數(shù)傳遞Express應(yīng)用框架后臺(tái)數(shù)據(jù)庫(kù)訪問(wèn)學(xué)習(xí)進(jìn)度函數(shù)與函數(shù)對(duì)象

函數(shù)傳遞與匿名函數(shù)重新認(rèn)識(shí)函數(shù)Node.js本質(zhì)是一種JavaScript運(yùn)行環(huán)境Node.js遵循JavaScript的ECMAScript（ES6）規(guī)范在JavaScript中一切皆對(duì)象用function關(guān)鍵字定義函數(shù)，可通過(guò)函數(shù)名調(diào)用該函數(shù)在JavaScript解釋執(zhí)行時(shí)，函數(shù)實(shí)際會(huì)被處理為函數(shù)對(duì)象（Function）問(wèn)題的提出在JavaScipt中一切皆對(duì)象，這里的對(duì)象指的是Object類，所有其它對(duì)象的類都繼承自O(shè)bject類要進(jìn)一步理解函數(shù)與函數(shù)對(duì)象，思考以下幾個(gè)問(wèn)題：Node.js、JavaScript中是否就沒(méi)有一般意義上的函數(shù)?如果函數(shù)就是面向?qū)ο罄锏念悾欠癖仨氁猲ew這種Function類?重新審視案例代碼此處能否不去new這個(gè)Person()?Person()看起來(lái)像是一個(gè)類的初始化方法，是否它就不是函數(shù)了？Person是引入了外部模塊，它到底是個(gè)函數(shù)還是一個(gè)類，還是說(shuō)是一種函數(shù)對(duì)象？//person.jsfunction

Person()

{

this.setName=

function(theName)

{

this.name=theName;

};

this.sayName

=

function()

{

console.log('Hello'

+

this.name);

};

};

module.exports=

Person;

//

main.jsvar

Person=

require('./person');

var

person=

new

Person();

person.setName('Mike');

person.sayName();console.log(person.name);二者有區(qū)別嗎？函數(shù)=函數(shù)對(duì)象？將案例修改如下//person.jsfunction

Person()

{

this.name='Anonymous';

this.setName=

function(theName)

{

this.name=theName;

};

this.sayName

=

function()

{

console.log('Hello'

+

this.name);

};

console.log(‘thisnameis'+);

};

module.exports=

Person;

//

main.jsvar

Person=

require('./person');Person();console.log('----------------------------------');

console.log(Person);

var

person=

new

Person();

console.log(person);

console.log('----------------------------------');

person.setName('Mike');person.sayName();運(yùn)行結(jié)果對(duì)照//

main.jsvar

Person=

require('./person');Person();console.log(Person);

console.log('----------------------------------');

var

person=

new

Person();

console.log(person);

console.log('----------------------------------');person.setName('Mike');person.sayName();作為函數(shù)運(yùn)行的時(shí)候，Person為Function實(shí)例作為函數(shù)對(duì)象來(lái)運(yùn)行的時(shí)候，Person為對(duì)象實(shí)例結(jié)果分析兩種運(yùn)行方式作為函數(shù)（Person()）創(chuàng)建函數(shù)對(duì)象（newPerson()）

二者的本質(zhì)都是Function對(duì)象this的含義function中this指定的是實(shí)例化對(duì)象的可訪問(wèn)屬性通過(guò)new創(chuàng)建函數(shù)實(shí)例以后，this指定的屬性或方法為公有的public未被this指定的變量屬于局部變量或方法，可以看作是私有的private//person.jsfunction

Person()

{

this.name='Anonymous';

this.setName=

function(theName)

{

this.name=theName;

};

this.sayName

=

function()

{

console.log('Hello'

+

this.name);

};

};

函數(shù)對(duì)象小結(jié)引入外部模塊時(shí)本質(zhì)上引入的是函數(shù)對(duì)象（Function）作為函數(shù)運(yùn)行時(shí)僅僅執(zhí)行了過(guò)程，沒(méi)有創(chuàng)建函數(shù)對(duì)象的實(shí)例通過(guò)new方法可創(chuàng)建函數(shù)對(duì)象的實(shí)例函數(shù)中由this引導(dǎo)的變量和方法屬于實(shí)例變量和實(shí)例方法最初的兩個(gè)問(wèn)題大家現(xiàn)在可自行回答：Node.js、JavaScript中是否就沒(méi)有一般意義上的函數(shù)?如果函數(shù)就是面向?qū)ο罄锏念悾欠癖仨氁猲ew這種Function類?學(xué)習(xí)進(jìn)度深入理解函數(shù)與函數(shù)對(duì)象函數(shù)傳遞與匿名函數(shù)函數(shù)傳遞函數(shù)可以作為其它函數(shù)的參數(shù)，稱為函數(shù)傳遞也可以在傳遞參數(shù)時(shí)直接定義函數(shù)functionsay(words){console.log(words);}functionexecute(func,value){func(value);}execute(say,“Hello”); //運(yùn)行結(jié)果：Hello匿名函數(shù)不必先定義函數(shù)，而是直接在另一個(gè)函數(shù)中定義和傳遞此函數(shù)functionexecute(func,value){ func(value);}execute(function(words){console.log(words)},"Hello“);//運(yùn)行結(jié)果：

HelloHTTP服務(wù)器中的函數(shù)傳遞——利用匿名函數(shù)varhttp=

require("http");

http.createServer(function(request,response)

{

response.writeHead(200,

{"Content-Type":

"text/plain"});

response.write("HelloWorld");

response.end();

}).listen(8888);

HTTP服務(wù)器中的函數(shù)傳遞——利用函數(shù)名varhttp=

require("http");

functiononRequest(request,response)

{

response.writeHead(200,

{"Content-Type":

"text/plain"});

response.write("HelloWorld");

response.end();

}http.createServer(onRequest).listen(8888);

函數(shù)傳遞與匿名函數(shù)小結(jié)JavaScript會(huì)將函數(shù)處理為函數(shù)對(duì)象（Function）引入外部模塊時(shí)本質(zhì)上引入的是函數(shù)對(duì)象通過(guò)new方法創(chuàng)建的是函數(shù)對(duì)象的實(shí)例函數(shù)中this用于引導(dǎo)實(shí)例變量和實(shí)例方法函數(shù)傳遞時(shí)可以傳遞有名函數(shù)也可傳遞匿名函數(shù)學(xué)習(xí)內(nèi)容網(wǎng)站后端開(kāi)發(fā)技術(shù)函數(shù)與函數(shù)傳遞Express應(yīng)用框架后臺(tái)數(shù)據(jù)庫(kù)訪問(wèn)Express簡(jiǎn)介Express是一個(gè)簡(jiǎn)潔而靈活的Node.jsWeb應(yīng)用框架使用Express可以快速地搭建完整的網(wǎng)站應(yīng)用Express框架提供了路由表處理和動(dòng)態(tài)HTML頁(yè)面渲染等功能安裝Express——安裝指令在命令行窗口中執(zhí)行以下命令來(lái)安裝Express框架。安裝前可以將npm的網(wǎng)址換為國(guó)內(nèi)鏡像以提高下載效率npmconfigsetregistry

在全局環(huán)境中安裝express-generator即完成Express安裝npminstall-gexpress-generator安裝Express——安裝過(guò)程Express開(kāi)發(fā)案例——項(xiàng)目參數(shù)Express框架的使用可以極大簡(jiǎn)化Web應(yīng)用的開(kāi)發(fā)下面利用Express開(kāi)發(fā)一個(gè)Web應(yīng)用案例，具體參數(shù)設(shè)置如下Web應(yīng)用的目錄

C:\workspaceWeb應(yīng)用的名稱

myapp頁(yè)面模板引擎 ejsExpress開(kāi)發(fā)案例——?jiǎng)?chuàng)建Web應(yīng)用框架的過(guò)程在命令行窗口中進(jìn)行以下操作即可實(shí)現(xiàn)Web應(yīng)用框架的構(gòu)建首先進(jìn)入要?jiǎng)?chuàng)建項(xiàng)目的目錄

cdC:\workspace執(zhí)行命令完成Web應(yīng)用框架的構(gòu)建

expressmyapp進(jìn)入項(xiàng)目目錄myapp cdmyapp安裝項(xiàng)目的依賴軟件

npminstall啟動(dòng)演示項(xiàng)目

npmstart

Express開(kāi)發(fā)案例——?jiǎng)?chuàng)建Web應(yīng)用框架的過(guò)程Express開(kāi)發(fā)案例——運(yùn)行演示程序完成ExpressWeb應(yīng)用框架的創(chuàng)建后，即可運(yùn)行其自帶的演示程序Express應(yīng)用框架的構(gòu)成│app.js│package.json│├─bin│www│├─node_modules│├─public│├─images│├─javascripts│└─stylesheets│style.css│├─routes│index.js│users.js│└─viewserror.ejsindex.ejsExpress創(chuàng)建的Web應(yīng)用框架是一種確定模式的文件目錄，其中的子目錄和文件如右圖所示Express應(yīng)用框架的構(gòu)成Express應(yīng)用框架由以下幾個(gè)主要模塊構(gòu)成package.json

用于描述項(xiàng)目信息及項(xiàng)目所依賴的庫(kù)文件bin/www

用于創(chuàng)建http服務(wù)器并指定訪問(wèn)端口app.js

用于指定網(wǎng)址的路由、靜態(tài)文件路徑、錯(cuò)誤處理等信息views/

存放網(wǎng)址路由所對(duì)應(yīng)的網(wǎng)頁(yè)模板文件public/ 存放CSS、JavaScript、圖片等各類靜態(tài)文件路由技術(shù)Express框架通過(guò)URL網(wǎng)址的路由技術(shù)實(shí)現(xiàn)對(duì)客戶端瀏覽器請(qǐng)求的處理這里指定了兩個(gè)路由：/和/users，其中/為網(wǎng)站的默認(rèn)地址varindexRouter=require('./routes/index');varusersRouter=require('./routes/users');varapp=express();app.use('/',indexRouter);app.use('/users',usersRouter);這種路由的指定告訴我們?cè)摼W(wǎng)站提供了哪些可訪問(wèn)的網(wǎng)址:3000 或 localhost:3000:3000/users

或

localhost:3000/users路由技術(shù)通過(guò)路由技術(shù)，還可以根據(jù)HTTP請(qǐng)求的GET、POST方法進(jìn)一步處理復(fù)雜URL地址中的各種參數(shù)以下是默認(rèn)的Express演示網(wǎng)站中提供的兩個(gè)可訪問(wèn)網(wǎng)址案例設(shè)計(jì)下面以Express演示網(wǎng)站為基礎(chǔ)進(jìn)行案例設(shè)計(jì)，需要作出以下調(diào)整。增加一個(gè)登錄頁(yè)面，網(wǎng)址為:3000/login.html將網(wǎng)站的默認(rèn)訪問(wèn)網(wǎng)頁(yè)設(shè)置為登錄頁(yè)面添加一個(gè)系統(tǒng)用戶（用戶名：admin，口令：123456）在網(wǎng)站系統(tǒng)中驗(yàn)證如果為合法用戶則進(jìn)入Express歡迎頁(yè)面:3000/index.html，否則返回登錄頁(yè)面案例開(kāi)發(fā)為實(shí)現(xiàn)以上案例設(shè)計(jì)要求，需要調(diào)整以下文件views/login.ejs（新增）routes/login.js

（新增）app.js案例開(kāi)發(fā)——views/login.ejs案例開(kāi)發(fā)——routes/login.js案例開(kāi)發(fā)——app.js案例執(zhí)行登錄頁(yè)面若輸入口令錯(cuò)誤會(huì)返回本頁(yè)面，正確的用戶名和口令則進(jìn)入歡迎界面ejs模板的使用案例中的views/login.ejs采用了ejs模板，其設(shè)計(jì)方式與正常顯示的網(wǎng)頁(yè)相同，但引入了ejs表達(dá)式<%=

variable%> <title><%=

title

%></title>routes/login.js文件在頁(yè)面渲染時(shí)送入該ejs變量title的值 res.render('login',{title:'網(wǎng)站應(yīng)用演示系統(tǒng)'});ejs模板的使用為網(wǎng)站后端服務(wù)器的開(kāi)發(fā)提供了動(dòng)態(tài)網(wǎng)頁(yè)的支持Express應(yīng)用框架小結(jié)Express應(yīng)用框架可以簡(jiǎn)化Web網(wǎng)站應(yīng)用的開(kāi)發(fā)路由處理及頁(yè)面渲染是網(wǎng)站服務(wù)器端實(shí)現(xiàn)動(dòng)態(tài)網(wǎng)頁(yè)的基礎(chǔ)ejs模板的設(shè)計(jì)以網(wǎng)頁(yè)為基礎(chǔ)，增加了ejs表達(dá)式路由處理過(guò)程應(yīng)根據(jù)需要分別處理HTTPGET和POST請(qǐng)求學(xué)習(xí)內(nèi)容網(wǎng)站后端開(kāi)發(fā)技術(shù)函數(shù)與函數(shù)傳遞Express應(yīng)用框架后臺(tái)數(shù)據(jù)庫(kù)訪問(wèn)網(wǎng)站后臺(tái)數(shù)據(jù)庫(kù)網(wǎng)站系統(tǒng)往往需要連接后臺(tái)數(shù)據(jù)庫(kù)，以提供對(duì)數(shù)據(jù)的存儲(chǔ)和更新應(yīng)用較多的網(wǎng)站后臺(tái)數(shù)據(jù)庫(kù)包括MySQL、PostgreSQL、MongoDB等PostgreSQL具有功能強(qiáng)大、方便易用等特點(diǎn)，在網(wǎng)站和系統(tǒng)中得以廣泛應(yīng)用安裝PostgreSQL案例設(shè)計(jì)本次案例側(cè)重于演示在Node.js網(wǎng)站中如何使用數(shù)據(jù)庫(kù)連接之前的程序在代碼中通過(guò)常量保存用戶名與密碼if(req.body['user_name']=='admin'&&req.body['password']=='123456'){r