后端代码 在后端的文件 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中配置
<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>
最终效果图
