财神爷pk10计划安桌版: Vue(day8)

北京赛车pk10软件计划手机版下载 www.3gt5.cn 继续上一篇文章的内容,本文主要内容为项目中新闻资讯??榈氖迪?。

新闻资讯页面主要是当我们点击这个按钮时跳转到新闻列表界面。

一、新闻资讯的路由设计

将新闻资讯的标签改为路由:(a标签改为router-link)。

home.vue

<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
    <router-link to="/home/newsList">
        <span class="mui-icon mui-icon-extra mui-icon-extra-new"></span>
        <div class="mui-media-body">News</div>
    </router-link>
</li>

然后新建一个news.vue单文件组件用于显示新闻列表,并配置到router.js文件中。

二、新闻资讯的页面设计

1、搭建Node服务器用于返回我们需要的页面数据

现在我们的新闻资讯页面时写死的,实际的场景应该是从后台服务器中动态获取,我们可以自己编写一个简单的Node搭建的本地服务器用于满足我们的基本页面数据需求。

这个Node+Express简单搭建的服务器已上传至github,可自行下载运行,运行前先npm install一下。然后就可以使用了。点击这里访问

值得注意的问题:

  • 由于是项目本身和服务器是两个不同的域名,存在跨域问题??墒褂?code>jsonp的方式进行数据传输,也可以设置header来允许跨域访问:

    res.header('Access-Control-Allow-Origin', '*');
  • 使用的是vue-resource获取数据。

其他细节问题代码中均有注释,这里不再赘述。

2、其它问题

  • 全局配置Vue.http.options.root

    设置请求的根路径,但是注意请求时路径的写法,如:

    //错误的写法:如果这样写请求的根路径为当前域名
    this.$http.get('/getNewsList').then( result => {
    
    })
    //正确的写法
    this.$http.get('getNewsList/').then( result => {
    
    })
  • scoped配置下的style有时候无法产生效果,就算加上!important标识也无法正常渲染,所以我们常常不再使用scoped属性,但这样容易污染全局样式,所以我们需要模仿scoped属性的实现原理,手动为组件根元素命名一个类作为标识,然后样式都在改标志下进行全局渲染即可。例如新闻详情页的组件代码如下:

    //在根元素增加一个newsInfo类名作为标识
    <div class="newsInfo">
        <h3 class="title"> {{newsInfo.title}} </h3>
        <p class="subtitle">
            <span>发表时间:{{newsInfo.createTime}}</span>
            <span>浏览量:{{newsInfo.views}}</span>
        </p>
        <hr />
        <div class="content" v-html="newsInfoHtml">
            fsafs
            fasfdsdafsadf
            sadf
        </div>
    </div>

    然后我们的css属性就可以改为全局样式而不用顾虑污染的情况。

    这里我们可以使用scss语法进行样式书写,更为清晰(需要安装scss对应的loader并配置,请参考这里):

    <style lang="scss">
      .newsInfo{
          .title {
              text-align: center;
              color: #d02121;
          }
          .subtitle{
              color: #03A9F4;
              display: flex;
              justify-content: space-between;
              padding: 5px;
          }
          .content{
              padding: 5px;
          }
          img {
              width: 100%;
          }
          .error {
              color: #FF1313;
          }
      }
    </style>

    3、效果一览

    主界面
    新闻列表
    新闻详情页

posted @ 2019-04-18 11:46 风之之 阅读(...) 评论(...) 编辑 收藏
  • 打持久战不好,打速决战——将中美贸易快速引导到清零——美国就受不了了——然后由我主导休战谈判。效果是“两败俱不伤”,用我的体制力平息真正的贸易战,夺回主动权! 2019-05-26
  • “价值由劳动创造≠劳动必然创造价值”错;“价值由劳动创造=劳动必然创造价值”对。 2019-05-24
  • 清凉端午过后 气温重回30℃ 2019-05-24
  • 周国平:男女之爱已经很强烈了,但亲子之爱更强烈 2019-05-22
  • 君弘精益精牌讲师投资课 2019-05-22
  • 弹幕评论别降低了审美品位 2019-05-20
  • 人民网评:掌握核心技术,才不会被卡脖子 2019-05-05
  • 燕山谭客.blog的博客—强国博客—人民网 2019-05-04
  • 陕西国防工业职业技术学院百名大学生志愿者敬老院慰问孤寡老人陕西国防工业职业技术学院百名大学生志愿者敬老院慰问-陕西教育新闻 2019-05-04
  • 天津市环境保护突出问题边督边改公开信息 2019-04-29
  • 自作多情。先将台湾收回来再说也不迟啊。 2019-04-25
  • 【世界杯·望俄打卦】突尼斯VS英格兰 2019-04-25
  • 紫光阁中共中央国家机关工作委员会 2019-04-19
  • 学习贯彻落实十九大精神 2019-04-16
  • 全国啦啦操联赛临汾站开幕 2019-03-31
  • 60| 178| 883| 810| 713| 469| 643| 743| 135| 596|