好的，根据您的要求，以下是一个使用Element,Koa,
SQLyog创建用户管理页面的代码示例：
前端页面代码（使用Element实现）：
```
<template>
<div>
<el-table :data="userData" border>
<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column label="电话" prop="phone"></el-table-column>
<el-table-column label="邮箱" prop="email"></el-table-column>
<el-table-column label="地址" prop="address"></el-table-column>
<el-table-column>
<template slot-scope="scope">
<el-button type="primary" @click="editUser(scope.$index, scope.row)">编辑</el-button>
<el-button type="danger" @click="removeUser(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-dialog :visible.sync="dialogVisible" title="添加/编辑用户信息">
<el-form :model="userForm">
<el-form-item label="姓名" :label-width="formLabelWidth">
<el-input v-model="userForm.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="电话" :label-width="formLabelWidth">
<el-input v-model="userForm.phone" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="邮箱" :label-width="formLabelWidth">
<el-input v-model="userForm.email" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="地址" :label-width="formLabelWidth">
<el-input v-model="userForm.address" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="saveUser">保存</el-button>
</div>
</el-dialog>
<el-button type="primary" @click="addUser">添加用户</el-button>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
userData: [], // 用户数据
userForm: {}, // 用户表单
dialogVisible: false, // 弹窗可见
formLabelWidth: '80px', // 表单标签宽度
}
},
mounted() {
this.getUserData(); // 加载用户数据
},
methods: {
// 获取用户数据
getUserData() {
axios.get('/api/user')
.then(res => {
this.userData = res.data.data;
})
.catch(err => {
console.log(err);
});
},
// 打开添加用户弹窗
addUser() {
this.userForm = {};
this.dialogVisible = true;
},
// 打开编辑用户弹窗
editUser(index, row) {
this.userForm = Object.assign({}, row);
this.dialogVisible = true;
},
// 保存用户信息
saveUser() {
axios.post('/api/user', this.userForm)
.then(res => {
this.dialogVisible = false;
this.getUserData();
})
.catch(err => {
console.log(err);
});
},
// 删除用户信息
removeUser(index, row) {
axios.delete(`/api/user/${row.id}`)
.then(res => {
this.getUserData();
})
.catch(err => {
console.log(err);
});
},
}
};
</script>
```
后端代码（使用Koa
和SQLyog实现）：
```
const Koa = require('koa');
const Router = require('koa-router');
const bodyParser = require('koa-bodyparser');
const
mysql = require('
mysql');
const cors = require('@koa/cors');
const app = new Koa();
const router = new Router();
const connection =
mysql.createConnection({
host: 'localhost',
user: 'root',
password: '',
database: 'user',
});
app.use(cors());
app.use(bodyParser());
// 获取用户列表
router.get('/api/user', async ctx => {
try {
const results = await new Promise((resolve, reject) => {
connection.query('SELECT * FROM user', (err, results) => {
if (err) {
reject(err);
} else {
resolve(results);
}
});
});
ctx.body = {
code: 0,
msg: 'success',
data: results,
}
} catch (err) {
ctx.body = {
code: -1,
msg: 'error',
data: err.message,
}
}
});
// 添加/编辑用户
router.post('/api/user', async ctx => {
const user = ctx.request.body;
const sql = user.id
? `UPDATE user SET name='${user.name}', phone='${user.phone}', email='${user.email}', address='${user.address}' WHERE id=${user.id}`
: `INSERT INTO user (name, phone, email, address) VALUES ('${user.name}', '${user.phone}', '${user.email}', '${user.address}')`;
try {
await new Promise((resolve, reject) => {
connection.query(sql, (err, results) => {
if (err) {
reject(err);
} else {
resolve(results);
}
});
});
ctx.body = {
code: 0,
msg: 'success',
}
} catch (err) {
ctx.body = {
code: -1,
msg: 'error',
data: err.message,
}
}
});
// 删除用户
router.delete('/api/user/:id', async ctx => {
const id = ctx.params.id;
try {
await new Promise((resolve, reject) => {
connection.query(`DELETE FROM user WHERE id=${id}`, (err, results) => {
if (err) {
reject(err);
} else {
resolve(results);
}
});
});
ctx.body = {
code: 0,
msg: 'success',
}
} catch (err) {
ctx.body = {
code: -1,
msg: 'error',
data: err.message,
}
}
});
app.use(router.routes());
app.use(router.allowedMethods());
app.listen(3000, () => {
console.log('server is running at http://localhost:3000');
});
```
注意，以上代码示例为简化版，可能需要您根据实际情况进行修改。另外，此代码示例仅供参考，不保证完全正确、合法
和可用。
扫一扫
2776
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
