面经H5端-Vant（上）
面经 H5 端 - Vant（上）
项目创建目录初始化
vue-cli 建项目
安装脚手架 (已安装)
npm i @vue/cli -g
创建项目
vue create hm-vant-h5
- 选项
Vue CLI v5.0.4
? Please pick a preset: (Use arrow keys)
Default ([Vue 3] babel, eslint)
Default ([Vue 2] babel, eslint)
> Manually select features 选自定义
- 手动选择功能
- 选择vue的版本
3.x
> 2.x
- 是否使用history模式
- 选择css预处理
- 选择eslint的风格 （eslint 代码规范的检验工具，检验代码是否符合规范）
- 比如：const age = 18; => 报错！多加了分号！后面有工具，一保存，全部格式化成最规范的样子
- 选择校验的时机 （直接回车）
- 选择配置文件的生成方式 （直接回车）
- 是否保存预设，下次直接使用？ => 不保存，输入 N
- 等待安装，项目初始化完成
- 启动项目
npm run serve
ESlint代码规范
代码规范：一套写代码的约定规则。例如：赋值符号的左右是否需要空格？一句结束是否是要加;？…
没有规矩不成方圆
ESLint:是一个代码检查工具，用来检查你的代码是否符合指定的规则(你和你的团队可以自行约定一套规则)。在创建项目时，我们使用的是 JavaScript Standard Style 代码风格的规则。
JavaScript Standard Style 规范说明
建议把：https://standardjs.com/rules-zhcn.html 看一遍，然后在写的时候, 遇到错误就查询解决。
下面是这份规则中的一小部分：
- 字符串使用单引号 – 需要转义的地方除外
- 无分号 – 这没什么不好。不骗你！
- 关键字后加空格
if (condition) { ... } - 函数名后加空格
function name (arg) { ... } - 坚持使用全等
===摒弃==一但在需要检查null || undefined时可以使用obj == null - …
代码规范错误
如果你的代码不符合standard的要求，eslint会跳出来刀子嘴，豆腐心地提示你。
下面我们在main.js中随意做一些改动：添加一些空行，空格。
import Vue from 'vue'
import App from './App.vue'
import './styles/index.less'
import router from './router'
Vue.config.productionTip = false
new Vue ( {
render: h => h(App),
router
}).$mount('#app')
按下保存代码之后：
你将会看在控制台中输出如下错误：
eslint 是来帮助你的。心态要好，有错，就改。
手动修正
根据错误提示来一项一项手动修正。
如果你不认识命令行中的语法报错是什么意思，你可以根据错误代码（func-call-spacing, space-in-parens,…）去 ESLint 规则列表中查找其具体含义。
打开 ESLint 规则表，使用页面搜索（Ctrl + F）这个代码，查找对该规则的一个释义。
通过vscode中的eslint插件来实现自动修正
- eslint会自动高亮错误显示
- 通过配置，eslint会自动帮助我们修复错误
- 如何安装
- 如何配置
// 当保存的时候，eslint自动帮我们修复错误
"editor.codeActionsOnSave": {
"source.fixAll": true
},
// 保存代码，不自动格式化
"editor.formatOnSave": false
- 注意：eslint的配置文件必须在根目录下，这个插件才能才能生效。打开项目必须以根目录打开，一次打开一个项目
- 注意：==使用了eslint校验之后，把vscode带的那些格式化工具全禁用了 Beatify ==
我的完整配置，供参考
{
"editor.tabSize": 2,
"workbench.iconTheme": "vscode-icons",
"explorer.compactFolders": false,
"security.workspace.trust.untrustedFiles": "open",
"git.enableSmartCommit": true,
// 不要有分号
"prettier.semi": false,
// 使用单引号
"prettier.singleQuote": true,
// 默认使用prittier作为格式化工具
"editor.defaultFormatter": "esbenp.prettier-vscode",
"emmet.showAbbreviationSuggestions": true,
"emmet.includeLanguages": {
"javascript": "javascriptreact"
},
"editor.suggest.snippetsPreventQuickSuggestions": false,
"editor.fontSize": 16, // 设置文字的大小
"window.zoomLevel": 1,
"emmet.triggerExpansionOnTab": true,
// 保存时自动格式化 - 按照eslint的规则格式化
"editor.codeActionsOnSave": {
"source.fixAll": true
},
// 保存代码，不自动格式化
"editor.formatOnSave": false
}
禁用 volar （Vue3）
调整初始化目录结构
强烈建议大家严格按照老师的步骤进行调整，为了符合企业规范
为了更好的实现后面的操作，我们把整体的目录结构做一些调整。
目标:
- 删除初始化的一些默认文件
- 修改没删除的文件
- 新增我们需要的目录结构
修改文件
public/index.html 修改视口，开发的是移动端项目
<meta
name="viewport"
content="width=device-width,initial-scale=1.0, user-scalable=0"
/>
main.js 不需要修改
router/index.js
删除默认的路由配置
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
]
const router = new VueRouter({
routes
})
export default router
App.vue
<template>
<div id="app">
<router-view/>
div>
template>
删除文件
-
src/views/AboutView.vue
-
src/views/HomeView.vue
-
src/components/HelloWorld.vue
-
src/assets/logo.png
新增目录
- src/api 目录
- 存储接口模块 (发送ajax请求接口的模块)
- src/utils 目录
- 存储一些工具模块 (自己封装的方法)
- src/assets目录
- 新增项目使用的素材
目录效果如下:
vant 按需加载
vant-ui组件库的引入
组件库：第三方封装好了很多很多的组件，整合到一起就是一个组件库。
https://vant-contrib.gitee.io/vant/v2/#/zh-CN/
组件库并不是唯一的
pc: element-ui iview ant-design
移动：vant-ui
全部导入
- 安装vant-ui
npm i vant@latest-v2 或 yarn add vant@latest-v2
- 在main.js中
import Vant from 'vant';
import 'vant/lib/index.css';
// 把vant中所有的组件都导入了
Vue.use(Vant)
- 即可使用
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
vant-ui提供了很多的组件，全部导入，会导致项目打包变得很大。
按需加载
- 安装vant-ui
npm i vant@latest-v2 或 yarn add vant@latest-v2
- 安装一个插件
npm i babel-plugin-import -D
- 在
babel.config.js中配置
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
}
- 按需加载，在
main.js
import { Button, Icon } from 'vant'
Vue.use(Button)
Vue.use(Icon)
- main.js中引入
import '@/utils/vant'
app.vue中进行测试
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="default">默认按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>
项目中的vw适配
官方说明：https://vant-contrib.gitee.io/vant/v2/#/zh-CN/advanced-usage
yarn add postcss-px-to-viewport@1.1.1 -D
- 项目根目录， 新建postcss的配置文件
postcss.config.js
// postcss.config.js
module.exports = {
plugins: {
'postcss-px-to-viewport': {
viewportWidth: 375,
},
},
};
request模块 - axios封装
接口文档地址：http://interview-api-t.itheima.net/swagger-ui/index.html#/
我们会使用 axios 来请求后端接口, 一般都会对 axios 进行一些配置 (比如: 配置基础地址等)
一般项目开发中, 都会对 axios 进行基本的二次封装, 单独封装到一个模块中, 便于使用
- 安装 axios
npm i axios
-
新建
utils/request.js封装 axios 模块利用 axios.create 创建一个自定义的 axios 来使用
http://www.axios-js.com/zh-cn/docs/#axios-create-config
/* 封装axios用于发送请求 */
import axios from 'axios'
// 创建一个新的axios实例
const request = axios.create({
baseURL: 'http://interview-api-t.itheima.net/h5/',
timeout: 5000
})
// 添加请求拦截器
request.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error)
})
// 添加响应拦截器
request.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response.data
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error)
})
export default request
- 测试 (可以先注册后登录)
<script>
import request from '@/utils/request'
export default {
async created () {
// const res = await request.post('/user/register', {
// username: 'shuaipeng',
// password: '123456'
// })
const res = await request.post('/user/login', {
username: 'shuaipeng',
password: '123456'
})
console.log(res)
}
}
</script>
local模块 - 本地存储
新建 utils/storage.js
// 以前 token 令牌，如果存到了本地，每一次都写这么长，太麻烦
// localStorage.setItem(键， 值)
// localStorage.getItem(键)
// localStorage.removeItem(键)
const KEY = 'my-token-vant-mobile'
// 直接用按需导出，可以导出多个
// 但是按需导出，导入时必须 import { getToken } from '模块名导入'
// 获取
export const getToken = () => {
return localStorage.getItem(KEY)
}
// 设置
export const setToken = (newToken) => {
localStorage.setItem(KEY, newToken)
}
// 删除
export const delToken = () => {
localStorage.removeItem(KEY)
}
路由设计配置
但凡是单个页面，独立展示的，都是一级路由
路由设计：
- 登录页 （一级） login
- 注册页（一级） register
- 文章详情页（一级） detail
- 首页（一级） layout
- 面经（二级）article
- 收藏（二级）collect
- 喜欢（二级）like
- 我的（二级）my
一级路由
router/index.js配置一级路由, 一级views组件于教学资料中直接 CV 即可
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '@/views/login'
import Register from '@/views/register'
import Detail from '@/views/detail'
import Layout from '@/views/layout'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{ path: '/login', component: Login },
{ path: '/register', component: Register },
{ path: '/article/:id', component: Detail },
{
path: '/',
component: Layout
}
]
})
export default router
清理 App.vue
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
async created () {
}
}
</script>
tabbar标签页
https://vant-contrib.gitee.io/vant/v2/#/zh-CN/tabbar
main.js 引入组件
import { Button, Icon, Tabbar, TabbarItem } from 'vant'
Vue.use(Tabbar)
Vue.use(TabbarItem)
layout.vue
<template>
<div class="layout-page">
首页架子 - 内容区域
<van-tabbar>
<van-tabbar-item icon="notes-o">面经</van-tabbar-item>
<van-tabbar-item icon="star-o">收藏</van-tabbar-item>
<van-tabbar-item icon="like-o">喜欢</van-tabbar-item>
<van-tabbar-item icon="user-o">我的</van-tabbar-item>
</van-tabbar>
</div>
</template>
二级路由
router/index.js配置二级路由
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '@/views/login'
import Register from '@/views/register'
import Detail from '@/views/detail'
import Layout from '@/views/layout'
import Like from '@/views/like'
import Article from '@/views/article'
import Collect from '@/views/collect'
import User from '@/views/user'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{ path: '/login', component: Login },
{ path: '/register', component: Register },
{ path: '/article/: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
layout.vue 配置路由出口, 配置 tabbar
<template>
<div class="layout-page">
<router-view></router-view>
<van-tabbar route>
<van-tabbar-item to="/article" icon="notes-o">面经</van-tabbar-item>
<van-tabbar-item to="/collect" icon="star-o">收藏</van-tabbar-item>
<van-tabbar-item to="/like" icon="like-o">喜欢</van-tabbar-item>
<van-tabbar-item to="/user" icon="user-o">我的</van-tabbar-item>
</van-tabbar>
</div>
</template>
效果图：
主题定制(可选)
整体网站风格，其实都是橙色的，可以通过变量覆盖的方式，制定主题色
https://vant-contrib.gitee.io/vant/v2/#/zh-CN/theme
babel.config.js 制定样式路径
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
// 指定样式路径
style: (name) => `${name}/style/less`
}, 'vant']
]
}
vue.config.js 覆盖变量
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
css: {
loaderOptions: {
less: {
lessOptions: {
modifyVars: {
// 直接覆盖变量
'blue': '#FA6D1D',
},
},
},
},
},
})
重启服务器生效！
登录&注册功能
登录静态布局
使用组件
- van-nav-bar
- van-form
- van-field
- van-button
vant-ui.js 注册
import Vue from 'vue'
import {
NavBar,
Form,
Field
} from 'vant'
Vue.use(NavBar)
Vue.use(Form)
Vue.use(Field)
login.vue 使用
<template>
<div class="login-page">
<!-- 导航栏部分 -->
<van-nav-bar title="面经登录" />
<!-- 一旦form表单提交了，就会触发submit，可以在submit事件中
根据拿到的表单提交信息，发送axios请求
-->
<van-form @submit="onSubmit">
<!-- 输入框组件 -->
<!-- \w 字母数字_ \d 数字0-9 -->
<van-field
v-model="username"
name="username"
label="用户名"
placeholder="用户名"
:rules="[
{ required: true, message: '请填写用户名' },
{ pattern: /^\w{5,}$/, message: '用户名至少包含5个字符' }
]"
/>
<van-field
v-model="password"
type="password"
name="password"
label="密码"
placeholder="密码"
:rules="[
{ required: true, message: '请填写密码' },
{ pattern: /^\w{6,}$/, message: '密码至少包含6个字符' }
]"
/>
<div style="margin: 16px">
<van-button block type="info" native-type="submit">提交</van-button>
</div>
</van-form>
</div>
</template>
<script>
export default {
name: 'login-page',
data () {
return {
username: 'zhousg',
password: '123456'
}
},
methods: {
onSubmit (values) {
console.log('submit', values)
}
}
}
</script>
login.vue添加 router-link 标签（跳转到注册）
<template>
<div class="login-page">
<van-nav-bar title="面经登录" />
<van-form @submit="onSubmit">
...
van-form>
<router-link class="link" to="/register">注册账号router-link>
div>
template>
login.vue调整样式
<style lang="less" scoped>
.link {
color: #069;
font-size: 12px;
padding-right: 20px;
float: right;
}
</style>
注册静态布局
register.vue
<template>
<div class="login-page">
<van-nav-bar title="面经注册" />
<van-form @submit="onSubmit">
<van-field
v-model="username"
name="username"
label="用户名"
placeholder="用户名"
:rules="[{ required: true, message: '请填写用户名' }]"
/>
<van-field
v-model="password"
type="password"
name="password"
label="密码"
placeholder="密码"
:rules="[{ required: true, message: '请填写密码' }]"
/>
<div style="margin: 16px">
<van-button block type="primary" native-type="submit"
>注册van-button
>
div>
van-form>
<router-link class="link" to="/login">有账号，去登录router-link>
div>
template>
<script>
export default {
name: 'register-page',
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>
toast 轻提示
将来无论注册成功，还是失败，都是需要给用户提示的
https://vant-contrib.gitee.io/vant/v2/#/zh-CN/toast
import { Toast } from 'vant';
Vue.use(Toast)
两种使用方式
- 导入，调用
import { Toast } from 'vant';
Toast('提示内容');
- **组件内 **通过this直接调用
this.$toast('提示内容')
封装api接口 - 注册功能
新建 api/user.js 提供注册 Api 函数
import request from '@/utils/request'
// 注册接口
export const register = (data) => {
return request.post('/user/register', data)
}
register.vue页面中调用测试
methods: {
async onSubmit (values) {
// 往后台发送注册请求了
await register(values)
this.$toast.success('注册成功')
this.$router.push('/login')
}
}
request.js响应拦截器，统一处理错误提示
import { Toast } from 'vant'
...
// 添加响应拦截器
request.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response.data
}, function (error) {
if (error.response) {
// 有错误响应, 提示错误提示
Toast(error.response.data.message)
}
// 对响应错误做点什么
return Promise.reject(error)
})
封装api接口 - 登录功能
api/user.js 提供登录 Api 函数
// 登录接口
export const login = (data) => {
return request.post('/user/login', data)
}
login.vue 登录功能
import { login } from '@/api/user'
import { setToken } from '@/utils/storage'
methods: {
async onSubmit (values) {
const { data } = await login(values)
setToken(data.token)
this.$toast.success('登录成功')
this.$router.push('/')
}
}
页面访问拦截
这个 面经移动端 项目，只对 登录用户 开放，如果未登录，一律拦截到登录
-
如果访问的是 首页， 无token， 拦走
-
如果访问的是 列表页，无token， 拦走
-
如果访问的是 详情页，无token， 拦走
…
分析：哪些页面，是不需要登录，就可以访问的！ => 注册 和 登录 （白名单 - 游客可以随意访问的）
核心逻辑：
- 判断用户有没有token， 有token， 直接放行 （有身份的人，想去哪就去哪~）
- 没有token（游客），如果是白名单中的页面，直接放行
- 否则，无token（游客），且在访问需要权限访问的页面，直接拦截到登录
vue路由内置了一个语法
全局前置守卫：
-
所有的路由一旦被匹配到，在真正渲染解析之前，都会先经过全局前置守卫
-
只有全局前置守卫放行，才能看到真正的页面
// 全局前置守卫：
// 1. 所有的路由一旦被匹配到，在真正渲染解析之前，都会先经过全局前置守卫
// 2. 只有全局前置守卫放行，才能看到真正的页面
// 任何路由，被解析访问前，都会先执行这个回调
// 1. from 你从哪里来， 从哪来的路由信息对象
// 2. to 你往哪里去， 到哪去的路由信息对象
// 3. next() 是否放行，如果next()调用，就是放行 => 放你去想去的页面
// next(路径) 拦截到某个路径页面
const whiteList = ['/login', '/register'] // 白名单列表，记录无需权限访问的所有页面
router.beforeEach((to, from, next) => {
const token = getToken()
// 如果有token，直接放行
if (token) {
next()
} else {
// 没有token的人, 看看你要去哪
// (1) 访问的是无需授权的页面（白名单），也是放行
// 就是判断，访问的地址，是否在白名单数组中存在 includes
if (whiteList.includes(to.path)) {
next()
} else {
// (2) 否则拦截到登录
next('/login')
}
}
})