[超详细]SpringBoot+MyBatisPlus+Vue前后端分离项⽬实现登录注册-前端篇SpringBoot+MyBatisPlus+Vue 前后端分离项⽬实现登录注册-前端篇
后端搭建博客路径：
1.使⽤WebStorm创建⼀个空项⽬
创建⼀个名为vuedemo的空项⽬
创建Vue项⽬
在Terminal下输⼊
cd …
vue create vuedemo
然后选择Overwrite
然后选择Default < [ Vue 2] babel, eslint >
2.安装插件
安装element-ui
npm i element-ui -S
安装vue-router
npm install vue-router
安装axios
npm install axios
安装Vuex
npm install vuex --save
安装 sass-loader 依赖和 less 加载组件：npm i sass-loader --save-dev
npm i less-loader --save-dev
npm i element-ui -S
npm install vue-router
npm install axios
npm install vuex --save
npm i sass-loader --save-dev
npm i less-loader --save-dev
在src⽬录下新建router⽂件夹，在router⽂件夹下新建index.js⽂件
index.js 代码
//导⼊ vue-index
import Router from 'vue-router'
import Vue from 'vue'
import login from '../views/login'
import register from '../views/register'
Vue.use(Router)
const routes = [
{
path: '',
redirect: '/login',
},
{
path: '/login',
component: login,
meta:{
title:'登录'
}
},
{
path: '/register',
component: register,
meta:{
title:'注册'
}
},
]
/
/2.创建vue-router对象
const index = new Router({
routes,
mode : 'history'
})
export default index
4.登录注册界⾯
在src⽂件夹下新建view⽂件夹，在view⽂件夹下新建 login.vue 和 register.vue⽂件
login.vue
<template>
<div>
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">      <el-form-item label="⽤户名" prop="username">
<el-input  v-model="ruleForm.username" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
<el-button type="danger" @click="toregister()" round>⽴即注册</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: "name",
data() {
var validateusername = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输⼊⽤户名'));
}
};
var validatepassword = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输⼊密码'));
}
};
return {
ruleForm: {
username: '',
password: '',
},
rules: {
username: [
{ validator: validateusername, trigger: 'blur' }
],
password: [
{ validator: validatepassword, trigger: 'blur' }
]
]
}
};
},
methods: {
submitForm(formName) {
this.axios({
url: 'localhost:8888/user/login',
method: "post",    //⽅式
data:{
username : this.ruleForm.username,
password : this.ruleForm.password
}
}).then(res =>{
let resp = res.data;
de==200){
this.$message({
message: '⽤户名密码正确，登录成功',
type: 'success'
});
}else{
this.$message({
message: ssage,
type: 'warning'
});
}
})
this.$refs[formName].resetFields();
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
toregister(){
this.$router.push('/register')
}
}
}
vue element admin</script>
<style scoped>
</style>
register.vue
<template>
<div>
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">    <el-form-item label="昵称" prop="nickname">
<el-input  v-model="ruleForm.nickname" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="⽤户名" prop="username">
<el-input  v-model="ruleForm.username" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="secondPassword">
<el-input type="password" v-model="ruleForm.secondPassword" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。