【原】無腦操作:express + MySQL 實現CRUD


基於node.js的web開發框架express簡單方便,很多項目中都在使用。這里結合MySQL數據庫,實現最簡單的CRUD操作。

開發環境:

IDE:WebStorm

DB:MySQL

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

1、使用WebStorm創建node.js express應用程序,express框架可以根據使用者的愛好設置頁面引擎,默認為jade,我比較喜歡ejs,這里設置時選擇Template為EJS即可

這里WebStorm實際使用了express-generator這個生成器為我們生成了express應用程序


2、創建結束時,可以看到express工程結構如圖

3、執行調試的設置(不設置也可以,只不過執行或調試時看的有些奇怪而已)

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

注意:express工程中的bin目錄下有一個www文件,它用來設置express工程的一些配置,比如express引用程序的端口(默認:3000)等

4、配置好后就可以執行(alt+F10)或調試(alt+F9)了

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

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

6、express-generator生成器生成的代碼中有users相關內容,我們不需要的,所以刪除之。先在app.js這個文件中刪除相關內容,下圖中的第9行和第26行都刪除掉

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

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

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

9、觀察一下工程目錄中的node_modules目錄,現在是沒有mysql驅動的

10、在命令行窗口中當前工程路徑下使用指令:npm install,這樣就可以依據package.json文件中寫的依賴添加mysql驅動了

添加完畢,如下提示

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

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

11、最終實現的效果

【客戶信息列表頁面】

【客戶新增頁面】

【客戶修改頁面】

 【根據條件查詢】

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

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

對於數據庫連接配置模塊,還是那些連接信息:服務器名稱啦、連接用戶名稱啦、連接用戶密碼啦、數據庫名稱啦、端口號啦

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

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

13、路由規划

默認index.js文件如下,只有對默認路徑(即http://localhost這樣)形式訪問的路由處理

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

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

14、最終的工程結構

 

看到這里,是不是感覺到特別無腦操作、特別簡單呀?

后續有空,再寫一個更好一些的版本(涉及:分頁、多表連接、Ajax等)

 

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM