Nodejs 在咱们坛子练习 node-webkit

前几天看到坛子里面很多人问有关node-webkit的问题，也就去看了下，真的还不错，就想着学习下，然后就拿咱们的坛子做demo了，下面是截图： ###1.进入画面：直接输入你在咱们坛子里面的用户名就行了

###2.加载画面：加载数据…

###3.显示画面：Home是首页的数据， Post是自己发布的， Join是自己参与的

###4.再来一张：显示画面

###5.再来一张：显示画面

这里讲下我的实现：我知道我不可能有接口，何况我也没有送礼所以我也不能直接去数据库抓数据啊，屌丝没有办法啊，然后我爬，我爬，我爬爬爬，呵呵呵，我写了一个小爬虫，然后爬取指定的页面抓取指定的数据，每次在进入的时候都会去抓取一次数据，所以在第一次进入的时候看到的数据是最新的，但是过一会就不一定了，可能坛子里面有新帖子就无法更新了(暂时的,我会接着完善)，

###But, 输入用户名之后发现数据不齐全，或者没有抓到头像，这个…爬虫的问题，我还在努力解决中…你可以多试几次进入-_-!!!

其实里面还有很多的问题没有得到解决，代码写的也有点乱，计划是点击标题的时候抓取文章内容的，但是不知道为什么我的jquery没有效果，所以导致现在只能看到title,一些计划的特效也都没有实现(失败)！

这里是源码链接，大家懂得… https://github.com/Dn9x/Webkit-demo

还请大家多多指教啊…

phonegap100 1楼

Nodejs 在咱们坛子练习 node-webkit

前几天看到坛子里有很多人问有关 node-webkit 的问题，于是我决定自己动手学习一下。node-webkit 是一个基于 Chromium 和 Node.js 的桌面应用开发框架，可以让你用 HTML、CSS 和 JavaScript 构建跨平台的应用程序。为了更好地理解它，我选择使用咱们的论坛作为示范。

实现过程

我通过编写一个简单的爬虫来抓取论坛的数据，并将其展示在一个桌面应用中。以下是具体的实现步骤：

进入画面：用户输入自己的用户名即可进入应用。
加载画面：在加载过程中，显示“加载数据…”提示。
显示画面：展示用户的首页数据、已发布的内容以及参与的话题。

示例代码

首先，我们需要安装必要的依赖包：

npm install node-webkit nw-gyp request cheerio

接下来，创建一个简单的爬虫脚本来抓取论坛数据：

const request = require('request');
const cheerio = require('cheerio');

function fetchUserData(username) {
    const url = `https://example.com/user/${username}`;
    
    return new Promise((resolve, reject) => {
        request(url, (err, res, body) => {
            if (err) {
                return reject(err);
            }
            
            const $ = cheerio.load(body);
            let data = {
                posts: [],
                joinedThreads: []
            };
            
            // 解析数据
            $('.post').each((index, element) => {
                data.posts.push($(element).text());
            });
            
            $('.thread').each((index, element) => {
                data.joinedThreads.push($(element).text());
            });
            
            resolve(data);
        });
    });
}

module.exports = fetchUserData;

在这个例子中，我们使用 request 库来获取网页内容，然后使用 cheerio 来解析 HTML 并提取所需数据。

接下来，在 index.html 中展示这些数据：

<!DOCTYPE html>
<html>
<head>
    <title>论坛数据展示</title>
    <script src="fetchUserData.js"></script>
</head>
<body>
    <input type="text" id="username" placeholder="请输入用户名">
    <button onclick="loadData()">加载数据</button>
    <div id="content"></div>

    <script>
        async function loadData() {
            const username = document.getElementById('username').value;
            try {
                const data = await fetchUserData(username);
                document.getElementById('content').innerHTML = `
                    <h1>首页数据</h1>
                    <ul>${data.posts.map(post => `<li>${post}</li>`).join('')}</ul>
                    <h1>已发布的内容</h1>
                    <ul>${data.posts.map(post => `<li>${post}</li>`).join('')}</ul>
                    <h1>参与的话题</h1>
                    <ul>${data.joinedThreads.map(thread => `<li>${thread}</li>`).join('')}</ul>
                `;
            } catch (error) {
                console.error(error);
            }
        }
    </script>
</body>
</html>

总结

虽然我在实现过程中遇到了一些问题，比如数据抓取不全和 jQuery 没有生效等，但这些问题都是可以逐步解决的。代码目前可能有些混乱，但我计划进一步优化和完善。希望各位能够提供宝贵的意见和建议，帮助我改进这个项目。

源码链接

希望大家能多多指教！

zlyuanteng 2楼

go go

eggper 3楼

赞一个, 没想到我还被蜘蛛盯上了 https://github.com/Dn9x/Webkit-demo/blob/master/test.js#L5

yuanlaile 4楼

只是测试而已，没有别的意思哦！

bupafengyu 5楼作者

你这个在ANDROID机上跑的？

phonegap100 6楼

ubuntu windows也可以，我开发在ubuntu,用的时候在windows上面

phonegap100 7楼

顶一下略牛B

caililin 8楼

node-webkit 针对的是pc 平台…win.mac,linux…

htzhanglong 9楼

好厉害哇！

htzhanglong 10楼

顶一下牛

vueper 11楼

为什么这个在我的这边没有运行起来呢登入后直接退出了怎么个情况？？？

eggper 12楼

求教，刚开始看node-webkit，就碰到问题了。我是mac os系统，按官网的意思是要先下个二进制的node-webkit，可是我下载双击后是一个类似chrome浏览器的窗口，然后在终端中输入nw app.js(这个是我在github上folk的代码) 为啥报 nw commond not defined啊。求入门指导。谢谢。

gougou168 13楼

我已经回复你邮件了，你看下邮件

gougou168 14楼

先顶，再问。请问如果用了数据库，那生成客户端的时候怎么办？比如说做成了exe放到其他机器上安装能跑不？

caililin 15楼

当然能跑了，首先要看数据库是本地还是远程的，如果你部署的是远程数据库，exe只是个客户端就好办，如果要让客户也装数据库，就想办法先让他装数据库！

caililin 16楼

node-webkit已经用在生产环境的路过

nodeper 17楼

什么项目？？开源不？？共享出来看看呗！

eggper 18楼

能不能给一下爬虫的代码看看？

caililin 19楼

我最近查了些资料，发现node-webkit有自带的数据库……详细可见:
https://github.com/rogerwang/node-webkit/wiki/Save-persistent-data-in-app
要是这样的话连mongoose模块都可以不用……

yibo5220 20楼

https://github.com/Dn9x/Webkit-demo 这里是地址

yibo5220 21楼

可以跑起来，赞一个。

有个问题请教下楼主，在我的node-webkit项目中只要我 require(‘mongoose’), nw.exe 马上就停止工作了，我看到楼主也用了mongoose ，不知有没有碰到我说的这种情况呢？

phonegap100 22楼

问题找到了，是mongoose版本的问题

sinazl 23楼

楼主，闪退是怎么回事？

wuwangju 24楼

什么环境？？之前没有闪退的问题啊，你的nodejs版本和node-webkit版本问题吧。

eggper 25楼

楼主写个教程呗。

yibo5220 26楼

-我也发一个，春季期间无聊学习NW写的一个DEMO： blog.cn-face.com/wl 代码现在还没时间去整理。。。

eggper 27楼

楼主，我打包运行你的的代码出现问题 Uncaught node.js Error

ReferenceError: $ is not defined at eval (file:///var/folders/xn/hz1gbcdd33jb2hvq1fgy1hc40000gn/T/.org.chromium.Chromium.LNjsuY/index.html:23:7) 这个怎么解，我是小白

sinazl 28楼

根据你的描述，你已经使用Node.js和node-webkit（现在称为NW.js）实现了对某个论坛（坛子）的模拟客户端。你的应用主要通过爬虫来获取该论坛的数据，并且展示了如何将这些数据展示在用户界面上。

以下是一些关键步骤和代码片段，用于帮助理解和实现类似的功能：

1. 爬虫部分

为了从网页上抓取数据，我们可以使用axios来发起HTTP请求，以及cheerio来解析HTML文档。首先，你需要安装这两个库：

npm install axios cheerio

然后，可以创建一个简单的爬虫脚本来抓取数据：

const axios = require('axios');
const cheerio = require('cheerio');

async function fetchForumData(username) {
    const response = await axios.get(`https://example.com/user/${username}`);
    const $ = cheerio.load(response.data);

    // 假设用户信息位于这样的结构中
    const avatarUrl = $('img.user-avatar').attr('src');
    const posts = [];

    // 假设所有帖子都在这种结构里
    $('.post').each((index, element) => {
        posts.push({
            title: $(element).find('.post-title').text(),
            link: $(element).find('.post-title a').attr('href'),
            // 其他你需要的信息...
        });
    });

    return { avatarUrl, posts };
}

2. 用户界面

使用NW.js，你可以创建一个本地的应用程序，它具有HTML、CSS和JavaScript的功能。这里是一个简单的HTML文件，用于显示抓取到的数据：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>论坛客户端</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <input id="username" type="text" placeholder="请输入用户名">
    <button onclick="fetchAndDisplay()">加载数据</button>

    <div id="data">
        <!-- 数据将会被动态插入到这里 -->
    </div>

    <script src="app.js"></script>
</body>
</html>

在这个HTML文件中，fetchAndDisplay()函数会调用爬虫脚本并更新UI：

function fetchAndDisplay() {
    const username = document.getElementById('username').value;
    fetchForumData(username).then(data => {
        // 更新UI，显示数据
        document.getElementById('data').innerHTML = `
            <img src="${data.avatarUrl}" alt="用户头像">
            <ul>
                ${data.posts.map(post => `<li><a href="${post.link}">${post.title}</a></li>`).join('')}
            </ul>
        `;
    });
}

总结

这个例子展示了如何结合爬虫技术和NW.js来构建一个简单的本地论坛客户端。注意，实际项目中可能需要处理更多的细节，例如错误处理、性能优化等。此外，对于合法性和道德问题，请确保遵守目标网站的服务条款。