一、基于VueClig创建项目架子
新建一个文件夹
打开它的控制台
输入vue create 项目名
二、清理项目目录
三、实现vant组件库的按需引入
进入vant官网：
进行vant组件全局注册：
在src文件夹下创建utils文件夹专门用于存放项目中用到的工具方法
src/utils/vant-ui.js
eg；
再将该文件引入到入口文件main.js中
四、postcss插件实现vw适配
npm install postcss-px-to-viewport --save-dev
五、新建styles文件夹用于存放项目通用样式
src/styles/common.less文件专门用于存放项目通用样式
然后再把样式文件引入到入口文件main.js中
六、二次封装axios，并完成在响应拦截器中统一处理错误信息，在请求拦截器中统一给请求添加token信息，在请求拦截器中实现打开发送请求之前出现的loading效果，在响应拦截器中实现关闭先前打开的loading效果。
utils/request.js
// 进行二次封装axios
// 二次封装axios是在原有的axios基础上进行的，所以需要先引入原有的axios
import axios from 'axios'
import { Toast } from 'vant'
import store from '@/store/index'
// 创建二次封装后的axios实例，需要用到其本身的create方法
const instance = axios.create({
// 修改基地址
baseURL: 'http://smart-shop.itheima.net/index.php?s=/api',
timeout: 5000,
headers: { platform: 'H5' }
})
// 配置请求拦截器 请求拦截器的作用：在发送请求之前，处理一些业务
instance.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
//在请求拦截器中打开loading,这样每次请求之前都会显示loading效果
Toast.loading({
message: '请求中...',
forbidClick: true,
loadingType: 'spinner',
duration: 0
})
//统一携带token请求信息，由于大多数接口在接受请求之前，都需要检查token信息，因此可以给发送的请求统一配置token信息，在请求拦截器中进行统一配置。
const token = store.getters.token
if (token) {
config.headers['Access-Token'] = token
config.headers.platform = 'H5'
}
return config
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error)
})
// 配置响应拦截器 响应拦截器的作用：在获取到请求的数据之后，处理一些业务
instance.interceptors.response.use(function (response) {
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么
// 因为在发送请求的过程中，可能会出现很多错误。所以在项目开发中，决定在响应拦截器中统一处理在发送请求过程中出现的问题。
// 首先发送请求，调用封装好的接口函数
// 获取数据成功时执行的代码
// 由于每次发送请求，都有可能或出现错误，因此需要统一处理错误信息
// 获取到的数据先通过响应拦截器处理，在到达浏览器
// 因此在响应拦截器中统一处理错误信息
const res = response.data
console.log(res)
if (res.status !== 200) {
// 当res.status!==200时，则说明返回的数据出现了错误
// 当返回的数据出现错误时，需要先弹出错误信息，在抛出错误
Toast(res.message)
return Promise.reject(res.message)
} else {
//关闭loading效果
Toast.clear()
}
return res
}, function (error) {
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
// 获取数据失败时执行的代码
return Promise.reject(error)
})
// 导出配置好的axios实例
export default instance
七、封装接口方法
src/api文件夹专门用于存放封装好的接口方法
eg:
引入二次封装好的axios实例request
八、vue2中实现发送请求
export default {
name:'',
data(){
return {
数据名1：''
数据名2：''
...
}
},
methods:{
方法名一(){}
...
}
methods:{
async getPicCode () {
const res = await getPicCode()
this.picUrl = res.data.base64 // 存储地址
this.picKey = res.data.key
this.$toast('获取图形验证码成功')
},
async created(){
//在vue2中一般是在created声明周期函数中调用封装好的函数来调用接口，发送请求，获取数据
this.getPicCode()
}
九、实现项目中的登录功能
<template>
<div>
<van-nav-bar title="会员登录" left-arrow @click-left="$router.go(-1)" />
<div class="container">
<div class="title">
<h3>手机号登录</h3>
<p>未注册的手机号登录后将自动注册</p>
</div>
<div class="form">
<div class="form-item">
<input class="inp" v-model="mobile" maxlength="11" placeholder="请输入手机号码" type="text">
</div>
<div class="form-item">
<input v-model="picCode" class="inp" maxlength="5" placeholder="请输入图形验证码" type="text">
<img v-if="picUrl" :src="picUrl" alt="" @click="getPicCode()">
</div>
<div class="form-item">
<input class="inp" v-model="msgCode" placeholder="请输入短信验证码" type="text">
<button @click="getCode()">{{ second===totalSecond?'获取短信验证码':second+'秒后重新发送' }}</button>
</div>
</div>
<div class="login-btn" @click="login()">登录</div>
</div>
</div>
</template>
<script>
// 在登录页组件中，需要向服务器发送请求。因此需要引入二次封装后的axios实例
import { getPicCode, getMsgCode, codeLogin } from '@/api/login'
export default {
name: 'LoginIndex',
data () {
return {
picCode: '', // 这里是用户输入的图形验证码
picKey: '', // 这里是获取到的图片的唯一标识
picUrl: '', // 这里是用户获取到的图片的路径
totalSecond: 60, // 总倒计时
second: 60, // 当前倒计时
timer: null, // 定时器
mobile: '',
msgCode: ''
}
},
methods: {
async getPicCode () {
const res = await getPicCode()
this.picUrl = res.data.base64 // 存储地址
this.picKey = res.data.key
this.$toast('获取图形验证码成功')
},
async getCode () {
if (!this.validFn()) {
return
}
if (!this.timer && this.second === this.totalSecond) {
await getMsgCode(this.picCode, this.picKey, this.mobile)
this.$toast('发送成功，请注意查收')
this.timer = setInterval(() => {
this.second--
if (this.second <= 0) {
this.timer = null
this.second = this.totalSecond
clearInterval(this.timer)
}
}, 1000)
}
},
//验证表单中输入的内容是否合格
validFn () {
const reg1 = /^1[3-9][0-9]{9}$/
if (!reg1.test(this.mobile)) {
this.$toast('请输入正确的手机号')
return false
}
const reg2 = /^\w{4}$/
if (!reg2.test(this.picCode)) {
this.$toast('请输入正确的图形验证码')
return false
}
return true
},
async login () {
if (!this.validFn()) {
return false
}
const reg3 = /^[0-9]{6}$/
if (!reg3.test(this.msgCode)) {
this.$toast('请输入正确的手机验证码')
return false
}
const res = await codeLogin(this.mobile, this.msgCode)
this.$store.commit('user/setUserInfo', res.data)
this.$toast('登陆成功')
// 先进行判断是否有参数地址传来
// 若有，则说明是从其他页面拦截而来，登陆成功后，需要回跳到原页面
// 否则，就直接跳转回首页
// 判断有无回跳地址
const url = this.$route.query.backUrl || '/'
this.$router.replace(url)
}
},
async created () {
this.getPicCode()
},
destroyed () {
clearInterval(this.timer)
}
}
</script>
<style lang="less" scoped>
.container {
padding: 49px 29px;
.title {
margin-bottom: 20px;
h3 {
font-size: 26px;
font-weight: normal;
}
p {
line-height: 40px;
font-size: 14px;
color: #b8b8b8;
}
}
.form-item {
border-bottom: 1px solid #f3f1f2;
padding: 8px;
margin-bottom: 14px;
display: flex;
align-items: center;
.inp {
display: block;
border: none;
outline: none;
height: 32px;
font-size: 14px;
flex: 1;
}
img {
width: 94px;
height: 31px;
}
button {
height: 31px;
border: none;
font-size: 13px;
color: #cea26a;
background-color: transparent;
padding-right: 9px;
}
}
.login-btn {
width: 100%;
height: 42px;
margin-top: 39px;
background: linear-gradient(90deg,#ecb53c,#ff9211);
color: #fff;
border-radius: 39px;
box-shadow: 0 10px 20px 0 rgba(0,0,0,.1);
letter-spacing: 2px;
display: flex;
justify-content: center;
align-items: center;
}
}
</style>
十、实现全局前置导航守卫
如果用户当前处于未登录状态，去访问网站中的一些页面时，是无法访问的，此时需要做出拦截处理，此时将强制跳转到“登录页面”。
在router/index.js中进行路由拦截处理
十一、封装本地存储方法，封装成工具方法存放在utils文件夹下
utils/storage.js
eg:
