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, res, next) {
    // res.send("haha");  //测试路由是否是通的
    // 接收前端发送的添加账号的数据
    let { username, password, usergroup } = req.body;
    console.log(username, password, usergroup);

  
  // 构造sql语句  // 把数据存入数据库
  const sqlStr = `insert into account(username, password, 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 class="box-card">
            <div slot="header" class="clearfix">
                <span>添加账号</span>
            </div>
            <div class="text item">
                <!-- 添加账号表单 -->
                <el-form size="mini" :model="accountAddForm" status-icon :rules="rules" ref="accountAddForm" label-width="100px" class="demo-ruleForm">
                    <!-- 账号 -->
                    <el-form-item label="账号" prop="username">
                        <el-input type="text" v-model="accountAddForm.username" autocomplete="off"></el-input>
                    </el-form-item>
                    <!-- 密码 -->
                    <el-form-item label="密码" prop="password">
                        <el-input type="text" v-model="accountAddForm.password" autocomplete="off"></el-input>
                    </el-form-item>
                    <!-- 确认密码 -->
                    <el-form-item label="确认密码" prop="checkPwd">
                        <el-input type="text" v-model="accountAddForm.checkPwd" autocomplete="off"></el-input>
                    </el-form-item>
                    <!-- 选中用户组 -->
                    <el-form-item label="选择用户组" prop="userGroup">
                        <el-select v-model="accountAddForm.userGroup" placeholder="请选择用户组">
                        <el-option label="普通用户" value="普通用户"></el-option>
                        <el-option label="高级管理员" value="高级管理员"></el-option>
                        </el-select>
                    </el-form-item>
                    <!-- 登录按钮&重置按钮 -->
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('accountAddForm')">添加</el-button>
                        <el-button @click="resetForm('accountAddForm')">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
    </div>

   
</template>

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

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

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

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

              // 根据后端响应的数据判断
              if (error_code === 0) {
               
               // 弹出成功的提示  下面这3行代码时eleUI自带的样似  它表示弹出的是成功的信息哦
                this.$message({
                  type: 'success',
                  message: reason
                });

                // 跳转到账号管理列表
                this.$router.push('/accountmanage')
              } else {
                // 弹出失败的提示  这也是eleUI自带的样似哦
                this.$message.error(reason);
              }
            })
            .catch(err => {
              console.log(err)
            })
        } else {
          // 否则就是false
          return false;
        }
      });
    },
    // 点击重置按钮 触发这个函数
    resetForm(formName) {
      // this.$refs.loginForm.resetFields() 获取整个表单组件 调用重置方法
      this.$refs[formName].resetFields();
    }
  }
}
</script>

<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: left;
      .el-form {
        width: 290px;
        .el-form-item {
            margin-bottom: 24px;
        }
      }
    }
  }
}

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

 

最终效果图

　

 

　　

 

转载于:https://www.cnblogs.com/IwishIcould/p/10934691.html