vue3+koa2+mongodb打造comfyui画图系统:(一)使用mongoose连接mongodb数据库

1. 使用koa2框架创建项目服务端

创建命令:

koa2 comfyui

2. 初始化项目依赖

初始化命令:

cnpm i

文件夹增加node_modules文件夹。

3. 启动项目

启动命令:

npm start

网页显示:

后台显示:

4. 创建数据库

打开本地数据库(mongodb://localhost:27017):

创建数据库:

在node中连接数据库:

(1)在项目目录创建db文件夹。

(2)在db文件夹中创建index.js文件用于连接数据库。

(3)在package.json文件中手动安装mongoose。

安装命令:

cnpm i mongoose --save

其中:i可以换为install,--save可以换为--S。

安装完成之后可以在package.json文件中看到已经安装:

(4)使用dev启动项目

启动命令:

npm run dev

执行之后报错:

> comfyui@0.1.0 dev
> ./node_modules/.bin/nodemon bin/www

'.' 不是内部或外部命令,也不是可运行的程序
或批处理文件。

这时候直接修改package.json文件中dev的nodemon路径。将./node_modules/.bin/nodemon直接改为nodemon即可。

初始值:

修改之后:

修改完成之后再次执行npm run dev命令即可启动项目。

(5)在db/index.js文件中添加内容

const mongoose = require("mongoose");

module.exports = () => {
  mongoose
    .connect("mongodb://localhost:27017/comfyui", {
      useNewUrlParser: true,
      useUnifiedTopology: true,
    })
    .then(() => {
      console.log("数据库连接成功");
    })
    .catch((err) => {
      console.log("数据库连接失败", err);
    });
};

这里会报Warning警告:
(node:36772) [MONGODB DRIVER] Warning: useNewUrlParser is a deprecated option: useNewUrlParser has no effect since Node.js Driver version 4.0.0 and will be removed in the next major version
(Use `node --trace-warnings ...` to show where the warning was created)
(node:36772) [MONGODB DRIVER] Warning: useUnifiedTopology is a deprecated option: useUnifiedTopology has no effect since Node.js Driver version 4.0.0 and will be removed in the next major version

直接将useNewUrlParser 和 useUnifiedTopology移除就行了,因为这两个选项在新版本的驱动程序中不再需要,因为新的 URL 解析器和统一的拓扑结构现在是默认行为。

(6)在app.js中引入db/index.js

(7)在项目目录下创建models文件夹

在models文件夹中创建index.js文件用以统一管理模型对象。

在modesl/index.js添加内容。

const mongoose = require("mongoose");

const userSchema = new mongoose.Schema({
    username: String,
    pwd: String,
});

const User = mongoose.model("users", userSchema);

module.exports = {
    User,
};

在routes/users.js里面引用models/index.js

const { User } = require('../models')

// 添加系统用户
router.post('/add', async (ctx) => {
  User.create()
})

  • 8
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue 3和Koa中实现第三方登录(比如微信扫码)的过程如下: 1. 创建Vue 3项目:首先,你需要创建一个Vue 3项目。你可以使用Vue CLI来创建一个新的Vue项目,执行以下命令: ``` vue create my-project ``` 按照提示进行配置选择,并等待项目创建完成。 2. 安装依赖:进入到项目目录,执行以下命令安装相关的依赖: ``` cd my-project npm install axios vue-axios ``` 3. 创建登录页面:在Vue项目中创建一个登录页面,可以使用Vue的单文件组件来实现。在你的Vue项目中的`src/views`目录下,创建一个名为`Login.vue`的文件,并添加以下代码: ```html <template> <div> <h2>第三方登录</h2> <div v-if="!isLogged"> <button @click="wechatLogin">微信扫码登录</button> </div> <div v-else> <p>登录成功!</p> <p>{{ userInfo }}</p> </div> </div> </template> <script> import axios from 'axios'; export default { data() { return { isLogged: false, userInfo: null, }; }, methods: { wechatLogin() { // 发起微信扫码登录请求 axios.get('/api/wechat/login').then(response => { // 处理登录成功后的逻辑 if (response.data.success) { this.isLogged = true; this.userInfo = response.data.userInfo; } }).catch(error => { console.error(error); }); }, }, }; </script> ``` 4. 创建Koa后端:接下来,你需要创建一个Koa后端来处理微信扫码登录的逻辑。在项目根目录下,创建一个名为`server.js`的文件,并添加以下代码: ```javascript const Koa = require('koa'); const Router = require('koa-router'); const axios = require('axios'); const app = new Koa(); const router = new Router(); // 处理微信扫码登录的路由 router.get('/api/wechat/login', async (ctx, next) => { try { // 生成一个随机的state参数 const state = Math.random().toString(36).substr(2); ctx.cookies.set('state', state); // 将state存储在cookie中 // 构造微信扫码登录的URL const wechatLoginUrl = `https://wechat.example.com/login?appid=YOUR_APPID&redirect_uri=${encodeURIComponent('http://your-domain.com/api/wechat/callback')}&state=${state}`; ctx.body = { success: true, wechatLoginUrl, }; } catch (error) { console.error(error); ctx.body = { success: false, error: 'Failed to initiate WeChat login', }; } }); // 处理微信扫码登录回调的路由 router.get('/api/wechat/callback', async (ctx, next) => { try { const { state, code } = ctx.query; const storedState = ctx.cookies.get('state'); // 从cookie中获取之前存储的state if (state === storedState) { // 校验state参数是否正确 // 发起获取access_token和openid的请求 const response = await axios.get(`https://wechat.example.com/access_token?appid=YOUR_APPID&secret=YOUR_SECRET&code=${code}&grant_type=authorization_code`); const { access_token, openid } = response.data; // 获取用户信息的请求 const userInfoResponse = await axios.get(`https://wechat.example.com/userinfo?access_token=${access_token}&openid=${openid}`); const userInfo = userInfoResponse.data; // 这里可以将用户信息存储到数据库或进行其他操作 // ... // 返回用户信息给前端 ctx.body = { success: true, userInfo, }; } else { ctx.body = { success: false, error: 'Invalid state parameter', }; } } catch (error) { console.error(error); ctx.body = { success: false, error: 'Failed to handle WeChat login callback', }; } }); app.use(router.routes()); app.listen(3000, () => { console.log('Server is running on http://localhost:3000'); }); ``` 上述代码中,需要将`YOUR_APPID`和`YOUR_SECRET`替换为你自己的微信开放平台的App ID和App Secret。 5. 启动应用:在项目根目录下,执行以下命令启动应用: ``` node server.js ``` 6. 访问登录页面:在浏览器中访问`http://localhost:3000`,你将看到一个点击按钮。点击按钮后,将会发起微信扫码登录的请求,然后跳转到微信扫码页面进行登录。登录成功后,将会返回用户信息并显示在页面上。 以上就是使用Vue 3和Koa实现微信扫码登录的简单案例。请根据实际情况修改代码,并替换其中的具体参数和URL。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

星辰同学wwq

你的鼓励是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值