在线商城项目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 条评论
登录 后参与评论

相关文章

来自专栏java达人

说说JSON和JSONP( 含jquery例子)

说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的需求如何解决?这两个问题目前都有不同的解决方案,比如数据可以用自定义...

2655
来自专栏JackieZheng

AngularJS in Action读书笔记2——view和controller的那些事儿

今天我们来818《angularjs in action》的第三章controller和view。 1.Big Picture概览图 ? image.png...

22110
来自专栏从零开始学自动化测试

Selenium2+python自动化44-元素定位参数化(find_element)

前言 元素定位常用的有八种方法,这个能看到这一篇的小伙伴都知道了,那么有没有一种方法,可以把常用的八种定位合为一种呢?也就是把定位的方式参数化,如id,name...

3375
来自专栏Crossin的编程教室

pycharm 如何程序运行后,仍可查看变量值?

来出自知乎同名问题。 因为觉得这个问题挺实用,且确实有很多人不了解,故将自己的回答搬运到这里。 我自己开发时候也经常遇到这样的需求:程序运行后,结果不正确,想要...

5028
来自专栏电光石火

java类名包名解释

VO:值对象、视图对象 PO:持久对象 QO:查询对象 DAO:数据访问对象——同时还有DAO模式 DTO:数据传输对象——同时还有DTO模式 PO:...

4607
来自专栏瓜大三哥

​UVM(九)之sequencej机制续1

UVM(九)之sequencej机制续1 当一个sequence启动起来之后,UVM会自动执行sequence的body任务,所以要产生各种和杨的激励,就要写好...

25010
来自专栏更流畅、简洁的软件开发方式

Step By Step 一步一步写网站[1] —— 填加数据

填加数据是一个项目必不可少的部分,也是一个基础操作,使用也是最频繁的。 那么您是怎么实现添加数据的呢? 添加数据可以分为几种情况。 1、单表添加,不需要事务。...

20910
来自专栏逢魔安全实验室

CVE-2018-2628 Weblogic反序列化POC重构详解

3755
来自专栏欧阳大哥的轮子

iOS的MVC框架之控制层的构建(上)

在我前面的两篇文章里面分别对MVC框架中的M层的定义和构建方法进行了深入的介绍和探讨。这篇文章则是想深入的介绍一下我们应该如何去构建控制层。控制层是联系视图层和...

1132
来自专栏逸鹏说道

Python3 与 C# 扩展之~模块专栏

代码裤子:https://github.com/lotapp/BaseCode/tree/maste

1895

扫码关注云+社区

领取腾讯云代金券