SPA项目开发之登录注册

最新推荐文章于 2024-10-01 20:12:28 发布

be honoured.IT

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量870

点赞数

文章标签： ajax javascript css3

本文链接：https://blog.csdn.net/qq_53601862/article/details/121280545

版权

本文介绍了SPA项目的登录注册实现，包括使用element-ui进行布局，axios进行前后端交互，解决ajax跨域问题和get/post请求的区别。还讨论了this指针导致的变量污染及其解决方案。

摘要由CSDN通过智能技术生成

一.spa项目完成登录注册布局

1.首先安装开发模块

npm install element-ui -S #安装element-ui模块

npm install axios -S #前后端数据交互

npm install qs -S #解决axios 的 get/post问题

npm install vue-axios -S #vue和axios的整合

2.在项目中src目录下找到main.js，并在指定位置添加三行代码

import ElementUI from 'element-ui' //新添加1
import 'element-ui/lib/theme-chalk/index.css' //新添加2 样式
 Vue.use(ElementUI)   //新添加3

3.测试
修改HelloWorld.vue添加elementUI组件查看效果，自行测试。

4. Vue+ElementUI设计登陆页面

登录页：

<template>
  <div class="login-wrap">
    <el-form :model="ruleForm" status-icon ref="ruleForm" class="demo-ruleForm login-container">
      <h3 style="text-align: center;">用户登录</h3>
      <el-form-item label="账号" prop="uname">
        <el-input type="password" v-model="ruleForm.uname" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="pwd">
        <el-input type="password" v-model="ruleForm.pwd" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item>
        <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple-dark">
              <el-button style="width: 100%;" type="primary" @click="submitForm('ruleForm')">提交</el-button>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple-dark">
              <el-link type="success" @click="toReg">用户注册</el-link>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple-dark">
              <el-link type="warning">忘记密码</el-link>
            </div>
          </el-col>
        </el-row>

      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: 'Login',
    data() {
      return {
        ruleForm: {
          uname: '',
          pwd: '',
        }
      }
    },
    methods: {
      submitForm() {
        let url = this.axios.urls.SYSTEM_USER_DOLOGIN;
        this.axios.post(url, this.ruleForm).then((response) => {
          console.log(response);
          if (response.data.code == 1) {
            this.$message({
              showClose: true,
              message: response.data.msg,
              type: 'success'
            });
          } else {
            this.$message({
              showClose: true,
              message: response.data.msg,
              type: 'error'
            });
          }
        }).catch(function(error) {
          console.log(error);
        });
      },
      toReg() {
        this.$router.push({
          path: '/Reg'
        });
      }
    }

  }
</script>
<style scoped>
  .login-wrap {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding-top: 10%;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjEzNjFweCIgaGVpZ2h0PSI2MDlweCIgdmlld0JveD0iMCAwIDEzNjEgNjA5IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0Ni4yICg0NDQ5NikgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+R3JvdXAgMjE8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2