后端代码 在后端的文件 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>
最终效果图
遇见问题，这是你成长的机会，如果你能够解决，这就是收获。
作者：晚来南风晚相识
