美高梅官方网站3045-mgm6608美高梅app下载
thinkphp 和 Gatewayworker整合web聊天2.0

thinkphp 和 Gatewayworker整合web聊天2.0

作者:mgm6608美高梅app下载    来源:未知    发布时间:2020-02-03 01:28    浏览量:

继续上篇文章,把功能添加到项目里面项目使用thinkphp3.2.3开发现在主要做手机端功能,页面也是手机端的页面,用到了vue,js,可以实现消息自动滚动到底部的最新消息更多历史消息往上滚动查看页面和样式代码如下:

本文基于工作项目开发,做的整理笔记
前段时间公司有的小伙伴刚开始学习vue,就直接着手用在新项目上,以项目实战步步为营,不断推进vue的学习和使用。时间短,需求多,又是刚刚上手,遇到的坑和困难也真不少,感觉每天都在疯狂地解决问题。说真的,每种技术的学习和使用,在实际项目的开发上得到了充分检验,个人能力也在快速的成长。
前一段时间,写过文章“Vue教程--使用官方脚手架构建实例”,主要是针对PC端,架构而写。当初的目的,也是想做为一个入门的教程,但是根据反馈和自己后面的感受,发现并不是很好,并没有做到真正的一步步上手。
今天决定专门针对Wap端去做这样一个demo,整体架构的搭建,并含有一些通用的功能。其中,部分知识点请回看前面那篇文章。对比来看,此篇应该更为详细,步步为营。

前提条件:
你已经了解vue的基础知识,尝试过使用vue-cli官方脚手架搭建项目。

编码环境:
system:OS X EI Capitan 10.12.5
npm:5.4.2
node:v8.8.0
vue-cli:@lastest

相关技术栈:
vue2 + vuex + vue-router + webpack + ES6/7 + fetch/axios + sass + flex + svg

相关地址:
项目代码github地址:https://github.com/YuxinChou/vue-wap-demo
项目在线地址:http://www.knowing365.com
(可用手机扫描下文中二维码,或用chrome浏览器模拟手机访问)
参考项目:https://github.com/bailicangdu/vue2-elm

  今天小编用HBuilder+MUI开发移动APP,不用Android原生也不用IOS原生,仅仅用HTML5+MUI。小编也是初学者所以如有不准确的地方望大家指出帮助小编改正,同时也可以促进大家的深入学习。
  HBuilder的下载官网地址:;MUI官网下载地址:。
  HBuilder是免费的,但是仅仅需要登录,安心注册,方向登录使用,完全免费的。
  第一次启动HBuilder需要登录和简单的设置不过很easy啦。
启动HBuilder后,可以再菜单选项卡看到文件、编辑...等等。

<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title>web chat</title><style type="text/css">*{margin: 0;padding: 0;}html,body,#page{width: 100%;height: 100%;}#page{position: relative;}#page header{width: 100%;height: 45px;color: white;font-size: 15px;position: relative;text-align: center;background: #40a2fe;line-height: 45px;}#page header .logo{position: absolute;width: 33px;height: 33px;border-radius: 50%;left: 10px;top: 6px;}#page header .logo img{width: 100%;height: 100%;display: block;border-radius: 50%;}#page .msg-box{position: absolute;top: 45px;left: 0;right: 0;bottom: 38px;overflow: auto;}#page .msg-box ul{}#page .msg-box ul li{font-size: 14px;list-style: none;overflow: auto;}#page .msg-box ul .all-list{}#page .msg-box ul .all-list img{width: 45px;height: 45px;border-radius: 50%;display: block;margin: 8px;float: left;}#page .msg-box ul .all-list p{max-width: 239px;padding: 12px;float: left;background: #a2d6f3;color: #000;border: 1px solid #91c9e9;border-radius: 5px;box-shadow: 2px 2px #369bdb;margin-top: 15px;word-wrap:break-word; word-break:normal;}/*#page .msg-box ul .all-list:after{content: "";clear: both;visibility: hidden;height: 0;}*/#page .msg-box ul .muchlist{padding: 10px;text-align: center;}#page .msg-box ul li a{padding: 5px 10px;background: #e2e2e2;text-decoration: none;font-size: 12px;border-radius: 5px;color: #666;}#page .msg-box ul li a:hover{text-decoration: none;}#page .msg-box ul .right p{box-shadow: -2px 2px #369bdb;float: right;}#page .msg-box ul .right img{float: right;}#page .send-box{position: absolute;left: 0;width: 100%;bottom: 0;background: #CECECE;height: 38px;text-align: center;}#page .send-box input{width: 298px;height: 30px;font-size: 12px;border: 1px solid #fff;border-radius: 5px;margin-top: 3px;}#page .send-box button{height: 30px;padding: 0 10px;border:1px solid #cecece;color: white;}/*.right{text-align: right;}li{list-style: none;}ul{width: 80%;margin: 0 auto;border: 1px solid #cecece;}.muchlist{color: lightblue;text-align: center;font-size: 12px;margin-bottom: 10px;padding: 6px;}*/</style></head><body><div > <header> <div > ![](__PUBLIC__/images/pic.jpg) </div> 接收者<select > <for start="1" end="20"> <option value="{$i}">{$i} 号</option> </for> </select> </header> <div > <ul style="height: 100%; overflow-x:auto;"> <li > <a href="javascript:void" onclick="more_data()">查看更多历史消息</a> </li> <li v-for="item in items" : > ![](item.imgsrc) <p>{{item.text}}</p> </li> </ul> </div> <div > <input type="hidden" name="uid" value="1"> <input type="text" name="msg" value=""/> <button >发送</button> </div></div><script src="/uploads/allimg/200203/012US030-0.jpg"></script><script src="/uploads/allimg/200203/012UU641-1.jpg"></script><script>var scroll_bottom = true; // 全局变量,是否滚动到底部var data_length = 0; // 全局变量,vue里面获取新加入的历史数据的长度$(function() { $.click(function() { send_msg; $.keyup(function { if(event.keyCode===13){ send_msg;});function send_msg(){ var uid = $.val(); var msg = $.val(); $.post("{:U('Index/message')}", { uid: uid, msg: msg }, function { $.val;}function more_data(){ var uid = $.val(); $.post("{:U('Index/more_msg')}", { uid: uid }, function { if(data == 'null'){ $('#more_data_btn').hide(); alert('没有更多消息了'); return false; } scroll_bottom = false; var dataxx = JSON.parse data_length = dataxx.length; for (var i = 0; i < data_length; i++) { dataIm.unshift(dataxx[i]); } });}</script> <script type="text/javascript">var dataIm = {$arr['json']};var vm = new Vue({ el:"#page", data:{ items:dataIm }, computed:{ msgbox(){ return document.getElementById("charBox") } }, updated:function(){ console.log(scroll_bottom); if(scroll_bottom == true){ this.msgbox.scrollTop=this.msgbox.scrollHeight }else{ scroll_bottom = true; var li = document.getElementById('charBox').getElementsByTagName; var liheight = 0; for(var i=0;i<data_length;i++){ liheight += li[i].offsetHeight; } console.log; document.getElementById("charBox").scrollTop = liheight; } }})</script><script type="text/javascript"> function insert_data(received_msg){ // console.log('插入消息:'+received_msg); dataIm.push(received_msg); // console.log(dataIm+'-dataIm');}// 打开一个 web socket var ws = new WebSocket("ws://127.0.0.1:8282");ws.onopen = function() {};ws.onmessage = function { var received_msg = evt.data; console.log(received_msg); var jmsg = JSON.parse(received_msg); if (jmsg.text) { insert_data; } if (jmsg.client_id) { $.post("{:U('Index/bind')}", { client_id: jmsg.client_id }, function { console.log; }} </script> </body></html>

美高梅官方网站3045 1

美高梅官方网站3045 2

php代码如下:

WAP端项目搭建从0到1.jpg

鼠标左键点击文件选项卡,可以看到

<?phpnamespace HomeController;use ThinkController;class IndexController extends Controller { public $uid = 10; public function index() { $this->display(); } public function chat() { $this->uid = I; if($this->uid == 0) $this->error; session('uid', $this->uid); $this->assign('uid',$this->uid); // 此处查询当前用户的聊天记录,输出到页面 $list[0]['text'] = "ThinkPHP框架"; $list[0]['right'] = 0; $list[0]['imgsrc'] = C.'/Public/images/pic.jpg'; $list[1]['text'] = "Ci框架"; $list[1]['right'] = 1; $list[1]['imgsrc'] = C.'/Public/images/pic.jpg'; $arr['json'] = json_encode; if(count < 1) $arr['json'] = '[]'; $this->assign('arr',$arr); $this->display(); } function bind() { $uid = session; $client_id = I('client_id'); $gateway = new OrgUtilGateway(); $gateway->bindUid($client_id, $uid); $count = $gateway->getAllClientCount(); $message = '绑定成功' . $uid . '-' . $client_id.'-共有'.$count.'个人在线'; echo $message; // $gateway->sendToUid($uid, $message); } function message() { // 此处处理接收用户发过来的消息内容,保存数据库,推送给发送者和接受者 $to_uid = I; $message = I; $gateway = new OrgUtilGateway(); $data['text'] = $message; $data['from_uid'] = session; $data['to_uid'] = $to_uid; $data['right'] = 0;$data['imgsrc'] = C.'/Public/images/pic.jpg'; if ($gateway->isUidOnline { // 判断接受小时着是否在线,在线执行发送消息 $gateway->sendToUid($to_uid, json_encode; }else{ $data['text'] .= '[对方不在线]'; }$data['right'] = 1; $gateway->sendToUid($data['from_uid'], json_encode; // 发给自己 echo json_encode; } function more_msg(){ // 此处根据当前用户和聊天用户查询数据返回聊天记录数组 $list[0]['text'] = "1"; $list[0]['right'] = 0; $list[0]['imgsrc'] = C.'/Public/images/pic.jpg'; $list[1]['text'] = "2"; $list[1]['right'] = 1; $list[1]['imgsrc'] = C.'/Public/images/pic.jpg'; echo json_encode; }}

目录
| - 0.传送门
美高梅官方网站3045,| - 1.安装
| - 2.项目说明
| - 3.项目搭建
  | - Step1. 初始化
  | - Step2. 母版页Layout
  | - Step3. 配置rem
  | - Step4. 配置sass
  | - Step5. 顶部导航header
  | - Step6. 引入iconfont
  | - Step7. 侧边菜单sidebar
  | - Step8. 底部导航footer
  | - Step9. 返回顶部backToTop(组件)
  | - Step10. 仓库存储store
  | - Step11. 侧边菜单状态保存
  | - Step12. 搜索栏searchBar(组件)
  | - Step13. 页面添加
  | - Step14. 弹窗提示(组件)
  | - ---------------------------------- 下内容为详解2
  | - Step15. 完善login页面(fetch请求数据)
  | - Step16. 合理引入svg
  | - Step17. 用axios实现请求(取代原生fetch)
  | - Step18. 登录状态存入仓库
  | - Step19. 滚动加载更多(组件)
  | - Step20. 回到指定位置(组件)
  | - Step21. 完善消息列表页面
  | - Step22. 顶部菜单改造(slot的使用)
  | - --------------------------------- 下内容为详解3
  | - Step23. 完善其他页面
  | - Step24. 权限检查
  | - Step25. 页面切换动画transition
  | - Step26. 轮播展示(swiper)
  | - Step26. 分享功能(vue-social-share)
  | - Step28. ...
| - 4.项目部署
  | - a)本地部署
  | - b)服务器部署
| - 5.后续

美高梅官方网站3045 3
按照截图操作后,
美高梅官方网站3045 4
按照截图进行操作后会看到,
美高梅官方网站3045 5
在项目管理器中看到刚才新创建的项目,
美高梅官方网站3045 6
这就是基本的目录结构,当然了也可以自定义哈!鼠标左键双击index.html文件,会看到
美高梅官方网站3045 7

Step15. 完善login页面(fetch请求数据)

更新一下login页面,代码如下:

/**********************************************/
/* src/page/login/login.vue                   */
/**********************************************/

<template>
  <div class="container" :style="'height:'+wHeight+'px;'">
    <div class="logo">
      <svg class="qq">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#qq"></use>
      </svg>
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position:absolute;width:0;height:0;visibility:hidden">
        <defs>
          <symbol viewBox="0 0 120 120" id="qq">
            <g>
              <g>
                <path fill="#F9AE08" d="M72.2,97c-6.2-1.3-9.6-1.7-11.4-1.8c-0.2,0-0.4,0-0.6,0c-0.3,0-0.5,0-0.6,0c-1.8,0.1-5.2,0.5-11.4,1.8
                  c-12.5,2.6-20.6,7.6-18,9.3c2.6,1.7,8.2,1.4,8.2,1.4l20.5,0.1l0,0l1.4,0l1.4,0l0,0l20.5-0.1c0,0,5.6,0.2,8.2-1.4
                  C92.8,104.6,84.6,99.6,72.2,97z"/>
                <path d="M90.7,52.8V40.6C90.7,23.7,77,10,60.1,10c-16.9,0-30.6,13.7-30.6,30.6v12.3C19,71.7,17.2,90.7,19.2,91.3
                  c1.1,0.4,5.3-4.9,8.7-9.5c2.3,14.4,14.7,25.4,29.7,25.4h4c15.4,0,28.2-11.6,29.9-26.6c3.5,4.8,8.3,11.1,9.6,10.7
                  C103,90.7,101.2,71.6,90.7,52.8z"/>
                <path fill="#FFFFFF" d="M75.2,59.1H45.1c-5,0-9,4-9,9v13.5c0,12.5,10.1,22.5,22.6,22.5h3c12.5,0,22.6-10.1,22.6-22.5V68.1
                  C84.2,63.2,80.1,59.1,75.2,59.1z"/>
                <path fill="#EA1C27" d="M90.7,52.7c0,0-12.2,4.3-30.2,4.3c-18,0-30.9-4.4-30.9-4.4l-3.1,6.3l-2,4.7c0,0,7.2,2.1,16.1,3.7v15.4h14
                  V69c2.1,0.2,4.3,0.2,6.4,0.2c16.6,0,34.8-5.9,34.8-5.9l-2-4.5L90.7,52.7z"/>
                <g>
                  <ellipse fill="#FFFFFF" cx="51.8" cy="30.1" rx="5" ry="8"/>
                  <ellipse fill="#FFFFFF" cx="68.4" cy="30.1" rx="5" ry="8"/>
                  <ellipse cx="53.2" cy="30.7" rx="2.5" ry="3.5"/>
                  <g>
                    <path d="M65.1,31.9c-0.1,0-0.3,0-0.4-0.1c-0.4-0.2-0.5-0.7-0.2-1c1-1.6,3.8-3.9,7.6-1.5c0.4,0.2,0.5,0.7,0.2,1
                      c-0.2,0.4-0.7,0.5-1,0.2c-3.5-2.2-5.4,0.9-5.5,1.1C65.6,31.8,65.4,31.9,65.1,31.9z"/>
                  </g>
                </g>
                <path fill="#F9AE08" d="M60.3,40.2c-0.1,0-0.1,0-0.2,0c-0.1,0-0.1,0-0.2,0c-4.6,0-18.2,1.3-18.2,3.8c0,2.5,10.9,6,18.2,6
                  c0.1,0,0.1,0,0.2,0c0.1,0,0.1,0,0.2,0c7.3,0,18.2-3.6,18.2-6C78.5,41.5,64.9,40.2,60.3,40.2z"/>
              </g>
            </g>
          </symbol>
        </defs>
      </svg>
    </div>
    <form class="login_form">
      <section class="input_container">
        <input type="text" placeholder="邮箱" autocomplete="off" v-model.lazy="userAccount">
      </section>
      <section class="input_container">
        <input v-if="!showPassword" type="password" placeholder="密码" autocomplete="off" v-model="passWord">
        <input v-else type="text" placeholder="密码" autocomplete="off" v-model="passWord">
        <div class="btn_switch" :class="{change_to_text: showPassword}">
          <div class="btn_switch_circel" :class="{trans_to_right: showPassword}" @click="changePassWordType"></div>
          abc&nbsp;
          ***
        </div>
      </section>
    </form>
    <div class="btn_block" @click="loginSubmit">登录</div>
    <div class="login_to clear">
      <router-link class="left" to="/signup">还没有账号?立即注册</router-link>
      <router-link class="right" to="/forget">忘记密码</router-link>
    </div>
    <alert-tip v-if="showAlert" :showHide="showAlert" @closeTip="closeTip" :alertText="alertText"></alert-tip>
  </div>
</template>

<script>
  import alertTip from '@/components/common/alertTip'
  import {accountLogin} from '@/service/getData'
  import { mapMutations } from 'vuex'

  export default {
    data() {
      return {
        wHeight: 0,
        userAccount: "admin@fusio.com.cn",
        passWord: "123456",
        showPassword: false,
        showAlert: false,
        alertText: "",
      }
    },
    components: {
      alertTip,
    },
    mounted() {
      this.wHeight = document.documentElement.clientHeight || document.body.clientHeight;
    },
    methods: {
      changePassWordType() {
        this.showPassword = !this.showPassword;
      },
      async loginSubmit() {
        if (!this.userAccount) {
          this.showAlert = true;
          this.alertText = '请输入手机号/邮箱/用户名';
          return
        }else if(!this.passWord){
          this.showAlert = true;
          this.alertText = '请输入密码';
          return
        }
        //用户名登录
        console.log(this.userAccount);
        console.log(this.passWord);

        // 哈咯,各位阅读文章的小伙伴,
        // 登录接口由于业务调整已经暂停,
        // 做到这里,可以注释,暂时当请求返回成功处理。
        // 晚些更新接口后,会再次更新文章内容。
        // 造成不便,十分抱歉。

        // 暂时注释
        // let response = await accountLogin(this.userAccount, this.passWord);
        // 开启这个模拟登录成功
        let response = { retCode: "10000", msg: "请求成功", data: {}  };


        //如果返回的值不正确,则弹出提示框,返回的值正确则返回上一页
        if (response.retCode!="10000") {
          this.showAlert = true;
          this.alertText = response;        
        }else{
          // 缓存用户数据(等下处理)
          // ...
          // 跳转到消息列表页
          this.$router.push({ path: '/messages' });
        }
      },
      closeTip() {
        this.showAlert = false;
      },
    }
  }

</script>

<style lang="scss" scoped>
.container {
  padding: 1rem;
  height: 100%;
  text-align: center;
  background-color: #a4e3ff;
  .logo {
    padding: 2rem 1rem 1rem;
    span {
      font-size: 1.4rem;
    }
  }
  .login_form {
    .input_container{
      display: flex;
      justify-content: space-between;
      padding: .6rem .8rem;
      background-color: #fff;
      border-bottom: 1px solid #f1f1f1;
      input{
        font-size: 0.7rem;
        color: #666;
        width: 100%;
      }
      button{
        font-size: 0.65rem;
        color: #fff;
        font-family: Helvetica Neue,Tahoma,Arial;
        padding: .28rem .4rem;
        border: 1px;
        border-radius: 0.15rem;
      }
      .right_phone_number{
        background-color: #4cd964;
      }
    }
  }
  .btn_switch{
    background-color: #ccc;
    display: flex;
    justify-content: center;
    width: 2.1rem;
    height: 1rem;
    padding: 0 0.2rem;
    border: 1px;
    border-radius: 0.5rem;
    position: relative;
    .btn_switch_circel{
      transition: all .3s;
      position: absolute;
      top: -0.1rem;
      left: -0.2rem;
      z-index: 1;
      width: 1.24rem;
      height: 1.24rem;
      box-shadow: 0 0.03rem 0.05rem 0 rgba(0,0,0,.1);
      background-color: #5cacf9;
      border-radius: 50%;
      cursor: pointer;
    }
    .trans_to_right{
      transform: translateX(1.4rem);
    }
    span{
      font-size: 0.4rem;
      line-height: 1rem;
      color: #fff;
    }
    span:nth-of-type(2){
      transform: translateY(0.08rem);
    }
  }
  .btn_block {
    margin: 1rem 0;
    padding: 0.5rem 0;
    font-size: 0.7rem;
    color: #fff;
    background-color: #4eaaff;
    border: 1px;
    border-radius: 0.15rem;
    text-align: center;
  }
  .login_to {
    a {
      color: #666;
    }
  }
}
</style>

代码中,我们引用了src/service/getData.js文件,它是一个接口服务文件。我们现在创建,在src文件夹下创建service文件夹,及getData.js文件,代码如下:

/**********************************************/
/* src/service/getData.js                     */
/**********************************************/

import fetch from '../utils/fetch';

/**
 * 账号密码登录
 */
export const accountLogin = (email, password) => fetch('/loginController/login', { email, password }, 'POST');

接着我们创建../utils/fetch.js文件,代码如下:

/**********************************************/
/* src/utils/fetch.js                         */
/**********************************************/

import { baseUrl } from '../../config/dev.env';

export default async(url = '', data = {}, type = 'GET', method = 'fetch') => {
    type = type.toUpperCase();
    url = baseUrl + url;
    if (type == 'GET') {
        let dataStr = ''; //数据拼接字符串
        Object.keys(data).forEach(key => {
            dataStr += key + '=' + data[key] + '&';
        });
        if (dataStr !== '') {
            dataStr = dataStr.substr(0, dataStr.lastIndexOf('&'));
            url = url + '?' + dataStr;
        }
    }

    if (window.fetch && method == 'fetch') {
        let requestConfig = {
            method: type,
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
            },
            cache: "force-cache"
        }
        if (type == 'POST') {
            var params = "";

            // 'Content-Type': 'application/json; charset=utf-8'
            // Json串  JSON.stringify(data)
            // params = JSON.stringify(data);

            // 'Content-Type': 'multipart/form-data'
            // formData拼接
            // var formData = new FormData();
            // for (var name in data) {
            //     formData.append(name, data[name]);
            // }

            // 'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
            // 字符串拼接  "email=aaa&password=xxxxx"
            Object.keys(data).forEach(key => {
                params += key + '=' + data[key] + '&';
            });
            if (params !== '') {
                params = params.substr(0, params.lastIndexOf('&'));
            }

            Object.defineProperty(requestConfig, 'body', {
                value: params
            });
        }

        try {
            const response = await fetch(url, requestConfig);
            const responseJson = await response.json();
            return responseJson
        } catch (error) {
            throw new Error(error)
        }

    } else {
        // 非fetch
        return new Promise((resolve, reject) => {
            let requestObj;
            if (window.XMLHttpRequest) {
                requestObj = new XMLHttpRequest();
            } else {
                requestObj = new ActiveXObject;
            }
            let sendData = '';
            if (type == 'POST') {
                // Json串
                // sendData = JSON.stringify(data);

                // 字符串拼接
                Object.keys(data).forEach(key => {
                    sendData += key + '=' + data[key] + '&';
                });
                if (sendData !== '') {
                    sendData = sendData.substr(0, sendData.lastIndexOf('&'));
                }
            }
            requestObj.open(type, url, true);
            requestObj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            requestObj.send(sendData);
            requestObj.onreadystatechange = () => {
                if (requestObj.readyState == 4) {
                    if (requestObj.status == 200) {
                        let obj = requestObj.response
                        if (typeof obj !== 'object') {
                            obj = JSON.parse(obj);
                        }
                        resolve(obj)
                    } else {
                        reject(requestObj)
                    }
                }
            }
        })
    }
}

config/dev.env.js文件中添加一个项目配置变量baseUrl,代码如下:

/**********************************************/
/* config/dev.env.js                          */
/**********************************************/

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
    NODE_ENV: '"development"',
    baseUrl: 'http://52.80.21.233:8040'
})

那么这个请求我们就做好了,试一试请求是否成功。

注意:这是一个这个项目demo中唯一的真实数据请求接口,其他类似请求如果要使用真实接口可参考这里。

按照截图进行设置即可,这样比较方便边看边改而已。
因为我们新建项目采用的是mui项目模板所以index.html页面会自动引入mui.min.js和mui.min.css,

Step16. 合理引入svg

login页面的代码里,我们放置了一大段svg绘制代码,不是很好,如果其他页面要用,可能还拿不到。这里,我们更好的是将整站的svg抽离成一个组件。

src/components/common中添加svg.vue,代码如下:

/**********************************************/
/* src/components/common/svg.vue              */
/**********************************************/

<template>
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position:absolute;width:0;height:0;visibility:hidden">
    <defs>
      <symbol viewBox="0 0 120 120" id="qq">
        <g>
          <g>
            <path fill="#F9AE08" d="M72.2,97c-6.2-1.3-9.6-1.7-11.4-1.8c-0.2,0-0.4,0-0.6,0c-0.3,0-0.5,0-0.6,0c-1.8,0.1-5.2,0.5-11.4,1.8
              c-12.5,2.6-20.6,7.6-18,9.3c2.6,1.7,8.2,1.4,8.2,1.4l20.5,0.1l0,0l1.4,0l1.4,0l0,0l20.5-0.1c0,0,5.6,0.2,8.2-1.4
              C92.8,104.6,84.6,99.6,72.2,97z"/>
            <path d="M90.7,52.8V40.6C90.7,23.7,77,10,60.1,10c-16.9,0-30.6,13.7-30.6,30.6v12.3C19,71.7,17.2,90.7,19.2,91.3
              c1.1,0.4,5.3-4.9,8.7-9.5c2.3,14.4,14.7,25.4,29.7,25.4h4c15.4,0,28.2-11.6,29.9-26.6c3.5,4.8,8.3,11.1,9.6,10.7
              C103,90.7,101.2,71.6,90.7,52.8z"/>
            <path fill="#FFFFFF" d="M75.2,59.1H45.1c-5,0-9,4-9,9v13.5c0,12.5,10.1,22.5,22.6,22.5h3c12.5,0,22.6-10.1,22.6-22.5V68.1
              C84.2,63.2,80.1,59.1,75.2,59.1z"/>
            <path fill="#EA1C27" d="M90.7,52.7c0,0-12.2,4.3-30.2,4.3c-18,0-30.9-4.4-30.9-4.4l-3.1,6.3l-2,4.7c0,0,7.2,2.1,16.1,3.7v15.4h14
              V69c2.1,0.2,4.3,0.2,6.4,0.2c16.6,0,34.8-5.9,34.8-5.9l-2-4.5L90.7,52.7z"/>
            <g>
              <ellipse fill="#FFFFFF" cx="51.8" cy="30.1" rx="5" ry="8"/>
              <ellipse fill="#FFFFFF" cx="68.4" cy="30.1" rx="5" ry="8"/>
              <ellipse cx="53.2" cy="30.7" rx="2.5" ry="3.5"/>
              <g>
                <path d="M65.1,31.9c-0.1,0-0.3,0-0.4-0.1c-0.4-0.2-0.5-0.7-0.2-1c1-1.6,3.8-3.9,7.6-1.5c0.4,0.2,0.5,0.7,0.2,1
                  c-0.2,0.4-0.7,0.5-1,0.2c-3.5-2.2-5.4,0.9-5.5,1.1C65.6,31.8,65.4,31.9,65.1,31.9z"/>
              </g>
            </g>
            <path fill="#F9AE08" d="M60.3,40.2c-0.1,0-0.1,0-0.2,0c-0.1,0-0.1,0-0.2,0c-4.6,0-18.2,1.3-18.2,3.8c0,2.5,10.9,6,18.2,6
              c0.1,0,0.1,0,0.2,0c0.1,0,0.1,0,0.2,0c7.3,0,18.2-3.6,18.2-6C78.5,41.5,64.9,40.2,60.3,40.2z"/>
          </g>
        </g>
      </symbol>
    </defs>
  </svg>
</template>

<script>
  export default {
  }
</script>

<style lang="scss">
</style>

修改App.vue,将它引入,代码如下:

/**********************************************/
/* src/App.vue                                */
/**********************************************/

<template>
  <div id="app">
    <router-view></router-view>
    <!--所有用到的svg可以丢这里-->
    <svg-icon></svg-icon>
  </div>
</template>

<script>
  import svgIcon from '@/components/common/svg'
  export default {
    name: 'app',
    components: {
      svgIcon
    },
  }
</script>

<style lang="scss">
</style>

接着,去掉login页面那一段绘制代码,也能看到效果的。

<script type="text/javascript" charset="utf-8">
mui.init();
</script>

Step17. 用axios实现请求(取代原生fetch)

有人可能说原生fetch对浏览器的支持情况不太好,可否换一个呢?那么我也可以用axios去实现请求。

src/utils中添加axios.js文件,代码如下:

/****************************************** */
/*  src/utils/axios.js                      */
/****************************************** */

import axios from 'axios';
import store from '../store';
import { baseUrl } from '../../config/dev.env';

export default (url = '', data = {}, type = 'GET', method = 'fetch') => {
    return new Promise((resolve, reject) => {
        const instance = axios.create({
            baseURL: baseUrl,
            timeout: 20000 //,
                //headers: { 'authToken': store.getters.token }  //如果后台请求都需要携带的话
        });
        instance({
                url: url,
                method: type,
                params: data
            })
            .then(response => {
                const res = response.data;
                // 50001:token已过期
                // 50002:token非法
                if (res.retCode === "50001" || res.retCode === "50002") {
                    router.push({ path: '/login' })
                    reject(res);
                }
                resolve(res);
            })
            .catch(error => {
                router.push({ path: '/404', query: { error: error } });
                reject(error);
            });
    });
}

当然,要使用这种方式的话,我们还要安装axios模块,执行:

$ npm install axios --save

修改src/service/getData.js文件,使用axios进行请求,代码如下:

/****************************************** */
/*  src/service/getData.js                  */
/****************************************** */

// import fetch from '../utils/fetch';
import fetch from '../utils/axios';

/**
 * 账号密码登录
 */
export const accountLogin = (email, password) => fetch('/loginController/login', { email, password }, 'POST');

mui.init();这一行的意思是:插件初始化。官方文档是这么说明:mui框架将很多功能配置都集中在mui.init方法中,要使用某项功能,只需要在mui.init方法中完成对应参数配置即可,目前支持在mui.init方法中配置的功能包括:创建子页面、关闭页面、手势事件配置、预加载、下拉刷新、上拉加载、设置系统状态栏背景颜色。而且官方文档特别强调了:mui需要在页面加载时初始化很多基础控件,如监听返回键,因此务必在每个页面中调用。
下面展示代码,
美高梅官方网站3045 8

下一篇:没有了
友情链接: 网站地图
Copyright © 2015-2019 http://www.zen-40.com. mgm美高梅有限公司 版权所有