【原】無腦操做：express + MySQL 實現CRUD

基於node.js的web開發框架express簡單方便，不少項目中都在使用。這裏結合MySQL數據庫，實現最簡單的CRUD操做。

開發環境：

IDE：WebStorm

DB：MySQL

-------------------------------------------------------------------------------------------

一、使用WebStorm建立node.js express應用程序，express框架能夠根據使用者的愛好設置頁面引擎，默認爲jade，我比較喜歡ejs，這裏設置時選擇Template爲EJS便可

這裏WebStorm實際使用了express-generator這個生成器爲咱們生成了express應用程序

二、建立結束時，能夠看到express工程結構如圖

三、執行調試的設置（不設置也能夠，只不過執行或調試時看的有些奇怪而已）

修改一下Name的內容爲工程名稱

注意：express工程中的bin目錄下有一個www文件，它用來設置express工程的一些配置，好比express引用程序的端口（默認：3000）等

四、配置好後就能夠執行（alt+F10）或調試（alt+F9）了

五、試着訪問一下，在瀏覽器的地址欄中輸入localhost:3000，能夠看到下圖，說明express框架的應用程序已經搭建好了

-------------------------------------------------------------------------------------------

六、express-generator生成器生成的代碼中有users相關內容，咱們不須要的，因此刪除之。先在app.js這個文件中刪除相關內容，下圖中的第9行和第26行都刪除掉

七、另外，路由目錄routes中的users.js文件也刪除掉

-------------------------------------------------------------------------------------------

八、接着添加MySQL數據庫驅動，在package.json文件中添加"mysql" : "latest"，意思是不知道mysql對應的驅動是什麼版本，使用latest表示獲取最新的mysql數據庫驅動

九、觀察一下工程目錄中的node_modules目錄，如今是沒有mysql驅動的

十、在命令行窗口中當前工程路徑下使用指令：npm install，這樣就能夠依據package.json文件中寫的依賴添加mysql驅動了

添加完畢，以下提示

再次觀察node_modules目錄，這時有mysql驅動了

-------------------------------------------------------------------------------------------

十一、最終實現的效果

【客戶信息列表頁面】

【客戶新增頁面】

【客戶修改頁面】

 【根據條件查詢】

-------------------------------------------------------------------------------------------

十二、建立數據訪問層，在express工程中建立db目錄，在其中建立兩個文件dbconfig.js 和 customersql.js文件，dbconfig.js文件是MySQL數據庫鏈接配置信息模塊文件，customersql.js文件記錄客戶管理功能模塊要用到的sql語句，固然都以JavaScript對象的形式，以node.js中模塊的結構組織。

對於數據庫鏈接配置模塊，仍是那些鏈接信息：服務器名稱啦、鏈接用戶名稱啦、鏈接用戶密碼啦、數據庫名稱啦、端口號啦

而具體業務模塊的數據庫操做對象模塊說白了就是對SQL語句進行了JavaScript對象方式的封裝，調用時獲取對象的CRUD相應的屬性值（也就是相應的SQL語句）

-------------------------------------------------------------------------------------------

1三、路由規劃

默認index.js文件以下，只有對默認路徑（即http://localhost這樣）形式訪問的路由處理

添加自定義的路由規劃，包括路由對應的處理器函數，無非是對應頁面的CRUD操做，設置get、post方式的處理器函數

-------------------------------------------------------------------------------------------

1四、最終的工程結構

 

看到這裏，是否是感受到特別無腦操做、特別簡單呀？

後續有空，再寫一個更好一些的版本（涉及：分頁、多表鏈接、Ajax等）

 

整個工程代碼：https://github.com/temptation/watermalon_v1