网页大作业实现步骤
- 一、邮箱短信验证
- 二、AI文心一言接口实现
- 三、markdown.js引用
- 四、hightlight库的引用
一、邮箱短信验证
要完成短信验证功能，需要有个专用的邮箱账号向登录的邮箱发送验证码，因为我主要使用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 |
- 请求示例如下
javascript
{
"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样式，大作业的示例：
javascript
{
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 |
javascript
{
// 你的问题
"ques": "hello",
// Appkey
"appKey": "",
// 用户ID
"uid": "",
// 是否支持上下文 值1表示支持,0表示不支持
"isLongChat": 0,
// 自定义使用的模型,可以取值"botChat"、"bot7bChat"、"turboChat",不传默认是"turboChat"
"chatModel": "bot7bChat",
// 响应是否流格式,默认false
"isStream": false
}4.大作业的接口调用示例
javascript
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库
javascript
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>2.实时渲染
javascript
<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.引用和渲染
javascript
<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>
javascript
<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>
可以在控制台检查是否匹配并使用了对应的语言
