vue用户登录注册案例
时间: 2023-07-22 14:15:15 浏览: 47
好的,下面我将为您提供一个基于Vue的用户登录和注册的案例代码,供参考:
1. 创建一个名为`Login.vue`的登录组件,并设置登录表单:
```
<template>
<div>
<h2>用户登录</h2>
<form>
<div>
<label>用户名:</label>
<input type="text" v-model="username" placeholder="请输入用户名">
</div>
<div>
<label>密码:</label>
<input type="password" v-model="password" placeholder="请输入密码">
</div>
<button @click.prevent="login">登录</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
login() {
// 发送登录请求
axios.post('/api/login', {
username: this.username,
password: this.password
}).then(response => {
// 登录成功
this.$store.commit('login', response.data)
this.$router.push('/')
}).catch(error => {
// 登录失败
console.log(error)
})
}
}
}
</script>
```
2. 创建一个名为`Register.vue`的注册组件,并设置注册表单:
```
<template>
<div>
<h2>用户注册</h2>
<form>
<div>
<label>用户名:</label>
<input type="text" v-model="username" placeholder="请输入用户名">
</div>
<div>
<label>密码:</label>
<input type="password" v-model="password" placeholder="请输入密码">
</div>
<button @click.prevent="register">注册</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
register() {
// 发送注册请求
axios.post('/api/register', {
username: this.username,
password: this.password
}).then(response => {
// 注册成功
this.$router.push('/login')
}).catch(error => {
// 注册失败
console.log(error)
})
}
}
}
</script>
```
3. 在`main.js`文件中配置路由和Vuex:
```
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import Vuex from 'vuex'
import Login from './components/Login.vue'
import Register from './components/Register.vue'
Vue.use(VueRouter)
Vue.use(Vuex)
const router = new VueRouter({
routes: [
{ path: '/login', component: Login },
{ path: '/register', component: Register }
]
})
const store = new Vuex.Store({
state: {
user: null
},
mutations: {
login(state, user) {
state.user = user
}
}
})
new Vue({
el: '#app',
router,
store,
render: h => h(App)
})
```
4. 在后端服务器上设置API路由,并处理登录和注册请求:
```
const express = require('express')
const bodyParser = require('body-parser')
const app = express()
app.use(bodyParser.json())
const users = []
app.post('/api/login', (req, res) => {
const user = users.find(u => u.username === req.body.username && u.password === req.body.password)
if (user) {
res.json(user)
} else {
res.status(401).send('用户名或密码不正确')
}
})
app.post('/api/register', (req, res) => {
const user = users.find(u => u.username === req.body.username)
if (user) {
res.status(409).send('用户名已存在')
} else {
users.push(req.body)
res.sendStatus(201)
}
})
app.listen(3000, () => {
console.log('服务器已启动')
})
```
以上是一个简单的Vue用户登录和注册的案例,您可以根据自己的实际需求进行修改和优化。