创建项目
入口文件
main.js
1.路由
2.vuex
3.vant
4.axios全局使用
5.elementUI
6.common.css公共样式文件
7.filters.js (放入到新创建util文件夹中,引入到main.js)
8.一些好用的方法放到 plugins.js (放入到新创建util文件夹中,引入到main.js)
页面级vue组件
统一放到 views文件夹中
登录相关的都放在登录文件夹里,首页都放在首页文件夹里。
比如:
login:在 views 文件夹中创建一个login文件夹
把相关注册 忘记密码 登录等vue文件都放进这个login文件夹中
组建级vue组件
所有组件类型的vue文件,放在components中管理
主要是存放一些可以复用的组件,比如头部组件,轮播图组件等等。
Axios封装api和携带token,devicetype,deviceid
封装API主要的是可以更好的管理请求数据
封装步骤如下:
1、在src下创建一个utils文件夹
2、在utils文件夹下创建两个js文件request.js文件用来封装我们的axios,api.js用来统一管理我们的接口。
封装的步骤
request.js
import axios from 'axios';
let deviceid = null
let id = localStorage.getItem("deviceid")
if (id) {
deviceid = id
} else {
deviceid = Guid.NewGuid().ToString("D")
}
localStorage.setItem("deviceid", deviceid)
let config = {
baseURL:
timeout: 60 * 1000,
};
const _axios = axios.create(config);
_axios.interceptors.request.use(
function (config) {
Toast.loading({
message: '加载中...',
});
let token = sessionStorage.getItem("token")
if (token) {
config.headers.Authorization = `Bearer ${token}`
}
config.headers.devicetype = "H5"
config.headers.deviceid = deviceid
return config;
},
function (error) {
return Promise.reject(error);
}
);
_axios.interceptors.response.use(
function (response) {
Toast.clear()
return response;
},
function (error) {
return Promise.reject(error);
}
);
export default _axios;
api.js
import axios from "./request.js";
export function get(url, data) {
return new Promise((resolve, reject) => {
axios.get(url, {params: data}).then(res => {
resolve(res.data);
})
.catch(err => {
reject(err.data);
});
});
}
export function post(url, data) {
return new Promise((resolve, reject) => {
axios.post(url, data).then(res => {
resolve(res.data);
})
.catch(err => {
reject(err.data);
});
});
}
export function put(url, data) {
return new Promise((resolve, reject) => {
axios.put(url, data).then(res => {
resolve(res.data);
}).catch(err => {
reject(err.data);
});
});
}
export const AjaxLogin = data => post(url:地址路径, data:传递的参数);
登录
async onSubmit(values) {
let pattern = /^1[3|4|5|7|8][0-9]{9}$/;
let pass = /^[0-9]{6,12}$/;
if (pattern.test(this.mobile)) {
if (pass.test(this.password)) {
let res = await AjaxLogin({
mobile: this.mobile,
password: this.password,
type: this.type
});
if (res.code == 200) {
sessionStorage.setItem("token", res.data.remember_token);
this.$toast.success("登录成功");
this.$router.push("/person");
}
console.log(res);
} else {
this.$toast("密码必须是6-12位的数字");
}
} else {
this.$toast("请输入正确的手机号");
}
}
},
携带的token,devicetype,deviceid 请看上文封装request.js
密码登录
密码登陆是用户已经注册过才可以使用一种登录方式。
写登录的注意事项
正则验证 在data创建的变量正则不能加引号,加引号就变成字符串了,验证时就会错误
验证码注册登录
只有注册之后才能使用密码登录功能
注册会使用到验证码 点击获取验证码之后会提示已经发送,获取验证码会变成灰色和有个60s的倒计时
首次登录
首次注册登录跳转到设置密码页面,设置密码页面可以跳过或者设置完跳转到设置个人信息页面,首次登录会跳转到首页,不是首次登录会跳转到我的页面