Vue仿微信朋友圈项目

最新推荐文章于 2022-05-12 01:02:13 发布

zhang20001223

最新推荐文章于 2022-05-12 01:02:13 发布

阅读量3.8k

点赞数 9

文章标签： vue

本文链接：https://blog.csdn.net/zhang20001223/article/details/106339625

版权

该项目采用Vue全家桶，结合Vuex和Vue-router，利用WeUl样式库和MongoDB数据库，实现了登录/注册、朋友圈列表、发表朋友圈等功能。集成阿里云短信服务验证，下拉刷新，大图预览，动态评论点赞，聊天页面实时通讯。

摘要由CSDN通过智能技术生成

1.项目介绍

此项目运用运用 vue 全家桶技术（vue+vue-cli+vuex+vue-router+node...），前后台分离和组件化的方式开发，使用WeUl基础样式库进行前台页面的搭建，后台使用的是MongoDB数据库进行编写，使用阿里云短信服务进行验证码注册。实现了下拉刷新、消息发送、大图预览、朋友圈发表。。。。

2、使用技术

MVVM 框架：Vue.js 2.0
状态管理：Vuex
页面路由：Vue-router
弹窗插件：WeUl
聊天插件：vue-socket.io
环境配置：node.js + cnpm
图片插件：vue-photo-preview

3、项目内容

3.1 登陆/注册

页面展示

代码

<div class="weui-form">
      <div class="weui-form__text-area">
        <h2 class="weui-form__title">手机号登录</h2>
      </div>
      <div class="weui-form__control-area">
        <div class="weui-cells__group weui-cells__group_form">
          <div class="weui-cells weui-cells_form">
              <div class="weui-cell weui-cell_active">
                  <div class="weui-cell__hd"><label class="weui-label" >手机号</label></div>
                  <div class="weui-cell__bd">
                      <input class="weui-input" type="number" v-model="mobile" pattern="[0-9]{11}" placeholder="请输入手机号"/>
                  </div>
              </div>
              <div class="weui-cell weui-cell_active weui-cell_vcode">
                  <div class="weui-cell__hd"><label class="weui-label">验证码</label></div>
                  <div class="weui-cell__bd">
                    <input autofocus class="weui-input" type="text" v-model="code" pattern="[0-9]*" id="js_input" placeholder="输入验证码" maxlength="6"/>
                  </div>
                  <div class="weui-cell__ft">
                    <button v-show="timecode===60" class="weui-btn weui-btn_default weui-vcode-btn" @click="getCode">获取验证码</button>
                    <div v-show="timecode!==60" class="time-code weui-vcode-btn"> {
  {timecode}}</div>
                  </div>
              </div>
          </div>
        </div>
      </div>
      <div class="weui-form__tips-area">
        <label id="weuiAgree" for="weuiAgreeCheckbox" class="weui-agree">
          <input id="weuiAgreeCheckbox" type="checkbox" v-model="agree" class="weui-agree__checkbox"/><span class="weui-agree__text">阅读并同意<a href="javascript:">《相关条款》</a>
          </span>
        </label>
      </div>
      <div class="weui-form__opr-area">
        <a :class="isSubmit?'weui-btn weui-btn_primary':'weui-btn weui-btn_primary  weui-btn_disabled'"  href="javascript:" id="showTooltips" @click="signup">注册/登录</a>
      </div>
    </div>

使用阿里云短信服务，输入手机号进行验证，输入合法的手机号才可以发送验证码，验证码后台验证，要输入正确的验证码才能登陆。一分钟之后要重新发送，重新获取。


async signup () {
      // 验证手机号
      if (!(/^1[3456789]\d{9}$/.test(this.mobile))) {
        weui.topTips('请输入合法的手机号', 2000)
        return false
      }
      // 验证码
      if (!this.code) {
        weui.topTips('请填入验证码', 2000)
        return false
      }
      // 发送请求，注册或者登录
      const res = await service.post('/users/signup', {
        phonenum: this.mobile,
        code: this.code
      })
      /* 注册成功后的处理
      1.将登录或者注册的用户信息保存起来，以供其他页面使用
      2.跳转到用户本来想要请求的页面
      */
      if (res.data.code === 0) {
        weui.toast('登录成功', 2000)
        this.$store.dispatch('setUser', res.data.data)
        this.$router.go(-1)
      }
    },
    // 验证码
    async getCode () {
      // 验证手机号
      if (!(/^1[3456789]\d{9}$/.test(this.mobile))) {
        weui.topTips('请输入合法的手机号', 2000)
        return false
      }
      // 向服务器接口发送请求
      const res = await service.get('/users/phonecode', {
        phonenum: this.mobile
      })
      console.log(res)
      // 开启定时器，60s倒计时
      this.countTimeCode()
    },
    // 倒计时
    countTimeCode () {
      // 为this对象（当前的vue实例）动态添加一个属性clearFlag
      this.clearFlag = setInterval(() => {
        if (this.timecode === 0) {
          this.timecode = 60
          // 清除定时器
          clearInterval(this.clearFlag)
          return
        }
        this.timecode--
      }, 1000)
    }
  },
  beforeDestro