从0到1app项目整理....（未完）

郭靖8

已于 2023-09-08 09:56:47 修改

阅读量238

点赞数 1

分类专栏：项目笔记文章标签：前端 vue.js

于 2022-10-07 17:22:20 首次发布

本文链接：https://blog.csdn.net/qq_69892545/article/details/127193678

版权

项目笔记专栏收录该内容

17 篇文章 0 订阅

订阅专栏

一..项目的创建

1.使用vuecle创建项目

2.调整初始化项目结构

3.导入图标素材(这里用阿里巴巴示矢量图,导入成功后生成网址,复制到自己的icon.css中,)

4.引入项目要用的vant组件库

5.移动端rem适配调整

*postcss-pxtorem是一款posscss插件,用于将单位转化为rem

amfe-flexble用于设置rem基准值

2.在man.js引入

3.在vue.confg.js中进行配置(我当时配置好一会,终于有效果)

4.在index.html头部加入手机头部自适应meta(可以看vant文档rem适配)

6.封装axios请求模块

接口封装

实例使用

二.登录

1.利用vant组件实现基本的布局

2.通过rules可以定义验证规则

3.触发submit事件:

//获取表单

//表单验证

//提交表单请求登录

//根据请求响应结果处理后续操作

4.实现验证码登录

Token

import axios from 'axios'
import store from '@/store'
import router from '@/router'

const baseURL = 'http://xxx.xxx.net/'

const request = axios.create({
  baseURL // 接口的基准路径
})

// 请求拦截器
// Add a request interceptor
request.interceptors.request.use(function (config) {
  // 请求发起会经过这里
  // config：本次请求的请求配置对象
  const { user } = store.state
  if (user && user.token) {
    config.headers.Authorization = `Bearer ${user.token}`
  }	
  // 注意：这里务必要返回 config 配置对象，否则请求就停在这里出不去了
  return config
}, function (error) {
  // 如果请求出错了（还没有发出去）会进入这里
  return Promise.reject(error)
})

request.interceptors.response.use(
  function (response) {
    // 响应成功（响应状态码是 2xx）时执行第一个回调函数
    return response
  }, async function (error) {
    // 网络异常或响应失败(响应状态码是非2开头)时执行第二个回调函数
    console.log('响应失败时执行的代码....')
    if (error.response && error.response.status === 401) {
      const user = store.state.user
      if (user && user.refresh_token) {
        // 1. 判断有没有refresh_token，如果没有跳转登录页
        // 2. 如果有refresh_token，调用刷新token的接口，拿到新的token
        try {
          var res = await axios({
            baseURL: baseURL,
            method: 'PUT',
            url: '/xxx/xxx',
            headers: {
              Authorization: `Bearer ${user.refresh_token}`
            }
          })
        } catch {
          // 5. 如果refresh_token过期，进行清空token并跳转到登录页的处理
          store.commit('setUser', null)
          router.push('/login')
        }

        //  3. 更新vuex和loaclStoreage存储的token
        store.commit('setUser', {
          refresh_token: user.refresh_token,
          token: res.data.data.token
        })
        //    4. 为原来调用接口方，重新去调用接口
        console.log(error.config)
        return request(error.config)
      } else {
        // 1. 判断有没有refresh_token，如果没有跳转登录页
        store.commit('setUser', null)
        router.push('/login')
      }
    }

    // 3. 如果利用refresh_token,刷新token的接口失败，则还是跳转到登录页
    // eslint-disable-next-line prefer-promise-reject-errors
    return Promise.reject(error)
  }
)

export default request

自己的理解

存放:vuex(获取方便,响应式)+本地存储(数据持久化)

本地存取的封装

三.我的界面

1.设置一个登录的界面和一个未登录的界面利用v-if else 进行登录和未登录界面的切换

2.vant组件库可以很好实现页面的布局

3文章列表

1.vant组件库

2.创建一个组件利用for遍历到每一个数据页面呈现,

3.day.js的用法,处理相对时间

import Vue from 'vue'

import dayjs from 'dayjs'

import 'dayjs/locale/zh-cn'

import relativeTime from 'dayjs/plugin/relativeTime' 

dayjs.extend( relativeTime)



//配置全局使用
dayjs.locale('zh-cn') 

//dayjs() 获取当前最新时间

//定义一个全局的过滤器,然后就可以在任何组建的模板中使用了
//仅供模板使用
//参数1:过滤器名称
//参数2:过滤器函数
//使用方式:{{表达式|过滤器名称}}

//管道符前面的表达式的结果回座位参数传递到过滤器函数中
//过滤器的返回值会渲染到使用过滤器亲的额模板位置
Vue.filter('relativeTime',value=>{

    return  dayjs().to(dayjs(value))


})

在mian.js中引入