项目基本登录功能

登录流程

vue前端

1. 在页面中点击登录，会触发对应的函数。可以在App组件中找到如下代码：

<li v-if="!this.$store.getters.getUser">
	<el-button type="text" @click="login">登录</el-button>
	<span class="sep">|</span>
	<el-button type="text" @click="register = true">注册</el-button>
</li>

//触发的login函数
login() {
      // 点击登录按钮, 通过更改vuex的showLogin值显示登录组件
      this.setShowLogin(true); //从vuex中映射过来的方法
    },

通过分析可知，login方法更改了vuex中的showLogin的值，从而控制登录组件的显示。

1. MyLogin.vue组件

• v-model获取用户信息

• 点击登录按钮，触发Login方法

• 在Login方法中，使用axios的post方法提交参数，并接收响应结果

// 点击登录触发
Login() {
  // 通过element自定义表单校验规则，校验用户输入的用户信息
  this.$refs["ruleForm"].validate(valid => {
    //如果通过校验开始登录
    if (valid) {
      // 发送ajax
      this.$axios.post("/users/login/", {
          user: this.LoginUser.name,
          pwd: this.LoginUser.pass,
        })
        .then(res => {
          console.log("@@登录的响应：", res)
          // 200代表登录成功，其他的均为失败
          if (res.data.code == 200) {
            // res.data为后端响应的json