Thinkphp+Vue前后端分离学习笔记（7）

再来看看这几个页面：

1. src/App.vue

这是主框架，它和public/index.html以及src/views下面的页面的关系是：

按访问路径，views下面相应的页面内容会替换App.vue的<router-view></router-view>

然后App.vue所有内容会替换index.html的<div id="app"></div>

所以App.vue是所有页面共用的框架，本例简单起见没有其他内容，只保留了<router-view></router-view>

<template>
  <router-view></router-view>
</template>

2. src/views/Register.vue 注册页面

<template>
  <div class="back">
    <el-form ref="form" :model="form" class="login-container">
      <h3 class="login-title">欢迎注册</h3>
      <el-form-item>
        <el-input placeholder="请输入账号" v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          placeholder="请输入密码"
          v-model="form.password"
          type="password"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          style="width:100%;background: #505458;border: none"
          @click="regist"
          >注册</el-button
        >
      </el-form-item>
      <p>{{ msg }} {{ count }}</p>
      <p>
        <center><a href="/login">登录</a></center>
      </p>
    </el-form>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      count: "", //倒数时显示秒数
      //初始化表单数据，还可以添加rules来验证表单，本例略
      form: {
        name: "",
        password: ""
      },
      msg: "" //用来显示后端传来的消息
    };
  },
  methods: {
    //跳转函数，注册成功后等待多少秒跳转到登录
    delaygo: function(t, p) {
      if (!this.timer) {
        this.count = t;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= t) {
            this.count--;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
            this.$router.push({
              path: p
            });
          }
        }, 1000);
      }
    },
    //注册函数
    regist: function() {
      let _this = this;
      axios.post("/api/index/register", _this.form).then(
        res => {
          _this.msg = res.data.msg;
          //console.log("res=>", res.data);
          if (res.data.result == "pass") {
            _this.form.name = "";
            _this.form.password = "";
            _this.msg = _this.msg + ", 10s 后跳转. ";
            _this.delaygo(10, "/login");
            //_this.$router.push("/login");
          } else {
            console.log("register fail");
          }
        },
        () => console.log("axios fail")
      );
    }
  }
};
</script>

<style>
body {
  margin: 0px;
  padding: 0;
}
.back {
  /*background:url("../assets/bg.jpg") no-repeat; */
  background-color: #0e0f11;
  background-position: center;
  height: 100%;
  width: 100%;
  background-size: cover;
  position: fixed;
}
.login-container {
  border-radius: 15px;
  background-clip: padding-box;
  margin: 90px auto;
  width: 350px;
  padding: 35px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #909399;
}
.login-title {
  text-align: center;
  margin: 0 auto 40px auto;
  color: #505458;
}
</style>

3. src/views/Login.vue 登录

<template>
  <div class="back">
    <el-form ref="form" :model="form" class="login-container">
      <h3 class="login-title">欢迎登录</h3>
      <el-form-item>
        <el-input placeholder="请输入账号" v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          placeholder="请输入密码"
          v-model="form.password"
          type="password"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          placeholder="验证码（60秒有效）"
          v-model="form.captcha"
        ></el-input>
        <br />
        <center>
          <img :src="captcha_img" @click.prevent="get_captcha" />
        </center>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          style="width:100%;background: #505458;border: none"
          @click="login"
          >登录</el-button
        >
      </el-form-item>
      <p>{{ msg }}</p>
      <p>
        <center><a href="/register">注册</a></center>
      </p>
    </el-form>
  </div>
</template>

<script>
import axios from "axios";
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      msg: "",
      form: {
        name: "",
        password: "",
        captcha: "", //用户输入的验证码
        captcha_tk: "" //验证码token，用来查询数据库
      },
      captcha_img: "" //后端传来的验证码图片数据base64编码
    };
  },
  mounted: function() {
    this.get_captcha(); //加载完即获取验证码
  },
  methods: {
    ...mapMutations(["changeLogin"]), //加载src/store/index.js里定义的函数，后面更新cookie或localStorage要用
    //登录函数
    login() {
      let _this = this;
      axios.post("/api/index/login", _this.form).then(
        res => {
          _this.msg = res.data.msg;
          //console.log("res=>", res);
          if (res.data.result == "pass") {
            // 将用户token保存到vuex中
            _this.changeLogin({
              Authorization: res.data.token,
              Uname: res.data.uname,
              Ltime: res.data.ltime
            });
            _this.$router.push("/home"); //成功跳到/home
          } else {
            console.log("login fail");
          }
        },
        () => console.log("axios fail")
      );
    },
    //获取验证码
    get_captcha: function() {
      let _this = this;
      axios
        .post("/api/index/get_captcha", { old_captcha: this.form.captcha_tk })
        .then(
          res => {
            _this.captcha_img = res.data.img; //更新验证码图片数据
            _this.form.captcha_tk = res.data.token; //更新验证码token到表单数据里，以便提交时一起发给后端
          },
          () => console.log("axios fail")
        );
    }
  }
};
</script>

<style>
body {
  margin: 0px;
  padding: 0;
}
.back {
  /*background: url("../assets/bg.jpg") no-repeat; */
  background-color: #0e0f11;
  background-position: center;
  height: 100%;
  width: 100%;
  background-size: cover;
  position: fixed;
}
.login-container {
  border-radius: 15px;
  background-clip: padding-box;
  margin: 90px auto;
  width: 350px;
  padding: 35px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #909399;
}
.login-title {
  text-align: center;
  margin: 0 auto 40px auto;
  color: #505458;
}
</style>

4. src/views/Logout.vue 登出

<template>
  <p>{{ msg }}</p>
</template>

<script>
import axios from "axios";
import cookie from "vue-cookies";
export default {
  data() {
    return {
      msg: ""
    };
  },
  mounted: function() {
    this.logout(); //加载即调用登出函数
  },
  methods: {
    //登出函数
    logout() {
      let _this = this;
      axios.post("/api/index/logout", {}).then(
        res => {
          //console.log("res=>", res.data);
          if (res.data.result == "pass") {
            //登出成功，清除cookie内容
            cookie.set("token", "", 0);
            cookie.set("name", "", 0);
            cookie.set("ltime", "", 0);
            _this.$router.push("/login"); //跳转登录页面
          } else {
            console.log("logout fail");
          }
        },
        () => console.log("axios fail")
      );
    }
  }
};
</script>

5. src/views/Home.vue 主页（登录才能访问）

请按实际写你要的功能

<template>
  <el-container>
    <el-header>
      Welcome {{ uname }} !
      <a href="/logout">登出</a>
    </el-header>
    <el-main>{{ msg }}</el-main>
  </el-container>
</template>
<script>
import axios from "axios";
import cookie from "vue-cookies";
export default {
  data() {
    return {
      msg: "please wait...",
      uname: cookie.get("name") //获取用户名
    };
  },
  mounted: function() {
    this.show(); //加载就调用，可按需要写你自己的内容
  },
  methods: {
    //演示用函数，从后台获取点啥
    show: function() {
      let _this = this;
      axios.get("/api/index/show").then(res => {
        //console.log("res=>", res);
        _this.msg = res.data.data;
      });
    }
  }
};
</script>
<style>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}
</style>

6. src/views/About.vue （不需要登录就能访问的例子）

<template>
  <div>
    <center><h1>This is an about page</h1></center>
  </div>
</template>

7. src/views/Err.vue 错误页面

<template>
  <div>
    <center><h1>Page Not Found</h1></center>
  </div>
</template>