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

最新推荐文章于 2022-04-22 20:11:53 发布

狂彪的蜗牛

最新推荐文章于 2022-04-22 20:11:53 发布

阅读量3.2k

点赞数 1

分类专栏： nodejs 文章标签： ejs 采购招标 bootstrap express bootstrap-table form

本文链接：https://blog.csdn.net/new_gujiaming/article/details/50573354

版权

本文介绍了如何使用Node.js、Express和Bootstrap开发一个采购招标网站。通过引入Bootstrap模版和表格组件实现主页布局，同时讨论了IE8兼容性问题和页面初始化。还提到了注册页面的创建，涉及jQuery、formValidation插件，并分享了在开发过程中遇到的问题与解决方案。

摘要由CSDN通过智能技术生成

由于笔者的审美实在是差劲，所以从网上找了两个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组件引入页面，

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

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

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

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

在主页添加bootstrap 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格式的内容。刷新主页，我们会发现数据已经成功