专栏首页coding for love在线商城项目15-登录界面实现

在线商城项目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逻辑写在了该组件内。如下:

<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”:

总结

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

  1. six-tao
git status
git diff
git add .
git status
git commit -am 'add login page'
git push
  1. six-tao-server
git status
git diff
git add .
git status
git commit -am 'add model user and change route users'
git push

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 在线商城项目16-头部前端逻辑修改

    这是不合理的,我们应该根据登录态来做一个区别显示。未登录情况下显示login和购物车图标。已登录情况下显示用户名,logout,购物车图标。

    love丁酥酥
  • CSS常用布局实现05-圣杯布局和双飞翼布局

    其实对于三列布局的实现,之前网上使用最多的还是这两种。它们有一个共同的优点,就是可以使主内容优先加载。当然,如果不考虑兼容,flex和grid还是优先推荐的。

    love丁酥酥
  • git基础之github使用入门

    参加实习以后,开始接触多人协作开发工具,前期主要是svn,现在工作中已经全面使用git。公司的项目目前放在gitlab上,所以平时涉及的操作比较简单,加之之前s...

    love丁酥酥
  • java实现支付宝h5手机支付

    故久
  • Android极速开发之Apk安装

    安装之前判断是否有root权限,如果有root权限就静默安转,如果没有就利用意图进行安装。源码参考地址

    Javen
  • Spring Boot 2.0 项目实现自同步AD域账号 顶

    在通过Spring Boot的自动化装配功能及JDK自带的LDAP模块,可通过如下几个简单步骤实现业务系统自动同步AD域账号功能。

    Michael Chen
  • JDK1.7新特性

    1 对集合类的语言支持;  2 自动资源管理;  3 改进的通用实例创建类型推断;  4 数字字面量下划线支持;  5 switch中使用string;  6 ...

    用户3003813
  • 玩转字符串篇--替换的鬼斧神工

    张风捷特烈
  • POJ1013 称硬币

    原题为POJ上的1013题,链接为:http://poj.org/problem?id=1013 代码如下:

    AI那点小事
  • 马化腾对话钱颖一:畅谈未来--与高校开放合作、携手创新

    pony说:“宇宙那么大,地球也不过是一颗尘埃”;“我只是引导,让他觉得主意是自己出的”;“黑科技,还是要和高校合作来实现”……pony还说:“未来的创新不一定...

    腾讯高校合作

扫码关注云+社区

领取腾讯云代金券