在线商城项目15-登录界面实现

简介

关于注册登录这块，一直只写过前端逻辑，这次把前后端逻辑一起实现，也是一件很有意思的事情。下面几章都会写这个，而且今后可能会不停地进行改动完善。大家可以看看这里的思路，如果有更好的想法或者不同的意见欢迎告诉我。
本篇完成如下工作：

1. 后端登录逻辑初步实现
2. 前端登录逻辑初步实现

1. 后端登录逻辑初步实现

step1 使用mongoimport导入users集合
在resources中我上传了users集合文件。新开命令行，输入如下命令：

# 具体名称和路径以实际为准
mongoimport -d six_tao -c users --file /Users/liuliu/Documents/study/practice/six-tao/resources/db/users

查询数据库：

mongo
> show dbs
> use six_tao
> show collections
> db.users.find().pretty()

如下：

step2 新建users集合对应的model
在models下新建user.js如下：

var mongoose = require('mongoose');

var userSchema = new mongoose.Schema({
  "userId":String,
  "userName":String,
  "userPwd":String,
  "orderList":Array,
  "cartList":[
    {
      "productId":String,
      "productName":String,
      "salePrice":String,
      "productImage":String,
      "checked":String,
      "productNum":String
    }
  ],
  "addressList":[
    {
      "addressId": String,
      "userName": String,
      "streetName": String,
      "postCode": Number,
      "tel": Number,
      "isDefault": Boolean
    }
  ]
});

module.exports = mongoose.model("User",userSchema);

step3 修改routes/goods.js
如下：

var express = require('express');
var router = express.Router();
var User = require('../models/user');

/* post users info. */
router.post('/login', function (req, res, next) {
    console.log(req.body);
    let param = {
        userName: req.body.userName,
        userPwd: req.body.userPwd
    };
    User.findOne(param, function (err, doc) {
        if (err) {
            res.json({
                code: '900',
                msg: err.message || '服务器错误'
            })
        } else {
            if (doc) {
                res.json({
                    code: '000',
                    msg: '',
                    result: {
                        userName: doc.userName
                    }
                });
            }
        }
    });
});

module.exports = router;

2. 前端登录逻辑初步实现

这里这里由于之前的重构使用的是弹窗式的登录，不符合我的构想。我自己简单写了一个登录页面，并没有做复杂的校验逻辑。大家可以自行添加，今后我也可能会完善。另外，这里由于视屏提供的重构已经有了login.css，我将登录页css逻辑写在了该组件内。如下：

我们运行代码看一下效果。
浏览器输入“http://localhost:8086/?#/login”：

总结

这一节，只是简单打通登录逻辑而已，但是关于跳转，展示逻辑以及用户态的保存这一块还有很多工作要做。
我们先提交代码：

1. six-tao

git status
git diff
git add .
git status
git commit -am 'add login page'
git push

2. six-tao-server

git status
git diff
git add .
git status
git commit -am 'add model user and change route users'
git push