spa项目完成登录注册

前言：今天要分享的知识是spa项目完成登录注册功能

码字不易，转载请说明！！！

---

目录

目标

一、安装开发模块

二、登录注册布局

①使用element-ui，引入main.js配置（注意位置，css要在js前面，如新添加二）

​②登录注册页面布局（components：放公共组件   views：放业务组件）Login.vue/Reg.vue（两页面基本一致）

③ 配置路由

效果展示

三、项目完成登录功能（实现前后端分离，需要后端代码请私信我）

①新建api目录，导入action.js文件  对请求的地址的封装

②实现提交方法（url为路径、this.ruleForm为参数，resp为后台数据）

四、指针污染问题

五、ajax 跨域问题

①什么是跨域

②axios跨域问题

六、axios 的 get/post 的区别（ qs ）

①什么是qs

②将http.js导入api目录中

③axios的两种配置

---

目标

1、spa 项目完成登录注册布局
2、Spa 项目完成登录功能
3、This 指针带来的变量污染
4、ajax 跨域问题
5、axios 的 get/post 的区别（ qs ）

一、安装开发模块

在spa项目目录下的黑窗口依次执行以下四条命令

npm install element-ui -S  （element-ui依赖）

 npm install axios -S         （Ajax依赖）

 npm install qs -S    （get/post请求有关）

npm install vue-axios -S    （整合组件）

如果途中下载失败，打开项目路径删除相关模块，重新下载 

执行完之后在项目package.json中会出现相关依赖

 

二、登录注册布局

①使用element-ui，引入main.js配置（注意位置，css要在js前面，如新添加二）

②登录注册页面布局（components：放公共组件   views：放业务组件）Login.vue/Reg.vue（两页面基本一致）

<template>
  <div class="login-wrap">
    <el-form :model="ruleForm" label-width="100px" class="demo-ruleForm login-container">
      <h3 style="text-align: center;">用户登录</h3>
      <el-form-item label="用户名" prop="uname">
        <el-input type="uname" v-model="ruleForm.uname" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="pwd">
        <el-input type="pwd" 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="doSub">提交</el-button>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple-dark">
              <el-link type="primary" @click="toReg">用户注册</el-link>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple-dark">
              <el-link type="primary">忘记密码</el-link>
            </div>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        ruleForm: {
          uname: '',
          pwd: '',
        },
      }
    },
    methods: {
      toReg() {

        this.$router.push({
          path: '/Reg',
        })
      },
      doSub() {
        //$.ajax({url,succ})
        let url = this.axios.urls.SYSTEM_USER_DOLOGIN;
        //箭头函数解决了this指针污染问题
        this.axios.post(url, this.ruleForm).then((resp) => {
          console.log(resp);
          if (resp.data.code == 1) {
            this.$message({
              message: resp.data.msg,
              type: 'success'
            });
            this.$router.push({path:'AppMain'});
          } else {
            this.$message({
              message: resp.data.msg,
              type: 'warning'
            });
          }

        }).catch(function(error) {
          console.log(error);
        });
      }
    }
  }
</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+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iQW50LURlc2lnbi1Qcm8tMy4wIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0i6LSm5oi35a+G56CB55m75b2VLeagoemqjCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTc5LjAwMDAwMCwgLTgyLjAwMDAwMCkiPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXAtMjEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDc3LjAwMDAwMCwgNzMuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAtMTgiIG9wYWNpdHk9IjAuOCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNzQuOTAxNDE2LCA1NjkuNjk5MTU4KSByb3RhdGUoLTcuMDAwMDAwKSB0cmFuc2xhdGUoLTc0LjkwMTQxNiwgLTU2OS42OTkxNTgpIHRyYW5zbGF0ZSg0LjkwMTQxNiwgNTI1LjE5OTE1OCkiPgogICAgICAgICAgICAgICAgICAgIDxlbGxpcHNlIGlkPSJPdmFsLTExIiBmaWxsPSIjQ0ZEQUU2IiBvcGFjaXR5PSIwLjI1IiBjeD0iNjMuNTc0ODc5MiIgY3k9IjMyLjQ2ODM2NyIgcng9IjIxLjc4MzA0NzkiIHJ5PSIyMS43NjYwMDgiPjwvZWxsaXBzZT4KICAgICAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC0zIiBmaWxsPSIjQ0ZEQUU2IiBvcGFjaXR5PSIwLjU5OTk5OTk2NCIgY3g9IjUuOTg3NDY0NzkiIGN5PSIxMy44NjY4NjAxIiByeD0iNS4yMTczOTEzIiByeT0iNS4yMTMzMDk5NyI+PC9lbGxpcHNlPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0zOC4xMzU0NTE0LDg4LjM1MjAyMTUgQzQzLjg5ODQyMjcsODguMzUyMDIxNSA0OC41NzAyMzQsODMuNjgzODY0NyA0OC41NzAyMzQsNzcuOTI1NDAxNSBDNDguNTcwMjM0LDcyLjE2NjkzODMgNDMuODk4NDIyNyw2Ny40OTg3ODE2IDM4LjEzNTQ1MTQsNjcuNDk4NzgxNiBDMzIuMzcyNDgwMSw2N