校园系统Day2

110 阅读2分钟

前言

今天接着干活争取早日完工,昨天已经把数据库连接的部分写完了,完成了 数据库登录的模块😊

淡定一点儿 (2).gif

Day2

1../dao文件是对数据的操作包

./dao/users_dao.js 通过req.body获取到前端的数据来查询数据库中是否存在该数据, 登录模块采用的是post请求,所以参数用req.body来获取

./dao/users_dao.js

module.exports = class users_dao extends require("../model/users_mod") {
  //从users_mod中继承过来从数据库中取得的数据,对数据进行操作
  //async await异步转成同步
  static async Login(req, resp) {
    /**req 从前端 拿过来的数据,前端给后端的数据
     * resp 从后端发送给前端的数据
     * req.body -- 前端发送过来的数据 username password type
     * post请求是req.body  get请求是req.query
     * */
    //console.log(req.query);
    console.log(req.body);
    //前端给的数据
    let body = req.body;
    let loginData = await this.LoginUser(body.username,body.password,body.type);
    resp.send(loginData);
  }
};
2.在user.js里面导入./dao/users_dao.js,然后调用Login这个方法

./routes/user.js

var express = require("express");
var router = express.Router();
var users = require("../dao/users_dao");

router.get("/", function (req, res, next) {
  res.send("User can return a result");
});
//登录
router.post("/login", function (req, res) {
  //转发站
  // console.log(req);
  users.Login(req, res);
});
module.exports = router;

这里的req就是前端给到的数据

3.通过Postman来模拟前端的数据,去数据库里查询

image.png

这里我简单的说一下我发送数据的时候遇的问题 send发送数据的时候,我在./dao/users_dao.js里面想要打印这个数据 console.log(req.body); 但是总是返回undefined,然后在 app.js中加入了这样的一段代码就可以打印出数据了

app.use(express.urlencoded({ extended: false }));

这个是一个中间件的问题,待我好好查阅资料,然后再做解释,期待一下😍

Suggestion.gif

4.创建数据库

我做了好多准备工作,发现还没有自己的数据库呢

场面一度陷入尴尬 (2).gif

数据库我是用的mysql+navicat,具体的下载和安装我是按照这个视频搞得 最后连接成功了🤣 www.bilibili.com/video/BV1sJ…

具体的数据库设计就忽略了,毕竟咱也不是专业的

5.前端部分

使用vue-cli直接创建在终端中执行vue create demo即可创建

先写登录页面./components/menu/Login.vue

我们需要使用element-ui这个组件,参照官方文档将其安装和配置

总结

今天就写到这里了,主要把数据库和我的后端代码连接上了,但是还是有一点小问题😭,对于中间件问题我会继续做补充, 感觉自己第一次写真的效率好慢,很多东西理解的也不是很清楚,明天继续把前端的登录页面完成!!

我们一起加油吧.gif