网页大作功能实现示例：邮箱验证、AI接入

一、邮箱短信验证

要完成短信验证功能，需要有个专用的邮箱账号向登录的邮箱发送验证码，因为我主要使用QQ邮箱，所有我这里用QQ邮箱申请授权码。

1.登录“QQ邮箱”官网客户端,QQ邮箱官网
2.在顶部的设置中找到账号选项

3.下滑找到验证并开启POP3/SMTP服务，点击管理服务

4.点击安全设置-生成授权码

4.手机号验证生成授权码。

在设备管理-授权码就可以看到刚才生成的授权码了

5.官网有技术文档，不过我这里使用API接口对接，主打方便。
API接口：https://luckycola.com.cn/tools/customMail
请求方式: POST

• 请求参数如下

序号	参数	是否必须	说明
1	ColaKey	是	唯一验证ColaKey
2	tomail	是	目标邮箱地址
3	fromTitle	是	邮件标题
4	subject	是	邮件主题
5	content	是	邮件内容(可以是纯文本,也可以是html)
6	isTextContent	否	邮件内容是否是文本形式,默认是false(html形式)
7	smtpCode	是	邮件系统授权码
8	smtpEmail	是	开启授权码对应的授权邮箱
9	smtpCodeType	是	授权邮箱的类型， 可取值是 qq 或 163 或 126

• 请求示例如下

{
    "ColaKey": "i6qNeQszeSD6zf16988I2YaRNIMz",
    "tomail": "xxx@qq.com",// 邮件发给谁?
    "fromTitle": "邮件标题",// 邮件标题
    "subject": "邮件主题",
    // 邮件系统授权码
    "smtpCode": "官网申请",
    // 开启授权码对应的授权邮箱
    "smtpEmail": "3036611072@qq.com",
    // 授权邮箱的类型， 可取值是 qq 或 163 或 126
    "smtpCodeType": "qq",//这里用QQ
    "isTextContent": false,// 邮件内容是否是纯文本形式
    "content": "<div style='color: red'>我是邮件内容(因为isTextContent=false所以我可以解析html标签,)</div>",// 邮件内容
}

• 如果想让文本内容为html格式， 参数isTextContent 设置为false，写入html样式，大作业的示例：

{
            ColaKey: "FJVIY21aiQEJyw17321120746940vp08Kg2yK",
            tomail: email,
            fromTitle: "验证码邮件",
            subject: "您的验证码",
            smtpCode: "vmmpotyiqjlbdeib",
            smtpEmail: "3036611072@qq.com",
            smtpCodeType: "qq",
            isTextContent: false,
            content: `
                <div style="
                    max-width: 600px;
                    margin: 0 auto;
                    padding: 20px;
                    background: #f8f9fa;
                    border-radius: 10px;
                    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
                    font-family: Arial, sans-serif;
                ">
                    <h2 style="
                        color: #333;
                        margin-bottom: 20px;
                        text-align: center;
                        font-size: 24px;
                    ">邮箱验证码</h2>
                    <div style="
                        background: white;
                        padding: 20px;
                        border-radius: 8px;
                        text-align: center;
                        margin-bottom: 20px;
                    ">
                        <p style="
                            color: #666;
                            font-size: 16px;
                            margin-bottom: 15px;
                        ">您的验证码是：</p>
                        <div style="
                            font-size: 32px;
                            font-weight: bold;
                            color: #1890ff;
                            letter-spacing: 5px;
                            margin: 10px 0;
                        ">${generatedCode}</div>
                    </div>
                    <p style="
                        color: #999;
                        font-size: 14px;
                        text-align: center;
                        margin: 0;
                    ">请在5分钟内完成验证，验证码将在5分钟后失效。</p>
                    <div style="
                        margin-top: 20px;
                        padding-top: 20px;
                        border-top: 1px solid #eee;
                        text-align: center;
                        color: #666;
                        font-size: 14px;
                    ">
                        <p style="margin: 0;">
                            本邮件来自
                            <span style="
                                color: #1890ff;
                                font-weight: bold;
                            ">网页设计课程第15小组</span>
                        </p>
                    </div>
                </div>
            `
        };

二、AI文心一言接口实现

1.文心一言官网已经开放了许多API，申请加入，可以在百度智能云创建应用，获取该应用的api key和app key。

2.然后接入模型就行，有对应的代码调用示例

3.请求示例
API接口：https://luckycola.com.cn/tools/customMail
请求方式: POST

• 请求参数如下

序号	参数	是否必须	说明
1	ques	是	你的问题
2	appKey	是	唯一验证AppKey
3	uid	是	唯一标识
4	isLongChat	否	是否支持上下文(值为1或者0),1表示支持上下文,默认值0不支持
5	chatModel	否	自定义使用的模型,可以传值“botChat“、“bot7bChat“、“turboChat“,不传默认值是“turboChat“
6	isStream	否	是否使用流响应格式,默认false

{
	// 你的问题
   "ques": "hello",
   // Appkey
   "appKey": "",
   // 用户ID
   "uid": "",
   // 是否支持上下文 值1表示支持,0表示不支持
   "isLongChat": 0,
   // 自定义使用的模型,可以取值“botChat“、“bot7bChat“、“turboChat“,不传默认是“turboChat“
   "chatModel": "bot7bChat",
   // 响应是否流格式,默认false
   "isStream": false
}

4.大作业的接口调用示例

 try {
      // 调用API发送消息
      const response = await fetch('https://luckycola.com.cn/ai/wxChatV2', {
          method: 'POST',
          headers: {
              'Content-Type': 'application/json'
          },
          body: JSON.stringify({
              ques: message,
              appKey: '6510f04a64f84d2bd1e1b574',
              uid: '6tKNwN1695608881881H1QZe1gEnt',
              isLongChat: 1,
              chatModel: 'turboChat',
              isStream: false
          })
      });

三、markdown.js引用

1.其中AI回复的内容实际上是markdown文本格式，而且与html格式是相互兼容的，为了将内容渲染成markdown文本，引用公开的markdown库

 <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

2.实时渲染

<script>
  const converter = new showdown.Converter();
  const markdownInput = document.getElementById("markdown");
  const outputDiv = document.getElementById("output");

  markdownInput.addEventListener("input", () => {
    const markdownText = markdownInput.value;
    outputDiv.innerHTML = converter.makeHtml(markdownText);
  });
</script>

四、hightlight库的引用

如果AI回复的内容有代码块，只能以文本的方式输出，例如下面：

1.首先下载公开的hightlight.js文件

3.引用和渲染

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/atom-one-dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>

<script>
    // 确保 Highlight.js 的样式初始化
    hljs.highlightAll();

    //使用 Highlight.js
    marked.setOptions({
      highlight: function (code, language) {
        if (hljs.getLanguage(language)) {
          return hljs.highlight(code, { language }).value;
        }
        return hljs.highlightAuto(code).value; // 自动检测语言
      },
      langPrefix: 'hljs language-', // 为代码块添加 CSS 类
    });
 <script>

可以在控制台检查是否匹配并使用了对应的语言