node.js渲染和添加

数据库基本使用

所有的操作都是基于数据库来进行添加，修改，删除，查找，所以先来温习下数据库的基本使用

数据库

数据库是“按照数据结构来组织、存储和管理数据的仓库”。是一个长期存储在计算机内的、有组织的、可共享的、统一管理的大量数据的集合。

数据库的特点

• 实现数据共享。
  数据共享包含所有用户可同时存取数据库中的数据，也包括用户可以用各种方式通过接口使用数据库，并提供数据共享。
• 减少数据的冗余度。
  同文件系统相比，由于数据库实现了数据共享，从而避免了用户各自建立应用文件。减少了大量重复数据，减少了数据冗余，维护了数据的一致性。
• 数据的独立性。
  数据的独立性包括数据库中数据库的逻辑结构和应用程序相互独立，也包括数据物理结构的变化不影响数据的逻辑结构。
• 数据实现集中控制。
  文件管理方式中，数据处于一种分散的状态，不同的用户或同一用户在不同处理中其文件之间毫无关系。利用数据库可对数据进行集中控制和管理，并通过数据模型表示各种数据的组织以及数据间的联系。
• 数据一致性和可维护性，以确保数据的安全性和可靠性。
  ①安全性控制：以防止数据丢失、错误更新和越权使用；
  ②完整性控制：保证数据的正确性、有效性和相容性；
  ③并发控制：使在同一时间周期内，允许对数据实现多路存取，又能防止用户之间的不正常交互作用；
  ④故障的发现和恢复：由数据库管理系统提供一套方法，可及时发现故障和修复故障，从而防止数据被破坏
• 故障恢复。　
  由数据库管理系统提供一套方法，可及时发现故障和修复故障，从而防止数据被破坏。数据库系统能尽快恢复数据库系统运行时出现的故障，可能是物理上或是逻辑上的错误。比如对系统的误操作造成的数据错误等。
  数据库的基本使用

增

//sql
insert into 表名(字段名)values(对应值)

删

//sql
//全删
delete from 表名
//条件删除
delete from 表名  where 条件一般以id比较多;

改

//sql
//单行
update 表名 set 修改的内容 where id值;
//多行
update students  set 修改的内容1,修改的内容2 where id值;

查

//sql
//通配符查找
select * from 表名
//条件查找
select  * from 表名where 条件

以上是基本且主要sql语法，还有很多语法但对于node.js目前来说足够使用了

node.js实现爬取网站数据添加到数据库并渲染和添加到DEMO

0.准备步骤

首先要准备各个模块是否安装完毕

1. 使用默认配置 npm init -y可以从之前安装的模块全部自动配置下载
2. 使用npm i 模块名 来添加模块
3. 在每个模块下载成功后都需要 require进行相对应的导包
   注意 每创建一个文件夹就相当于开启一个新的项目目录 就必须再次初始化 npm init -y

1.实现爬取数据

准备步骤导入模块,先导入Crawler，mysql的模块

//导入爬虫模块
var Crawler = require("crawler");
//导入mysql模块
var mysql = require('mysql');

第一步
复制爬虫的代码结构

//基本用法 
var c = new Crawler({
    maxConnections : 10,//最大十个爬取网址
    callback : function (error, res, done) {
        if(error){
            console.log(error);
        }else{
            var $ = res.$;
            //书写需要爬取的页面结构代码
            
        }
        done();
    }
});

//爬取的网址
c.queue('http://www.amazon.com');
// 数组模式下爬取的网址
c.queue(['http://www.google.com/','http://www.yahoo.com']);

需要注意的事项 一般爬取不成功可能是有网站有反爬取机制，可能大部分原因是代码书写有问题

//取值时虽然可以使用jq的隐式迭代 但使用eq比较稳妥
//寻找一个跟数据一样可遍历的数进行循环
var li_list = $('.pic').length;
            for (var i = 0; i < li_list; i++) {
                var name = $('.name').eq(i).children('a').text();
                var url = $('.pic').eq(i).find('img').attr('data-src');
                console.log(name);
                console.log(url);
            }

（一般有自己的需要的内容则为成功）

第二步
将爬取的数据传入数据库
这一步相对来说比较简单，只需引入mysql模块，书写特定的代码结构就ok

//创建数据库连接
var connection = mysql.createConnection({
    host: '', //主机名
    user: '', //数据库用户名
    password: '', //数据库密码
    database: '', //数据库名
});
//连接数据库
connection.connect();

//书写需要爬取的页面结构代码书写添加语句
 connection.query(`insert into figure(name,url)values('${name}','${url}')`);

（主键id1为你所需的数据，有秩序，有组织即算成功添加到数据）

2.渲染到页面

先写出出从数据取出接口，再根据ajax请求数据
准备步骤导入各个模块 并进行初始化

//导入fs模块
const fs = require('fs');
//导入path模块
const path = require('path');
//导入url
const url = require('url');
//导入http
const http = require('http');
//导入querystring;
const querystring = require('querystring');
//导入mysql模块
var mysql = require('mysql');

创建服务器对象一整套流程

//创建服务器对象
const server = http.createServer((request, response))=>{
    //将请求地址存入变量
    let reqUrl = request.url;
    //将请求方式存入变量
    let reqMed = request.method;
    //写出各个不同接口的代码进行判断
}

监听服务器

// 监听服务器
server.listen("4399", () => {
    console.log("success");
})

获取数据库的所有数据

//在服务器对象'写出各个不同接口的代码进行判断'中写
    //写出请求地址和请求方式
  if (reqUrl == "/list" && reqMed == 'GET') {
        //执行mysql语句 查询所有
        const sql = 'select * from figure';
        //执行sql的模板
        connection.query(sql, function(error, results, fields) {
            if (error) throw error;
            // 直接使用response.end 返回一个数组 就报错 ,必须是字符串类型
            response.end(JSON.stringify(results));

        });
    }
    //在无法或请求错误的情况弹出的页面
else{
    fs.readFile(path.join(__dirname, "views", reqUrl), (err, data) => {
            if (!err) {
                //输入正确的页面
                response.end(data);
            } else {
                //输入页面才能进去,否则都是404
                response.end('404');

            }
        })
        }

根据页面代码结构从数据库中取出数据并渲染到页面上 使用 ajax即可

//ajax
    $.get({
        url: "/list",//请求路径
        dataType: "json",//数据格式
        success: function(data) {//成功代码
            var str = '';
            for (var i = 0; i < data.length; i++) {
                str += ` <tr>
                    <td>${data[i].Id}</td>
                    <td>${data[i].name}</td>
                    <td>
                        <img src="${data[i].url}" alt="" />
                    </td>
                    <td>
                        <a class="check" href="#">查看</a>
                        <a class="delete" href="#">删除</a>
                    </td>
                </tr>`;
            }
            $('tbody').html(str);
            console.log(data);
        }
    });

（页面展现出自己想要的结构即成功）

3.添加新数据到页面

添加添加数据的接口

//在服务器对象'写出各个不同接口的代码进行判断'中写if连接中写
else if (reqUrl == "/addhero" && reqMed == 'POST') {
        var str = "";

        request.on("data", (data) => {
            str += data;

        })
        request.on('end', () => {
            let postData = querystring.parse(str);
            console.log(postData);
            //执行mysql语句
            let sql = `insert into figure (name,url) values('${postData.name}','${postData.url}')`;
            connection.query(sql, function(error, results, fields) {

                if (error) throw error;
                // 直接使用response.end 返回一个数组 就报错 ,必须是字符串类型
                let res = {
                    code: 10000,
                    msg: "添加成功"
                }
                response.end(JSON.stringify(res));
            });

        })
    }

在html页面使用ajax使用请求

//添加
    $(function() {
        var $heroName = $('#heroName');
        var $heroIcon = $('#heroIcon');
        $('.btn-success').click(function() {
            $.post({
                url: "/addhero",
                dataType: "json",
                data: {
                    name: $heroName.val(),
                    url: $heroIcon.val(),
                },
                success: function(data) {
                    console.log(data);
                    location.href = 'index.html'
                },

            })
        })

    })

添加成功

欢迎在下方留言评论