一个从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">
          <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 练手用~）：