网站对接小程序源码-搭建一套ChatGPT聊天服务（附源码：前端+后端）

bendan520 2023年8月21日网站程序 0

最近，我发现ChatGPT变得越来越好用，尤其是在工作和学习时。它可以给出比搜索引擎更可靠的指导和总结。

他非常适合学习新技能，可以给出更可靠、更容易理解的答案。

但有一个问题：只能在PC上使用，而且最近更换的手机没有天梯（iOS用户翻墙成本太高）

所以花点时间下载一个WebApp，适配手机页面网站对接小程序源码，在手机上随时访问，不用翻墙，终于可以为所欲为啦~~

体验演示

ChatGPT 服务chat.webinfra.cloud

项目结构说明

├── 客户

├── 节点API

├── Dockerfile

├── 自述文件.md

├── 资产

├── 许可证

服务器项目是从上游项目fork出来的，本来是作为调用OpenAI内部训练的免费模型使用的，但稳定性不好，维护成本较高，目前不推荐使用。同时保留项目的README文件以供参考或直接进入原始项目查看详细信息。

快速开始

由于vercel被屏蔽，国内体验不太友好，所以没有手动部署，只能看源码

启动服务器

服务端代码在node-api目录下，这是一个标准的nodejs项目

进入目录，先安装依赖：

npm install

启动项目

npm run start

注意：项目启动时唯一需要配置的就是OpenAI账户的ApiKey。您可以通过命令行直接配置环境变量OPENAI_API_KEY。生产环境中，建议通过settings.js进行配置。

另外，如果需要同时配置多个ApiKey，只需要将多个按键用“,”分隔即可，并注意中英文切换网站对接小程序源码，例如

OPENAI_API_KEY=sk-Ek6f5n*q7X*8I2mgH****T***F**I97ON**y*BzUpc,sk-Ek6f5n*q7X*8I2mgH****T***F**I97ON**y*BzUpc,sk-Ek6f5n*q7X*8I2mgH****T***F**I97ON**y*BzUpc

配置项

服务器启动成功

启动后台页面

前端页面代码在client目录下，是一个简单的CRA项目

进入目录，先安装依赖：

npm install

然后，启动项目

npm run start

就可以开始愉快的聊天了~

功能列表已开发功能待开发功能源码

这里分享一下代码，动手能力强的朋友也可以自己部署一套

欢迎 PR 和 Issue

GitHub 链接：

chatgpt-webapp-fullstack,基于 ChatGPT/BingAI/AndMore...的全栈聊天 web 应用程序,下载chatgpt-webapp-fullstack的源码_GitHub_帮酷

用户指导

mpvue继承自Vue.js，其技术规范和句子特征与Vue.js一致。

注：事实上，这是一份官方文件。我看习惯了博文就直接复制过来了。详细信息请参见

本文档适合有一定 Vue.js 使用经验的开发者。我们假设您已经掌握了Vue.js技术体系。如果你是一个菜鸟，你可能需要先熟悉一下 Vue.js 官方文档。

#五分钟教程

使用Vue.js命令行工具vue-cli，只需要在终端窗口输入几个简单的命令，就可以快速创建并启动一个小程序项目，并具有热重载、保存时静态检测、内置代码重构等功能：

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 mpvue-quickstart 模板的新项目
$ vue init mpvue/mpvue-quickstart my-project
# 安装依赖
$ cd my-project
$ npm install
# 启动构建
$ npm run dev

接下来，您只需启动Momo开发者工具，导入项目即可预览您的第一个mpvue小程序。

#框架原理

#Vue实例

支持官方文档：Vue实例，我们做了一些修改，以适应小程序特有的加载逻辑。

#实例生命周期

和vue一样，不同的是我们会在小程序onReady之后触发vue挂载的生命周期。详细的vue生命周期文档请参考生命周期钩子

mpvue除了Vue自身的生命周期外，还兼容小程序的生命周期。这部分生命周期钩子来自于陌陌小程序的Page。除特殊情况外，不建议使用小程序。

应用程序部分：

页面部分：

使用示例：

new Vue({
  data: {
    a: 1
  },
  created () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  },
  onShow () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a, '小程序触发的 onshow')
  }
})
// => "a is: 1"

当心：

不要在选项属性或反弹上使用箭头函数，如创建的： () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因为箭头函数绑定到父上下文，所以 this 不会是您所期望的 Vue 实例网站对接小程序源码，并且 this.a 或 this.myMethod 将是未定义的。

微信小程序页面的query参数是通过onLoad获取的，mpvue对此进行了优化网站对接小程序源码，直接通过this.$root.$mp.query获取对应的参数数据，其调用需要在onLoad生命周期触发后使用，例如onShow等，具体生命周期调用顺序见右图。

# 生命周期图标

你不需要立刻明白一切，但随着你不断学习和使用，它的参考价值会越来越高。

生命周期的调用关系及时序图。

#模板句型

官方文档几乎都支持：模板句型，以下是不支持的情况。

# 不支持纯 HTML

小程序中所有的BOM/DOM都不能使用，也就是说v-html命令不能使用。

#不支持一些复杂的JavaScript渲染表达式

我们将模板中的{{}}双花括号直接编码到wxml文件中。由于Momo小程序功能（数据绑定）的限制，它无法支持复杂的JavaScript表达式。

目前可用的是 + - * % ?: ! == === > < [] 。其余还有待完善。


<p>{{ message.split('').reverse().join('') }}</p>

<ul>
    <li v-for="item in list">
        <div @click="clickHandle(item, index, $event)">{{ item.value }}</p>
    </li>
</ul>

# 不支持过滤器

渲染部分会转换为wxml，而wxml不支持过滤器，所以不支持这部分功能。

#计算属性

支持官方文档：计算属性。

# 不支持函数

模板中不支持方法中的函数。

#类和样式绑定

为了节省性能，我们通过编译器将Class和Style的表达方式硬编码为wxml，支持的句子类型和转换效果如下：

类支持的句型：

<p :class="{ active: isActive }">111</p>
<p class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">222</p>
<p class="static" :class="[activeClass, errorClass]">333</p>
<p class="static" v-bind:class="[isActive ? activeClass : '', errorClass]">444</p>
<p class="static" v-bind:class="[{ active: isActive }, errorClass]">555</p>

将转化为：

<view class="_p {{[isActive ? 'active' : '']}}">111</view>
<view class="_p static {{[isActive ? 'active' : '', hasError ? 'text-danger' : '']}}">222</view>
<view class="_p static {{[activeClass, errorClass]}}">333</view>
<view class="_p static {{[isActive ? activeClass : '', errorClass]}}">444</view>
<view class="_p static {{[[isActive ? 'active' : ''], errorClass]}}">555</view>

风格支持的句型：

<p v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">666</p>
<p v-bind:style="[{ color: activeColor, fontSize: fontSize + 'px' }]">777</p>

将转化为：

<view class="_p" style=" {{'color:' + activeColor + ';' + 'font-size:' + fontSize + 'px' + ';'}}">666</view>
<view class="_p" style=" {{'color:' + activeColor + ';' + 'font-size:' + fontSize + 'px' + ';'}}">777</view>

官方文档：不支持 Class 和 Style 绑定中的 classObject 和 styleObject 语法。

有关最佳实践，请参阅上面支持的句型。从性能角度来说，建议不要太依赖这个。

此外，您还可以使用计算方法生成类或样式字符串并将其插入到页面中，例如：

<template>
    
    <div class="container" :class="computedClassStr"></div>
    <div class="container" :class="{active: isActive}"></div>
    
    <div class="container" :class="computedClassObject"></div>
</template>
<script>
    export default {
        data () {
            return {
                isActive: true
            }
        },
        computed: {
            computedClassStr () {
                return this.isActive ? 'active' : ''
            },
            computedClassObject () {
                return { active: this.isActive }
            }
        }
    }
</script>

# 用于组件

目前不支持在组件上使用类和样式绑定

#条件渲染

全面支持官方文档：条件渲染

# 列表渲染

全面支持官方文档：列表渲染

只是需要注意一件事，嵌套列表渲染时，必须指定不同的索引！

例子：


<template>
    <ul v-for="(card, index) in list">
        <li v-for="(item, itemIndex) in card">
            {{item.value}}
        </li>
    </ul>
</template>

#事件处理程序

几乎都支持官方文档：event handler

我们已经介绍了Vue.js的虚拟DOM。之前模板中绑定的storm会挂在vnode上。同时我们的编译器已经在wxml上绑定了小程序storm，并做了相应的映射，所以当你真正点击的时候，运行时中的handleProxy通过storm类型分发到vnode的storm上，这是一样的由于Vue的机制在WEB上，所以可以实现无损支持。同时还支持自定义事件和$emit机制。

// 事件映射表，左侧为 WEB 事件，右侧为 小程序 对应事件
{
    click: 'tap',
    touchstart: 'touchstart',
    touchmove: 'touchmove',
    touchcancel: 'touchcancel',
    touchend: 'touchend',
    tap: 'tap',
    longtap: 'longtap',
    input: 'input',
    change: 'change',
    submit: 'submit',
    blur: 'blur',
    focus: 'focus',
    reset: 'reset',
    confirm: 'confirm',
    columnchange: 'columnchange',
    linechange: 'linechange',
    error: 'error',
    scrolltoupper: 'scrolltoupper',
    scrolltolower: 'scrolltolower',
    scroll: 'scroll'
}

输入和文本区域中的更改事件将转换为模糊事件。

踩坑注意：

事件修饰符

# 表单控件绑定

几乎都支持官方文档：表单控件绑定，不支持的还没有测试过，之所以说几乎是因为WEB表单太复杂了，谁知道会出现什么奇怪的功能。

建议开发过程中直接使用微信小程序：表单组件。使用示例：

select组件被picker组件替代

<template>
  <div>
    <picker @change="bindPickerChange" :value="index" :range="array">
      <view class="picker">
        当前选择：{{array[index]}}
      </view>
    </picker>
  </div>
</template>
<script>
export default {
  data () {
    return {
      index: 0,
      array: ['A', 'B', 'C']
    }
  },
  methods: {
    bindPickerChange (e) {
      console.log(e)
    }
  }
}
</script>

表单元素 radio 被 radio-group 组件替代

<template>
  <div>
    <radio-group class="radio-group" @change="radioChange">
      <label class="radio" v-for="(item, index) in items" :key="item.name">
        <radio :value="item.name" :checked="item.checked"/> {{item.value}}
      </label>
    </radio-group>
  </div>
</template>
<script>
export default {
  data () {
    return {
      items: [
        {name: 'USA', value: '美国'},
        {name: 'CHN', value: '中国', checked: 'true'},
        {name: 'BRA', value: '巴西'},
        {name: 'JPN', value: '日本'},
        {name: 'ENG', value: '英国'},
        {name: 'TUR', value: '法国'}
      ]
    }
  },
  methods: {
    radioChange (e) {
      console.log('radio发生change事件，携带value值为：', e.target.value)
    }
  }
}
</script>

＃成分

#Vue 组件

组件是整个Vue.js中最复杂的部分，当然也支持官方文档：Components。

有且只能通过使用单文件组件（.vue 组件）来支持。其他如：动态组件、自定义渲染等

网站对接小程序源码-搭建一套ChatGPT聊天服务（附源码：前端+后端）

发表评论

发表回复取消回复

相关文章

发表评论

发表回复 取消回复

发表回复取消回复