0723-24-使用express框架、post请求、mysql实现简单登录页面渲染 - node.js (笔记）

文件结构如下图：

编写流程

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;