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

love丁酥酥

发布于 2018-08-27 16:13:38

5400

发布于 2018-08-27 16:13:38

文章被收录于专栏：coding for lovecoding for love

简介

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

后端登录逻辑初步实现
前端登录逻辑初步实现

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逻辑写在了该组件内。如下：

<template>
  <div class="login">
    <div class="logo">
      <h1>weleome to six-tao</h1>
    </div>
    <form action="">
      <div class="item">
        <label for="userName">账号：</label>
        <input type="text" placeholder="Username" v-model="userName" id="userName" required="required"/>
      </div>
      <div class="item">
        <label for="userPwd">密码：</label>
        <input type="userPwd" placeholder="userPwd" v-model="userPwd" id="userPwd" required="required"/>
      </div>
      <div class="btn-wraper">
        <button id="loginButton" @click="login">登录</button>
      </div>
    </form>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      userName: '',
      userPwd: ''
    }
  },
  methods: {
    login () {
      if (!this.userName || !this.userPwd) {
        return
      }
      let queryObj = {
        userName: this.userName,
        userPwd: this.userPwd
      }
      axios.post('/api/users/login', queryObj).then(res => {
        let data = (res && res.data) || {}
        if (data.code === '000') {
          let result = data.result || {}
          alert(`${result.userName}, welcome to six-tao`)
        } else {
          alert(`err:${data.msg || '系统错误'}`)
        }
      })
    }
  }
}
</script>

<style scoped>
  .login {
    font-size: 12px;
    position: fixed;
    width: 300px;
    height: 240px;
    background-color: lightcyan;
    border-radius: 10px;
    padding: 10px 20px 10px 10px;
    margin-top: -120px;
    margin-left: -150px;
    top: 50%;
    left: 50%;
  }
  .item {
    display: flex;
    align-items: center;
    margin-top: 20px
  }
  .item label {
    width: 60px;
    font-size: 1.2em;
  }
  .item input {
    flex: 1;
    height: 40px;
    line-height: 40px;
  }
  .btn-wraper {
    display: flex;
    justify-content: center;
  }
  #loginButton {
    width: 100px;
    color: #85592e;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    background: yellow;
    border-radius: 5px;
    border: 1px solid gray;
    font-size: 1.2em;
  }
  .logo {
    text-align: center;
  }
</style>

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

总结

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

six-tao

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

six-tao-server

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

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2018.04.24 ，如有侵权请联系 cloudcommunity@tencent.com 删除

其他

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

其他

登录后参与评论

0 条评论

热度