zxd's Blog

项目

https://www.yuque.com/u158868/ng9lzm/dpnfzvl31qep5yty?singleDoc# 《项目PC+移动》密码：an1k

vw适配

Vant 2 - Mobile UI Components built on Vue

javascript

yarn add postcss-px-to-viewport@1.1.1 -D
pnpm i postcss-px-to-viewport@1.1.1 -D

vite => postcss.config.cjs ; 注意, 因为我们是vite搭建的项目，配置文件.js会报错

javascript

module.exports = {
    plugins: {
        'postcss-px-to-viewport': {
            viewportWidth: 375
        }
    }
}

一级路由配置

javascript

import Vue from 'vue'
import VueRouter from 'vue-router'

// Vite项目，.vue
import Login from '@/views/login.vue'
import Register from '@/views/register.vue'
import Detail from '@/views/detail.vue'
import Layout from '@/views/layout.vue'
Vue.use(VueRouter)

const router = new VueRouter({
    routes: [
        { path: '/login', component: Login },
        { path: '/register', component: Register },
        { path: '/detail/:id', component: Detail },
        {
            path: '/',
            component: Layout
        }
    ]
})

export default router

vue

<template>
    <div id="app">
        <!-- 一级路由出口 -->
        <router-view />
    </div>
</template>

<script>
export default {
    async created() {}
}
</script>

底部导航tabbar

javascript

<template>
    <div class="layout-page">
        <router-view></router-view>

        <!--  van-tabbar路由模式 设置 route属性 -->
        <van-tabbar route>
            <van-tabbar-item icon="home-o">标签</van-tabbar-item>
            <van-tabbar-item icon="search">标签</van-tabbar-item>
            <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
            <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
export default {
    name: 'LayoutPage'
}
</script>

<style lang="less" scoped></style>

二级路由

javascript

import Vue from 'vue'
import VueRouter from 'vue-router'

// Vite项目，.vue
import Login from '@/views/login.vue'
import Register from '@/views/register.vue'
import Detail from '@/views/detail.vue'
import Layout from '@/views/layout.vue'
// 二级路由
import Like from '@/views/second/like.vue'
import Article from '@/views/second/article.vue'
import Collect from '@/views/second/collect.vue'
import User from '@/views/second/user.vue'
Vue.use(VueRouter)

const router = new VueRouter({
    routes: [
        { path: '/login', component: Login },
        { path: '/register', component: Register },
        { path: '/detail/:id', component: Detail },
        {
            path: '/',
            component: Layout,
            // 重定向
            redirect: '/article',
            // 二级路由配置
            children: [
                { path: '/article', component: Article },
                { path: '/like', component: Like },
                { path: '/collect', component: Collect },
                { path: '/user', component: User }
            ]
        }
    ]
})

export default router

vue

<template>
    <div class="layout-page">
        <router-view></router-view>

        <!--  van-tabbar路由模式 设置 route属性 -->
        <van-tabbar route>
            <van-tabbar-item to="/article" icon="home-o">面经</van-tabbar-item>
            <van-tabbar-item to="/collect" icon="search">收藏</van-tabbar-item>
            <van-tabbar-item to="/like" icon="friends-o">喜欢</van-tabbar-item>
            <van-tabbar-item to="/user" icon="setting-o">我的</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
export default {
    name: 'LayoutPage'
}
</script>

<style lang="less" scoped></style>

样式穿透

javascript

<style lang="less" scoped>
// 样式穿透
// 样式设置不上？想去修改子组件样式的时候
// /deep/   >>> stylus
// ::v-deep
::v-deep .van-tabbar-item--active {
    color: orange;
}
</style>

登录页样式

vue

<template>
    <div class="login-page">
        <van-nav-bar title="面经H5登录" />

        <van-form @submit="onSubmit">
            <van-field
                v-model="username"
                name="用户名"
                label="用户名"
                placeholder="用户名"
                :rules="[{ required: true, message: '请填写用户名' }]"
            />
            <van-field
                v-model="password"
                type="password"
                name="密码"
                label="密码"
                placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' }]"
            />
            <div style="margin: 16px">
                <van-button square block type="info" native-type="submit"
                    >提交</van-button
                >
            </div>
        </van-form>
    </div>
</template>

<script>
export default {
    name: 'LoginPage',
    data() {
        return {
            username: '',
            password: ''
        }
    },
    methods: {
        onSubmit(values) {
            console.log('submit', values)
        }
    }
}
</script>

<style lang="less" scoped>
.link {
    color: #069;
    font-size: 12px;
    padding-right: 20px;
    float: right;
}
</style>

请求request模块封装

接口文档：https://apifox.com/apidoc/project-934563/api-20384513 axios文档：https://www.axios-http.cn/docs/instance

新建一个utils/request.js

javascript

import axios from 'axios'
const instance = axios.create({
    baseURL: 'http://interview-api-t.itheima.net',  // 基地址
    timeout: 5000 // 请求超时
})

export default instance

注册页调用试一试

javascript

import request from '@/utils/request.js'
export default {
    name: 'RegisterPage',
    data() {
        return {
            username: '',
            password: ''
        }
    },
    methods: {
        // 点击提交按钮，从表单上获取数据，发送请求
        async onSubmit(values) {
            console.log('submit', values)
            const res = await request.post('/user/register', values)
            console.log(res)
        }
    }
}

toast提示

javascript

async onSubmit(values) {
    try {
        console.log('submit', values)
        const res = await request.post('/h5/user/register', values)
        // 1. 提示注册成功
        this.$toast.success({
            message: '注册成功',
            duration: 1000
        })
        // 2. 跳到登录页
        this.$router.push('/login')
    } catch (err) {
        // 3. 注册失败，提示
        this.$toast.fail(err.response.data.message)
    }
}

响应拦截

javascript

import axios from 'axios'
import { Toast } from 'vant'
const instance = axios.create({
    baseURL: 'http://interview-api-t.itheima.net',
    timeout: 5000
})
// 添加请求拦截器
instance.interceptors.request.use(
    function (config) {
        // 在发送请求之前做些什么
        return config
    },
    function (error) {
        // 对请求错误做些什么
        return Promise.reject(error)
    }
)

// 添加响应拦截器
instance.interceptors.response.use(
    function (response) {
        // 2xx 范围内的状态码都会触发该函数。
        // 对响应数据做点什么
        return response
    },
    function (error) {
        console.log(error)
        if (error.response) {
            // this.$toast()  js文件中不能使用这个this.$toast this不是指向的vm
            Toast(error.response.data.message)
        }
        // 超出 2xx 范围的状态码都会触发该函数。
        // 对响应错误做点什么
        return Promise.reject(error)
    }
)
export default instance

封装登录api/user.js

javascript

import request from '@/utils/request.js'
// 登录
export const login = (params) => {
    // 发送登录的请求
    return request.post('/h5/user/login', params)
}

// 注册
export const regist = () => {}

vue

import { login } from '@/api/user.js'
export default {
    name: 'LoginPage',
    data() {
        return {
            username: '',
            password: ''
        }
    },
    methods: {
        async onSubmit(values) {
            try {
                // 1. 发送请求
                const res = await login(values)
                console.log(res)
                // console.log('submit', values)
                // 2. 如果请求成功，提示
                this.$toast('登录成功')
                // 3. 跳转到首页  /
                this.$router.push('/')
            } catch (err) {
                console.log(err)
            }
        }
    }
}
</script>

极客园PC项目

el-form表单验证

自定义验证

http://geek.itheima.net/ --> 演示地址上自己发送一条信息来测试登录

javascript

13811111111

项目 ​

vw适配 ​

一级路由配置 ​

底部导航tabbar ​

二级路由 ​

样式穿透 ​

登录页样式 ​

请求request模块封装 ​

toast提示 ​

响应拦截 ​

封装登录api/user.js ​

极客园PC项目 ​

el-form表单验证 ​

自定义验证 ​

发送短信验证 ==》 login.vue ​

项目

vw适配

一级路由配置

底部导航tabbar

二级路由

样式穿透

登录页样式

请求request模块封装

toast提示

响应拦截

封装登录api/user.js

极客园PC项目

el-form表单验证

自定义验证

发送短信验证 ==》 login.vue