Node.js+Mysql+Vue+ElementUI реализует функцию входа, регистрации и выхода

Node.js MySQL внешний интерфейс Vue.js

Первые два месяца я изучал vue и node.js, но проектом особо не занимался, просто уловил просьбу компании сделать нам независимую операционную систему для входа и регистрации. возможность учиться и закреплять то, чему я научился раньше. Внешний интерфейс использует Vue, внутренний использует Express в качестве сервера для предоставления интерфейсов данных, а база данных использует MySql. Реализовать операцию добавления и изменения базы данных.

демонстрационный запрос

Полный набор интерфейсных систем, которые могут работать независимо, включая три функциональных модуля: регистрация, вход и персональный центр.

  • 1. Технология разработки и рамки разработки не ограничены.
  • 2. Пользователь включает следующую информацию: имя пользователя, имя учетной записи, пароль, повторный пароль, адрес электронной почты, мобильный телефон, удостоверение личности, дату рождения, пол.
  • 3. При регистрации необходимо выполнить проверку формата непустой контрольной суммы для информации о пользователе, две проверки согласованности пароля, а при отправке формы необходимо обратить внимание на предотвращение повторных отправок.
  • 4. При входе в систему требуется код подтверждения, и правильность кода подтверждения необходимо проверить.Если код подтверждения не работает, код подтверждения будет автоматически обновлен, и предусмотрена операция обновления кода подтверждения вручную.
  • 5. Успешно войдите в систему и отобразите персональный центр, предоставьте операции по изменению личной информации, выходу из операций и операциям по изменению пароля.
  • Дополнительно: Персональный центр предоставляет функции аватара и модификации аватара

Готов к работе

node.js

mysql

git

express

element-UI

Структура каталогов

Сначала представим структуру каталогов проекта

image

vue-cli создает проект системы регистрации входа Vue на основе веб-пакета

Сначала установите глобально:npm install -g vue-cli

Установите зависимости, добавьте соответствующую версию в package.json, а затем выполнитеnpm install

  "dependencies": {
    "axios": "^0.15.3",
    "babel-polyfill": "^6.23.0",
    "body-parser": "^1.18.2",
    "element-ui": "1.3.1",
    "mysql": "^2.15.0",
    "vue": "^2.3.2",
    "vue-core-image-upload": "2.1.11",
    "vue-datasource": "1.0.9",
    "vue-router": "^2.3.1",
  },

Конфигурация сервера

Создайте папку службы в корневой папке проекта. Затем создайте следующие четыре файла: db/db.js --- используется для добавления конфигурации MySQL

module.exports = {
    mysql: {
        host: 'localhost',
        user: 'root',
        password: '',
        port: '3306',
        database: 'login'
    }
}

app.js --- файл входа на сервер Express

const userApi = require('./api/userApi');
const fs = require('fs');
const path = require('path');
const bodyParser = require('body-parser');
const express = require('express');
const app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded())

app.use('/api/user', userApi);

app.listen(3000);
console.log('success listen at port: 3000')

db/sqlMap.js — файл сопоставления операторов SQL, здесь в основном выполняются операции добавления, изменения и проверки базы данных.

var sqlMap = {
    user: {
        add: 'insert into user (username, account, password, repeatPass, email, phone, card, birth, sex) values (?,?,?,?,?,?,?,?,?)',
        select_name: 'select * from user', 
        update_user: 'update user set'
    }
}

module.exports = sqlMap;

Оператор запроса всегда был проблематичным

select_name: 'select * from user where username = ?',

узел продолжает сообщать об ошибках, а позжеwhere username = ?сплайсинг в API Подробнее см. ниже. Если у вас есть лучшее решение, сообщите, пожалуйста.

router.post('/login', (req, res) => {
    var sql_name = $sql.user.select_name;
    // var sql_password = $sql.user.select_password;
    var params = req.body;
    console.log(params);
    if (params.name) {
        sql_name += "where username ='"+ params.name +"'";
    }
    var keywords = JSON.parse(Object.keys(params)[0]);
    conn.query(sql_name, params.name, function(err, result) {
        if (err) {
            console.log(err);
        }
        // console.log(result);
        if (result[0] === undefined) {
            res.send('-1')   //查询不出username，data 返回-1
        } else {
            var resultArray = result[0];
            console.log(resultArray.password);
           // console.log(keywords);
            if(resultArray.password === keywords.password) {
                jsonWrite(res, result);
            } else {
                res.send('0')   //username
            }
        }
    })
});

api/userApi.js ---- пример тестового API

var models = require('../db/db');
var express = require('express');
var router = express.Router();
var mysql = require('mysql');
var $sql = require('../db/sqlMap');

var conn = mysql.createConnection(models.mysql);

conn.connect();

var jsonWrite = function(res, ret) {
    if(typeof ret === 'undefined') {
        res.send('err');
    } else {
        console.log(ret);
        res.send(ret);
    }
}

var dateStr = function(str) {
    return new Date(str.slice(0,7));
}

// 增加用户接口
router.post('/addUser', (req, res) => {
    var sql = $sql.user.add;
    var params = req.body;
    console.log(params);
    console.log(params.birth);
    conn.query(sql, [params.name, params.account, params.pass, params.checkPass,
                    params.email, params.phone, params.card, dateStr(params.birth), params.sex], function(err, result) {
        if (err) {
            console.log(err);
        }
        if (result) {
            jsonWrite(res, result);
        }
    })
});

//查找用户接口
router.post('/login', (req, res) => {
    var sql_name = $sql.user.select_name;
    // var sql_password = $sql.user.select_password;
    var params = req.body;
    console.log(params);
    if (params.name) {
        sql_name += "where username ='"+ params.name +"'";
    }
    var keywords = JSON.parse(Object.keys(params)[0]);
    conn.query(sql_name, params.name, function(err, result) {
        if (err) {
            console.log(err);
        }
        // console.log(result);
        if (result[0] === undefined) {
            res.send('-1')   //查询不出username，data 返回-1
        } else {
            var resultArray = result[0];
            console.log(resultArray.password);
           // console.log(keywords);
            if(resultArray.password === keywords.password) {
                jsonWrite(res, result);
            } else {
                res.send('0')   //username
            }
        }
    })
});

//获取用户信息
router.get('/getUser', (req, res) => {
    var sql_name = $sql.user.select_name;
    // var sql_password = $sql.user.select_password;
    var params = req.body;
    console.log(params);
    if (params.name) {
        sql_name += "where username ='"+ params.name +"'";
    }
    conn.query(sql_name, params.name, function(err, result) {
        if (err) {
            console.log(err);
        }
        // console.log(result);
        if (result[0] === undefined) {
            res.send('-1')   //查询不出username，data 返回-1
        } else {
            jsonWrite(res, result);
        }
    })
});

//更新用户信息
router.post('/updateUser', (req, res) => {
    var sql_update = $sql.user.update_user;
    var params = req.body;
    console.log(params);
    if (params.id) {
        sql_update  += " email = '" + params.email +
                        "',phone = '" + params.phone +
                        "',card = '" + params.card +
                        "',birth = '" + params.birth +
                        "',sex = '" + params.sex +
                        "' where id ='"+ params.id + "'";
    }    
    conn.query(sql_update, params.id, function(err, result) {
        if (err) {
            console.log(err);
        }
        console.log(result);
        if (result.affectedRows === undefined) {
            res.send('更新失败，请联系管理员')   //查询不出username，data 返回-1
        } else {
            res.send('ok'); 
        }
    })
});

//更改密码
router.post('/modifyPassword', (req, res) => {
    var sql_modify = $sql.user.update_user;
    var params = req.body;
    console.log(params);
    if (params.id) {
        sql_modify +=  " password = '" + params.pass +
                        "',repeatPass = '" + params.checkPass +
                        "' where id ='"+ params.id + "'";
    }
    conn.query(sql_modify, params.id, function(err, result) {
        if (err) {
            console.log(err);
        }
        // console.log(result);
        if (result.affectedRows === undefined) {
            res.send('修改密码失败，请联系管理员')   //查询不出username，data 返回-1
        } else {
            res.send('ok'); 
        }
    })
});


module.exports = router;

На этом этапе запустите приложение node в папке службы (вы также можете загрузить package.json здесь, а затем использовать npm для его выполнения) и увидеть успешное прослушивание на порту: 3000... То есть сервер успешно запускается.

компонент входа в систему vue

Здесь мы в основном представляем компонент login.vue для входа в систему.

<template>
    <div class="login-wrap">
        <div class="ms-title">登录管理系统</div>
        <div class="ms-login">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm">
                <div v-if="errorInfo">
                    <span>{{errInfo}}</span>
                </div>
                <el-form-item prop="name">
                    <el-input v-model="ruleForm.name" placeholder="账号" ></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" placeholder="密码" v-model="ruleForm.password" @keyup.enter.native="submitForm('ruleForm')"></el-input>
                </el-form-item>
                <el-form-item  prop="validate">
                    <el-input v-model="ruleForm.validate" class="validate-code" placeholder="验证码" ></el-input>
                    <div class="code" @click="refreshCode">
                        <s-identify :identifyCode="identifyCode"></s-identify>
                    </div>
                </el-form-item>
                <div class="login-btn">
                    <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
                </div>
                <p style="font-size:14px;line-height:30px;color:#999;cursor: pointer;float:right;" @click="handleCommand()">注册</p>  
            </el-form>
        </div>
    </div>    
</template>

<script>
    export default {
        name: 'login',
        data() {
            return {
                identifyCodes: "1234567890",
                identifyCode: "",
                errorInfo : false,
                ruleForm: {
                    name: '',
                    password: '',
                    validate: ''                    
                },
                rules: {
                    name: [
                        { required: true, message: '请输入用户名', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' }
                    ],
                    validate: [
                        { required: true, message: '请输入验证码', trigger: 'blur' }
                    ]
                }
            }
        },
        mounted() {
            this.identifyCode = "";
            this.makeCode(this.identifyCodes, 4);
        },
        methods: {
            submitForm(formName) {
                const self = this;
                self.$refs[formName].validate((valid) => {
                    if (valid) {
                        localStorage.setItem('ms_username',self.ruleForm.name);
                        localStorage.setItem('ms_user',JSON.stringify(self.ruleForm));
                        console.log(JSON.stringify(self.ruleForm));                        
                        self.$http.post('/api/user/login',JSON.stringify(self.ruleForm))
                        .then((response) => {
                            console.log(response);
                            if (response.data == -1) {
                                self.errorInfo = true;
                                self.errInfo = '该用户不存在';
                                console.log('该用户不存在')
                            } else if (response.data == 0) {
                                console.log('密码错误')
                                self.errorInfo = true;
                                self.errInfo = '密码错误';
                            } else if (response.status == 200) {
                                self.$router.push('/readme');
                            }                            
                        }).then((error) => {
                            console.log(error);
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            handleCommand() {
                this.$router.push('/register');
            },
            randomNum(min, max) {
                return Math.floor(Math.random() * (max - min) + min);
            },
            refreshCode() {
                this.identifyCode = "";
                this.makeCode(this.identifyCodes, 4);
            },
            makeCode(o, l) {
                for (let i = 0; i < l; i++) {
                    this.identifyCode += this.identifyCodes[
                    this.randomNum(0, this.identifyCodes.length)
                    ];
                }
                console.log(this.identifyCode);
            }
        }
    }
</script>

<style scoped>
    .login-wrap{
        position: relative;
        width:100%;
        height:100%;
    }
    .ms-title{
        position: absolute;
        top:50%;
        width:100%;
        margin-top: -230px;
        text-align: center;
        font-size:30px;
        color: #fff;

    }
    .ms-login{
        position: absolute;
        left:50%;
        top:50%;
        width:300px;
        height:240px;
        margin:-150px 0 0 -190px;
        padding:40px;
        border-radius: 5px;
        background: #fff;
    }
    .ms-login span {
        color: red;
    }
    .login-btn{
        text-align: center;
    }
    .login-btn button{
        width:100%;
        height:36px;
    }
    .code {
        width: 112px;
        height: 35px;
        border: 1px solid #ccc;
        float: right;
        border-radius: 2px;
    }
    .validate-code {
        width: 136px;
        float: left;
    }
</style>

Настройте прокси и кросс-домены

После выполнения вышеуказанных 3 шагов выполните в корневом каталогеnpm run dev, а затем введите набор данных, нажмите «Сохранить», и вы обнаружите, что будет сообщено об ошибке: vue-resource.common.js?e289:1071 POST http://localhost:8082/api/user/login 404 ( Не обнаружена). Это связано с прямым доступом к порту 8082, к которому нет доступа, поэтому здесь нужно настроить отображение прокси-форвардинга.

В файле конфигурации vue-cli есть параметр proxyTable, который используется для установки таблицы сопоставления адресов, которую можно добавить в конфигурацию разработки (dev).

dev: {
    // ...
    proxyTable: {
        '/api': {
            target: 'http://127.0.0.1:3000/api/',
            changeOrigin: true,
            pathRewrite: {
                '^/api': ''
            }
        }
    },
    // ...
}

То есть при запросе /api представляет собой http://127.0.0.1:3000/api/ (здесь пишите ip, а не localhost), Параметр changeOrigin принимает логическое значение, если оно равно true, проблем с перекрестным происхождением не будет.

Проект требует предотвращения нескольких отправок, что на самом деле является операцией против сотрясений: Пожалуйста, переместитетроттлинг и стабилизация

Запуск проекта

//本地开发
//开启前端服务，浏览器访问 http://localhost:8082
npm run dev
//开启后端服务
cd service
node app

После целого дня и дня я, наконец, прошел.Я столкнулся с множеством проблем на стороне базы данных, но после непрерывных попыток я, наконец, решил ее.

визуализация

image

image

image

исходный кодНеуместно, пожалуйста, поправьте меня, добро пожаловать звездочка

См. следующееvue-manage-system,сердце острова эй,Ло Кун

Категории