文件结构如下图:
编写流程
1、创建项目包 > 初始化package.json (使用cmd命令:npm init -y)。
2、vscode打开项目文件夹,创建文件夹static用于放置css、images、js文件夹
创建文件夹views用于放置网页页面,如:index.html等页面。
3、 在项目中创建 开启服务的server.js 及 处理客户端请求的路由js文件。
(使用模块化)并引入express第三方模板
4、 成功开启服务后,在 处理客户端请求路由中 尝试使用ejs渲染ejs文件(html),设置需要的模板引擎,默认情况下渲染的是views中的文件
使用:server.set(“view engine”,“ejs”);//只能渲染ejs文件
5、设置完 渲染ejs后,需要根据客户端请求 将请求内容渲染到客户端页面
例如使用:
server.get(’/’,function(request,response){
response.render(“index”,{content:“这里是index.ejs文件”}) //页面提前使用了从ejs模板中获取变量值(提前引入ejs模板)
})
6、完成使用ejs文件渲染页面,再尝试更改为 渲染html 页面,
server.engine(‘html’,ejs.__express) // 更改为渲染html,需要引入ejs模板,再更改engine模板引擎的设置方法
server.set(“view engine”,‘html’);
7、 修改模板引擎默认识别的文件夹,将渲染默认views文件夹改为public文件夹
例如:
server.set(‘views’,__dirname+’/需要改成的文件名’);
8、 尝试渲染出.css .js等文件类型,需要使用express中的中间件方法 传入静态文件中中间件
例如:server.use(express.static(‘存放静态文件的文件夹名称’));
9、 完成以上操作,添加登陆页面 并实现登陆页面的提交信息获取
例如操作:~设置action的提交地址 /doLogin 及提交方式(post)
10、 获取post的提交内容 并将数据显示在主页面中
(1)需要引入body-parser第三方模板解析application/x-www-form-urlencoded数据(重点)(2)使用urlencoded()方法可以解析application/x-www-form-urlencoded中的数据代码:**var urlencoded = bodyparser.urlencoded({extended:false})**extended的取值为false时只能解析字符串或array为true时,可以解析任意数据(3)接受到客户端的post请求后,传入urlencoded方法解析的数据结果,解析后的数据封装在http body中
11、获取数据信息 连接数据库并查询数据库进行验证,成功则进入主页面,否则显示错误信息提示
操作:下载mysql命令如: npm install mysql –save ,并引入,创建连接数据库的方法引入到router.js,在router中建立数据库连接db.connect();
最后查询数据库。
代码如下:
router.js文件:var express = require(\"express\");var ejs = require(\"ejs\");var bodyparser = require(\"body-parser\"); //post提交的数据需要使用第三方模板解析application/x-www-form-urlencoded数据var {db} = require(\"./mydb/db\");var server = express();db.connect();// 8.使用express中的中间件方法 传入静态文件中中间件server.use(express.static(\'static\'));// 7.修改模板引擎默认识别的文件夹// server.set(\'views\',__dirname+\'/public\');/* //4.尝试使用ejs渲染页面server.set(\"view engine\",\"ejs\");server.get(\'/\',function(request,response){// 5.根据客户端请求 将请求内容渲染到客户端页面response.render(\"index\",{content:\"这里是index.ejs文件\"})}) *///6.更改为渲染html文件server.engine(\'html\', ejs.__express) // 更改为渲染html,引入ejs模板,并更改engine模板引擎的设置方法server.set(\"view engine\", \'html\');server.get(\'/index\', function (request, response) {response.render(\'index\', { content: \"这是index.html页面\" });});server.get(\'/login\', function (request, response) {response.render(\'login\', { content: \"这是index.html页面\" });})// 当action为post时候,浏览器把form数据封装到http body中,然后发送到server。var urlencoded = bodyparser.urlencoded({ extended: false })// 10.获取post的提交内容 先引入bodyparser第三方模板,并将数据显示在主页面中server.post(\"/doLogin\", urlencoded, function (request, response) {var sqlStence = `select * from users where account =${request.body.user}&& password =${request.body.pwd}`db.query(sqlStence,function(err,data){if(err){console.log(err);}else{console.log(data[0]);response.render(\'index\', { content: \"这是index.html页面\", name:data[0].account,password:data[0].password});}})console.log(request.body.user,request.body.pwd);})exports.server = server;
数据库连接文件
var sql = require(\"mysql\");var connection = sql.createConnection({host:\"localhost\",port:\"3306\",user:\"root\",password:\"123456\",database:\"user\"});exports.db = connection;