前端设计与开发大作业 —— 新闻数据展示网站的搭建

最新推荐文章于 2023-12-24 11:19:36 发布

煖然

最新推荐文章于 2023-12-24 11:19:36 发布

阅读量2.3k

点赞数 3

本文链接：https://blog.csdn.net/weixin_40484275/article/details/106424958

版权

本文详述了一位学生使用Node.js的Express框架和数据库搭建新闻数据展示网站的过程，包括用户注册登录、布尔查询、分页、排序等功能实现。重点介绍了Express的使用、数据库设置和Echarts图表的集成，以及Session技术在记录用户状态中的应用。

摘要由CSDN通过智能技术生成

0. 前言

基于本次课程的第一个项目所建立的爬虫所爬取到的新闻，建立一个新闻数据展示网站，本次报告介绍了大作业的开发和实现过程，以下是作业技术要求以及实现要求：

技术要求

采用Node.JS实现后端
采用Express框架实现前端

实现要求

1、用户可注册登录网站，非注册用户不可登录查看数据
2、用户注册、登录等操作记入数据库中的日志
3、实现查询词支持布尔表达式（如“新冠 AND 肺炎”，“新冠 OR 肺炎”）
4、爬虫数据查询结果列表支持分页和排序
5、用Echarts或者D3实现3个及以上的数据分析图表展示在网站中

1. Express框架

Express简介

Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用和丰富的 HTTP 工具。

Express 框架的核心特性如下：

可以设置中间件来响应 HTTP 请求。
定义了路由表用于执行不同的 HTTP 请求动作。
可以通过向模板传递参数来动态渲染 HTML 页面

Express安装&新建工程

npm install -g express-generator

在安装该模块的时候一开始报错，后经检查是网络连接中断问题，建议换用较好的网络或国内镜像源。

express -e NewsWeb

express会初始化一个工程项目，并指定使用 ejs 模板引擎，

2. 项目框架

在考虑了需要做的功能之后，构思了项目的整个框架，边做可以边进行调整~~

-bin // 项目的启动文件，可配置端口等其他一些信息
-models
	--db.js // Mysql数据库连接
	--user.js // 用户操作模块
	--post.js // 新闻查找模块
-node_modules // 一些node的模块
-public //存放静态文件如图片，css等
-routes
	--index.js //页面路由
	--users.js
-views 
	--各种ejs文件，如登陆注册搜索Echart界面等等
-app.js
-setting.js //本地数据库设置信息

3. 数据库设置

编写一个db.sql进行数据库的连接，在setting.js中放置了本地数据库的设置，在接下去的实现中可以直接调用这个connection而不用每次都连接一遍。

db.js

var settings = require('../settings');
var mysql = require('mysql');

const getConnection = function() {
   
  let bRet = false
  try {
   
    let _connection = null
    _connection = mysql.createConnection({
   
      host     : settings.host,
      database : settings.db,
      user     : settings.user,
      password : settings.password
    });
    
    _connection.connect();
  
    return _connection;
  } catch(e) {
   
      console.log(e.message)
      return {
   error: e.message};
  }
}
module.exports = {
   
  getConnection: getConnection
}

setting.js

/*数据库连接*/
module.exports = {
   
  cookieSecret: 'mynews',
  host: 'localhost',
  port: 3306,
  user: 'root',
  password: 'root',
  db: 'crawl'
};

4. 功能实现

接下来流水账式地记录一下作业的需求实现过程，每个模块都会介绍思路，代码以及实现的截图。

4.1 登录

首先设置SQL TABLE来存储用户信息，其中包含用户id，用户名，密码以及用户邮箱。

DROP TABLE IF EXISTS `t_blog_user`;

CREATE TABLE `t_blog_user` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `user_name` varchar(128) NOT NULL,
  `pass_word` varchar(128) NOT NULL,
  `email` varchar(128) DEFAULT NULL,
  PRIMARY KEY (`id`)
)

登录部分主要操作分以下三部分：
首先是登录界面的login.ejs，负责接收前端输入的表单：

<%- include header %>
<form method="post">
  用户名：<input type="text" name="name"/><br /><br />
  密码：  <input type="password" name="password"/><br /><br />
         <input type="submit" value="登录"/>
</form>
<%- include footer %>

在index.js中实现了登录操作的逻辑，User.get方法从数据库中获取登录用户的信息。

User.get( )

//读取用户信息
User.get = function (name, callback) {
   
  if (!name) {
   
    return callback('参数异常');
  }
  let sqlString = 'select * from t_blog_user where user_name = ?';
  let findOne = conn.query(sqlString, name, function (error, results, fields) {
   
    if (error) {
   
      console.log('error: ', error)
      return callback(error); 
    }
    if (results) {
   
      return callback(null, results);
    }
  });
};

Index.js中的登录部分

逻辑部分：

如果查找不到该用户 → 返回无法找到用户
如果密码错误 → 提示密码错误
登陆成功 → 提示已经登录并跳转到新闻主页，在未登录前用户无法看到新闻

  app.get('/login', function (req, res) {
   
    res.render('login', {
   
      title: '登录',
      user: req.session.user,
      success: req.flash('success').toString(),
      error