学工管理系统
张老师：小李，咱们学校的学生工作管理系统开发得怎么样了？我听说德阳市的几所高校也在寻找类似系统。
李同学：老师，目前我们已经完成了前端页面的设计，主要是基于Vue框架搭建的。
张老师：哦？能给我看看具体代码吗？
李同学：好的，这是登录页面的部分代码：
<template>
<div class="login-container">
<h2>学生工作管理系统</h2>
<form @submit.prevent="handleSubmit">
<input type="text" v-model="username" placeholder="用户名" required />
<input type="password" v-model="password" placeholder="密码" required />
<button type="submit">登录</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
};
},
methods: {
async handleSubmit() {
try {
const response = await fetch('/api/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username: this.username, password: this.password })
});
const data = await response.json();
if (data.success) {
alert('登录成功');
// 跳转到主界面
} else {
alert('用户名或密码错误');
}
} catch (error) {
console.error(error);
}
}
}
};
</script>
<style scoped>
.login-container {
width: 300px;
margin: auto;
padding: 20px;
border: 1px solid #ccc;
}
input {
display: block;
margin-bottom: 10px;
width: 100%;
padding: 5px;
}
button {
width: 100%;
padding: 5px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
</style>
张老师：这个界面看起来不错，那么后端是如何处理的呢？
李同学：后端使用的是Node.js，数据库采用MySQL。这里是一个简单的API接口示例：
app.post('/api/login', async (req, res) => {
const { username, password } = req.body;
try {
const [rows] = await connection.execute('SELECT * FROM users WHERE username = ? AND password = ?', [username, password]);
if (rows.length > 0) {
res.json({ success: true });
} else {
res.status(401).json({ success: false });
}
} catch (error) {
console.error(error);
res.status(500).json({ success: false });
}
});
张老师：很好，这套系统如果推广到德阳市的其他高校，你觉得还需要做哪些调整？
李同学：我觉得可以增加更多定制化选项，比如不同学校的学籍管理规则等。
]]>
