. 任务目标

随着业务的增加，各个单位部分的联系人也越来越多，所以需要做一个通讯录。

2. 创建ipa app

3. 设置settings.py

4. 编写models

思路：因为是通讯录，所以要考虑好数据库字段。

业务信息整合表上有的字段为：序号 单位名称 政府单位接口人 第三方软件接口人 带宽使用 项目名称 系统名称 IP地址 虚拟机名称 CPU核数 主频（GHz） 理论峰值计算能力（万亿次每秒） 最小计算能力（万亿次每秒） 最大计算能力（万亿次每秒） 内存（GB） 系统盘 存储盘 磁盘总容量 裸磁盘容量 操作系统 密码 备注

结合大家意见和王哥的Django通信录：初步字段决定为：单位名称、单位接口人姓名电话、第三方接口人姓名电话、政府/企业、项目、系统、备注（备注里面填第三方联系人电话）。

①、编写models模型

from django.db import models

# Create your models here.


# 创建通讯录表
class ipa(models.Model):
# blank=True 表示可传入空白字段。
unit_name=models.CharField(null=True, blank=True, verbose_name='单位名称', max_length=24)
unit_user=models.CharField(null=True, blank=True, verbose_name='单位联系人和电话', max_length=64)
third_party=models.CharField(null=True, blank=True, verbose_name='第三方联系人和电话', max_length=64)
unit_type=models.CharField(null=True, blank=True, verbose_name='政府or企业？', max_length=64)
unit_project=models.CharField(null=True, blank=True, verbose_name='项目名称', max_length=24)
unit_system=models.CharField(null=True, blank=True, verbose_name='系统', max_length=64)
unit_remarks=models.TextField(null=True, blank=True, verbose_name='备注')

# 加入这个修改后台管理界面时显示单位名称
def __str__(self):
return self.unit_name

②、激活模型

出现这个文件，代表 成功！

5. 创建管理员

因为之前已经创建过管理员了，所以这里不再创建，没创建的在这里输入这个命令，按照提示进行即可

python manage.py createsuperuser

创建完成之后就可以在后台添加数据了。

6. 编写urls.py

①、编写mysite/urls.py

在总路由下，添加一条ipa信息。

②、编写子urls

在ipa下创建urls.py文件

from django.urls import path
from . import views


# 命名空间
app_name='ipa'
urlpatterns=[
# ipa为views定义的名字。
path('', views.ipa, name='ipa')
]

7、编写ipa/views.py文件

from django.shortcuts import render
from . import models
# Create your views here.


def ipa(request):
ipa_info=models.ipa.objects.all()
# 在控制台打印测试
# print(ipa_info)
return render(request, 'ipa/index.html', locals())

8、在网页上展示

①、创建ipa/templtes/ipa/index.html文件

②、不引入adminlte框架的数据展示

<table border="1">
<!--表头-->
<thead>
<tr>
<th>序号</th>
<th>单位名称</th>
<th>单位接口人</th>
<th>第三方软件接口人</th>
<th>政府/企业</th>
<th>项目名称</th>
<th>系统</th>
<th>备注</th>
</tr>
</thead>
<!--数据-->
<tbody>
{% for ipa in ipa_info %}
<tr>
<td>{{ forloop.counter }}</td>
<td>{{ ipa.unit_name }}</td>
<td>{{ ipa.unit_user }}</td>
<td>{{ ipa.third_party }}</td>
<td>{{ ipa.unit_type }}</td>
<td>{{ ipa.unit_project }}</td>
<td>{{ ipa.unit_system }}</td>
<td>{{ ipa.unit_remarks }}</td>
</tr>
{% endfor %}
</tbody>


</table>

②引入adminlte框架展示数据

者 | Mateusz Iwaniuk

译者 | 明明如月，责编 | 夕颜

出品 | CSDN（ID：CSDNnews）

文章配套代码: https://github.com/iwaniukooo11/email-sender

现在，即使是创建最基本的网站，程序员也必须使用现代的功能和技术。甚至像为你的朋友创建简单的投资组合这样的基本项目也可能涉及到一些问题，比如从联系人表单接收数据。有很多方法可以读取这些数据。你可以将表单与数据库连接起来，然后从数据库中读取传入的消息来实现功能，但这样做会给不懂技术的客户造成困难。

你为什么不通过发送电子邮件传输信息？

不使用数据库就能接收到传入的消息，绝对是最佳选择，也是最方便用户的选择。但问题来了—如何实现呢？你可能认为需要使用某种后端语言。

实际上，你不必使用任何如 php 或 python 这种后端语言，你甚至不需要用到 node.js！你需要的就是一个简单的EmailJS 库。

本文将介绍下面两个重要功能:

• 配置 emailjs 帐户

• 使用 JS 发送电子邮件

请注意，在我的项目中，我使用了 gulp 和 webpack，我在 src 文件夹存放源码，dist 存放最终发布版本的代码。

我将分 5 个步骤向你展示如何从头开始构建电子邮件发送器。

步骤1-用 HTML 创建表单

首先需要创建一个 HTML 表单。你不必放置像 required 或 max 这种验证属性，因为稍后，preventDefault 函数将在你的提交事件上运行，它会让这些属性的处理失效。

表单中最重要的是为每个输入放置 name 属性，后面会用到。

我的非常简单的表单是这样的:

src/html/index.html

 <form class="form"> <input name='name' type="text" placeholder="Your name..." class="form__input" /> <input name='topic' type="text" placeholder="Topic..." class="form__input" /> <textarea name='message' type="text" placeholder="Your Message..." class="form__input" ></textarea>

 <input type="submit" value="send" class="form__input form__input--button"> </form>

步骤2-注册成为 email 用户

要配置你的电子邮件，你必须注册电子邮件服务。别担心—使用这个网站非常方便和省时。

登入后，系统会询问你的电子邮件服务，它位于个人电子邮件服务区（personal email service）。在我的例子中，我选择了 gmail。

然后，你需要连接你的 gmail 帐户。这将用来发送电子邮件给你客户。例如，如果你关联了 xyz@gmail.com 账户，你后续发送的邮件都将从这个邮箱发出。所以不要担心“ Send email on your behalf” 这个授权信息—这正是你需要的！

连接完 gmail 账户后，点击添加服务（add service）按钮。

步骤3-创建邮件模板

如果你已经成功连接了你的 gmail 账户，你现在应该在信息中心中。现在需要创建电子邮件模板了。

切换到电子邮件模板卡，并单击创建一个新的模板（create a new template）。界面非常友好，所以创建模板不会有任何问题。

你可以选择模板的名称和 ID。我称之为“我的神奇模板（my_amazing_template）”。

接下来，你必须指定邮件的内容。

模板的变量值来自 input 中的 `name` 属性。你已将变量插入`{{{}}}`符号中。

不要忘记在“收件人”部分 (右侧) 添加电子邮件地址。你的电子邮件将被发送到该电子邮件地址上。截图中的收件人邮箱是我自己的公司邮箱。

这是我的简单模板，它使用来自 HTML 表单里的 3 个变量。我还指定了接收电子邮件的主题。

步骤4-保存 API 密钥

这部分没什么特别的。Emailjs 共享授权 API 密钥，将在发送电子邮件时使用。当然，放这些钥匙最好的地方是`.env` 配置。但是因为我使用的是简单的静态文件，我不想使用服务器配置，所以我将它们保存在 apikeys 文件中，然后再将它们导入。

你的 USER_ID 位于 Account > API Keys 菜单下。

TEMPLATE_ID 位于模板的标题下面。

这是我基于不存在的 keyssrc / js / apikeys. js 的示例配置.

src/js/apikeys.js

export default { USER_ID :'user_DPUd-rest-of-my-id', TEMPLATE_ID:'my_amazing_template'}

如果需要将源码发布到 GITHUB，不要忘记将 APIKEYS 文件添加到 .GITIGNORE文件中

步骤5-发送电子邮件

现在是该项目最后也是最重要的部分的了。现在我们必须使用 javascript 发送电子邮件。

首先，你必须下载 emailjs 包。

npm i emails-com

然后，转到 js 文件，导入库和 apikeys。

src/js/main.js

import emailjs from 'emailjs-com'import apiKeys from './apikeys'

现在是编写发送电子邮件功能的时候了

src/js/main.js

const sendEmail=e=> { e.preventDefault

 emailjs .sendForm('gmail', apiKeys.TEMPLATE_ID, e.target, apiKeys.USER_ID) .then( result=> { console.log(result.text) }, error=> { console.log(error.text) } )}

sendForm 函数有4个参数:

你的电子邮件的 ID，在这里:

TEMPLATE_ID 来自 apikey 文件,

事件对象来自你的表单提交

USER_ID 来自 apikey 文件,

最后，查找表单并添加提交事件监听器：

src/js/main.js

const form=document.querySelector('.form')form.addEventListener('submit',sendEmail)

正如我前面提到的，由于 `preventDefault` 函数，属性验证将无法工作。你必须使用 JS 自己进行验证和清除输入。

以上就是全部内容，接下来让我们测试一下。

填写页面上的表单并发送。

我收到电子邮件，内容正是根据我们的模板和表单数据渲染出来的。

通过上图可以看出，所有的变量的值都填充到了正确的位置上。

总结

通过本文的介绍你会发现用 JS 发送邮件并非难事。

使用 emailjs，你可以简单的方式发送电子邮件。

我相信你未来的用户会很高兴收到来自他们网页上表单填写数据的t邮件，相信本文对你有帮助。

这篇文章的配套代码在这里: https://github.com/iwaniukooo11/email-sender

原文链接：

https://dev.to/iwaniukooo11/send-e-mails-directly-from-front-end-with-js-5d7d

本文为CSDN翻译文章，转载请注明出处。

?我们想研发一个机器学习框架，6 个月后失败了
?生产型机器学习已经没那么困难了？
?视频 | 你不知道的"开源"60年秘史
?GitHub标星10,000+，Apache项目ShardingSphere的开源之路
?阿里技术专家告诉你，如何画出优秀的架构图？
?加拿大API平台如何做到30%为中国明星项目？创业老兵这样说……

年来，人们基于通讯录的沟通正在向圈子化的社交关系链迁移，如微信的朋友圈，然而日常绝大部分沟通还是来自工作，以工作圈为主的企业沟通对于员工必不可少。伴随着企业高速发展以及人员流动愈加频繁，特别是部门多，人员杂的大企业，有些需要跨区域、跨部门共同协作才能进行的沟通，如果缺乏有效的沟通工具，就会出现跨部门沟通无门，成员之间沟通断层的现象。再者，传统的手机通讯录需要一一手动添加，个人IM工具也需要逐一询问添加账号而后等待对方验证、备注姓名，操作繁琐、耗时费力。

因此，以企业通讯录为核心的即时通讯工具对于企业内部信息化管理以及沟通意义重大。而BQ企业即时通(http://www.bossq.cn/index.html)将企业内部通讯录和即时通讯功能很好地整合起来，不失为企业办公沟通的一种选择。

BQ企业即时通内嵌清晰简洁的组织结构，员工可以在客户端一目了然地看到整个公司的部门成员分布，还可以方便快捷地找到目标同事与其进行工作沟通。新员工入职，BQ企业即时通的组织结构还可帮助新人了解公司现有架构，快速融入企业。而所有这些通讯录均无需员工自己手动添加，只需管理员分配好各人账号导入管理系统即可。此外，移动端完全同步其PC端清晰的组织架构和通讯录，满足了企业多维度的沟通需求。

移动互联网的普及，以及网络资费的降低，让低成本的语音沟通开始受到广大商务人士的青睐。因此，BQ企业即时通顺势开发出免费的语音聊天功能，“BQ企业即时通本身自带有公司通讯录，无需员工手动添加，点击头像就可以进行语音聊天，方便又快捷”BQ企业即时通的负责人说道。值得一提的是，BQ企业即时通不但可实现手机间语音聊天，还支持手机端与PC端的双向语音通话，最大限度满足不同商务人士的通信需求。

如果说，以朋友圈为主的微信联系是一种生活方式，那么基于企业通讯录的BQ企业即时通联系则是一种工作方式，这种带着更明确的工作目的性沟通，能更快地解决问题。