使用nodejs，express，mysql，Bootstrap开发采购招标网站(一）项目搭建

上班5年了，一直都是浑浑噩噩的状态，天天都反思，但第二天这种状态依旧，我知道这样下去自己肯定就没救了...这几天领导安排我给公司做一个采购招标类型的网站，我决定从这个项目重新开始，认真对待生活，认真对待工作，认真对待自己。

通过在网上的一番搜索，最终决定用Nodejs来开发网站，因为这是一门新技术，又是开源的，而且应用范围广泛，可以学到不少的知识。

我的电脑是window8,从官网下载nodejs安装版本（即msi格式的）,直接运行，下一步下一步就可以的，它会自动配置环境变量。新版本的nodejs自带npm工具，我们用npm工具安装express框架并使用ejs引擎，使用

npm install express -g

安装express，使用

npm install express-generator -g

安装expree的命令行工具，注意express-generator这两个词是用-连在一起的，然后查看版本。

express的V应该是大写，小写的识别不了。到这里我们就可以创建第一个项目了，我使用的ejs引擎，因为ejs可以让我们像使用java开发网页一样在页面上编辑代码。使用命令：express -e qjcrm

-e是使用ejs引擎，qjcrm是我的项目名称，然后

cd qjcrm

进入qjcrm文件夹，使用

npm install

安装项目依赖项，如果没有意外，现在你已经安装成功了。

打开app.js,将

app.set('view engine', 'ejs');

改成

app.engine('.html',ejs.__express);

app.set('view engine','html');

这段代码的意思是让ejs使用.html扩展名的文件，现在我们将views文件下的index.js文件和error.js文件改为index.html,error.html。

然后使用

npm install express-session

安装session,打开app.js添加

var session = require('express-session');

在var app = express();下方添加

app.use(cookieParser("An"));

app.use(session({

   secret:'an',

   resave:false,

   saveUninitialized:true

}));

这样我们就可以在项目里使用session和cookie了。

然后添加数据库，使用

npm install node-mysql

安装mysql数据库插件。

准备就绪，建立登陆页面，在views目录下新建userLogin.html

对于网站的布局我们用bootstrap3.0来搭建，因为3+的版本支持IE8，4+的就不再支持了，从官网下载后，在dist文件夹下找到bootstrap.min.css和bootstrap.min.js，并引入页面，再从官网下载respond.min.js文件，在head标签内加入

<!--[if lt IE 9]>

<scriptsrc="https://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.js"></script>

<scriptsrc="/javascripts/respond.min.js"></script>

<![endif]-->

意思是，如果低于或等于IE9的浏览器就引入这两个文件来渲染网页，实现IE8的兼容。

在引入文件时我们要注意，在app.js里

app.use(express.static(path.join(__dirname,'public')));

这段代码的意思是，在运行项目的时候，设置Public为根目录，所以我们的路径都要以public为根目录来进行设置。

登录页面部分代码：

<form class="form-horizontallogin" method="post">

                                <divclass="bk-padding-left-20 bk-padding-right-20">

                                    <divclass="form-group">

                                        <labelclass="col-sm-3 control-label">用户名</label>

                                        <divclass="col-sm-8">

                                           <div class="input-group input-group-icon">

                                                <inputtype="text" class="form-control bk-radius"name="username" id="username" placeholder="请输入帐号"/>

                                           &nbs