对接注册，登录接口， 完善接口请求错误和正确信息提示

package-lock.json

@@ -8612,6 +8612,11 @@
         }
       }
     },
+    "js-cookie": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npm.taobao.org/js-cookie/download/js-cookie-2.2.1.tgz",
+      "integrity": "sha1-aeEG3F1YBolFYpAqpbrsN0Tpsrg="
+    },
     "js-message": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/js-message/-/js-message-1.0.7.tgz",

package.json

@@ -34,6 +34,7 @@
     "feather-icons": "^4.28.0",
     "highlight.js": "^10.1.1",
     "js-beautify": "^1.11.0",
+    "js-cookie": "^2.2.1",
     "litepicker": "^1.5.7",
     "lodash": "^4.17.20",
     "postcss-loader": "3",

src/utils/api/login.js

@@ -1,10 +1,12 @@
 
 import request from '@/utils/request'
 
-export function signUp (data){
+export function apost (url,data){
     return request({
-        url: '123',//自己的接口地址
+        url: url,//自己的接口地址
         method: 'post',//请求方法
         data //需要携带的参数
     })
-}
+}
+
+

src/utils/public.js

@@ -0,0 +1,49 @@
+/**
+ * 函数防抖 
+ * @param fn
+ * @param delay
+ * @returns {Function}
+ * @constructor
+ */
+export const Debounce = (fn, t) => {
+    let delay = t || 500;
+    let timer;
+    return function() {
+        let args = arguments;
+        if (timer) {
+            clearTimeout(timer);
+        }
+        timer = setTimeout(() => {
+            timer = null;
+            fn.apply(this, args);
+        }, delay);
+    }
+};
+
+
+/**
+ 1. 函数节流
+ 2. @param fn
+ 3. @param interval
+ 4. @returns {Function}
+ 5. @constructor
+ */
+export const Throttle = (fn, t) => {
+    let last;
+    let timer;
+    let interval = t || 500;
+    return function() {
+        let args = arguments;
+        let now = +new Date();
+        if (last && now - last < interval) {
+            clearTimeout(timer);
+            timer = setTimeout(() => {
+                last = now;
+                fn.apply(this, args);
+            }, interval);
+        } else {
+            last = now;
+            fn.apply(this, args);
+        }
+    }
+}

src/utils/request.js

@@ -1,41 +1,61 @@
- 
+
 import axios from 'axios'
- 
- 
+import { Message } from 'element-ui'
+
+
 const token = false
 // create an axios instance
 const service = axios.create({
-  baseURL: '/api',
+
   timeout: 80000 // request timeout
 })
- 
+
 // request interceptor
 service.interceptors.request.use(
- 
+  
+
   config => {
     // Do something before request is sent
     if (token) {
       // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
-      config.headers.Authorization = token 
-      
+      config.headers.Authorization = token
     }
     return config
   },
+  response=>{
+      console.log(response,'response')
+  },
   error => {
     // Do something with request error
     // console.log("出错啦",error) // for debug
-    Promise.reject(error)
+ 
   }
 )
- 
+
 // response interceptor
-service.interceptors.response.use(
-  response => response,
+service.interceptors.response.use(response => {
+
+ 
+  if (response.status != 200) {
+ 
+    Message.error(`${response.statusText} :${response.status}`);
  
+  }
+
+
+  return response.data
+},
   error => {
-    console.log('err' + error) // for debug
-    return Promise.reject(error)
+
+
+    if(error.response.status !== 200) {
+      Message.error(error.response.data.msg)
+    }
+   
+    
+
+    return Promise.reject(error.response)
   }
 )
- 
+
 export default service

src/views/Login.vue

@@ -23,8 +23,8 @@
             <div
               class="-intro-x text-white font-medium text-4xl leading-tight mt-10"
             >
-              A few more clicks to <br />
-              sign in to your account.
+              智莺 为创业者而生 <br />
+              智慧创业 智慧生活.
             </div>
             <div class="-intro-x mt-5 text-lg text-white">
               Manage all your e-commerce accounts in one place
@@ -40,7 +40,7 @@
             <h2
               class="intro-x font-bold text-2xl xl:text-3xl text-center xl:text-left"
             >
-              Sign In
+              登陆
             </h2>
             <div class="intro-x mt-2 text-gray-500 xl:hidden text-center">
               A few more clicks to sign in to your account. Manage all your
@@ -50,12 +50,14 @@
               <input
                 type="text"
                 class="intro-x login__input input input--lg border border-gray-300 block"
-                placeholder="Email"
+                placeholder="手机号码"
+                v-model="account.phone"
               />
               <input
                 type="password"
                 class="intro-x login__input input input--lg border border-gray-300 block mt-4"
-                placeholder="Password"
+                placeholder="密码"
+                v-model="account.psw"
               />
             </div>
             <div class="intro-x flex text-gray-700 text-xs sm:text-sm mt-4">
@@ -64,12 +66,13 @@
                   id="remember-me"
                   type="checkbox"
                   class="input border mr-2"
+                  v-model="account.Label"
                 />
                 <label class="cursor-pointer select-none" for="remember-me"
-                  >Remember me</label
+                  >记住密码</label
                 >
               </div>
-              <a href="">Forgot Password?</a>
+              <a href="">忘记密码?</a>
             </div>
             <div class="intro-x mt-5 xl:mt-8 text-center xl:text-left">
               <button
@@ -80,7 +83,7 @@
               </button>
               <button
                 class="button button--lg w-full xl:w-32 text-gray-700 border border-gray-300 mt-3 xl:mt-0 align-top"
-                @click="getSignUp "
+                @click="getSignUp"
               >
                 注册
               </button>
@@ -88,10 +91,10 @@
             <div
               class="intro-x mt-10 xl:mt-24 text-gray-700 text-center xl:text-left"
             >
-              By signin up, you agree to our <br />
-              <a class="text-theme-1" href="">Terms and Conditions</a>
+              通过注册，您同意我们的 <br />
+              <a class="text-theme-1" href="">条款和条件及</a>
               &
-              <a class="text-theme-1" href="">Privacy Policy</a>
+              <a class="text-theme-1" href="">隐私政策</a>
             </div>
           </div>
         </div>
@@ -102,7 +105,30 @@
 </template>
 
 <script>
+import Cookies from "js-cookie";
+import { apost } from "../utils/api/login";
 export default {
+  data() {
+    return {};
+  },
+  computed: {
+    account() {
+      if (Cookies.get("account")) {
+        let data = JSON.parse(Cookies.get("account"));
+        return {
+          phone: data.phone,
+          psw: data.psw,
+          Label: data.Label,
+        };
+      } else {
+        return {
+          phone: "",
+          psw: "",
+          Label: false,
+        };
+      }
+    },
+  },
   mounted() {
     cash("body").removeClass("app").addClass("login");
     // setTimeout(()=>{
@@ -110,26 +136,43 @@ export default {
     //   import("../utils");
     //   import("../assets/sass/app2.scss")
     // },3000)
-
-
   },
   methods: {
     getLogin: function () {
-      this.$router.push("/Dashboard");
+      if (!/^1(3|4|5|7|8)\d{9}$/.test(this.account.phone)) {
+        //正则校验手机号是否合法
+        return this.$message.error("手机号错误");
+      }
+      if (this.account.psw === "") {
+        return this.$message.error("请输入密码");
+      }
+
+      apost("/sign/in", {
+        phone: this.account.phone,
+        psw: this.account.psw,
+      })
+        .then((result) => {
+          if (result.code === 0) {
+            this.$router.push("/Dashboard");
+            this.$message.success('登陆成功')
+            if (this.account.Label) {
+              Cookies.set("account", this.account, { expires: 7 }); // 记住账号密码7天后过期
+            } else {
+              Cookies.remove("account");
+            }
+          }
+        })
+        .catch((err) => {});
     },
 
-    getSignUp: function(){
-      this.$router.push('/register')
-    }
+    getSignUp: function () {
+      this.$router.push("/register");
+    },
   },
 };
-
- 
 </script>
 
 <style lang="scss" scoped>
-
- 
 </style>
  
 

src/views/Register.vue

@@ -47,50 +47,51 @@
               e-commerce accounts in one place
             </div>
             <div class="intro-x mt-8">
-              <input
+              <div class="phone-box">
+                <input
+                  type="text"
+                  class="intro-x login__input input input--lg border border-gray-300 block mt-4"
+                  placeholder="手机号"
+                  v-model="info.phone"
+                  :disabled="info.phone_input"
+                />
+                <span class="getYZM" @click="sendMobile">{{
+                  btnMsg == null ? countNum + "s后重新发送" : btnMsg
+                }}</span>
+              </div>
+
+
+              <!-- <input
                 type="text"
                 class="intro-x login__input input input--lg border border-gray-300 block"
                 placeholder="账号"
-              />
+                v-model="info.input"
+              /> -->
               <!-- <input
                 type="text"
                 class="intro-x login__input input input--lg border border-gray-300 block mt-4"
                 placeholder="Last Name"
               /> -->
               <input
-                type="text"
+                type="password"
                 class="intro-x login__input input input--lg border border-gray-300 block mt-4"
                 placeholder="密码"
+                v-model="info.psw"
               />
-              <!-- <div class="intro-x w-full grid grid-cols-12 gap-4 h-1 mt-3">
-                <div class="col-span-3 h-full rounded bg-theme-9"></div>
-                <div class="col-span-3 h-full rounded bg-theme-9"></div>
-                <div class="col-span-3 h-full rounded bg-theme-9"></div>
-                <div
-                  class="col-span-3 h-full rounded bg-gray-200"
-                ></div>
-              </div>
-              <a
-                href=""
-                class="intro-x text-gray-600 block mt-2 text-xs sm:text-sm"
-                >What is a secure password?</a
-              > -->
               <input
-                type="text"
+                type="password"
                 class="intro-x login__input input input--lg border border-gray-300 block mt-4"
                 placeholder="密码确认"
+                v-model="info.psw2"
+              />
+
+
+              <input
+                type="text"
+                class="intro-x login__input input input--lg border border-gray-300 block mt-4"
+                placeholder="验证码"
+                v-model="info.code"
               />
-              <div class="phone-box">
-                <input
-                  type="text"
-                  class="intro-x login__input input input--lg border border-gray-300 block mt-4"
-                  placeholder="手机号"
-                  v-model="info.phone"
-                />
-                <span class="getYZM" @click="sendMobile">{{
-                  btnMsg == null ? countNum + "s后重新发送" : btnMsg
-                }}</span>
-              </div>
             </div>
             <div
               class="intro-x flex items-center text-gray-700 mt-4 text-xs sm:text-sm"
@@ -99,18 +100,27 @@
                 id="remember-me"
                 type="checkbox"
                 class="input border mr-2"
+                v-model="info.Label"
               />
               <label class="cursor-pointer select-none" for="remember-me"
-                >我同意保护</label
+                >我已阅读并同意 </label
               >
-              <a class="text-theme-1 ml-1" href="">隐私政策</a>
+              <a class="text-theme-1 ml-1" href="">隐私政策</a>和<a class="text-theme-1 ml-1" href="">服务条款</a>  
             </div>
             <div class="intro-x mt-5 xl:mt-8 text-center xl:text-left">
-              <button
+              <el-button
+                type="primary"
                 class="button button--lg w-full xl:w-32 text-white bg-theme-1 xl:mr-3 align-top"
+                @click="getRegister"
+                >注册</el-button
               >
-                注册
-              </button>
+
+              <!-- <button
+                class="button button--lg w-full xl:w-32 text-white bg-theme-1 xl:mr-3 align-top"
+        
+              >
+                
+              </button> -->
               <button
                 class="button button--lg w-full xl:w-32 text-gray-700 border border-gray-300 mt-3 xl:mt-0 align-top"
                 @click="getSignUp"
@@ -127,7 +137,10 @@
 </template>
 
 <script>
-import { signUp } from "../utils/api/login";
+import { apost } from "../utils/api/login";
+import lodash from "lodash";
+
+const l_that = this;
 
 export default {
   data() {
@@ -142,6 +155,12 @@ export default {
       btnMsg: "点击发送验证码",
       info: {
         phone: "",
+        input: "",
+        psw: "",
+        psw2: "",
+        Label: false,
+        phone_input: false,
+        code: "",
       },
     };
   },
@@ -152,7 +171,6 @@ export default {
     getSignUp: function () {
       this.$router.push("/");
     },
-
     // 倒计时
     countDown() {
       // 设置btn倒计时时显示的信息
@@ -175,28 +193,103 @@ export default {
         this.countNum--;
       }, 1000);
     },
-
-    // 获取验证码
-    sendMobile() {
-      signUp().then((res) => {
+    // 获取验证码 --- > 防抖
+    sendMobile: lodash.debounce(function () {
+      //获取输入手机号码
+      let phone = this.info.phone;
+      //正则校验手机号是否合法
+      if (!/^1(3|4|5|7|8)\d{9}$/.test(phone)) {
+        this.$message.error("手机号错误");
+        return;
+      }
+      apost("/sign/sms", {
+        phone: this.info.phone,
+      }).then((res) => {
         console.log(res);
-      }).catch(err=>{
-      
-      })
+        //触发定时器方法
+        this.countDown();
+        this.info.phone_input = true;
+      });
 
       if (this.btnMsg === null) {
         return;
       }
-      //获取输入手机号码
-      let phone = this.info.phone;
-      //正则校验手机号是否合法
-      if (!/^1(3|4|5|7|8)\d{9}$/.test(phone)) {
+    }, 200),
+
+    getRegister: lodash.debounce(function () {
+ 
+      // if (!/^[A-Za-z]{1}[A-Za-z0-9_-]{3,15}$/.test(this.info.input)) {
+      //   // 账号检验
+      //   this.$message.error(
+      //     "请输入正确的账号格式：必须是以字母开头，只能包含字母数字下划线和减号，4到16位"
+      //   );
+      //   return;
+      // }
+      // if (!/^(\w){6,20}$/.test(this.info.psw)) {
+      //   // 密码检验
+      //   this.$message.error(
+      //     "请输入正确的密码格式：只能输入6-20个字母、数字、下划线"
+      //   );
+      //   return;
+      // }
+
+
+      // if (!/^(\w){6,20}$/.test(this.info.psw2)) {
+      //   // 确认密码校验
+      //   this.$message.error(
+      //     "请输入正确的确认密码格式：只能输入6-20个字母、数字、下划线"
+      //   );
+      //   return;
+      // }
+
+
+
+      if (this.info.psw != this.info.psw2) {
+        // 密码校验2
+        this.$message.error("两次密码不同， 请重新输入");
+        return;
+      }
+
+
+
+      if (!/^1(3|4|5|7|8)\d{9}$/.test(this.info.phone)) {
+        //正则校验手机号是否合法
         this.$message.error("手机号错误");
         return;
       }
-      //触发定时器方法
-      this.countDown();
-    },
+      if (this.info.code === "") {
+        this.$message.error("请输入验证码");
+        return;
+      }
+      if (this.info.Label != true) {
+        this.$message.error("请同意我们的隐私政策条款协议");
+        return;
+      }
+      apost('/sign/up',{
+        phone: this.info.phone,
+        psw: this.info.psw,
+        sms_code: this.info.code
+      }).then(res=>{
+          console.log(res)
+          if(res.code === 0) {
+            // 注册成功
+             this.$alert('您已注册成功，点击确定按钮后将会跳转到登陆页面。', '提示', {
+                confirmButtonText: '确定',
+                callback: action => {
+                   this.$router.push("/");
+                }
+              });
+          }else {
+            this.$message.error(res.msg)  // 未知错误
+          }
+      }).catch(err=>{
+        console.log(err,'123')
+      })
+      
+
+
+   
+    }),
   },
 };
 </script>
@@ -214,6 +307,8 @@ export default {
   top: 13px;
   z-index: 999;
   cursor: pointer;
+  padding-left: 10px;
+  border-left: 1px solid rgb(235, 235, 235);
 }
 
 .getYZM:active {

vue.config.js

@@ -6,17 +6,15 @@ const { styles } = require("@ckeditor/ckeditor5-dev-utils");
 module.exports = {
 	devServer: {
 		open: true, //是否自动弹出浏览器页面
-		host: "localhost",
-		port: '8080',
 		https: false,
 		hotOnly: false,
 		proxy: {
-			'/api': {
-				target: 'http://localhost:5000', //API服务器的地址
+			'/': {
+				target: 'http://192.168.0.123:8080', //API服务器的地址 
 				ws: true, //代理websockets
 				changeOrigin: true, // 虚拟的站点需要更管origin
-				pathRewrite: {  //重写路径 比如'/api/aaa/ccc'重写为'/aaa/ccc'
-					'^/api': ''
+				pathRewrite: {   
+					'^/api': '/'
 				}
 			}
 		},