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
3.router 路由映射
在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: 'http://localhost:8888/user/login',
method: "post", //方式
data:{
username : this.ruleForm.username,
password : this.ruleForm.password
}
}).then(res =>{
let resp = res.data;
if(resp.code==200){
this.$message({
message: '用户名密码正确,登录成功',
type: 'success'
});
}else{
this.$message({
message: resp.message,
type: 'warning'
});
}
})
this.$refs[formName].resetFields();
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
toregister(){
this.$router.push('/register')
}
}
}
</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>
</div>
</template>
<script>
export default {
name: "register",
data() {
var validateNickname = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入昵称'));
}
};
var validateUsername = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入用户名'));
}
};
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'));
} else {
if (this.ruleForm.secondPassword !== '') {
this.$refs.ruleForm.validateField('checkPass');
}
callback();
}
};
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.ruleForm.password) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
return {
ruleForm: {
nickname: '',
username: '',
password: '',
secondPassword: '',
},
rules: {
nickname: [
{ validator: validateNickname, trigger: 'blur' }
],
username: [
{ validator: validateUsername, trigger: 'blur' }
],
password: [
{ validator: validatePass, trigger: 'blur' }
],secondPassword: [
{ validator: validatePass2, trigger: 'blur' }
],
}
};
},
methods: {
submitForm(formName) {
this.axios({
url: 'http://localhost:8888/user/register',
method: "post", //方式
data:{
nickname : this.ruleForm.nickname,
username : this.ruleForm.username,
password : this.ruleForm.password,
secondPassword : this.ruleForm.secondPassword
}
}).then(res =>{
let resp = res.data;
if(resp.code==200){
this.$message({
message: resp.message,
type: 'success'
});
}else{
this.$message({
message: resp.message,
type: 'warning'
});
}
})
this.$refs[formName].resetFields();
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>
<style scoped>
</style>
5.修改App.vue
App.vue
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
components: {
}
}
</script>
<style>
</style>
6.修改main.js
main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import axios from 'axios'
Vue.config.productionTip = false
Vue.use(ElementUI)
Vue.prototype.axios=axios;
new Vue({
el: '#app',
router,
axios,
render: h => h(App)
})
然后再控制台输入 npm run serve 就可以进行测试