nodejs构建vue_如何使用NodeJS，GraphQL和Vue构建简单的社交媒体监视器

nodejs构建vue

by Paschal

由Paschal

如何使用NodeJS，GraphQL和Vue构建简单的社交媒体监视器 (How to build a simple social media monitor with NodeJS, GraphQL, and Vue)

介绍 (Introduction)

We’ll build a simple monitor that will track the number of people that followed us on specific dates, using Medium as the use case. This is just a bare prototype and can be done for any other social media or networking platform.

我们将构建一个简单的监视器，以Medium为用例，该监视器将在特定日期跟踪关注我们的人数。 这只是一个简单的原型，可以在任何其他社交媒体或网络平台上完成。

In the end, we should have something like this:

最后，我们应该有以下内容：

To achieve this, we will use the node-imap package. The two major protocols for handling emails are IMAP (Internet Messaged Access Protocol) and POP (Post office protocol). IMAP is preferred, because it always syncs with the mail server, hence the changes made on the mail client will appear immediately on the webmail inbox.

为此，我们将使用node-imap包。 处理电子邮件的两个主要协议是IMAP(互联网消息访问协议)和POP(邮局协议)。 首选IMAP，因为它始终与邮件服务器同步，因此在邮件客户端上所做的更改将立即显示在Webmail收件箱中。

先决条件 (Prerequisites)

• NodeJS
  节点JS
• VueJS
  VueJS
• A Gmail account
  一个Gmail帐户

使用node-imap和apollo设置后端 (Setup the back-end with node-imap and apollo)

Firstly, install the necessary packages.

首先，安装必要的软件包。

npm i --save node-imap apollo-server mailparser

Now you can define the types and resolver and then run the apollo server.

现在，您可以定义类型和解析器，然后运行apollo服务器。

A ‘User’ type that has the email and password string types as its schema has been defined, and a mutation called ‘imapMutation’ which receives the email and password from the user and then returns a response with the User type.

已经定义了以电子邮件和密码字符串类型为模式的“ 用户 ”类型，以及一个名为“ imapMutation”的变体 ，该变体从用户那里接收电子邮件和密码，然后返回带有用户类型的响应。

The resolver handles the mutation, and then you can work with the arguments sent from the client.

解析器处理突变，然后您可以使用从客户端发送的参数。

Now you can run the server.

现在您可以运行服务器了。

You can then import the node-imap and mailparser modules. The mailparser module will be used to receive the mail responses as JSON.

然后，您可以导入node-imap和mailparser模块。 mailparser模块将用于以JSON形式接收邮件响应。

const Imap = require('imap')const simpleParser = require('mailparser').simpleParser

You are going to create a ‘connectImap’ function that will handle our IMAP functionality. From the node-imap documentation, you can get the skeleton of how the module works, and then copy and paste it into the code. It basically works with callbacks and emitters, so we’ll wrap it in a promise.

您将创建一个将处理我们的IMAP功能的' connectImap'函数。 从node-imap文档中，您可以获取模块工作原理的骨架，然后将其复制并粘贴到代码中。 它基本上可以与回调和发射器一起使用，因此我们将其包装在一个Promise中。

You should have something like this.

你应该有这样的东西。

When the ‘ready’ event is called, we connect to our mail, and then we can search for messages. So, we’ll search for emails from the medium account that handles followers (noreply@medium.com).

调用“ ready ”事件时，我们连接到邮件，然后可以搜索邮件。 因此，我们将从处理追随者的中等帐户( noreply@medium.com )中搜索电子邮件。

Our ‘ready’ event should look like this.

我们的“ 就绪 ”事件应如下所示。

We search for emails where each subject contains a ‘started following you’ substring. Then, we split the arrays with either a comma or the conjunction ‘and’ to get the number of followers, and then handle cases like ‘Peter and 3 others started following you’. After splitting the string above, we will have an output:

我们搜索每个主题都包含“ 开始跟随您 ”子字符串的电子邮件。 然后，我们用逗号或连词“和”对数组进行拆分，以获取关注者的数量，然后处理诸如“ 彼得和其他3个人开始关注您 ”之类的案例。 分割上面的字符串后，我们将得到一个输出：

[  'Peter',  '3 others started following you']

The length of this array is 2, so we have two followers. If the subject contains ‘others’, we take the digit behind it and add to the length of the array, which is 5 and then we subtract 1 to get rid of the ‘3 others started following you’ string. This leaves us with 4.

该数组的长度为2 ，因此我们有两个关注者。 如果主题包含“ others ”，我们将数字后面的数字加到数组的长度上，即5 ，然后减去1来摆脱“ 跟随您的字符串开始的其他3个人 ”。 这给我们留下了4 。

Then, we resolve the promise when the ‘end’ event is fired (imap.once(‘end’)).

然后，当' end '事件被触发时，我们解决诺言( imap.once('end') )。

Since we will have to send the array to our apollo client, we will need to define the type of the ‘graphPoints’ array.

由于我们必须将数组发送到我们的阿波罗客户端，因此我们需要定义“ graphPoints ”数组的类型。

Our type definitions should look like this:

我们的类型定义应如下所示：

We added the data key to the ‘User’ type, which will hold the ‘graphPoints’ value, and its type is an array of objects with the ‘Graph’ type.

我们在“ 用户 ”类型中添加了数据键，该键将保留“ graphPoints ”值，并且它的类型是“ 图形 ”类型的对象数组。

Finally, we handle the resolver, which will get the email and the password of the user and then return the email and the data (graphPoints).

最后，我们处理解析器，解析器将获取用户的电子邮件和密码，然后返回电子邮件和数据( graphPoints )。

If we log the user object, our structure should be something like this:

如果我们记录用户对象，则我们的结构应如下所示：

email: String,data: [ { numberOfFollowers: 1, date: 2017-07-05T07:53:18.000Z },        { numberOfFollowers: 1, date: 2017-07-07T19:34:57.000Z }      ]

使用v-charts和apollo客户端设置前端 (Setup the front-end with v-charts and apollo client)

Now, we want to get the data sent from the server and plot the chart with the v-charts module.

现在，我们要获取从服务器发送的数据，并使用v-charts模块绘制图表 。

But first, we install our dependencies.

但是首先，我们安装依赖项。

npm install --save vue-chartjs vue-apollo apollo-client apollo-link-http apollo-cache-persist apollo-cache-inmemory graphql graphql-tag moment

I know what you’re thinking — that’s a lot of dependencies. If you have troubles setting up a Vue project, you can find out how to do that here. We should also include vuetify and the vue-router if we want to style the project and create additional routes.

我知道您在想什么-这有很多依赖性。 如果您在设置Vue项目时遇到麻烦，可以在此处了解如何进行操作。 如果我们要为项目设置样式并创建其他路线，则还应包括vuetify和vue-router 。

In our ‘src’ folder, we can create a ‘config’ folder. The structure should look like this:

在我们的src文件夹中，我们可以创建一个config文件夹。 结构应如下所示：

|src  |config     -graphql.js     -index.js     -LineChart.js  |pages      -login.vue  |router      -index.js  App.vue  main.js

We will have to set up our graphql client in the src/config/index.js file.

我们将必须在src / config / index.js文件中设置我们的graphql客户端。

Make sure the uri is on the same port as your apollo server, by default the apollo server runs on port 4000. Our apollo client is then set up with the httpLink and the cache.

确保uri与apollo服务器在同一端口上，默认情况下apollo服务器在端口4000上运行。 然后使用httpLink和缓存设置我们的apollo客户端。

The src/config/graphql.js file should look like this:

src / config / graphql.js文件应如下所示：

This query will submit the email and the password of the user to the imapMutation and then get the email and the data(graphPoints) from the apollo server.

该查询会将用户的电子邮件和密码提交给imapMutation，然后从阿波罗服务器获取电子邮件和数据 (graphPoints)。

Then, we create our chart component in the src/config/LineChart.js file. We can use charts ranging from bar charts to histograms. A line chart was used in this example.

然后，我们在src / config / LineChart.js文件中创建图表组件。 我们可以使用从条形图到直方图的图表。 在此示例中使用了折线图。

We can import the ‘vue-apollo’ package in our main.js file and include the apolloProvider when initializing the app.

我们可以在main.js文件中导入“ vue-apollo ”包，并在初始化应用程序时包括apolloProvider 。

Finally, we will set up the src/pages/login.vue file, which we should have configured as the component for the default home route ‘/’ in the src/router/index.js file.

最后，我们将设置src / pages / login.vue文件，我们应该在src / router / index.js文件中将其配置为默认本地路由“ /”的组件。

So we created a basic form that accepts the email and password of the user and then send this data to the server through the signup() method. The plotGraph() method loops through the response(graphPoints) and pushes the dates to the labels array and the number of followers to the data array.

因此，我们创建了一个基本形式，接受用户的电子邮件和密码，然后通过signup()方法将此数据发送到服务器。 plotGraph()方法遍历response(graphPoints)，并将日期推送到labels数组，并将跟随者的数量推送到data数组。

After styling using the ‘options’ object, we should have something like the screenshot shown during the introduction to this project.

使用' options '对象进行样式设置后，我们应该具有类似于该项目简介中所示的屏幕截图。

结论 (Conclusion)

You can still do more with your personal project, but the aim of this was to show how to work with the node-imap package, and how apollo works as a server and as a client. If you had any problems with this project, you can leave a comment or send a message on Twitter.

您仍然可以对您的个人项目做更多的事情，但是这样做的目的是展示如何使用node-imap包，以及apollo作为服务器和客户端的工作方式。 如果您对此项目有任何疑问，可以在Twitter上发表评论或发送消息。

You can try the live version of this, or you could check out the repositories for the client and server applications on GitHub.

您可以尝试真人版本 ，或者你可以检查出库的客户端和服务器在GitHub上的应用。

If you want to learn new technologies and frameworks, you can do so here and if you learned anything at all, please do well to clap below.

如果您想学习新技术和框架，可以在这里进行 ，如果您学到了任何东西，请做好以下准备。

I will like to thank Wes Wagner for his feedback in making this article.

我要感谢韦斯·瓦格纳 ( Wes Wagner)对本文的反馈。

Thanks!

谢谢！

翻译自: https://www.freecodecamp.org/news/how-to-build-a-simple-social-media-monitor-with-nodejs-graphql-and-vue-55ffe4124ab5/

nodejs构建vue