您的位置：首页 > 数据库 > MySQL

使用nodejs，express，mysql，Bootstrap开发采购招标网站(二）主页和注册页面的实现

2016-01-24 15:19 851 查看

由于笔者的审美实在是差劲，所以从网上找了两个bootstrap的网站模版，一个做前台，一个做后台。提前说一下，笔者一直都是用winform进行开发，对于CSS3啊，jquery啊，基本都是只知道有这么个东西，具体怎么用那完全是摸着石头过河，所以笔者有什么说的不对的地方，希望大家指点一下，不甚感激。

bootstrap使用起来非常方便，特别是布局，使用了栅格系统，有兴趣的朋友可以去中文官方网站，文档很全，插件也有很多。

将下载的主页模版放到项目下的views文件夹里面，然后配置routes下的index.js文件，上次说过index.js是项目的路由文件，笔者用的方式是把所有的路由方法都写入这个文件里，方便管理。配置主页的get方法：router.route('/')
.get(function(req,res){
if(req.cookies.islogin){
req.session.islogin=req.cookies.islogin;
}
if(req.session.islogin){
res.locals.islogin=req.session.islogin;
}
res.render('qjIndex',{title:'qjcrm'});
});然后打开cmd命令行工具,cd到你的项目文件夹，使用npm start启动项目，或者node ./bin/www，前者每次修改js文件都需要重新启动项目，后者则不需要，推荐开发测试使用后者启动。打开浏览器输入：http://localhost:3000就能访问到主页了。开始笔者挺开心的，后来用IE8浏览器访问了一下，背景的大图缩成一团，并没有占满屏幕，布局全乱了，引入html5shiv和respond.min.js文件都没有效果，又尝试了好多办法都没有效果，只能用最笨的办法，看CSS文件，在CSS文件里笔者看到：
html,body{
font-family: 'Lato', sans-serif;
background: url(../images/back.jpg) no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-ms-background-size: cover;
}这里的background-size:cover属性是让背景图片铺满背景区域，但IE8是不支持这种样式的，百度了一下，网友都建议用滤镜实现，即：

/*只有IE8能识别的样式*/
@media \0screen\,screen\9{
.myiediv{
font-family: 'Lato',sans-serif;
background: url('你的图片路径') no-repeat;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='你的图片路径',
sizingMethod='scale');
width:100%;
height:100%;
}
a {
position:relative;
}
}

这里要注意，不要将html或者body的样式设置成这种滤镜的样式，因为它会让页面里的href标签和输入框等按钮位置发生偏移，而且我暂时没有找到解决的方案，只能在body下访一个div，铺满整个页面，然后设置a标签的position:relative或者position:absolute使起位置固定。再打开浏览器访问主页，成功解决。
既然是采购招标网站，主页上就应该显示一些最新招标的信息和状态，考虑了半天，决定使用bootstrap table组件，有兴趣的朋友可以到他们的中文网站查看文档，地址http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/，下载好了将bootstrap table组件引入页面，

<link href="/stylesheets/bootstrap-table.css" rel="stylesheet" type="text/css" media="all" />

<script src="/javascripts/bootstrap-table.js"></script>

<script src="/javascripts/bootstrap-table-zh-CN.js"></script>

因为bootstrap table是基于bootstrap的样式的，需要用到bootstrap的样式表和js文件，而且需要jquery库，所以我们都要引入：

<link href="/stylesheets/bootstrap.css" rel="stylesheet" type="text/css" media="all">

<link href="/stylesheets/bootstrap-table.css" rel="stylesheet" type="text/css" media="all" />

 <script src="/assets/vendor/js/jquery-2.1.1.min.js"></script> 









<script src="/javascripts/bootstrap.min.js"></script>

<script src="/javascripts/bootstrap-table.js"></script>

<script src="/javascripts/bootstrap-table-zh-CN.js"></script>

这里需要说明的是，IE8最高兼容jquery-1.12版本，所以如果是IE9或以下版本的IE浏览器就引入该版本的jquery库，因为bootstrap.min.js文件对jquery的版本也是有要求的，最好是用1.12的版本。而别的浏览器就引入2.+版本的jquery库，以获得更好的效果。对了，还要添加如下标签：

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta name="renderer" content="webkit">

第一句代码貌似是如果客户端装有chrome浏览器，强制使用chrome内核，第二句貌似是专门为国内的浏览器设置的，譬如360，使其支持HTML5及css3。

在主页添加bootstrap table：

<table id="tb_departments"></table>

在后台新建indextable.js文件，对table进行初始化。

$(function () {

//1.初始化Table
var oTable = new TableInit();
oTable.Init();

});

var TableInit = function () {
var oTableInit = new Object();
//初始化Table
oTableInit.Init = function () {
$('#tb_departments').bootstrapTable({
url: '/GetDepartment', //请求后台的URL（*）
method: 'get', //请求方式（*）
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
sortable: true, //是否启用排序
sortOrder: "asc", //排序方式
clickToSelect: true, //是否启用点击选中行
showToggle:true, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
showRefresh:true, //是否显示刷新按钮
showPaginationSwitch:true, //是否显示选择分页数按钮
pageNumber:1, //初始化加载第一页，默认第一页
pageSize: 10, //每页的记录行数（*）
search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
uniqueId: "id", //每一行的唯一标识，一般为主键列
/*queryParams: oTableInit.queryParams,//传递参数（*）
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
strictSearch: true,
showColumns: true, //是否显示所有的列
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
height: 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
detailView: false, */ //是否显示父子表
columns: [/*{
field: 'id',
title: 'myid',
visible: false
}, {
field: 'create_time',
title: '创建时间',
visible: false
}, {
field: 'create_tor',
title: '创建人',
visible: false
}, {
field: 'revise_time',
title: '修改时间',
visible: false
}, {
field: 'revise_tor',
title: '修改人',
visible: false
}, {
field: 'rd_content',
title: '修改人',
visible: false
}，*/ {
field: 'rd_name',
title: '标题'
}, {
field: 'start_time',
title: '开始时间',
sortable:true
}, {
field: 'end_time',
title: '结束时间',
sortable:true
}, {
field: 'type',
title: '招标类型',
sortable:true
}, {
field: 'state',
title: '招标状态',
sortable:true
}]
});

$('#tb_departments').on('click-cell.bs.table',function(field,value,row,$element){
alert(row);
});
};

return oTableInit;
};
url: '/GetDepartment' 是设置数据的获取来源，method='get'是获取使用的方法，我们在路由文件里（即routes/index.js）进行设置,添加代码：

router.route('/GetDepartment')
.get(function(req,res){
var result = null;
user1dao.inqAllRenderJson(req,res,function(result){
if(result){
console.log(result);
res.jsonp(result);
}
});
});inqAllRenderJson方法是查询所有的招标信息，如下：
inqAllRenderJson: function(req,res,callback){
console.log('进入了全部招标查询');
pool.getConnection(function(err,connection){
connection.query(u_strsql.queryAllRender,function(err,rows){
if(err) console.log(err);
connection.release();
var json_data = [];
var date={};
for(var i=0;i<rows.length; i++){
json_data[i]={
id:rows[i].id,
create_time:rows[i].create_time,
create_tor:rows[i].create_tor,
revise_time:rows[i].revise_time,
revise_tor:rows[i].revise_tor,
rd_name:rows[i].rd_name,
rd_content:rows[i].rd_content,
start_time:rows[i].start_time,
end_time:rows[i].end_time,
type:rows[i].type,
state:rows[i].state
}
}
callback(json_data);
});
});
}这里我将数据都放到数组里并设成[{code1='code1name',code2='code2name'}]这样的格式，然后返回数据，供路由文件使用，再由路由文件使用res.jsonp返回json格式的内容。刷新主页，我们会发现数据已经成功加载到表格中了。

$('#tb_departments').on('click-cell.bs.table',function(field,value,row,$element){
alert(row);这段代码是添加表格的列单击事件，单击某个单元格就弹出该单元格的内容，但是我发现这个方法访问的应该是列的索引吧，这么说吧，如果你设置了10列，前五列是隐藏的，当你点击第六列的时候，弹出的内容其实是第一列的内容。所以我才会把隐藏的列全部注释掉。
我现在想要在点击标题的时候弹出该文件的具体内容或者转向指定的页面，或者下载指定的文件，暂时还没有确定方案，所以先撂一下，进行注册页面的创建。

引入bootstrap样式和js文件，根据浏览器引入jquery库，还要引入formValidation的CSS和JS文件，formValidation是bootstrap的验证组件，官网：http://formvalidation.io/,不过是收费的，百度可以搜到免费的我就不贴链接了，官网说是不兼容IE8的，我折腾了一天多，在IE8可以正常运行。其实就是jquery的版本最好是1.11+的，效果如下：

页面代码：

<!DOCTYPE html>
<html lang="zh">

<head>


<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<title>注册 | 采购招标系统</title>


<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />


<link href='http://fonts.useso.com/css?family=Titillium+Web' rel='stylesheet' type='text/css'>


<link rel="shortcut icon" href="assets/ico/favicon.ico" type="image/x-icon" />






<link href="assets/css/style.css" rel="stylesheet" />
<link rel="stylesheet" href="stylesheets/formValidation/bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" href="stylesheets/formValidation/formValidation.css"/>
<link href="stylesheets/fileinput.css" rel="stylesheet" />


</head>

<body>

<div class="container-fluid content">
<div class="row">

<div id="content" class="col-sm-12 full">
<div class="row">
<div class="register-box">
<div class="panel">
<div class="panel-body">
<div class="header bk-margin-bottom-20 text-center">
<img src="assets/img/logo.png" class="img-responsive" alt="" />
<h4>企业用户注册</h4>
</div>
<form id="regForm" class="form-horizontal register" method="post">
<div class="bk-padding-left-20 bk-padding-right-20">
<div class="text-with-hr">
<span>用户信息 User Information</span>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">*用户名</label>
<div class="col-sm-8">
<input name="name" type="text" class="form-control" placeholder="营业执照注册号" id="fullname"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">*密码</label>
<div class="col-sm-8">
<input name="pwd" type="password" class="form-control bk-margin-bottom-10" placeholder="请输入密码" id="password"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">*确认密码</label>
<div class="col-sm-8">
<input name="pwdConfirm" type="password" class="form-control bk-margin-bottom-10" placeholder="请输入确认密码" id="passwordConfirm"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">*邮箱</label>
<div class="col-sm-8">
<input name="email" type="email" class="form-control" placeholder="请输入邮箱" id="username"/>
</div>
</div>

<div class="text-with-hr">
<span>联系人信息 LinkMan Information</span>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">*联系人</label>
<div class="col-sm-8">
<input name="linkManName" type="text" class="form-control" placeholder="请输入联系人名称" id="linkManName"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">*手机</label>
<div class="col-sm-8">
<input name="linkManPhone" type="text" class="form-control" placeholder="请输入手机" id="linkManPhone"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">*电子邮箱</label>
<div class="col-sm-8">
<input name="linkManEmail" type="email" class="form-control" placeholder="请输入联系人电子邮箱" id="linkManEmail"/>
</div>
</div>

<div class="text-with-hr">
<span>公司信息 Company Information</span>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">*公司名称</label>
<div class="col-sm-8">
<input name="companyName" type="text" class="form-control" placeholder="请输入公司全称" id="companyName"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">*公司简称</label>
<div class="col-sm-8">
<input name="companyShotName" type="text" class="form-control" placeholder="请输入公司简称" id="companyShotName"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">*公司地址</label>
<div class="col-sm-8">
<input name="companyAddress" type="test" class="form-control" placeholder="请输入公司地址" id="companyAddress"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">*公司简介</label>
<div class="col-sm-8">
<textarea name="companyInfo" rows="10" type="textarea" class="form-control" placeholder="请输入公司简介，少于500个字符" id="companyInfo"></textarea>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">*注册资金(万元)</label>
<div class="col-sm-8">
<input name="regCapital" type="test" class="form-control" placeholder="请输入数字" id="regCapital"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">*法人代表</label>
<div class="col-sm-8">
<input name="legalPerson" type="test" class="form-control" placeholder="请输入法人代表名称" id="legalPerson"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">*成立时间</label>
<div class="col-sm-8">
<input name="openTime" type="text" class="form-control" placeholder="请输入YYYY-MM-DD格式的时间" id="openTime"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">*邮政编码</label>
<div class="col-sm-8">
<input name="zipcode" type="test" class="form-control" placeholder="请输入邮政编码" id="zipcode"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">传真</label>
<div class="col-sm-8">
<input name="faxNo" type="test" class="form-control" placeholder="请输入传真号" id="faxNo"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">电话</label>
<div class="col-sm-8">
<input name="telephone" type="test" class="form-control" placeholder="请输入座机号" id="telephone"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">公司邮箱</label>
<div class="col-sm-8">
<input name="companyEmail" type="test" class="form-control" placeholder="请输入公司邮箱" id="companyEmail"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">公司网址</label>
<div class="col-sm-8">
<input name="companyWebsite" type="test" class="form-control" placeholder="请输入公司网址" id="companyWebsite"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">*企业性质</label>
<div class="col-sm-8">
<select name="companyNature" class="form-control" id="companyNature">
<option value="">---请选择---</option>
<option value="YX">有限责任公司</option>
<option value="GF">股份有限公司</option>
<option value="GY">国有独资公司</option>
<option value="GR">个人独资企业</option>
<option value="HH">合伙企业</option>
<option value="GT">个体工商户</option>
<option value="WZ">外资投资企业</option>
<option value="SY">私营企业</option>
<option value="QT">其他性质的企业</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">*雇员人数</label>
<div class="col-sm-8">
<select name="peopleNum" class="form-control" id="peopleNum">
<option value="">---请选择---</option>
<option value="9">1-9人</option>
<option value="49">10-49人</option>
<option value="99">50-99人</option>
<option value="499">100-499人</option>
<option value="999">500-999人</option>
<option value="1000">1000人以上</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">*经营范围</label>
<div class="col-sm-8">
<textarea name="companyScope" rows="10" type="textarea" class="form-control" placeholder="请输入经营范围,少于500个字符" id="companyScope"></textarea>
</div>
</div>

<div class="text-with-hr">
<span>基本资质信息 Qualification Information</span>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">*营业执照注册号</label>
<div class="col-sm-8">
<input name="companyRegNo" type="text" class="form-control" placeholder="请输入营业执照注册号" id="companyRegNo"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">*营业执照有效期</label>
<div class="col-sm-8">
<input name="companyRegTime" type="text" class="form-control" placeholder="请输入YYYY-MM-DD格式的时间" id="companyRegTime"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">*营业执照附件</label>
<div class="col-sm-8">
<input name="companyLicense" id="companyLicense" class="file" type="file" multiple=true>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">税务登记证号</label>
<div class="col-sm-8">
<input name="companyTax" type="text" class="form-control" placeholder="请输入税务登记证号" id="companyTax"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">税务登记证有效期</label>
<div class="col-sm-8">
<input name="companyTaxTime" type="text" class="form-control" placeholder="请输入YYYY-MM-DD格式的时间" id="companyTaxTime"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">税务登记证附件</label>
<div class="col-sm-8">
<input name="companyTaxUp" id="companyTaxUp" class="file" type="file" multiple=true>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">组织机构代码</label>
<div class="col-sm-8">
<input name="BusinessCode" type="text" class="form-control" placeholder="请输入组织机构代码" id="BusinessCode"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">组织机构代码有效期</label>
<div class="col-sm-8">
<input name="BusinessCodeTime" type="text" class="form-control" placeholder="请输入YYYY-MM-DD格式的时间" id="BusinessCodeTime"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">组织机构代码证附件</label>
<div class="col-sm-8">
<input name="BusinessCodeUp" id="BusinessCodeUp" class="file" type="file" multiple=true>
</div>
</div>
<div class="text-with-hr">
<span>免责声明 Disclaimer</span>
</div>
<div class="row bk-margin-top-20 bk-margin-bottom-10">
<div class="form-group">
<div class="col-sm-8">
<div class="checkbox">
<a href="#">《网站免责声明》 </a>
<label>
<input id="AgreeTerms" name="agreeterms" type="checkbox"/>阅读并同意
</label>
</div>
</div>

<div class="col-sm-10 text-right">
<button type="submit" class="btn btn-primary hidden-xs">注册</button>
<button type="submit" class="btn btn-primary btn-block btn-lg visible-xs bk-margin-top-20">注册</button>
</div>
</div>
</div>
<div class="text-center bk-margin-top-10 bk-margin-bottom-30">

</div>
<p class="text-center">注册用户请 <a href="userLogin">登录</a>
</div>
</form>
</div>
</div>
</div>
</div>
</div>

</div>
</div>




<script type="text/javascript" src="javascripts/js/jquery.min.js"></script>
<script type="text/javascript" src="javascripts/js/bootstrap.min.js"></script>
<script type="text/javascript" src="javascripts/js/formValidation.js"></script>
<script type="text/javascript" src="javascripts/js/framework/bootstrap.js"></script>
<script type="text/javascript" src="javascripts/zh_CN.js"></script>

<script src="javascripts/fileinput.js"></script>
<script src="javascripts/fileinput_locale_zh.js"></script>

<script type="text/javascript">
$(document).ready(function() {
// Generate a simple captcha

$('#regForm').formValidation({
message: '这个值不正确',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
name: {
validators: {
notEmpty: {
message: '用户名必须是营业执照注册号且不能为空'
},
regexp:{
regexp:/^\d{15}$/,
message:'营业执照注册号格式不正确'
}
}
},
pwd: {
row: '.col-sm-6',
validators: {
notEmpty: {
message: '密码不能为空'
},
different:{
field:'name',
message:'密码不能和用户名相同'
}
}
},
pwdConfirm: {
message: '这是确认密码',
validators: {
notEmpty: {
message: '确认密码不能为空'
},
identical: {
field: 'pwd',
message: '密码输入不一致'
}
}
},
email: {
validators: {
notEmpty: {
message: '电子邮件不能为空'
},
emailAddress: {
message: '请输入有效的电子邮件地址'
}
}
},
linkManName: {
validators: {
notEmpty: {
message: '联系人名称不能为空'
}
}
},
linkManPhone: {
validators: {
notEmpty: {
message: '手机号不能为空'
},
regexp:{
regexp: /(^1[3|4|5|7|8][0-9]{9}$)/,
message:'请输入正确的手机号'
}
}
},
linkManEmail: {
validators: {
notEmpty: {
message: '联系人邮箱不能为空'
},
emailAddress: {
message: '请输入有效的电子邮件地址'
}
}
},
companyName: {
validators: {
notEmpty: {
message: '公司名称不能为空'
}
}
},
companyShotName: {
validators: {
notEmpty: {
message: '公司简称不能为空'
}
}
},
companyAddress: {
validators: {
notEmpty: {
message: '公司地址不能为空'
}
}
},
companyInfo: {
validators: {
notEmpty: {
message: '公司简介不能为空'
},
stringLength: {
min: 0,
max: 500,
message: '不能超过500个字符'
}
}
},
regCapital: {
validators: {
notEmpty: {
message: '注册资金不能为空'
},
regexp: {
regexp: /^\+?[1-9][0-9]*$/,
message: '注册资金只能是非零的正整数'
}

}
},
legalPerson: {
validators: {
notEmpty: {
message: '法人代表不能为空'
}
}
},
openTime: {
validators: {
notEmpty: {
message: '成立时间不能为空'
},
date: {
format: 'YYYY-MM-DD',
message: '请输入YYYY-MM-DD格式的日期'
}
}
},
zipcode: {
validators: {
notEmpty: {
message: '邮政编码不能为空'
},
regexp: {
regexp: /[0-9]\d{5}(?!\d)/,
message: '邮政编码格式不正确'
}
}
},
companyNature: {
validators: {
notEmpty: {
message: '企业性质不能为空'
}
}
},
peopleNum: {
validators: {
notEmpty: {
message: '雇员人数不能为空'
}
}
},
companyScope: {
validators: {
notEmpty: {
message: '经营范围不能为空'
},
stringLength: {
min: 0,
max: 500,
message: '不能超过500个字符'
}
}
},
companyRegNo: {
validators: {
notEmpty: {
message: '营业执照注册号不能为空'
},
regexp:{
regexp:/^\d{15}$/,
message:'营业执照注册号格式不正确'
},
identical: {
field: 'name',
message: '用户名和营业执照注册号不一致'
}

}
},
companyRegTime: {
validators: {
notEmpty: {
message: '营业执照有效期不能为空'
},
date: {
format: 'YYYY-MM-DD',
message: '请输入YYYY-MM-DD格式的日期'
}
}
},
companyLicense: {
validators: {
notEmpty: {
message: '未选择文件'
},
file: {
extension: 'pdf',
type: 'application/pdf',
message: '请选择pdf文件.'
}
}
},
agreeterms: {
validators: {
notEmpty: {
message: '同意此条款才可注册'
}
}
}
}
});
});
</script>


</body>

</html>

这里在提醒一下，每新增一个页面都要到路由里添加get方法，否则会报404错误。点击注册是时候method是post方法，需要到路由里添加post方法的实现，如下：
router.route('/page-register')
.get(function(req,res){
if(req.session.islogin){
res.locals.islogin=req.session.islogin;
}
if(req.cookies.islogin){
req.session.islogin=req.cookies.islogin;
}
res.render('page-register',{title:'qjcrm'});
})
.post(function(req,res){
var result = null;
console.log('进入注册页的post方法');
user1dao.reg(req,res,function(result){
if(result) throw result;
req.session.islogin=req.body.name;
res.locals.islogin=req.session.islogin;
res.cookie('islogin',res.locals.islogin,{maxAge:60000});
return res.redirect('/index');
});
});

再添加一个后台管理页面，我的后台主页是index.html,前台主页是qjIndex.html，注意区分。先新建上index.html，不添加任何内容，在用户注册成功或登录成功后进入index.html页面。这时我们的页面有三四个了，如果你在浏览器访问的时候命令窗口显示如下错误：
Can't
set
headers after they are sent.

那你就应该好好看看你的路由文件的代码，耐心点，看看是不是在res.render某个页面后又执行了一次res.render.如果这样不好理解，那你就最好规范一下，在get里进行res.render，在post里使用res.redirect跳转,不要在post里进行res.render，因为页面变多以后你有可能会重复渲染一个页面，产生
Can't
set
headers after they are sent的错误。

这个项目进行了一个星期了，我抛弃了熟悉的asp.net改使用nodejs也不知道是对还是错，遇到的问题不少，虽然都解决了，但总是觉得应该把他记下来，以免日后忘记，而且有一些解决方案在网上都搜不出来，还是做个笔记的好。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： ejs 采购招标 bootstrap express bootstrap-table form

相关文章推荐

新的分享

章节导航