一个从0开始的vue项目(第四天:实现“新闻资讯标签页”)
项目前端第一步:将新闻咨询标签中的a标签改为router-link to属性绑定需要跳转的路由值,然后配置路由<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><router-link to="/home/newslist"&
·
项目前端
第一步:将新闻咨询标签中的a标签改为router-link to属性绑定需要跳转的路由值,然后配置路由
<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-extra mui-icon-extra-topic"></span>
<div class="mui-media-body">新闻资讯</div>
</router-link>
</li>
第二步:绘制新闻列表组件,调用接口并渲染
<template>
<div class="newslist">
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-media" v-for="item in newslist" :key="item.id">
<router-link :to="'/home/newslist/'+item.id">
<img class="mui-media-object mui-pull-left" src="./../../images/shuijiao.jpg">
<div class="mui-media-body">
<h1>{{item.title}}</h1>
<p class="mui-ellipsis">
<span>发表时间:{{item.addTime | dataFormat}}</span>
<span>点击:{{item.click}}次</span>
</p>
</div>
</router-link>
</li>
</ul>
</div>
</template>
<script>
import { Toast } from "mint-ui";
export default {
data() {
return {
newslist: []
};
},
created() {
this.getnewslist();
},
methods: {
getnewslist: function() {
var vm = this;
this.$reqs.get("/news/newslist").then(function(res) {
if (res.data.status === true) {
vm.newslist = res.data.data;
} else {
Toast("获取失败!");
}
});
}
}
};
</script>
第三步:绘制新闻详情组件,调用接口并渲染
<template>
<div class="newsinfo-content">
<h3 class="title">{{newsinfo.title}}</h3>
<p class="subtitle">
<span>发表时间:{{newsinfo.addTime | dataFormat}}</span>
<span>点击:{{newsinfo.click}}</span>
</p>
<hr>
<div class="content" v-html="newsinfo.content">
</div>
<comment-box :id="this.id"></comment-box>
</div>
</template>
<script>
//导入子组建
import comments from "./../subcomponts/comment";
export default {
data() {
return {
id: this.$route.params.id,
newsinfo: {}
};
},
created() {
this.getnewsinfo();
},
methods: {
getnewsinfo: function() {
let vm = this;
this.$reqs
.get("/news/newsinfo/" + this.id)
.then(function(res) {
vm.newsinfo = res.data.data[0];
})
.then(function(err) {
// Toast("获取新闻失败!");
});
}
},
components: {
"comment-box": comments //独立的评论子组件
}
};
</script>
第四步:抽离出一个独立的评论子组件
<template>
<div class="cmt-content">
<h3>发表评论</h3>
<hr>
<textarea placeholder="请输入要评论的内容(最多吐槽120字)" maxlength="120" v-model="msg"></textarea>
<mt-button type="primary" size="large" @click="postcomment">发表评论</mt-button>
<div class="cmt-list">
<div class="cmt-item" v-for="(item,i) in comments" :key="i">
<div class="cmt-title">
第{{i+1}}楼 用户:{{item.username}} 发表时间:{{item.addTime|dataFormat}}
</div>
<div class="cmt-body">
{{item.content}}
</div>
</div>
</div>
<mt-button type="danger" size="large" plain :disabled='btn_status' @click="jiazai">加载更多</mt-button>
</div>
</template>
<script>
export default {
data() {
return {
pageindex: 1, //默认展示第一页
comments: [],
btn_status: false,
total: 0,
msg: ""
};
},
created() {
this.getcomments();
},
methods: {
getcomments: function() {
var vm = this;
this.$reqs
.get("/comments/" + this.id + "?pageindex=" + this.pageindex)
.then(function(res) {
if (res.data.status === true) {
vm.total = res.data.total;
vm.comments = vm.comments.concat(res.data.data);
if (vm.pageindex === res.data.total) {
vm.btn_status = true;
}
}
})
.catch(function(err) {
console.log(err);
});
},
jiazai() {
this.pageindex++;
this.getcomments();
console.log(123);
},
postcomment() {
var vm = this;
//发表评论
this.$reqs
.post("/comments/postcom/" + this.id, {
msg: vm.msg.trim()
})
.then(function(res) {
if (res === true) {
var cmt = {
username: "text",
addTime: Date.now(),
content: vm.msg.trim()
};
vm.comments.pop(cmt);
vm.msg = "";
}
})
.catch(function(err) {
console.log(err);
});
}
},
props: ["id"]
};
</script>
项目后端
第一步:配置路由,处理请求
我们到了这里之后 后端的处理过程实际上比较简单,只需要对每个模块进行不同的路由配置,然后再其独立的js中写入分发请求的逻辑代码即可,楼主处理的都是比较简单的数据库 增删改查的操作,贴出一部分代码:
var express = require('express');
var router = express.Router();
const sqlhelper = require('./../../mysqlhandler');
const mdb = sqlhelper.db;
router.get('/newslist', function (req, res) {
const sql = 'select * from newslist'
mdb.query(sql, function (err, data) {
if (err) {
console.log(err);
} else {
res.send({
status: true,
data: data
})
}
})
})
router.get('/newsinfo/:id', function (req, res) {
let id = req.params.id;
const sql = `select * from newsinfo where id=${id}`
mdb.query(sql, function (err, data) {
if (err) {
console.log(err);
} else {
res.send({
status: true,
data: data
})
}
})
})
module.exports = router;
数据库
这里楼主为了简单,设计了两张表,一个newslist,一个newsinfo。贴图以示说明(楼主这里的表设计的非常不合理,仅仅是为了熟悉nodejs和express 练手用~):
更多推荐
已为社区贡献3条内容
所有评论(0)