bootstrap做vue登录
时间: 2023-07-27 17:10:59 浏览: 40
Bootstrap 是一个前端开发框架,而 Vue 是一个用于构建用户界面的渐进式框架。虽然两者不是同一类的框架,但是可以结合使用。
下面是一个使用 Bootstrap 和 Vue 实现的登录示例:
1. 引入 Bootstrap 和 Vue 的相关文件:
```html
<!-- 引入 Bootstrap 样式文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- 引入 Vue 文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
```
2. 创建 Vue 实例:
```html
<div id="app">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6">
<form>
<div class="form-group">
<label for="username">用户名</label>
<input type="text" class="form-control" id="username" v-model="username">
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" class="form-control" id="password" v-model="password">
</div>
<button type="submit" class="btn btn-primary" v-on:click.prevent="login">登录</button>
</form>
</div>
</div>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
username: '',
password: ''
},
methods: {
login: function() {
// 在这里添加登录逻辑
console.log('登录');
}
}
});
</script>
```
3. 在 `login` 方法中编写登录逻辑。例如,可以使用 Axios 库向后端发送登录请求:
```html
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
username: '',
password: ''
},
methods: {
login: function() {
axios.post('/api/login', {
username: this.username,
password: this.password
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
}
}
});
</script>
```
以上示例中,假设后端提供了一个 `/api/login` 接口,接收用户名和密码,并返回登录结果。Axios 库用于向该接口发送请求,并处理响应。具体的登录逻辑需要根据实际情况进行编写。