[超详细]SpringBoot+MyBatisPlus+Vue 前后端分离项目实现登录注册-前端篇

曾经终败给现在 2022-10-16 06:21 452阅读 0赞

### SpringBoot+MyBatisPlus+Vue 前后端分离项目实现登录注册-前端篇 ###

*  1.使用WebStorm创建一个空项目
 *  2.安装插件
 *  3.router 路由映射
 *  4.登录注册界面
 *  5.修改App.vue
 *  6.修改main.js

后端搭建博客路径：[后端搭建博客][Link 1]

# 1.使用WebStorm创建一个空项目 #

创建一个名为vuedemo的空项目

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTkzOTgy_size_16_color_FFFFFF_t_70]

创建Vue项目  
在Terminal下输入

cd …

vue create vuedemo

然后选择Overwrite  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTkzOTgy_size_16_color_FFFFFF_t_70 1]

然后选择Default < \[ Vue 2\] babel, eslint >

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTkzOTgy_size_16_color_FFFFFF_t_70 2]

# 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文件

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTkzOTgy_size_16_color_FFFFFF_t_70 3]

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文件

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTkzOTgy_size_16_color_FFFFFF_t_70 4]

<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>

<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 就可以进行测试

[Link 1]: https://blog.csdn.net/m0_46193982/article/details/117304801
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTkzOTgy_size_16_color_FFFFFF_t_70]: /images/20221014/de8c4b721bdc48c88f3e6a8b1b435b3c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTkzOTgy_size_16_color_FFFFFF_t_70 1]: /images/20221014/0093f876646b469bbfdcdd4c9c7e584a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTkzOTgy_size_16_color_FFFFFF_t_70 2]: /images/20221014/89eb47797dc1405cbb6d623adc9226d8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTkzOTgy_size_16_color_FFFFFF_t_70 3]: /images/20221014/addbceaa7e974c4da10e22e30fe43e01.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTkzOTgy_size_16_color_FFFFFF_t_70 4]: /images/20221014/eb34b9e3dbfb46a69c6a133f354d5219.png