帮写一个json-server vue登录
时间: 2024-01-20 14:02:08 浏览: 19
首先,你需要安装以下依赖:
```
npm install -g json-server
```
然后,你需要在本地创建一个 `db.json` 文件,用于存储用户信息。以下是一个示例:
```json
{
"users": [
{
"id": 1,
"name": "Alice",
"email": "alice@example.com",
"password": "123456"
},
{
"id": 2,
"name": "Bob",
"email": "bob@example.com",
"password": "123456"
}
]
}
```
接下来,你需要创建一个 `index.html` 文件,并添加以下代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Login Form</title>
</head>
<body>
<div id="app">
<form v-on:submit.prevent="login">
<label>Email:</label>
<input type="email" v-model="email" required>
<label>Password:</label>
<input type="password" v-model="password" required>
<button type="submit">Login</button>
</form>
<p v-if="error">{{ error }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
email: '',
password: '',
error: ''
},
methods: {
login() {
const user = this.$http.get('/users?email=' + this.email + '&password=' + this.password).then(response => {
if (response.body.length === 0) {
this.error = 'Invalid email or password';
} else {
// successful login, redirect to home page or do something else
console.log('Logged in successfully');
}
}, error => {
this.error = 'An error occurred, please try again';
});
}
}
});
</script>
</body>
</html>
```
在这个文件中,我们使用了 Vue.js 框架来创建一个简单的登录表单。当用户提交表单时,我们通过 AJAX 请求从 `db.json` 文件中获取用户信息,并进行验证。如果验证通过,则登录成功,否则显示错误消息。
最后,你需要在终端中启动 `json-server`:
```
json-server --watch db.json
```
然后,在浏览器中访问 `http://localhost:3000/index.html` 即可开始测试登录表单。