zhanghuiqing
/
official_revision
1
0
Çatalla 0
Kod Konular 0 Değişiklik İstekleri 0 Sürümler 0 Wiki Aktivite
Kaynağa Gözat

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

dev
Eddie 3 yıl önce
ebeveyn
898d7867b0
işleme
cc97a2578b
8 değiştirilmiş dosya ile 307 ekleme ve 94 silme
Görünümü Böl
Diff Seçenekleri
İstatistikleri Göster Yama Dosyasını İndir Diff Dosyasını İndir
  1. +5
    -0
      package-lock.json
  2. +1
    -0
      package.json
  3. +5
    -3
      src/utils/api/login.js
  4. +49
    -0
      src/utils/public.js
  5. +35
    -15
      src/utils/request.js
  6. +64
    -21
      src/views/Login.vue
  7. +144
    -49
      src/views/Register.vue
  8. +4
    -6
      vue.config.js

+ 5
- 0
package-lock.json Dosyayı Görüntüle

@@ -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",


+ 1
- 0
package.json Dosyayı Görüntüle

@@ -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",


+ 5
- 3
src/utils/api/login.js Dosyayı Görüntüle

@@ -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 //需要携带的参数
})
}
}



+ 49
- 0
src/utils/public.js Dosyayı Görüntüle

@@ -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);
}
}
}

+ 35
- 15
src/utils/request.js Dosyayı Görüntüle

@@ -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

+ 64
- 21
src/views/Login.vue Dosyayı Görüntüle

@@ -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>



+ 144
- 49
src/views/Register.vue Dosyayı Görüntüle

@@ -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 {


+ 4
- 6
vue.config.js Dosyayı Görüntüle

@@ -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': '/'
}
}
},


Yaz Önizleme
Yükleniyor…
İptal
Kaydet