NLifeBill第一章項目搭建

NLifeBill這個項目是我本身獨立開發的一個項目，以前這個項目叫LifeBill(生活帳單)，項目地址是：https://github.com/Dn9x/LifeBill這個項目是去年開始去年就已經開始使用了，主要是記錄我家裏的天天生活消費的費用，用了幾個月以後發現最初的分類不完整，並且也想添加一些功能和晚上報表功能，就想着重構，以前的LifeBill是用Asp.net MVC3開發的，從2012年就一直喜歡nodejs因此此次重構的時候就想着所有用nodejs吧，因此名字我就添加了一個N在前面。

NLifeBill這個項目的相關文章主要記錄下個人開發過程，一方面提高下寫博客的能力，比較從本身的博客關閉以後就不多寫了，一方面之後還能夠回頭看看。整個項目的地址：https://github.com/Dn9x/NLifeBill，我基本上是天天提交一次，週末的時候我可能會有事就沒有提交。

 

閱讀目錄：

　　1.環境介紹
　　2.項目搭建
　　3.前端介紹
     4.數據庫介紹
　　5.項目提交

 

環境介紹

開發環境:Win7

數據庫：MySQL5.5

語言平臺：NodeJS

開發框架：Express

 

項目搭建

項目是使用nodejs開發，不應這麼說，由於nodejs是平臺，不是語言。框架使用的是Express，這個框架是MVC框架，在Nodejs中特別的火，恰好我也算有點了解因此就使用這個。

Express安裝使用仍是很簡單的，nodejs安裝好以後，直接在命令行執行：

1 npm install -g express

npm是nodejs的包管理器，現有的版本在安裝nodejs就會自動安裝了，-g表示全局安裝express,這也是爲了使用方便。

在你的須要建立項目的盤符下使用命令：

 1 E:\StudySpace\GitHub>express -e NLifeBill
 2 
 3    create : NLifeBill
 4    create : NLifeBill/package.json
 5    create : NLifeBill/app.js
 6    create : NLifeBill/public
 7    create : NLifeBill/public/javascripts
 8    create : NLifeBill/public/images
 9    create : NLifeBill/public/stylesheets
10    create : NLifeBill/public/stylesheets/style.css
11    create : NLifeBill/routes
12    create : NLifeBill/routes/index.js
13    create : NLifeBill/routes/user.js
14    create : NLifeBill/views
15    create : NLifeBill/views/index.ejs
16 
17    install dependencies:
18      $ cd NLifeBill&& npm install
19 
20    run the app:
21      $ node app

上面的-e表示是模板引擎使用的是ejs。在命令行下 進入NLifeBill下面輸入npm install，上面的命令行第18行就已經說明了，就會自動安裝所須要的庫。這裏我提早修改了個人package.json,這個文件記錄項目信息和所須要的相關的庫：

{
  "name": "nlifebill",
  "description": "my life bill",
  "version": "0.0.2",
  "author": {
    "name": "Dn9x",
    "email": "xiuxu123@live.cn"
  },
  "private": true,
  "scripts": {
    "start": "node app.js"
  },
  "dependencies": {
    "express": "3.4.8",
    "ejs": "*",
    "connect-flash": "*",
    "mysql": "2.0.1",
    "redis": "0.10.0"
  }
}

npm install以後就能夠直接運行項目了，node app就能夠了。項目默認會在3000端口啓動。

 

前端介紹

由於此次個人前端的數據處理我沒有打算使用ejs做爲模板引擎，應該說也用了，可是前端主要使用的是angularjs,因此此次在記錄這個項目的時候我也會同時記錄有關angularjs的使用心得，我會放在另外的文章裏面介紹。既然要是angularjs，那麼項目就要調整下。

把全部的視圖文件的後綴都改爲.html，由於默認是使用ejs模板，那麼後綴默認的都是.ejs。修改方式是修改項目下的app.js文件，修改以下：

1 --以前是這樣的一句代碼
2 app.set('view engine', 'ejs');
3 
4 --把上面這句代碼替換成這樣：
5 app.set('view engine', 'html');
6 app.engine('.html', require('ejs').__express);

這裏要提下，新的express在修改了模板後綴以後，引入視圖文件就要加後綴了，我用的express是3.4.8，至少這個版本的要加，好比：

1 //個人index視圖文件要引入header.html文件
2 <%- include header.html %>

這裏我使用angualrjs版本是1.2.13，以前使用的是1.0.7的，後來切換到最新版本還出了點問題，這裏建議使用最新的，功能也新增了不少。

至於UI方面我使用的是Bootstrap3.0.3。之前的時候都是使用國產的渴切。後來發現都差很少，因此也嘗試下bootstrap。

 

數據庫介紹

數據庫我使用的是mysql5.5，總共就四張表，

master主檔表，
detail明細檔表，
user用戶表，
tags分類表

由於整個系統是本身家裏人使用的，因此並無什麼權限控制，之因此後面會提到權限只是爲了管控沒有登陸的用戶的。沒其餘的意思。

 

項目提交

項目我都提交到github上了，首先在github上面新建項目：NLifeBill，建立完以後就都是本地的事情了。

在命令行下進入到你的項目文件夾下：

1 git init

初始化項目。

1 git add *

*表示全部的文件，通常能夠不提交node_modules文件夾下的文件，可是我公司裏面沒法使用npm,因此我都提交了。

git commit -m "first commit"

添加備註，是提交的備註。說明下此次提交了什麼信息。

git remote add origin https://github.com/Dn9x/NLifeBill

把項目要推送的遠程地址設置好，第一次推送要這個命令，後面修改過以後就不用這條命令了，

git push -u origin master

把項目推送到遠程服務器上，master是項目的主分支，也是主幹，若是你想推送到其餘分支上面，直接把master改爲你分支的名稱就好了，接下來會讓你輸入帳號和密碼的。

若是你在github上面建立新的倉庫的時候而且沒有新建readme.md文件，那麼github會提示你怎麼使用git提交項目的。

 

補充：此次的項目我沒有按照之前的方式開發，而是把登陸頁面作好以後就沒有作登陸和權限控制了，而是直接開始作功能的部分了，我是打算功能的部分作好以後再回頭晚上登陸和權限控制的，而後再完善功能上的不足，因此大家會看到我不少地方代碼只是寫了一部分確沒有實際使用。