完善实现登陆注册方法中占位符的代码
时间: 2024-03-12 17:48:52 浏览: 23
好的,下面是一个简单的 Vue 登录注册页面的示例代码,包括路由和 API 调用:
```vue
<template>
<div>
<h2>登录</h2>
<form @submit.prevent="login">
<label>用户名</label>
<input type="text" v-model="username" required>
<label>密码</label>
<input type="password" v-model="password" required>
<button type="submit">登录</button>
</form>
<h2>注册</h2>
<form @submit.prevent="register">
<label>用户名</label>
<input type="text" v-model="newUsername" required>
<label>密码</label>
<input type="password" v-model="newPassword" required>
<button type="submit">注册</button>
</form>
</div>
</template>
<script>
import axios from "axios";
export default {
data() {
return {
username: "",
password: "",
newUsername: "",
newPassword: ""
};
},
methods: {
login() {
axios
.post("http://localhost:3000/login", {
username: this.username,
password: this.password
})
.then(response => {
// 登录成功,保存用户信息到本地并跳转到用户页面
localStorage.setItem("user", JSON.stringify(response.data));
this.$router.push("/user");
})
.catch(error => {
// 处理登录失败情况
console.log(error);
});
},
register() {
axios
.post("http://localhost:3000/register", {
username: this.newUsername,
password: this.newPassword
})
.then(response => {
// 注册成功,保存用户信息到本地并跳转到用户页面
localStorage.setItem("user", JSON.stringify(response.data));
this.$router.push("/user");
})
.catch(error => {
// 处理注册失败情况
console.log(error);
});
}
}
};
</script>
```
上面的代码中,我们使用 Axios 库来处理与后端 API 的通信。在登录和注册方法中,我们分别向后端发送 POST 请求,并在成功响应时保存用户信息到本地,并跳转到用户页面。在失败情况下,我们简单地输出错误信息到控制台。
同时,我们还需要在 Vue 实例中添加路由配置。假设用户页面对应的路由路径为 `/user`,我们可以在 `router/index.js` 文件中添加以下路由配置:
```javascript
import Vue from "vue";
import VueRouter from "vue-router";
import UserPage from "@/views/UserPage.vue";
Vue.use(VueRouter);
const routes = [
{
path: "/user",
name: "UserPage",
component: UserPage
}
];
const router = new VueRouter({
mode: "history",
base: process.env.BASE_URL,
routes
});
export default router;
```
在这个例子中,我们创建了一个名为 `UserPage` 的组件,并将其作为路由路径 `/user` 的组件。在路由配置中,我们还使用了 `history` 模式,这样 URL 就不会包含 `#` 符号。
请注意,这只是一个简单的示例,实际情况下你需要根据自己的需求来实现登录注册功能。同时,你还需要考虑一些安全性问题,比如密码哈希和 CSRF 防护。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)