[超详细]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 就可以进行测试