教你node+vue3建一个gpt对话web,附免费在线对话网站

如何搭建一个AI对话web网站

本文使用用 Express 和 Vue3,后端使用nodejs

本文介绍了一种超低成本搭建私有化AI服务的方法,你可以通过这个服务与好友分享,并在内部学习如何使用,省去翻和线路不稳定的困扰。此外,你还可以进行二次开发,深入了解API细节,并为自己介入其他系统做好准备。另外,你还可以在此基础上封装一个鉴权系统,从其他用户那里收取授权费用。

参考demo 传送门

在这里插入图片描述
首先下载这个项目https://github.com/Chanzhaoyu/chatgpt-web
然后我们需要配置一些参数

Node

node 需要 ^16 || ^18 || ^19 版本(node >= 14 需要安装 fetch polyfill),使用 nvm 可管理本地多个 node 版本

node -v

  • 2
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
对于一个初学者来说,写一个商城是一个非常有挑战性的任务。以下是一个简单的Node.js和Vue.js商城程: 1. 创一个新的Node.js项目 首先,我们需要安装Node.js和npm。然后创一个新的Node.js项目,可以使用以下命令: ``` mkdir my-shop cd my-shop npm init ``` 这将创一个新的npm项目,并要求您填写一些基本信息。按照提示输入即可。 2. 安装和配置Express.js 在Node.js中,Express.js是一个非常流行的Web框架。我们将使用Express.js来构我们的商城应用程序。首先,我们需要安装Express.js和其他一些必要的库: ``` npm install express body-parser cors ``` 接下来,在项目的根目录中创一个新的文件app.js,然后添加以下内容: ``` const express = require('express'); const bodyParser = require('body-parser'); const cors = require('cors'); const app = express(); app.use(bodyParser.json()); app.use(cors()); app.listen(3000, () => { console.log('Server is running on port 3000'); }); ``` 这将创一个新的Express.js应用程序,并将其监听在3000端口上。 3. 创Vue.js应用程序 现在,我们需要创一个Vue.js应用程序,用于构我们的商城前端。您可以使用Vue CLI快速创Vue.js应用程序。首先,确保已经安装了Vue CLI: ``` npm install -g @vue/cli ``` 然后,在项目的根目录中使用Vue CLI创一个新的Vue.js应用程序: ``` vue create client ``` 按照提示输入即可,然后等待安装完成。 4. 配置Vue.js应用程序 现在,我们需要配置Vue.js应用程序,以便它可以与我们的Node.js后端通信。首先,打开client/src/main.js文件,并添加以下内容: ``` import Vue from 'vue' import App from './App.vue' import axios from 'axios' Vue.config.productionTip = false Vue.prototype.$http = axios.create({ baseURL: 'http://localhost:3000/api' }) new Vue({ render: h => h(App), }).$mount('#app') ``` 这将配置Vue.js应用程序以使用axios库进行HTTP请求,并将其基本URL设置为http://localhost:3000/api。 接下来,我们需要在client/src/components目录中创一个名为ProductList.vue的新组件。该组件将显示商城中的产品列表,并使用我们的Node.js后端与服务器通信。 5. 创Node.js API 现在,我们需要为商城创一些Node.js API。首先,我们需要在项目的根目录中创一个名为routes.js的新文件,然后添加以下内容: ``` const express = require('express'); const router = express.Router(); router.get('/products', (req, res) => { const products = [ { id: 1, name: 'Product 1', price: 10 }, { id: 2, name: 'Product 2', price: 20 }, { id: 3, name: 'Product 3', price: 30 }, ]; res.json(products); }); module.exports = router; ``` 这将创一个新的Express.js路由器,并为/products路径添加一个GET请求处理程序。该处理程序将返回一个包含三个产品的JSON数组。 接下来,我们需要在app.js文件中添加以下内容,以将我们的路由器添加到应用程序中: ``` const routes = require('./routes'); app.use('/api', routes); ``` 现在,我们的Node.js后端应该已经准备好了,可以使用以下命令启动它: ``` node app.js ``` 6. 显示产品列表 现在,我们需要在Vue.js应用程序中显示产品列表。首先,打开client/src/components/ProductList.vue文件,并添加以下内容: ``` <template> <div> <h1>Product List</h1> <ul> <li v-for="product in products" :key="product.id"> {{ product.name }} - {{ product.price }} </li> </ul> </div> </template> <script> export default { data() { return { products: [], }; }, mounted() { this.$http.get('/products').then(response => { this.products = response.data; }); }, }; </script> ``` 这将创一个新的Vue.js组件,并使用我们之前定义的API从服务器获取产品列表。然后,我们可以在App.vue文件中使用该组件,如下所示: ``` <template> <div id="app"> <ProductList /> </div> </template> <script> import ProductList from './components/ProductList.vue'; export default { components: { ProductList, }, }; </script> ``` 现在,运行Vue.js应用程序,您应该能够在浏览器中看到一个简单的商城页面,其中包含三个产品的列表。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值