node 新闻列表项目（采用前后端分离思想，简易实现）前端项目练习

飞天巨兽

已于 2022-05-17 20:41:21 修改

阅读量689

点赞数 2

分类专栏： node javaScript 文章标签： node.js javascript html 前端 1024程序员节

于 2021-10-10 23:50:27 首次发布

本文链接：https://blog.csdn.net/qq_41538165/article/details/120693873

版权

node 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

javaScript

4 篇文章 0 订阅

订阅专栏

效果展示：

大概思路：

主要通过node实现搭建服务，实现数据交互。

前端页面使用html展示，然后读取后端接口，通过原生js修改dom。
后端通过读取json文件模拟数据存储，通过页面地址实现数据传递。

依赖插件：

axios
koa
koa-router
koa-static
koa-views

插件安装：npm install axios koa koa-router koa-static koa-views -S

实现流程：

初始化node项目：

npm init

文件目录结构：

main.js文件：

项目入口，主要配置项目的静态资源、html模板、路由和node服务的开启

import Koa from 'koa'
import koaStatic from 'koa-static'
import views from 'koa-views'
import router from './koaRouter.js'
import path from 'path'

let app = new Koa();

// 当前项目的路径
const __dirname = path.resolve(); 

// 引入静态目录（简单来说可以文件中可以引入的js、图片等这类静态资源，如本项目index.html文件中引入了../js/index.js）
app.use(koaStatic(__dirname)); 

// 使用html格式
app.use(views(__dirname+"/views"), {
  extension: "html"
});

// 引入路由，并使用
app.use(router.routes());

// node项目启动
app.listen(8887,'127.0.0.9', ()=>{
  console.log('127.0.0.9:8887')
});

koaRouter.js文件：

配置需要显示的页面，如首页index，详情页detail。

import router from './api/api.js'

// 重定向，如果页面地址是/ ,自动跳转到/index
router.get("/",async ctx=>{
  ctx.redirect('/index');
});

// 首页
router.get("/index",async ctx=>{
  await ctx.render("./index.html");//渲染views下的index.html
});

// 详情页
router.get("/detail",async ctx=>{
  await ctx.render("./detail.html");
});

export default router;

api/api.js文件：

后端接口：新闻列表和详情

import Router from 'koa-router'
import fs from "fs";
import path from 'path'
let routerApi = new Router();
const __dirname = path.resolve();

/**
 * des: 获取新闻列表接口
 * 接口配置：
 *    {
 *     contentType: 请求方式  application/x-www-form-urlencoded
 *     method: 请求类型 get
 *    }
 * 默认参数：
 *    {
 *      page: 1,      页数
 *      pageSize: 5  每页条数
 *    }
 * 返回参数：
 *    {
 *      pageSize: 5,
 *      page: 1,
 *      list: [{...},{...}...],
 *      count: *
 *    }
*/

routerApi.get("/list",ctx => {
  let page = ctx.query.page || 1;
  let pageSize = ctx.query.pageSize || 5;
  let newsList = JSON.parse(fs.readFileSync(__dirname + "/assets/data.json").toString());
  let count = 0 || newsList.length;

  ctx.body = {
    page,
    pageSize,
    count,
    list: newsList.slice(page * pageSize - pageSize, page * pageSize)
  }
});

/**
 * des: 获取新闻详情页
 * 接口配置：
 *    {
 *     contentType: 请求方式  application/x-www-form-urlencoded
 *     method: 请求类型 get
 *    }
 * 默认参数：
 *    {
 *      id: *
 *    }
 * 返回参数：
 *    {
 *      list: {...}
 *    }
*/

routerApi.get("/newsDetail",ctx => {
  let id = ctx.query.id;
  let newsList = JSON.parse(fs.readFileSync(__dirname + "/assets/data.json").toString());
  let list = undefined;
  for(let i = 0; i < newsList.length; i++){
    if(newsList[i].id == id){
      list = newsList[i];
      break;
    }
  }
  ctx.body = {
    list
  }
});

export default routerApi;

views/index.html文件：

新闻首页

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>首页</title>
  <style>
    body,html{
      margin: 0;
      padding: 0;
      width:100%;
      height:100%;
    }
    .wrap{
      width:600px;
      margin: 40px auto;
      border:1px solid #ccc;
      padding: 50px;
    }
    a{
      text-decoration: none;
      color: rgba(0,0,0,.65);
    }
    #pagination{
      text-align: center;
    }
    #pagination a{
      height: 32px;
      margin-right: 8px;
      display:inline-flex;
      justify-content: center;
      align-items: center;
      vertical-align: middle;
      min-width: 32px;
      list-style: none;
      background-color: #fff;
      border: 1px solid #d9d9d9;
      border-radius: 4px;
      outline: 0;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      padding: 0 6px;
      transition: none;
    }
    .active{
      font-weight: 500!important;
      color: #1890ff!important;
      background: #fff!important;
      border-color: #1890ff!important;
    }
    ul{
      margin: 0;
      padding-bottom:50px ;
    }
    ul li{
      list-style-type: none;
      padding-bottom: 5px;
      border-bottom: 1px solid #ccc;
    }
    ul li h3{
      font-size: 16px;
      margin-bottom: 5px;
    }
    .info{
      font-size: 14px;
      text-align: right;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <ul id="news-list"></ul>
    <div id="pagination"></div>
  </div>
</body>
<script src="../js/axios.js"></script>
<script src="../js/index.js"></script>
</html>

js/index.js文件：

新闻首页js代码

let page = 1;// 当前页
let pageSize = 5;// 每页页数
// 获取dom元素
let dom = document.getElementById("news-list");
let paginationDom = document.getElementById("pagination");
// 一共多少页
let allPage = undefined;
// 判断是否为第一次执行
let init = true;

getNewsList();
// 获取新闻列表
function getNewsList(){
  axios.get('/list',{
    params: {
      page,
      pageSize
    },
  }).then(function (response) {
    const data = response.data;
    // 新闻列表
    let str = '';
    data.list.forEach(element => {
      str += `
        <li>
          <div>
            <h3><a href="detail?id=${ element.id }">${ element.title }</a></h3>
            <div class="info">
              <span class="tips"><span>${ element.author }</span></span>
              <span class="time">&nbsp;|&nbsp;${ element.addTime }</span>
          </div>
          </div>
        </li>
      `;
    });
    dom.innerHTML = str;

    // 分页器
    // 如果是第一执行，添加分页器元素，否则只修改点击的某一页样式
    if(init){
      init = false;
      let paginationStr = `
        <a href="javascript:;" class="prev" onclick="paginationClick('prev')"> 
          <svg viewBox="64 64 896 896" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path>
          </svg>
        </a>
      `;
      allPage = Math.ceil(data.count / data.pageSize);
      for(let i = 1; i <= allPage; i++){
        if(data.page == i){
          paginationStr += `
            <a href="javascript:;" class="active" onclick="paginationClick('${ i }')">${ i }</a>
          `;
        }else{
          paginationStr += `
            <a href="javascript:;" onclick="paginationClick('${ i }')">${ i }</a>
          `;
        }
      }
      paginationStr += `
        <a href="javascript:;" class="next" onclick="paginationClick('next')">
          <svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
            <path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path>
          </svg>
        </a>
      `;
      paginationDom.innerHTML = paginationStr;
    }else{
      // 处理分页器的当前页
      document.getElementsByClassName("active")[0]?.classList.remove('active');
      paginationDom.children[data.page].classList.add("active");
    }
    
  }).catch(function (error) {
    // handle error
    console.log(error);
  });
}
// 点击分页器，刷新列表
function paginationClick(sort){
  switch(sort){
    case 'prev':
      page--;
      if(page <= 0){
        page = 1;
        return;
      }
      break;
    case 'next':
      page++;
      if(page > allPage){
        page = allPage;
        return;
      }
      break;
    default:
      page = +sort;
  }
  getNewsList();
}

views/detail.html文件：

新闻列表点击后进入的详情页面

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>详情页</title>
  <style>
    body,html{
      margin: 0;
      padding: 0;
      width:100%;
      height:100%;
    }
    .wrap{
      width:600px;
      margin: 40px auto;
      text-align: center;
      border:1px solid #ccc;
      padding: 50px;
    }
    .info{
      font-size: 14px;
      text-align: right;
      display: flex;
      justify-content: end;
      color: rgb(119, 114, 114);
    }
    .content{
      line-height: 20px;
      margin-top: 10px;
      text-align: left;
      text-indent: 2rem;
    }
    .button{
      text-align: right;
      cursor: pointer;
      color: #1890ff;
    }
    .button::after{
      color: #40a9ff;
    }
  </style>
</head>
<body>
  <div class="wrap"></div>
</body>
<script src="../js/axios.js"></script>
<script src="../js/detail.js"></script>
</html>

js/detail.js文件：

新闻详情页js代码

// 获取dom元素
let dom = document.getElementsByClassName("wrap")[0];
getDetail();

// 获取详情页
function getDetail(){
  // 请求接口
  axios.get('/newsDetail',{
    params: {
      id: GetQuery('id'),
    },
  }).then(function (response) {
    let data = response.data.list;
    let str =  `
      <div class="button" onclick="window.history.go(-1)">返回</div>
      <h3>${ data.title }</h3>
      <div class="info">
        <div>${ data.author }&nbsp;|&nbsp;</div>
        <div>${ data.addTime }</div>
      </div>
      <div class="content">${ data.content }</div>
    `;
    dom.innerHTML = str;
  }).catch(function (error) {
    // handle error
    console.log(error);
  });
}
//  获取URL后缀
function GetQuery(key){
  let after = window.location.search;
  after = after.substr(1) || window.location.hash.split('?')[1];
  if (after) {
    const reg = new RegExp(`(^|&)${key}=([^&]*)(&|$)`);
    const r = after.match(reg);
    if (r != null) {
      return (r[2]);
    }
    return null;
  }
  return null;
};

assets/data.json文件

数据

[
    {
      "addTime": "2019-6-18",
      "author":"小红",
      "id": 1,
      "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
      "content": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
    },
    {
        
      "id": 2,
      "addTime": "2021-1-9",
      "author":"小明",
      "title": "qui est esse",
      "content": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
    },
    {
      "addTime": "2018-10-20",
      "author":"春华",
      "id": 3,
      "title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",
      "content": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut"
    },
    {
      "addTime": "2021-10-20",
      "author":"张三",
      "id": 4,
      "title": "eum et est occaecati",
      "content": "ullam et saepe reiciendis voluptatem adipisci\nsit amet autem assumenda provident rerum culpa\nquis hic commodi nesciunt rem tenetur doloremque ipsam iure\nquis sunt voluptatem rerum illo velit"
    },
    {
      "addTime": "2021-1-8",
      "author":"李四",
      "id": 5,
      "title": "nesciunt quas odio",
      "content": "repudiandae veniam quaerat sunt sed\nalias aut fugiat sit autem sed est\nvoluptatem omnis possimus esse voluptatibus quis\nest aut tenetur dolor neque"
    },
    {
      "addTime": "2020-5-18",
      "author":"王五",
      "id": 6,
      "title": "dolorem eum magni eos aperiam quia",
      "content": "ut aspernatur corporis harum nihil quis provident sequi\nmollitia nobis aliquid molestiae\nperspiciatis et ea nemo ab reprehenderit accusantium quas\nvoluptate dolores velit et doloremque molestiae"
    },
    {
      "addTime": "2021-1-20",
      "author":"小红",
      "id": 7,
      "title": "magnam facilis autem",
      "content": "dolore placeat quibusdam ea quo vitae\nmagni quis enim qui quis quo nemo aut saepe\nquidem repellat excepturi ut quia\nsunt ut sequi eos ea sed quas"
    },
    {
      "addTime": "2021-7-16",
      "author":"小张",
      "id": 8,
      "title": "dolorem dolore est ipsam",
      "content": "dignissimos aperiam dolorem qui eum\nfacilis quibusdam animi sint suscipit qui sint possimus cum\nquaerat magni maiores excepturi\nipsam ut commodi dolor voluptatum modi aut vitae"
    },
    {
      "addTime": "2018-11-22",
      "author":"路飞",
      "id": 9,
      "title": "nesciunt iure omnis dolorem tempora et accusantium",
      "content": "consectetur animi nesciunt iure dolore\nenim quia ad\nveniam autem ut quam aut nobis\net est aut quod aut provident voluptas autem voluptas"
    },
    {
      "addTime": "2019-4-11",
      "author":"带土",
      "id": 10,
      "title": "optio molestias id quia eum",
      "content": "quo et expedita modi cum officia vel magni\ndoloribus qui repudiandae\nvero nisi sit\nquos veniam quod sed accusamus veritatis error"
    },
    {
      "addTime": "2021-10-1",
      "author":"卡卡西",
      "id": 11,
      "title": "et ea vero quia laudantium autem",
      "content": "delectus reiciendis molestiae occaecati non minima eveniet qui voluptatibus\naccusamus in eum beatae sit\nvel qui neque voluptates ut commodi qui incidunt\nut animi commodi"
    },
    {
      "addTime": "2021-10-20",
      "author":"罗宾",
      "id": 12,
      "title": "in quibusdam tempore odit est dolorem",
      "content": "itaque id aut magnam\npraesentium quia et ea odit et ea voluptas et\nsapiente quia nihil amet occaecati quia id voluptatem\nincidunt ea est distinctio odio"
    },
    {
      "addTime": "2021-10-20",
      "author":"王五",
      "id": 13,
      "title": "dolorum ut in voluptas mollitia et saepe quo animi",
      "content": "aut dicta possimus sint mollitia voluptas commodi quo doloremque\niste corrupti reiciendis voluptatem eius rerum\nsit cumque quod eligendi laborum minima\nperferendis recusandae assumenda consectetur porro architecto ipsum ipsam"
    },
    {
      "addTime": "2021-1-1",
      "author":"张三",
      "id": 14,
      "title": "voluptatem eligendi optio",
      "content": "fuga et accusamus dolorum perferendis illo voluptas\nnon doloremque neque facere\nad qui dolorum molestiae beatae\nsed aut voluptas totam sit illum"
    },
    {
      "addTime": "2020-12-25",
      "author":"张红",
      "id": 15,
      "title": "eveniet quod temporibus",
      "content": "reprehenderit quos placeat\nvelit minima officia dolores impedit repudiandae molestiae nam\nvoluptas recusandae quis delectus\nofficiis harum fugiat vitae"
    },
    {
      "addTime": "2021-3-15",
      "author":"杰克",
      "id": 16,
      "title": "sint suscipit perspiciatis velit dolorum rerum ipsa laboriosam odio",
      "content": "suscipit nam nisi quo aperiam aut\nasperiores eos fugit maiores voluptatibus quia\nvoluptatem quis ullam qui in alias quia est\nconsequatur magni mollitia accusamus ea nisi voluptate dicta"
    },
    {
      "addTime": "2010-6-17",
      "author":"秀才",
      "id": 17,
      "title": "fugit voluptas sed molestias voluptatem provident",
      "content": "eos voluptas et aut odit natus earum\naspernatur fuga molestiae ullam\ndeserunt ratione qui eos\nqui nihil ratione nemo velit ut aut id quo"
    },
    {
      "addTime": "2010-2-17",
      "author":"蓦然回首",
      "id": 18,
      "title": "voluptate et itaque vero tempora molestiae",
      "content": "eveniet quo quis\nlaborum totam consequatur non dolor\nut et est repudiandae\nest voluptatem vel debitis et magnam"
    },
    {
      "addTime": "2020-2-2",
      "author":"菠萝吹雪",
      "id": 19,
      "title": "adipisci placeat illum aut reiciendis qui",
      "content": "illum quis cupiditate provident sit magnam\nea sed aut omnis\nveniam maiores ullam consequatur atque\nadipisci quo iste expedita sit quos voluptas"
    },
    {
      "addTime": "2021-10-20",
      "author":"张舞",
      "id": 20,
      "title": "doloribus ad provident suscipit at",
      "content": "qui consequuntur ducimus possimus quisquam amet similique\nsuscipit porro ipsam amet\neos veritatis officiis exercitationem vel fugit aut necessitatibus totam\nomnis rerum consequatur expedita quidem cumque explicabo"
    },
        {
        "addTime": "2021-10-20",
        "author":"张舞",
        "id": 21,
        "title": "doloribus ad provident suscipit at",
        "content": "qui consequuntur ducimus possimus quisquam amet similique\nsuscipit porro ipsam amet\neos veritatis officiis exercitationem vel fugit aut necessitatibus totam\nomnis rerum consequatur expedita quidem cumque explicabo"
    }
  ]

js/axios.js文件

自己网上拷贝

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

提示：

项目使用的是module，所以必须在package.json 添加"type": "module",

另外项目扩展：node mysql pug 实现新闻后管

今天又是令人emo的周一了！！！Σ( ￣д￣；) ！！！

飞天巨兽

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
node 新闻列表项目（采用前后端分离思想，简易实现）前端项目练习

效果展示：大概思路：主要通过node实现搭建服务，实现数据交互。前端页面使用html展示，然后读取后端接口，通过原生js修改dom。后端通过读取json文件模拟数据存储，通过页面地址实现数据传递。依赖插件：axios koa koa-router koa-static koa-views插件安装：npm install axios koa koa-router koa-static koa-views -S实现流程：初始化node项目：...
复制链接

扫一扫