JS项目应用

前言

• 在实际项目里面，我们使用面向对象编程进行编程
• 在面向对象编程里面我们大致分为四个部分(个人分法)
• 开头、获取数据、渲染、方法函数
• 开头：一开始就会执行的代码放在开头里面比如一开始便要获取数据的方法
• 获取数据我们统一放在一个对象里面
• 渲染：使用后台数据渲染页面
• 方法函数:渲染页面时需要单个处理时写的方法放在一个对象里面

原生JS项目大致分层

var Object ={
    // 开头
    created(){
        
    },
    // 渲染
    renderList(){

    },
    // 数据获取
    getList(){

    },
    // 处理方法函数
    setList(){

    }
}
一开始便运行开头
Object.created();

• js原生项目实际应用

• 一般页面的渲染

// 定义一个对象,负责整个页面的交互
/**
 * 页面执行顺序
 * 1. 拿数据
 */

var home = {
  // 入口方法,执行页面开始的操作
  created() {
    home.getFilmList()
  },

  // 渲染列表
  renderList: function (films) {
    var htmlStr = ''
    for (var j = 0;j < films.length;j++) {
      var film = films[j]
      var filmId = film.filmId; 
      var actorsStr = home.actorsToString(film.actors)
      var str = `  <div class="flex-sb mg-t-8 bd-gray pd-b-15 mg-l-17 rel">
                <a class="flex-sb w100pc" href="pian.html?filmId=${filmId}">
                    <img class="h70 w50" src="${film.poster}" alt="">
                    <!-- 电影文字介绍 -->
                    <div class="lh20 fg1 mg-l-15">
                        <div class="flex ai-center">
                            <p class="f14">${film.name}</p>
                            <span class="lable2D f10" style="">2D</span>
                        </div>
                        <div class="f12 gray mg-t-5">
                            <p>观众评分 <span style="color:#fed177;">${film.grade}</span> </p>
                            <p class="display w160">主演: ${film.director}</p>
                            <p><span style="color: orange">${film.nation}</span> | ${film.runtime} 分钟</p>
                        </div>
                    </div>
                    <a class="abs" style="right:0" href=" ">
                        <button class="bg-fff h20 w50 orangr mg-r-18"
                            style="height:24px; border: 1px solid#ef7131; border-radius: 3px;">购票</button>
                    </a>
                </a>
            </div>`
      htmlStr += str
    }
    var $list = document.querySelector('.list')
    $list.innerHTML = htmlStr
  },

  // 拼接演员列表字符串
  actorsToString: function (actors) {
    if (!actors) {
      return ''
    } else {
      var str = ''
      for (var i = 0;i < actors.length;i++) {
        var actor = actors[i]
        str += actor.name + ' '
      }
      return str
    }
  },

  // 获取列表数据
  getFilmList: function () {
    var url = 'http://132.232.87.95:3000/api/film/getList?page=1'
    axios(url).then(function (res) {
      if (res.data.status == 0) {
        home.renderList(res.data.films)
      } else {
        alert(res.data.msg)
      }
    // 请求成功之后,执行这个函数
    }).catch(function (error) {
      alert(error)
    // 请求失败之后,执行这个函数
    })
  }
}
home.created()

里面涉及的知识点为：面向对象编程->axios->for 循环遍历->模板字符串->${变量}->函数的调用、函数之间的传参

• 个人中心页面

var login = {
    
    getPhone: function () {
        login.goLogin();

        // 判断网址后面是否有参数
        // if (location.href.slice(-4) == 'html') {

        // } else { 
            // 有的话截取等号后面的电话号码
            // var str = location.href;
            // var index = str.indexOf('=') + 1;
            // var phone = str.slice(index);
            // login.goLogin(phone);
        // }
    },
    tologin: function () {
        var phone = document.querySelector('#phone').innerText;
        if (phone === '立即登录') {
            location.href = 'login.html';
        }
    },
    goLogin: function () {
        // document.querySelector('#name').innerText=phone;
        var url = 'http://132.232.87.95:3000/api/user/getUserInfo';
        // 登入接口
        axios.get(url).then(function (res) {
            if (res.data.status === 0) {
                var $phone = document.querySelector('#phone');
                var phone = res.data.userinfo.mobilePhoneNumber;
                var phoneStr = phone.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2');
                // 填充标签
                $phone.innerText = phoneStr;
            } else {
                var $phone = document.querySelector('#phone');
                $phone.innerText = '立即登录';
            }
        }).catch(function () {
             
         })
    }

}
login.getPhone();

知识点:对象编程->if判断->axios->正则判断->数组函数->location->节点、函数

• 登录页面

var login = {
  // 开头，这个是一开始就运行的，所以对象外直接就引用了
  start: function() {
    // 开头就定义一个num变量并赋值为60
    login.num = 60;
  },
  // 设置电话号码输入格式
  isKo: function() {
    var phone = document.querySelector("#phone").value;
    if (0 <= phone.length <= 11) {
      if (phone.length == 11) {
        if (/^1[34578]\d{9}$/.test(phone) == false) {
          alert("输出格式错误,请输入正确的电话号码");
        } else {
          login.getCode();
        }
      } else {
        alert("电话号码是11位数");
      }
    } else {
      alert("电话号码是11位数");
    }
  },
  getCode: function() {
    // 获取节点
    var str = document.querySelector("#getcode");
    // 调用函数之后不能在被点击仅限于input标签
    // disabled 的意思是禁止点击
    str.disabled = true;
    // 设置定时器变量名为timer这些基本都是用这个单词的
    var timer = setInterval(function() {
      // 给获取节点里面的value值赋值，赋的值是num自减这样就达到了倒计时的效果
      str.value = --login.num;
      // 设置在数字为零的时候停止
      if (login.num === 0) {
        clearInterval(timer);
        // 为零的时候input的value值变为重新发送
        str.value = "重新发送";
        // 这个时候num的值为0，再次点击会从零开始，所以要重置一下num的值
        login.num = 60;
        // 调用函数之后能在被点击仅限于input标签
        str.disabled = false;
      }
    }, 1000);
    // 获取手机号码,并且传给下面getMws
    var phone = document.querySelector("#phone").value;
    console.log(phone);
    login.getMws(phone);
  },

  toLogin: function() {
    var phone = document.querySelector("#phone").value;
    var code = document.querySelector("#code").value;
    if (code == "" || code == undefined) {
      alert("请输入验证码");
    } else { 
      login.getLogin(phone, code);
    }
  },
  // 获取发送验证码接口 通过点击获取验证码调用
  getMws: function(phone) {
    var url = "http://132.232.87.95:3000/admin/user/getSmsCode?phone=" + phone;
    axios
      .get(url)
      .then(function(res) {
        console.log(res.data);
        var lastNum = phone.slice(-4);
        alert(`验证码以发送到尾号为${lastNum}的手机上,请注意查收`);
      })
      .catch(function(error) {
        console.log(error);
        alert("验证码发送失败");
      });
  },
  // 获取手机号和验证码 通过点击登录时调用
  getLogin: function(phone, smsCode) {
    var url =
      "http://132.232.87.95:3000/admin/user/registerByCode?phone=" +
      phone +
      "&smsCode=" +
      smsCode;
    axios
      .get(url)
      .then(function(res) {
        if (res.data.status==0) {
          alert("登录成功");
          location.href = 'my.html?phone='+ phone;
          // 跳转到另一个页面
        } else {

          alert("登录失败");
        }
      })
      .catch(function (error) { 
          alert("输入错误,请重新输入");
      });
  }
};
login.start();

function newFunction() {
  login.getCode();
}
/**
 * 需求:输入手机号码->正则表达式验证是否正确
 *      点击获取验证码->把手机号码发送到后台接口,获取到验证码
 *      填写验证码->检查是否输入验证码
 *      登录->通过点击登录把手机号和验证码一起发送到后台,
 *          访问后台是否存在,不存在返回输入错误,存在返回登录成功
 */

• 页面之间跳转传参

var orderView = {
  created: function () {
    orderView.getOrderList()
  },
// <a href="orderDetails.html?oderId=${orderId}">    把orderId的值显示到orderDetails.html后面
  // 渲染列表
  renderList: function (orderList) {
    var htmlStr = ''
    for (var i = 0; i < orderList.length; i++) {
      var orderId = orderList[i].payOrderId;
      // 获取orderId的值
      var order = orderList[i].skuList[0]
      // 处理观看日期
      var watchTime = orderView.formatDate(order.extraInfo.watchTime * 1000)
      // 处理星期
      var weekDay = orderView.getWeekDay(order.extraInfo.watchTime * 1000)
      var str = ` <li class="bg-fff pd-l-17 mg-b-10">
                <a href="orderDetails.html?oderId=${orderId}">
                <div class="h100 bd-gray flex ai-center pd-r-17">
                    <img class="h70 w50" src="img/1.jpg" alt="">
                    <div class="mg-l-14 h60 fdc jc-sb fg1">
                        <p>${order.productName}</p>
                        <p>${weekDay} ${watchTime}</p>
                        <p class="flex-sb">
                            <span>
                                <span  class="orange">&yen;${order.price / 100}</span>
                                 <s>$60</s>
                                </span>
                            <span>x ${order.count}</span>
                        </p>
                    </div>
                </div>
                </a>
                <div class="h39 bd-gray flex jc-end ai-center pd-r-17">
                    <span>共1件商品</span>
                    <span class="mg-l-20">&yen;${order.price / 100}</span>
                </div>
                <div class="h48 flex-sb pd-r-17">
                    <span class="f999">订单取消</span>
                    <span>再次购买</span>
                </div>
            </li>`
      htmlStr += str
    }
    document.querySelector('.order-list').innerHTML = htmlStr
  },

  getOrderList: function () {
    var url = 'http://132.232.87.95:3000/api/order/getList?pageNum=1'
    axios.get(url).then(function (res) {
      if (res.data.status == 0) {
        orderView.renderList(res.data.list)
      } else {
        alert(res.data.msg)
      }
    }).catch(
      function (error) {
        console.log(error)
      // alert('网络异常,请稍后再试')
      }
    )
  },

  // 获取星期
  getWeekDay: function (time) {
    var date = new Date(time)
    var day = date.getDay()
    var week = {
      '0': '星期日',
      '1': '星期一',
      '2': '星期二',
      '3': '星期三',
      '4': '星期四',
      '5': '星期五',
      '6': '星期六'
    }
    return week[day]
  },

  // 格式化日期
  formatDate: function (time) {
    var date = new Date(time)
    var Y = date.getFullYear()
    var M = orderView.addZero(date.getMonth() + 1)
    var D = orderView.addZero(date.getDate())
    var h = orderView.addZero(date.getHours())
    var m = orderView.addZero(date.getMinutes())
    var s = orderView.addZero(date.getSeconds())
    // var dayStr = `${Y}-${M}-${D} ${h}:${m}:${s}`
    var dayStr = `${Y}-${M}-${D} ${h}:${m}:${s}`
    return dayStr
  },

  addZero: function (num) {
    if (num < 10) {
      return '0' + num
    } else {
      return num
    }
  }

}

orderView.created()

• 页面获取跳转传来的参数

var orderDetails = {
  // 开头
  created: function () {
    

    // 使用location.href 获取当前网址
    var url = location.href;
    // 从字符串url里提取(截取)orderId
    // 使用indexOf找到=的位置(下标) 的后一位
    var index = url.indexOf('=') + 1;
    // 使用slice截取从=后的一位开始后面全部的字符串
    var orderId = url.slice(index);
    orderDetails.getDetails(orderId);
  },

  // 渲染页面
  renderList: function(a) {
    document.querySelector("#tel").innerText = a.mobile;
    $img = document.querySelector(".img");
    $img.src = a.imgUrl;
    $time = a.goodsInfo[0].seatExtInfo.watchTime;
    var weekDay = orderDetails.getWeekDay($time * 1000);
    var watch = orderDetails.formatDate($time * 1000);
    //   教训，读取对象里的属性是后面接.然后加上属性名
    //   读取数组里的对象属性是在[]里加对应属性的数字来选定
    var str = `<span class="lh20">${a.productName} ${a.productType}D</span>
            <div class="fdc lh25">
                <span class="font12">${weekDay} ${watch}</span>
                <span class="font12">${a.cinemaInfo.name}</span>
                <span class="font12">${a.goodsInfo[0].seatExtInfo.hallName} ${a.goodsInfo[0].seatExtInfo.seats}</span>
            </div>
            <div class="flex-sb lh20">
                <span>&yen;${a.price / 100}</span>
                <span class="mg-r-20">${a.count}</span>
            </div>`;
    document.querySelector(".lister").innerHTML = str;

    document.querySelector(".price").innerText =  a.price / 100;
    document.querySelector(".pricer").innerText = a.price / 100;
    document.querySelector(".shpname").innerText = a.cinemaInfo.name;
    document.querySelector(".adder").innerText = a.cinemaInfo.address;
    var url = location.href;
    // 从字符串url里提取(截取)orderId
    console.log('url', url);
    // 找到=的位置(下标)
    var index = url.indexOf('=') + 1;
    // 从=后的一位开始获取后面全部的
    var orderId = url.slice(index);
    document.querySelector('.ordnum').innerHTML = orderId;
  },
  getWeekDay: function(time) {
    var date = new Date(time);
    var day = date.getDay();
    var week = {
      "0": "星期日",
      "1": "星期一",
      "2": "星期二",
      "3": "星期三",
      "4": "星期四",
      "5": "星期五",
      "6": "星期六"
    };
    return week[day];
  },
  // 格式化日期
  formatDate: function(time) {
    var date = new Date(time);
    var Y = date.getFullYear();
    var M = orderDetails.addZero(date.getMonth() + 1);
    var D = orderDetails.addZero(date.getDate());
    var h = orderDetails.addZero(date.getHours());
    var m = orderDetails.addZero(date.getMinutes());
    var s = orderDetails.addZero(date.getSeconds());
    // var dayStr = `${Y}-${M}-${D} ${h}:${m}:${s}`
    var dayStr = `${Y}-${M}-${D} ${h}:${m}:${s}`;
    return dayStr;
  },

  addZero: function(num) {
    if (num < 10) {
      return "0" + num;
    } else {
      return num;
    }
  },

  // 获取数据
  getDetails: function (orderId) {
    var url =
      "http://132.232.87.95:3000/api/order/findById?orderId=" + orderId;
    axios
      .get(url)
      .then(function(res) {
        orderDetails.renderList(res.data);
        console.log(res);
      })
      .catch(function(error) {
        console.log(error);
      });
  },
  // 返回上一层
  brak: function () { 
    history.back;
  }
};
orderDetails.created();