vue+node+elementUI实现注册功能

后端代码在后端的文件 routes文件夹下的connect.js文件中

// 引入mysql
const mysql = require('mysql');

// 创建连接对象
const connection = mysql.createConnection({
    host     : 'localhost',// 数据库地址
    user     : 'root',// 数据库用户名
    password : 'root',// 数据库密码
    // port: '3306',// 端口号 默认就是3306 可以不写
    database: 'supersys'  // 数据库的名字
});

// 执行连接方法 
connection.connect(() => {
    console.log('数据库连接成功!')
})

// 把连接对象暴露出去
module.exports = connection;

在后端account.js文件中

var express = require('express');
var router = express.Router();

// 引入连接数据库模块 路径是相对路径
const connection = require('./connect')

 解决跨域问题
// 统一设置响应头 解决跨域问题
router.all('*',(req,res,next) => {
     设置响应头 解决跨域(目前最主流的方式)
    res.header('Access-Control-Allow-Origin','*');
    next();
})


/*
   this.axios.post('http://127.0.0.1:666/account/accountadd',qs.stringify(params))
   accountadd 与前端发送的最末尾的那个是相同的哦   account与后端在app.js分配中的路由是相同的哦
   在app.js中分配的路由
   // 配置路由10行   var accountRouter = require('./routes/account');
   // 配置路由10行   app.use('/account',accountRouter);
  
*/
router.post('/accountadd',function (req,next) {
     res.send("haha");  //测试路由是否是通的
     接收前端发送的添加账号的数据
    let { username,password,usergroup } = req.body;
    console.log(username,usergroup);

  
   构造sql语句  // 把数据存入数据库
  const sqlStr = `insert into account(username,usergroup) values('${username}','${password}','${usergroup}')`;
  connection.query(sqlStr,(err,data)=>{
    if(err) throw err; err的有值时，说明有错，此时抛出错误
    if (data.affectedRows>0){
      res.send({ "error_code":0,"reason": "插入数据成功" });
    }else{
       失败：返回给前端失败的数据对象
      res.send({ "error_code":1,"reason": "插入数据失败" });
    }
  })
});

在后盾app.js中配置

// 配置路由 在第8行下面
var accountRouter = require('./routes/account');

//在第28行下配置
// 配置路由
var accountRouter = require('./routes/account');

在前端accountadd.vue文件中

<template>
      div class="account-add">
        <!-- 面板组件 -->
       el-card ="box-card">
            slot="header" class="clearfix">
                span>添加账号</div="text item" 添加账号表单 -->
                el-form size="mini" :model="accountAddForm" status-icon :rules="rules" ref label-width="100px"="demo-ruleForm">
                     账号 -->
                    el-form-item label="账号" prop="username">
                        el-input type="text" v-model="accountAddForm.username" autocomplete="off"></el-inputel-form-item 密码 ="密码"="password"="accountAddForm.password" 确认密码 ="确认密码"="checkPwd"="accountAddForm.checkPwd" 选中用户组 ="选择用户组"="userGroup"el-select v-model="accountAddForm.userGroup" placeholder="请选择用户组"el-option ="普通用户" value="普通用户"el-option="高级管理员"="高级管理员"el-select 登录按钮&重置按钮 el-button ="primary" @click="submitForm('accountAddForm')">添加el-button@click="resetForm('accountAddForm')">重置el-formel-card>
    >

   
>

script>
// 引入qs库
import qs from 'qs;

    export default {
        data() {
     自定义密码的验证
    const pass = (rule,value,callback) => {
      if (value === "") {
        callback(new Error("请输入密码));
      } else  (value.length < 3 || value.length > 6长度在 3 - 6 位else {
         (this.accountAddForm.checkPwd !== ) {
          .$refs.accountAddForm.validateField(checkPwd);
        }
        callback();
      }
    };
     自定义确认密码的验证
    const checkPass 请再次输入密码.accountAddForm.password) {
        callback(两次密码不一致 {
        callback();
      }
    };

    return 添加账号表单数据
      accountAddForm: {
        username: ,password: 
      }, 验证规则
      rules: {
         账号
        username: [
          { required: true请输入账号blur },{ min: 3 }
        ],1)"> 密码
        password: [{ required:  }],1)"> 确认密码
        checkPwd: [{ required:  用户组
        userGroup: [
            { required: 请选择用户组change }
        ]
      }
    };
  },methods: {
     点击登录按钮 触发这个函数
    submitForm(formName) {
       获取表单组件 调用验证方法
      .$refs[formName].validate(valid  如果所有验证通过 valid就是true
         (valid) {
           收集用户输入的所有账号数据
          let params  {
            username: .accountAddForm.username,1)">.accountAddForm.password,usergroup: .accountAddForm.userGroup
          };

           使用axios发送数据给后端
          .axios.post(http://127.0.0.1:666/account/accountadd {
               接收后端返回的错误码 和 提示信息  error_code是错误玛   reason是提示的信息
              let { error_code,reason }  response.data;

               根据后端响应的数据判断
               (error_code 0) {
               
                弹出成功的提示  下面这3行代码时eleUI自带的样似  它表示弹出的是成功的信息哦
                .$message({
                  type: success 跳转到账号管理列表
                .$router.push(/accountmanage)
              }  {
                 弹出失败的提示  这也是eleUI自带的样似哦
                .$message.error(reason);
              }
            })
            .catch(err  {
              console.log(err)
            })
        }  {
           否则就是false
          return false;
        }
      });
    },1)"> 点击重置按钮 触发这个函数
    resetForm(formName) {
       this.$refs.loginForm.resetFields() 获取整个表单组件 调用重置方法
      .$refs[formName].resetFields();
    }
  }
}
style lang="less">
.account-add {
  .el-card {
    .el-card__header {
      text-align: left;
      font-size 20px
      font-weight 600
      background-color #f1f1f1;
    }
    .el-card__body 
        text-align
      .el-form {
        width 290px
        .el-form-item {
            margin-bottom 24px;
        
      }
    }
  }
}

// 控制头部的标题部分
.el-main
  line-height 25px;
}
style>

最终效果图

原文地址：https://www.cnblogs.com/IwishIcould

vue+node+elementUI实现注册功能

相关推荐