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提交项目的。

 

补充：此次的项目我没有按照之前的方式开发，而是把登陆页面作好以后就没有作登陆和权限控制了，而是直接开始作功能的部分了，我是打算功能的部分作好以后再回头晚上登陆和权限控制的，而后再完善功能上的不足，因此大家会看到我不少地方代码只是写了一部分确没有实际使用。