电商网站项目 动态实现（从数据库获取数据）一

一、创建数据库

添加了三条原始数据

1.在public文件下的images文件下创建一个headImage文件放置头像图片
2.创建表时自动生成时间：
设置列
字段类型为：timestamp 默认值为：CURRENT_TIMESTAMP

二、实现登录

项目文件搭建：

app.js：

const myexpress = require("express");
//引用日志
const logger = require('morgan');
// 内置，不需下载
const path = require("path");
//引用post请求模块包
const bodyParser = require("body-parser");

const app = myexpress();


// 定义日志和输出级别
app.use(logger('dev'));
// 定义数据解析器 post
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
// 1. 静态资源路径
app.use(myexpress.static(path.join(__dirname,"public")));
app.use(userRouter);

//设置端口号
app.listen(8888,function () {
    console.log("服务启动");
})

1.先写服务端：给客户端一个接口
router/userRouter.js：

const myexprerss = require("express");
const userRouter = myexprerss.Router();    //拦截路由
userRouter.post("/login.do",function (req,res) {
     //1. 接收客户端的数据
    var userName = req.body.user;
    var pwd = req.body.pwd;

    if(!userName || !pwd){
        res.send({code:-1,message:"传数出错"})
    }

    // 2. 去数据库验证
    let sql = "select * from user where username=? and DelState = 1";  //查询条件
    db.query(sql,[userName],function (err,data) {
        if(err){
            console.log(err);
            res.send({code:500,message:"数据库出错"});
        }
        else{
            if(data.length==0){
                res.send({code:2,message:"用户名不存在"});
            }else{
                if(data[0].Pwd==pwd){  //如果数据库密码=用户传过来的密码
                    if(data[0].State==1){  //说明密码正确
                        res.send({code:1,message:"登录成功"});
                    }else{
                        res.send({code:4,message:"用户被禁用"});
                    }
                }else{
                    res.send({code:3,message:"密码错误"});
                }
            }
        }
    })
})
module.exports = userRouter;  //暴露接口

2.与数据库打交道
router/dbOper.js：
2.1下载数据库模块：npm i mysql

//引用数据库模块
const mysql = require("mysql");
const db = require("./dbOper");
function query(sql,arr,callback) {
//与数据库建立连接
    const connect = mysql.createConnection({
         host:"localhost",
         user:"root",
         password:"",
         port:3306,
         database:"web264_project"
     });
     //打开数据库
    connect.connect();
    //数据库操作
    connect.query(sql,arr,callback);
    //关闭数据库
    connect.end();
}
//暴露接口
exports.query = query;

3.调用接口
index.html结构：

login.js：

写在index.html中引用的login.js中

$(function () {
    //给登录按钮添加点击事件
  $("#loginBtn").click(function () {
      //ajax

      //获取输入框的值
      let user= $("#loginUser").val();
      let pwd = $("#loginPwd").val();

      if(user.length==0){
          layer.msg("用户名不能为空");
      }else if(pwd.length==0){
          layer.msg("密码不能为空");
      }else{
          $.post("/login.do",{user:user,pwd:pwd},function (data) {  //user、pwd根据接收数据那儿来的
             if(data.code==1){
                 //跳转到首页，页头，要显示用户名和头像
                 // location.href="/index.html";
                 location.reload();
             }else{
                 layer.msg(data.message);

             }
          },"json");   //将传回的值转换为json格式
      }
  });

效果：