移动端vue仿朋友圈项目总结

最新推荐文章于 2024-05-01 15:24:50 发布

雨打荷叶

最新推荐文章于 2024-05-01 15:24:50 发布

阅读量859

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_43358160/article/details/106341971

版权

vue 专栏收录该内容

34 篇文章 2 订阅

订阅专栏

一、安装nodejs

参考我的博客添加链接描述安装即可

二、安装需要用到的插件

1、vuex

npm install vuex --save

安装完成之后，在项目mainjs中引入即可

import Vuex from 'vuex'

Vue.use(Vuex)

将登陆后的个人信息，利用vuex进行路由间的共享

2、weui

在weui官网下载weui文件即可
然后把weui.css和weui.js引入到项目根目录中

3、axios

由于我们需要经常用到axios向后台发送请求，所以我们可以给axios封装一下
在项目的src文件中创建一个utils目录，在目录中再创建一个service.js，
我们就可以对axios进行封装了
文件如下：

import axios from 'axios'
//引入router
import router from '@/router'
const baseServer='http://192.168.1.5:3000'//后台api接口
const baseUrl='http://192.168.1.5:3000/cgi'//本地图片上传路径
//创建axios实例,并使用自己的配置
const service = axios.create({
  // baseURL: 'http://127.0.0.1:3000/cgi',
  baseURL: baseUrl,
  timeout: 30000, //请求的超时时间
  withCredentials: true, //进行跨域请求时是否提供凭证
})
/*
 请求拦截器中的user方法,可以接受两个参数
 参数1:1个函数,当请求成功时调用
 参数2:1个函数,当请求失败时调用
 */
service.interceptors.request.use(config => {
  // const token=document.cookie.split('=')[1]
  // config.headers['wec-access-token']=token
  return config
}, err => {
  Promise.reject(err)
})
/*
 相应拦截器,服务器返回相应后,首先会到达这里
 相应拦截器的第一个参数中,必须retur response
 否则发出请求的代码就无法获得这个相应信息
 */
service.interceptors.response.use(response => {
  //如果用户没有登陆,就让用户跳转到登陆页面进行登录
  if (response.data.code === 1000) {
    router.push('/login')
    weui.toast('请登录', 2000)
    //清除本地存储中的用户数据
    window.localStorage.removeItem('cuser')
  } else if (response.data.code !== 0) {
    /*
    如果服务器返回码不等于0,说明有错误
    如果msg中有值,说明接口返回了错误信息,则显示错误信息
    如果msg中没有值,说明接口没有返回错误信息,则统一显示错误信息为'接口请求错误'*/
    weui.toast(response.data.msg || '接口请求错误', 1000)
  }
  return response
}, err => {
  return Promise.reject(err)
})
//封装get请求
function get(url, params = {}) {
  const token = document.cookie.split('=')[1]
  return service({
    url: url,
    method: 'get',
    headers: {
      'wec-access-token': token
    },
    params
  })
}
//封装一个post方法
const post = (url, data = {}) => {
  const token = document.cookie.split('=')[1]
  return service({
    url: url,
    method: 'post',
    headers: {
      'Content-type': 'application/json;charset=UTF-8',
      'wec-access-token': token
    },
    data
  })
}
export default {
  get,
  post,
  baseUrl,
  baseServer
}

创建成功只需在需要用到的目录引入js文件即可

三、项目页面搭建

项目需要用到的页面：登陆/注册页面、朋友圈列表页面、个人信息页面、朋友信息页面、发消息页面、消息列表页面等
利用weui搭建即可

四、阿里云短信服务

可参考阿里云短信服务开通

五、用到的js文件

1、格式化时间

在utils中创建formatTime.js

/* eslint no-var:0 */
/* eslint no-magic-numbers:0 */
/* eslint eqeqeq:0 */
/* eslint no-param-reassign:0 */
var daysInMonth = function(year, month) {
  if (month === 2) {
    if (year % 4 === 0 && year % 100 !== 0) {
      return 29
    } else {
      return 28
    }
  } else if ((month <= 7 && month % 2 === 1) || (month > 7 && month % 2 === 0)) {
    return 31
  } else {
    return 30
  }
}
var addYear = function(date, year) {
  return new Date(date.getFullYear() + year, date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(),
    date.getSeconds())
}
var addMonth = function(date) {
  var m = date.getMonth()
  var daysInNextMonth
  var day
  if (m === 11) {
    return new Date(date.getFullYear() + 1, 1, date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds())
  }
  daysInNextMonth = daysInMonth(date.getFullYear(), date.getMonth() + 1)
  day = date.getDate()
  if (day > daysInNextMonth) {
    day = daysInNextMonth
  }
  return new Date(date.getFullYear(), date.getMonth() + 1, day, date.getHours(), date.getMinutes(), date.getSeconds())
}
var isInSpecificYesterday = function(time, specTime) {
  specTime.setDate(specTime.getDate() - 1)
  return time.toDateString() == specTime.toDateString()
}
/*
 describe:发表时间,显示策略为
 判断是否是今天,如果是:
 1分钟内,显示'刚刚'
 1分钟至1小时,显示'x分钟前'
 1小时至24小时,显示'x小时前
 超出24小时,但是是昨天
 显示'昨天'
 超出昨天至1个月,显示'x天前'
 超出一个月至1年,显示'x月x日'
 超出1年,显示'x年x月x日'*/
 var formatTime = function(publishTimestamp, curTimestamp) {
  publishTimestamp = Number(publishTimestamp)
  if (!publishTimestamp || publishTimestamp < 0) {
    return ''
  }
  curTimestamp = curTimestamp || (new Date() / 1000)
  var interval = curTimestamp - publishTimestamp
  var publishTime = new Date(publishTimestamp * 1000)
  var curTime = new Date(curTimestamp * 1000)
  var month
  if (interval <= 59) {
    return '刚刚'
  } else if (interval < 61) {
    return '1分钟前'
  } else if (interval < 60 * 60) {
    return Math.floor(interval / 60) + '分钟前'
  } else if (interval < 60 * 60 * 24) {
    return Math.floor(interval / (60 * 60)) + '小时前'
  } else if (isInSpecificYesterday(publishTime, curTime)) {
    return '昨天'
  } else if (addMonth(publishTime) > curTime) {
    return Math.ceil(interval / (60 * 60 * 24)) + '天前'
  } else if (addYear(publishTime, 1) > curTime) {
    month = publishTime.getMonth() + 1
    return month + '月' + publishTime.getDate() + '日'
  } else {
    month = publishTime.getMonth() + 1
    return publishTime.getFullYear() + '年' + month + '月' + publishTime.getDate() + '日'
  }
}
export default formatTime

2、判断用户使用设备类型

在utils中创建os.js

const u = navigator.userAgent
console.log(u)
//如果用户使用得是android系统的设备,则isAndroid=true,否则为false
//如果用户使用得是ios系统的设备,则isIos=true,否则为false
const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1
const isIos = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
export default {
  isAndroid,
  isIos,
  getKeyBoardHeightDefault: () => {
    if (isIos) {
      const screen = window.screen
      //iPhone X
      if (screen.height === 812 && screen.width === 375) {
        return 377
      } else if (screen.height === 736 && screen.width === 414) { // iphone plus
        return 315
      } else if (screen.height === 667 && screen.width === 375) { // iphone 678
        return 304
      } else if (screen.height === 568 && screen.width === 320) { // iphone 5 se
        return 220
      } else {
        return 304
      }
    } else {
      return 304
    }
  }
}