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

本文介绍了一位开发者如何从头开始,利用Node.js、Express、ejs模板引擎和Bootstrap,开发一个采购招标网站的过程。文章详细阐述了从安装Node.js,设置环境,创建项目,使用ejs,到添加session支持,安装MySQL数据库插件,以及初步建立登录页面的步骤。同时,提到了使用Bootstrap确保在IE8上的兼容性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

上班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

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值