新闻列表案例接口文档

---

接口地址：http://localhost:8081/api/get/news

请求类型：get

返回的数据：

{
    status:200,
        message:"获取新闻列表成功",
        list:[
        {
            "id":1,
            "title":"解忧杂货店",
            "content":"《解忧杂货店》是日本作家东野圭吾写作的长篇小说。2011年《小说野性时代》连载，于2012年3月由角川书店发行单行本",
            "img_url":"http://t15.baidu.com/it/u=2090705107,20534764&fm=224&app=112&f=JPEG?w=500&h=500&s=61D0718656561FFFE504A51703000067",
            "add_time":"1984-04-03 11:43:37"}
        ],
        total:50
    }
}

案例实现过程步骤

---

一、安装mockjs和axios

• 项目根目录下安装mockjs

cnpm i mockjs

•  项目根目录下安装axios

cnpm install axios --save

 二、文件结构及代码

• 在项目根目录创建mock文件夹，与main.js同级。mock文件夹下创建index.js主文件，拦截请求，配置请求路径，请求方式等。

•  在项目中创建index.js，引入moke.js并定义一个新闻列表的接口模拟数据

moke/index.js代码：

//引入moke.js文件
import Mock from 'mockjs'
//利用mock模拟数据
const newslist=Mock.mock({
    'newslist|30':[
        {
            "id":"@increment",//自增id
            "title":"@ctitle(5,8)",//随机生成5-8个字的标题
            "content":"@cparagraph(5,15)",//随机生成5-15句的段落
            "img_url":"@image('100x100', '#50B347', '#FFF','png','Mock.js')",//随机生成图片
            "add_time":"@date(yyyy-MM-dd hh:mm:ss)"//随机生成时间
        }
    ]
})
// 定义获取新闻列表的接口
Mock.mock('http://localhost:8081/api/get/news','get',()=>{
    return{
        status:200,
        message:"获取新闻列表成功",
        list:newslist,
        total:newslist.length
    } 
})

• main.js里面引入该文档和axios文件，将axios挂载到vue的原型上

main.js代码：

import Vue from 'vue'
import App from './App'
import router from './router'
//引入mock文件夹下的index.js文件
import './mock/index.js'
// 引入axios
import axios from 'axios'
// 把axios挂载到vue的原型上
Vue.prototype.$axios = axios;

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

• xxx.vue文件中使用axios调用mock.js中模拟的数据接口，这时返回的res就是mock.js中用Mock.mock('url','get',data）中设置的data了。

getNewsList(){
	  let url='http://localhost:8081/api/get/news';
      this.$axios.get(url).then(res=>{
         //打印获取的moke数据
        console.log(res)
      })
	  .catch(err => {
        // 未获得成功之后的报错信息
        console.log(err);
		})
    }

新闻列表界面.vue

<template>
  <div class="contain">
		<h2>新闻列表管理</h2>
	<input type="text" name="title" placeholder="请输入标题">&nbsp;
	<input type="text" name="content" placeholder="请输入内容">&nbsp;&nbsp;
	<button>添加</button>
	<table>
		<thead>
			<tr>
				<th style="width: 45px;">序号</th>
				<th>图片</th>
				<th style="width: 145px;">标题</th>
				<th>内容</th>
				<th>时间</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody>
			<tr v-for="(item,index) in list" :key="index">
				<td>{{item.id}}</td>
				<td><img :src=item.img_url></td>
				<td>{{item.title}}</td>
				<td>{{item.content}}</td>
				<td>{{item.add_time}}</td>
				<td><button>删除</button></td>
			</tr>
		</tbody>
	</table>
	</div>
</template>

<script>
export default {
  data(){
    return{
		list:[]
    }
  },
 created(){
    this.getNewsList()
  },
  methods:{
    getNewsList(){
	  let url='http://localhost:8081/api/get/news';
      this.$axios.get(url).then(res=>{
      // console.log(res)
	  this.list=res.data.list.newslist
      })
	  .catch(err => {
        // 未获得成功之后的报错信息
        console.log(err);
		})
    }

  }

}
</script>

<style>
    *{
	  margin: 0;
	  padding: 0;
	}
		.contain{
			width: 90%;
			margin: 10px auto;
		}
		h2{
			height: 55px;
			line-height: 55px;
		}
		input{
			width: 150px;
			height: 25px;
			border: 1px solid #ccc;
			border-radius: 3px;
			padding-left:5px;
		}
		button{
			height: 25px;
			width: 80px;
			border-width: 0px; /* 边框宽度 */
			border-radius: 3px; /* 边框半径 */
			background: #1E90FF; /* 背景颜色 */
			cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
			outline: none; /* 不显示轮廓线 */
			font-family: Microsoft YaHei; /* 设置字体 */
			color: white; /* 字体颜色 */
			font-size: 14px; /* 字体大小 */
}
		table{
			border-collapse: collapse;
			width: 100%;
			margin-top: 15px;
		}
		th{
			height: 35px;
			line-height: 35px;
			text-align: center;
			background: #F5F5F5;
		}
		td{
			height: 135px;
			padding: 10px;
			text-align: center;
		}
		td,th{
			border:1px solid #DCDCDC;
		}
</style>

运行界面：