记一次纯前端js+html来写web的过程

2019独角兽企业重金招聘Python工程师标准>>>

引子

不用php作后端，是因为不想在语法切换中精神分裂掉，同时也更好的复用小程序中的代码，那为什么用LeanCloud的js sdk作server呢，是因为我不会node.js

使用vue，是对它的数据双向绑定欲罢不能，移动时代浏览器兼容已不是大问题同时强烈体积轻巧的大背景下，jQuery已经完成了它的主要使命了

使用element，是因为它确实很漂亮，拿它当Bootstrap用了，当然它的替代产品iView也不错。

先上图

起步

用下面这种通过最简单的方式使用element，不折腾npm，webpack，vue-cli。

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

先堆个轮播出来

<div id="app">
    <template>
      <div class="block">
        <span class="demonstration">默认 Hover 指示器触发</span>
        <el-carousel height="150px">
          <el-carousel-item v-for="item in 4">
            <h3>{{ item }}</h3>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="block">
        <span class="demonstration">Click 指示器触发</span>
        <el-carousel trigger="click" height="150px">
          <el-carousel-item v-for="item in 4">
            <h3>{{ item }}</h3>
          </el-carousel-item>
        </el-carousel>
      </div>
    </template>
  </div>
  <style>
    .el-carousel__item h3 {
      color: #475669;
      font-size: 14px;
      opacity: 0.75;
      line-height: 150px;
      margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
       background-color: #99a9bf;
    }
    
    .el-carousel__item:nth-child(2n+1) {
       background-color: #d3dce6;
    }
  </style>
  <script>
    new Vue({
      el: '#app'
    })
  </script>

引入LeanCloud sdk

<script src="https://cdn1.lncld.net/static/js/2.1.3/av-min.js"></script>

主角登场，加载数据

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        courseObjects: []
      },
      mounted: function() {
        loadBannerCourse(function (courseObjects) {
          app.courseObjects = courseObjects;
        });
      }
    });
  </script>

这时轮播就显示了海报了

引入栅格布局

上面的海报是占满全屏，这不是想要的，27寸下显示会哭死，只要1200px宽度就够了。

  <div id="app">
    <el-row>
      <el-col :span="24">
      <!-- 海报 -->
        <template>
          <div class="block">
            <el-carousel height="450px">
              <el-carousel-item v-for="item in courseObjects">
                <h3><img class="avatar" :src="item.cover.url" /></h3>
              </el-carousel-item>
            </el-carousel>
          </div>
        </template>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="4"></el-col>
      <el-col :span="4"></el-col>
      <el-col :span="4"></el-col>
      <el-col :span="4"></el-col>
      <el-col :span="4"></el-col>
      <el-col :span="4"></el-col>
    </el-row>
  </div>

发现它对响应式支持不友好，于是深深地被打脸。可以考虑回到Bootstrap了，element就用来做纯PC后台吧。

这次，先一条道走到黑，用ele把首页的卡片布局，详情页也做做完。

用卡片实现单元格

<el-card :body-style="{ padding: '8px' }" class="card">
  <a :href="'detail.html?courseId=' + item.objectId"><img :src="item.cover.url" class="image" style="width: 100%;"></a>
  <div style="padding: 14px;">
    <span>{{item.name}}</span>
    <div class="bottom clearfix">
      <time class="time">{{ item.minutes }} 分钟</time>
    </div>
  </div>
</el-card>

就这样全程只用html/js实现的整个数据请求与页面渲染了。

源代码就不需提供下载了，直接访问这个demo的地址，http://video.it577.net/，Ctrl + U就全都有啦。

转载于:https://my.oschina.net/huangxiujie/blog/869572