Nodejs学习笔记，七--- Node.js + Express 构建网站简单示例

• 前言
• 新建项目、建立数据库以及其它准备工作
  • 新建express + ejs 项目：sampleEjs
  • 创建数据库
  • 修改package.json文件,安装session和mysql模块
  • 样式和JQuery文件
  • 清理项目冗余文件，并添加监听
• 规划路由，并新建相关文件
• 实现登录和注册需要的数据访问方法
• 注册
• 登录
• 首页
• 安全退出
• 写在之后

前言

　　上一篇学习了一些构建网站会用到的一些知识点 http://www.cnblogs.com/zhongweiv/p/nodejs_express_webapp1.html

　　这一篇主要结合前面讲到的知识，去构建一个较为完整的网站应用程序，对前面学到的一些知道做一个串联加深并灵活运用!

　　功能主要用MySQL数据库，包括登录、注册、主页三部分；下面就一步步开始吧！

新建项目、建立数据库以及其它准备工作

　　1.新建express + ejs 项目：sampleEjs

cd 工作目录
express -e sampleEjs
cd sampleEjs && npm install

　　2.创建数据库 （还第四篇数据库一致： http://www.cnblogs.com/zhongweiv/p/nodejs_mysql.html）

CREATE DATABASE IF NOT EXISTS nodesample CHARACTER SET UTF8;

USE nodesample;

SET FOREIGN_KEY_CHECKS=0;

DROP TABLE IF EXISTS `userinfo`;
CREATE TABLE `userinfo` (
  `Id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键',
  `UserName` varchar(64) NOT NULL COMMENT '用户名',
  `UserPass` varchar(64) NOT NULL COMMENT '用户密码',
  PRIMARY KEY (`Id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='用户信息表';

　　3.修改package.json文件,安装session和mysql模块

{
  "name": "sampleEjs",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "express": "~4.0.0",
    "static-favicon": "~1.0.0",
    "morgan": "~1.0.0",
    "cookie-parser": "~1.0.1",
    "body-parser": "~1.0.0",
    "debug": "~0.7.4",
    "ejs": "~0.8.5",
    "express-session" : "latest",
    "mysql" : "latest"
  }
}

　　主要是标红部分(mysql如果是在这篇文章 http://www.cnblogs.com/zhongweiv/p/nodejs_mysql.html 中按照我的步骤安装过了的，其实可以不用再安装)，然后在cmd中运行

npm install

　　安装完成后，打开app.js文件，添加如下代码

var express = require('express');
var path = require('path');
var favicon = require('static-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var session = require('express-session');

...      

//这里传入了一个密钥加session id
app.use(cookieParser('Wilson'));
//使用靠就这个中间件
app.use(session({ secret: 'wilson'}));

...

　　4.样式和JQuery文件

　　样式：　　样式主要使用了bootstrap 3.0.3 https://github.com/twbs/bootstrap/releases/tag/v3.0.3

　　JQuery: jquery 1.11.1 　　　　　　　http://jquery.com/download/　

　　

　　添加以上文件到项目中，目录结构如下

　　

　　不在bootstrap包中两个css文件样式如下：

body {
  min-height: 2000px;
}

.navbar-static-top {
  margin-bottom: 19px;
}

navbar-static-top.css

body {
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #eee;
}

.form-signin {
  max-width: 330px;
  padding: 15px;
  margin: 0 auto;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
  margin-bottom: 10px;
}
.form-signin .checkbox {
  font-weight: normal;
}
.form-signin .form-control {
  position: relative;
  font-size: 16px;
  height: auto;
  padding: 10px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
.form-signin .form-control:focus {
  z-index: 2;
}
.form-signin input[type="text"] {
  margin-bottom: 10px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

signin.css