添加注册登录接口

src/main.js

@@ -2,11 +2,13 @@ import Vue from "vue";
 import App from "./App.vue";
 import router from "./router";
 import store from "./store";
+import axios from "axios";
 import ElementUI from "element-ui";
 import "element-ui/lib/theme-chalk/index.css";
 
 Vue.use(ElementUI);
 Vue.config.productionTip = false;
+axios.defaults.baseURL = "http://";
 
 new Vue({
   router,

src/router/index.js

@@ -5,21 +5,27 @@ import routeList from "@/router/routerList.js";
 import HomeView from "@/layout/index.vue";
 import Login from "../views/login/login.vue";
 import Is404 from "../views/components/404.vue";
+import Register from "../views/login/register.vue";
 
 Vue.use(VueRouter);
 
 const routes = [
   {
-    path: "/",
+    path: "/primary1_1",
     name: "Index",
     redirect: "/primary1_1",
     component: HomeView,
   },
   {
-    path: "/login",
+    path: "/",
     name: "login",
     component: Login,
   },
+  {
+    path: "/register",
+    name: "register",
+    component: Register,
+  },
   {
     path: "*",
     name: "404",

src/store/index.js

@@ -5,10 +5,19 @@ Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: {
+    email: "",
+    username: "",
+    islogin: false,
   },
   getters: {
   },
   mutations: {
+    login(){
+      this.state.islogin = true;
+    },
+    logout(){
+      this.state.islogin = false;
+    },
   },
   actions: {
   },

src/views/login/login.vue

 <template>
     <div>
         用户登录
+      <input
+          type="text"
+          class="input-text error"
+          placeholder="电子邮箱"
+          data-type="account"
+          v-model="loginForm.email" />
+
+      <input
+          type="text"
+          class="input-text error"
+          placeholder="密码"
+          data-type="password"
+          v-model="loginForm.password" />
+
+      <button type="primary" roundsize="large" @click="login">
+        <p>登录</p>
+      </button>
     </div>
 </template>
 
+
 <script>
+import store from "../../store"
 export default {
-    name: 'DishdaVueLogin',
+    name: 'LoginView',
 
     data() {
         return {
-            
+          loginForm: {
+            email: "",
+            password: "",
+          },
         };
     },
-
+    store,
     mounted() {
         
     },
 
     methods: {
-        
+      login: function () {
+        if (this.loginForm.email === "" || this.loginForm.password === "") {
+          this.$message.warning("邮箱和密码不能为空！");
+          return;
+        }
+        let formData = new FormData();
+        formData.append("email", this.loginForm.email);
+        formData.append("password", this.loginForm.password);
+        this.$axios({
+          method: "post" /* 指明请求方式，可以是 get 或 post */,
+          url: "/login" /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */,
+          data: formData,
+        })
+            .then((res) => {
+              /* res 是 response 的缩写 */
+              switch (res.data.errno) {
+                case 100000:
+                  localStorage.clear();
+                  console.log(res.data);
+                  this.$store.state.email = this.loginForm.email;
+                  this.$store.state.user_name=res.data.post.name;
+                  this.$message.success("登录成功！");
+                  this.$store.commit('login');//这个函数会修改islogin全局变量的值，当然也可以直接修改
+                  /* 将后端返回的 user 信息使用 vuex 存储起来 */
+                  /* 从 localStorage 中读取 preRoute 键对应的值 */
+                  //const history_pth = localStorage.getItem('preRoute');
+                  /* 若保存的路由为空或为注册路由，则跳转首页；否则跳转前路由（setTimeout表示1000ms后执行） */
+                  this.$router.push("/primary1_1");
+                  break;
+                case 100002:
+                  this.$message.error("用户不存在或未注册!");
+                  break;
+                case 100003:
+                  this.$message.error("邮箱或密码错误！");
+                  break;
+                case 100004:
+                  this.$message.error("已经登录，请勿重复登录！");
+                  break;
+                default:
+                  this.$message.error("其它错误！");
+              }
+            })
+            .catch((err) => {
+              console.log(err); /* 若出现异常则在终端输出相关信息 */
+            });
+      },
     },
 };
 </script>

src/views/login/register.vue

+<template>
+<div>
+  注册
+  <input
+      type="text"
+      class="input-text error"
+      placeholder="电子邮箱"
+      data-type="account"
+      v-model="regForm.email" />
+  <input
+      type="text"
+      class="input-text error"
+      placeholder="真实姓名"
+      v-model="regForm.true_name"
+  />
+  <input
+      type="text"
+      class="input-text error"
+      placeholder="密码"
+      data-type="password"
+      v-model="regForm.pwd" />
+
+  <button type="primary" roundsize="large" @click="register">
+    <p>注册</p>
+  </button>
+</div>
+</template>
+
+<script>
+export default {
+  name: "RegisterView",
+  data() {
+    return {
+      regForm: {
+        email: "",
+        true_name: "",
+        pwd: "",
+      },
+    };
+  },
+  methods:{
+    register: function () {
+      if (
+          this.regForm.email === "" ||
+          this.regForm.true_name === "" ||
+          this.regForm.pwd === "")
+      {
+        this.$message.error("信息尚未填写完整！");
+        return;
+      }
+      if(this.regForm.pwd1.length<6)
+      {
+        this.$message.error("密码长度太短！");
+        return;
+      }
+      let formData = new FormData();
+      formData.append("truename", this.regForm.true_name);
+      formData.append("email", this.regForm.email);
+      formData.append("password", this.regForm.pwd);
+
+      this.$axios({
+        method: "post" /* 指明请求方式，可以是 get 或 post */,
+        url: "/register" /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */,
+        data: formData,
+      })
+          .then((res) => {
+            /* res 是 response 的缩写 */
+            switch (res.data.errno) {
+              case 100000:
+                this.$message.success("注册成功！");
+                setTimeout(() => {
+                  this.$router.push("/login");
+                }, 500);
+                break;
+              case 100004:
+                this.$message.error("邮箱已被注册!");
+                break;
+              case 100006:
+                this.$message.error("用户信息内容缺失或有误!");
+                break;
+              case 100002:
+                this.$message.error("用户名已存在！");
+                break;
+              case 100003:
+                this.$message.error("邮箱格式有误！");
+                break;
+              case 100005:
+                this.$message.error("两次密码不一致！");
+                break;
+              case 100001:
+                this.$message.error("请求格式有误，不是POST！");
+                break;
+              default:
+                this.$message.error("其它错误！");
+            }
+          })
+          .catch((err) => {
+            console.log(err); /* 若出现异常则在终端输出相关信息 */
+          });
+    },
+  },
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file