• Vue(day8)


    继续上一篇文章的内容,本文主要内容为项目中新闻资讯模块的实现。

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

    一、新闻资讯的路由设计

    将新闻资讯的标签改为路由:(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一下。然后就可以使用了。点击这里访问

    值得注意的问题:

    • 由于是项目本身和服务器是两个不同的域名,存在跨域问题。可使用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 {
      			 100%;
      		}
      		.error {
      			color: #FF1313;
      		}
      	}
      </style>
      

    3、效果一览

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

  • 相关阅读:
    C#读写txt文件的两种方法介绍
    C#委托的介绍(delegate、Action、Func、predicate)
    C#邮件发送
    ASP.NET 文件上传于下载
    关于Virtual Box虚拟机里的系统不能启动的解决方法
    unity的yield
    unity文件路径
    手机上的unity路径
    readonly
    unity延迟加载图片
  • 原文地址:https://www.cnblogs.com/fzz9/p/10728703.html
Copyright © 2020-2023  润新知