零基础手把手教你如何使用Laf免费玩转Midjourney后续之前端整合

已于 2023-05-24 23:30:06 修改
阅读量685 收藏 3
点赞数 2
分类专栏： AI智能 Web前端 文章标签： vue.js 前端 midjourney elementui
于 2023-05-24 18:16:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jokeny_gyh/article/details/130850800
版权

一、前言

上篇讲述了 零基础手把手教你如何使用Laf免费玩转Midjourney，下面将讲解如何结合前端完成终极体验！

二、项目搭建

前端技术栈：vue + element plus

1.创建vue项目

这里使用vue脚手架创建项目，搭建项目步骤可参考官网 创建一个项目 | Vue CLIhttps://cli.vuejs.org/zh/guide/creating-a-project.html

2.安装element plus依赖并引入

安装步骤可参考官网 安装 | Element Plushttps://element-plus.gitee.io/zh-CN/guide/installation.html安装完成后在main.js中引入组件

import ElementPlus from 'element-plus'
import * as ElIcons from '@element-plus/icons-vue'
import 'element-plus/dist/index.css'
import locale from 'element-plus/lib/locale/lang/zh-cn'

const app = createApp(App)

for (const name in ElIcons) {
    app.component(name, ElIcons[name]);
}
app.use(ElementPlus, { locale })
app.use(store)
app.use(router)
app.mount('#app')

3.代码实现

修改“vue.config.js”文件中的配置，其中“target”为Laf接口访问前缀

module.exports = {
  transpileDependencies: true,
  lintOnSave: false,
  productionSourceMap: false,
  devServer: {
      proxy: {
          '/api': {
              target: 'https://xxx.laf.dev',
              changeOrigin: true,
              ws: false,
              pathRewrite: {
                  '^/api': ''
              }
          }
      }
  }
}

接着，完成页面布局和逻辑业务实现，以“home.vue”为例：

<template>
  <div class="page">
    <el-container>
      <el-header ref="elHeader">
        <p>欢迎体验Midjourney绘画功能~</p>
        <p>绘画指令：[/mj 提示词]，例如：/mj a dog</p>
        <p>放大指令：[/mj u1-u4]，例如：/mj u2</p>
        <p>变换指令：[/mj v1-v4]，例如：/mj v3</p>
        <p class="tips">注意：提示词最好用英文！</p>
      </el-header>
      <el-main :style="{ height: scrollerHeight + 'px' }">
        <el-scrollbar class="msg-list">
          <el-row v-for="(item, key) in msgList" :key="key" class="msg-item">
            <el-col>
              <img v-if="item.type == 1" class="img_1" src="../assets/images/ic_chatgpt.png" />
              <el-card :style="{ 'margin-left': (item.type == 2 ? 'auto' : '0') }">
                <div class="txt">
                  <!-- <img class="img" v-if="item.content.indexOf('http') > -1" :src="item.content" /> -->
                  <el-image v-if="item.content.indexOf('http') > -1" :src="item.content"
                    :preview-src-list="[item.content]" fit="cover" />
                  <text v-else>{{ item.content }}</text>
                </div>
                <div class="time">{{ item.time }}</div>
              </el-card>
              <img v-if="item.type == 2" class="img_2" src="../assets/images/me.png" />
            </el-col>
          </el-row>
        </el-scrollbar>
      </el-main>
      <el-footer ref="elFooter">
        <el-input v-model="queryInfo.param.prompt" placeholder="/mj 提示词" clearable size="large"
          :formatter="(value) => `/mj ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
          :parser="(value) => value.replace(/\/mj\s?|(,*)/g, '')" :disabled="isDisabled">
          <template #append>
            <el-button type="primary" :disabled="isDisabled" @click="sendMsg()">
              <el-icon>
                <Position />
              </el-icon>发送
            </el-button>
          </template>
        </el-input>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import topBar from '@/components/topBar.vue'

var _this;
export default {
  name: 'home',
  components: {
    topBar
  },
  data() {
    return {
      // 容器高度初始化为0
      scrollerHeight: 0,
      // 查询参数信息
      queryInfo: {
        type: null,
        param: {
          msg_Id: null,
          prompt: '',
          question: null,
          index: null,
          id: null,
          url: null
        }
      },
      // 信息集合
      msgList: [],
      msgIndex: 0,
      isDisabled: false,
      // 图片信息
      imgInfo: null,
      // 操作类型 1-绘图，2-放大，3-变换
      operateType: 0,
      // 是否重试
      isRetry: true
    }
  },
  created() {
    _this = this;

    // 先读取缓存中的会话信息，没有则新创建一条
    const _msgList = localStorage.getItem('msgList');
    if (_msgList) {
      _this.msgList = JSON.parse(_msgList);
    } else {
      _this.insertMsg(1, '亲，欢迎加入Midjourney的绘画体验，请输入指令.....');
    }

    const _imgInfo = localStorage.getItem('imgInfo');
    if (_imgInfo) {
      _this.imgInfo = JSON.parse(_imgInfo);
    }
  },
  mounted: function () {
    _this.calculateHeight();

    // 当浏览器窗口大小发生变化时，重新计算容器高度
    window.addEventListener('resize', () => {
      _this.calculateHeight();
    });
  },
  methods: {
    // 计算容器高度
    calculateHeight() {
      // 获取顶部元素
      let elHeader = _this.$refs.elHeader;
      // 获取底部元素
      let elFooter = _this.$refs.elFooter;
      if (elHeader && elFooter) {
        _this.scrollerHeight = document.documentElement.clientHeight - elHeader.$el.offsetHeight - elFooter.$el.offsetHeight - 1;
      }
    },
    //发送消息
    sendMsg() {
      const _prompt = _this.queryInfo.param.prompt.replace(/\/mj\s?|(,*)/g, '').toLowerCase();
      if (!_prompt) {
        _this.$message.toast({
          message: '请输入提示词！'
        });
        return;
      }

      if (!_this.imgInfo && (_prompt.indexOf('u1') > -1 || _prompt.indexOf('u2') > -1 || _prompt.indexOf('u3') > -1 || _prompt.indexOf('u4') > -1
        || _prompt.indexOf('v1') > -1 || _prompt.indexOf('v2') > -1 || _prompt.indexOf('v3') > -1 || _prompt.indexOf('v4') > -1)) {
        _this.$message.toast({
          message: '请先输入绘图指令！'
        });
        return;
      }

      let optStr = '';
      _this.queryInfo.param.question = _prompt;
      // 放大图片
      if (_prompt.indexOf('u1') > -1 || _prompt.indexOf('u2') > -1 || _prompt.indexOf('u3') > -1 || _prompt.indexOf('u4') > -1) {
        optStr = '放大';
        _this.operateType = 2;
        _this.queryInfo.type = 'upscale';
        if (_prompt.indexOf('u1') > -1) {
          _this.queryInfo.param.index = 1;
        }
        if (_prompt.indexOf('u2') > -1) {
          _this.queryInfo.param.index = 2;
        }
        if (_prompt.indexOf('u3') > -1) {
          _this.queryInfo.param.index = 3;
        }
        if (_prompt.indexOf('u4') > -1) {
          _this.queryInfo.param.index = 4;
        }
        _this.queryInfo.param.id = _this.imgInfo.id;
        _this.queryInfo.param.url = _this.imgInfo.attachments[0].url;
      }
      //变化图片
      else if (_prompt.indexOf('v1') > -1 || _prompt.indexOf('v2') > -1 || _prompt.indexOf('v3') > -1 || _prompt.indexOf('v4') > -1) {
        optStr = '变化';
        _this.operateType = 3;
        _this.queryInfo.type = 'variation';
        if (_prompt.indexOf('v1') > -1) {
          _this.queryInfo.param.index = 1;
        }
        if (_prompt.indexOf('v2') > -1) {
          _this.queryInfo.param.index = 2;
        }
        if (_prompt.indexOf('v3') > -1) {
          _this.queryInfo.param.index = 3;
        }
        if (_prompt.indexOf('v4') > -1) {
          _this.queryInfo.param.index = 4;
        }
        _this.queryInfo.param.id = _this.imgInfo.id;
        _this.queryInfo.param.url = _this.imgInfo.attachments[0].url;
      }
      //生成图片
      else {
        optStr = '生成';
        _this.operateType = 1;
        _this.queryInfo.type = 'imagine';
        _this.queryInfo.param.msg_Id = 'amj_' + Math.ceil(Math.random() * 1000000000000);
      }

      _this.queryInfo.param.prompt = '';
      _this.insertMsg(2, _prompt);
      _this.isDisabled = true;
      _this.isRetry = true;
      console.log('请求参数', JSON.stringify(_this.queryInfo));
      _this.$requests
        .post("/api/mj-func", _this.queryInfo)
        .then((res) => {
          console.log('请求结果', res);
          if (res != null) {
            _this.$message.toast({
              message: res.msg,
              type: "success",
            });

            // 请求成功后，开始倒计时60秒
            let seconds = 60;
            _this.insertMsg(1, '请求成功，' + seconds + ' 秒后将为您获取' + optStr + '后的图片。');
            let timer = setInterval(function () {
              seconds--;
              if (seconds == 0) {
                console.log('执行查询');
                clearInterval(timer);
                _this.msgList[_this.msgList.length - 1].content = '图片获取中，请稍后......';
                localStorage.setItem('msgList', JSON.stringify(_this.msgList));

                _this.retrieveMessages();
                return;
              }
              _this.msgList[_this.msgList.length - 1].content = '请求成功，' + seconds + ' 秒后将为您获取' + optStr + '后的图片。';
              localStorage.setItem('msgList', JSON.stringify(_this.msgList));
            }, 1000);
          }
        });
    },
    // 查询消息
    retrieveMessages() {
      _this.queryInfo.type = 'retrieveMessages';
      console.log('查询参数', JSON.stringify(_this.queryInfo));
      _this.$requests
        .post("/api/mj-func", _this.queryInfo)
        .then((res) => {
          console.log('查询结果', res);
          _this.isDisabled = _this.isRetry ? true : false;
          if (res != null) {
            _this.isDisabled = false;
            _this.$message.toast({
              message: res.msg,
              type: "success",
            });

            if (res.data) {
              _this.insertMsg(1, res.data.pic);

              // 生成图片后，存储变量
              if (_this.operateType == 1) {
                _this.imgInfo = res.data;
                localStorage.setItem('imgInfo', JSON.stringify(_this.imgInfo));
              }
            }
          }
          else {
            if (_this.isRetry) {
              _this.isRetry = false;
              // 重试，开始倒计时180秒
              let seconds = 180;
              let timer = setInterval(function () {
                seconds--;
                if (seconds == 0) {
                  console.log('重试->执行查询');
                  clearInterval(timer);
                  _this.msgList[_this.msgList.length - 1].content = '图片获取中，请稍后......';
                  localStorage.setItem('msgList', JSON.stringify(_this.msgList));

                  _this.retrieveMessages();
                  return;
                }
                _this.msgList[_this.msgList.length - 1].content = '图片获取失败，' + seconds + ' 秒后将为您重新获取。';
                localStorage.setItem('msgList', JSON.stringify(_this.msgList));
              }, 1000);
            }
            else {
              _this.insertMsg(1, '十分抱歉，图片获取失败，请重新输入指令.....');
            }
          }
        });
    },
    // 插入会话
    insertMsg(type, content) {
      _this.msgIndex = _this.msgIndex + 1;
      _this.msgList.push({
        id: _this.msgIndex,
        type: type || 0,//类型 1-机器人，2-自己
        content: content || '',
        time: _this.$date.fmtDateTime(null, 3)
      });
      // 将会话写入缓存
      localStorage.setItem('msgList', JSON.stringify(_this.msgList));
    }
  }
}
</script>

<style lang="scss">
.page {
  .el-header {
    line-height: 20px;
    text-align: left;
    background-color: var(--el-color-primary-light-7);
    color: var(--el-text-color-primary);
    height: auto;
    padding: 8px 15px;

    p {
      font-size: 13px;
      color: #303133;
    }

    .tips {
      color: red;
    }
  }

  .el-main {
    padding: 12px 15px;

    .msg-list {
      .msg-item:last-child {
        margin-bottom: 0;
      }

      .msg-item {
        margin-bottom: 10px;
        text-align: left;

        .el-col {
          display: flex;

        }

        .img {
          width: 100%;
        }

        .img_1 {
          width: 36px;
          height: 36px;
          margin-right: 8px;
        }

        .img_2 {
          width: 36px;
          height: 36px;
          margin-left: 8px;
        }

        .el-card__body {
          padding: 8px 15px;
          font-size: 14px;
          color: #303133;
          min-width: 130px;
        }

        .time {
          margin-top: 5px;
          text-align: right;
          color: #909399;
          font-size: 12px;
        }
      }
    }
  }

  .el-footer {
    line-height: 60px;
    background-color: #ecf5ff;
    color: var(--el-text-color-primary);

    .el-input-group__append {
      background-color: #409EFF;
      color: #ffffff;
      box-shadow: none;
    }
  }
}
</style>

说明：post请求时，第一个url参数需要使用自己在Laf中创建的云函数的名称

在src目录下创建utils文件夹，用于存放以上关联的js，具体代码如下：

日期格式化（date.js）

//时间处理
const date = {
    /**
     * 
     * @param {时间} dateTime 
     * @param {类型} type 默认：年月日
     * type=1 年-月-日
     * type=2 年.月.日
     * type=3 年-月-日 时:分:秒
     * type=4 年.月.日 时:分:秒
     * @returns 
     */
    fmtDateTime(dateTime, type) {
        if (dateTime == '' || dateTime == null) {
            dateTime = new Date();
        } else {
            // dateTime = dateTime.substr(0, 4) + "/" + dateTime.substr(5, 2) + "/" + dateTime.substr(8, 2) + " " + dateTime.substr(11, 8);
            dateTime = new Date(dateTime);
        }

        var y = dateTime.getFullYear();
        var m = dateTime.getMonth() + 1;
        var d = dateTime.getDate();
        var h = dateTime.getHours() > 9 ? dateTime.getHours().toString() : '0' + dateTime.getHours();
        var mm = dateTime.getMinutes() > 9 ? dateTime.getMinutes().toString() : '0' + dateTime.getMinutes();
        var ss = dateTime.getSeconds() > 9 ? dateTime.getSeconds().toString() : '0' + dateTime.getSeconds();

        if (type === 1) {
            return y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d);
        }
        else if (type === 2) {
            return y + '.' + (m < 10 ? ('0' + m) : m) + '.' + (d < 10 ? ('0' + d) : d);
        }
        else if (type === 3) {
            return y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d) + " " + h + ":" + mm + ":" + ss;
        }
        else if (type === 4) {
            return y + '.' + (m < 10 ? ('0' + m) : m) + '.' + (d < 10 ? ('0' + d) : d) + " " + h + ":" + mm + ":" + ss;
        }
        return y + '年' + (m < 10 ? ('0' + m) : m) + '月' + (d < 10 ? ('0' + d) : d) + '日';
    }
}

export default date

消息弹框提示（message.js）

import { ElMessage } from "element-plus";

const message = {
    //信息提示
    toast(obj) {
        return ElMessage({
            message: obj.message || 'this is a message.',
            type: obj.type || 'warning',//success warning info error
            duration: obj.duration || 3000,
            showClose: obj.showClose || false
        });
    }
}

export default message

加载动画（loading.js）

import { ElLoading } from 'element-plus';

// 定义一个请求次数的变量，用来记录当前页面总共请求的次数
let loadingRequestCount = 0;
// 初始化loading
let loadingInstance;

// 编写一个显示loading的函数 并且记录请求次数 ++
const showLoading = (target) => {
    if (loadingRequestCount === 0) {
        // element的服务方式 target 我这边取的是表格class
        // 类似整个表格loading和在表格配置v-loading一样的效果，这么做是全局实现了，不用每个页面单独去v-loading
        loadingInstance = ElLoading.service({ target });
    }
    loadingRequestCount++
}

// 编写一个隐藏loading的函数，并且记录请求次数 --
const hideLoading = () => {
    if (loadingRequestCount <= 0) return
    loadingRequestCount--
    if (loadingRequestCount === 0) {
        loadingInstance.close();
    }
}

export {
    showLoading,
    hideLoading
}

http请求（requests.js）

import axios from 'axios'
import message from './message';
import { showLoading, hideLoading } from '@/utils/loading'

// 创建 axios 实例
const requests = axios.create({
    // baseURL: 'http://localhost:8088',
    withCredentials: true,
    headers: {
        // 'Content-Type': 'application/json',
        // 'content-type' : 'application/x-www-form-urlencoded',
        // 'auth': 'test'
    },
    timeout: 30 * 1000 // 请求超时时间 30秒
})

// 错误处理函数
const err = (error) => {
    // 响应拦截进来隐藏loading效果，此处采用延时处理是合并loading请求效果，避免多次请求loading关闭又开启
    setTimeout(() => {
        hideLoading()
    }, 200);

    if (error.response) {
        const data = error.response.data;
        if (error.response.status === 403) {
            message.toast({
                message: data.message || data.msg
            });
        }
        if (error.response.status === 401) {
            message.toast({
                type: 'warning',
                message: '你没有权限。'
            });
        }
    }
    return Promise.reject(error)
}

// requests interceptor(请求拦截器)
requests.interceptors.request.use(config => {
    // 请求拦截进来调用显示loading效果
    showLoading(".el-main");

    const token = localStorage.getItem('token')
    if (token) {
        config.headers['auth'] = token // 让每个请求携带自定义 token
    }
    return config
}, err)

// requests interceptor（接收拦截器）
requests.interceptors.response.use((response) => {
    // 响应拦截进来隐藏loading效果，此处采用延时处理是合并loading请求效果，避免多次请求loading关闭又开启
    setTimeout(() => {
        hideLoading()
    }, 200);

    const res = response.data;
    if (res.code == 200) {
        return Promise.resolve(res).catch((e) => { });
    } else {
        message.toast({
            message: res.msg
        });

        return Promise.reject(res).catch((e) => { });
    }
}, err)

export default {
    requests
}

同时，需要修改“main.js”，进行引入，配置全局变量

import message from './utils/message'
import requests from './utils/requests'
import date from './utils/date'

//配置全局属性
app.config.globalProperties.$requests = requests.requests
app.config.globalProperties.$message = message
app.config.globalProperties.$date = date

“App.vue”页面中样式如下：

<template>
  <router-view />
</template>

<style lang="scss">
body {
  padding: 0;
  margin: 0;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

p {
  margin: 0;
  padding: 0;
}

.el-message{
  width: max-content;
}
</style>

以为全部完成后，使用命令npm run serve运行项目，界面效果如下：

 在线体验可点击 Midjourney绘画

三、发布项目并部署到Laf云平台

1.打包项目

本地开发完成后，没有服务器部署到线上怎么办？不用担心，Laf都已经为我们考虑好了，使用命令npm run build打包项目

2.项目托管

进入【Laf云开发】-【存储】，新建“Bucket”空间，如下图：

 完成后，点击上方“上传”按钮，将本地打包后生成的dist文件夹下的文件全部上传，如下图：

再点击右上方“开启网站托管”按钮，生成“当前域名”，即可进行外部访问了。

 关于网站托管详细介绍，可访问官网 静态网站托管介绍 | laf 云开发https://doc.laf.run/guide/website-hosting/

以上即为使用Laf接入Midjourney后整合前端的完整演示，如有疑问，欢迎提出！

Jokeny_gyh
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用Laf云平台，两步将ChatGPT接入微信公众号
06-09
无需域名服务器，操作简单
不用魔法，快速、手摸手上线Midjourney！【附源码】【示例】
AlexDev
05-21 2604
使用laf，快速搭建属于自己的midjourney,附源码！文末有【示例】
使用laf云开发三分钟上线你自己的Midjourney
xinTianou123的博客
05-22 2394
使用laf云开发，三分钟上线你自己的Midjourney
人人都能接入 Claude，赚取自己的第二桶金
云原生实验室
05-28 863
Laf 公众号已接入了 AI 绘画工具 Midjourney，可以让你轻松画出很多“大师”级的作品。同时还接入了 AI 聊天机器人，支持 GPT、Claude 以及 Laf 专有模型，可通过指令来随意切换模型。欢迎前来调戏????<<< 左右滑动见更多 >>>你想拥有一个属于自己的 Claude AI 吗？最近频上热搜的 Claude，刚刚又获得了 Google 的新...
零基础手把手教你如何使用Laf免费玩转Midjourney
Happiness is everywhere
05-23 2324
Laf 是一个 Serverless 框架，提供开箱即用的云函数，云数据库，对象存储等能力，是一个非常干净清爽的开发平台，不仅入门简单，还能像写博客一样写代码！最重要的是，敲重点，三分钟即可上线 ChatGPT 应用！
云开发中的战斗机 Laf，让你像写博客一样写代码
云原生实验室
06-02 362
云开发中的战斗机 Laf，让你像写博客一样写代码 各位云原生搬砖师 and PPT 架构师，你们有没有想过像写文章一样方便地写代码呢？ 怎样才能像写文章一样写代码？ 理想的需求应该是可以在线编写、调试函数，不用重启服务，随时随地在 Web 上查看函数的运行日志，无需连接服务器，无需折腾数据库、对象存储、Nginx 等，可以随时随地上线应用，招之即来，挥之即去，随手发布！ 这时候懂王上线了，好家伙，这不就是 Serverless 嘛，Serverless 的愿景是用户只需专注开发意图，编写函数代码，并上传到代
使用Laf云平台，两步将机器人接入微信公众号
热门推荐
weixin_42560424的博客
03-31 1万+
chatgpt把刚才保存的接口地址复制到服务器URL这里，下边的token与云函数代码中的token保持一致，下边的EncodingAESKey点击右侧随机生成就行，然后点击提交。首先默认你有一个公众号，然后登录微信公众平台，点开左侧的设置与开发，点击基本设置，服务器配置那里点击修改配置。可以说已经满大街可见了，到处都有各种各样的体验地址，有收费的也有免费的，总之是五花八门、花里胡哨。然后我们点击函数，函数列表右侧的加号，新增一个可以介入微信公众号的chatgpt云函数。注册登录之后，点击新建，建立一个应用
Laf: 云开发中的战斗机，让你写代码像写博客一样简单
easylife206的专栏
05-19 2804
公众号关注「奇妙的 Linux 世界」设为「星标」，每天带你玩转 Linux ！各位云原生搬砖师 and PPT 架构师，你们有没有想过像写文章一样方便地写代码呢？怎样才能像写文章一样写代码？理想的需求应该是可以在线编写、调试函数，不用重启服务，随时随地在 Web 上查看函数的运行日志，无需连接服务器，无需折腾数据库、对象存储、Nginx 等，可以随时随地上线应用，招...
静态文件的上传代码
够浪
04-04 374
静态文件上传 前端代码 如果form表单中牵涉到文件上传，在form表单中就需要添加一个属性enctype="multipart/form-data"不然上传就是假上传，后台不能获取到上传的文件。<form>修改如下： <form method="post" action="/addArticle" enctype="multipart/form-...
使用Laf云平台将ChatGPT接入微信公众号.zip
05-29
使用Laf云平台将ChatGPT接入微信公众号.zip
使用Laf云平台将ChatGPT接入微信公众号
05-03
使用Laf云平台将ChatGPT接入微信公众号
Midjourney用户手册中文版详解模型、命令、参数与高级用法
winkexin的博客
05-10 7553
完整看完以后，确实发现了很多之前看教程遗漏的点，但由于官方手册是英文版，机翻的一些内容都相对直白，理解起来有些困难，搜索之后也没找到比较系统的中文版手册内容，因此我依据自己的设计经验，对手册的核心部分（模型版本、放大器、命令、参数、Prompt 关键词）进行了中文翻译，方便和我一样有需求的人学习阅读。你可以使用带有唯一图像 ID 的 /show 命令将图像移动到另一个服务器或频道，也可以用来找回丢失的图像，或者重新展示以前的图像，从而进行修改、放大图像或使用更新的参数和功能。参数更改生成图像所花费的时间。
五分钟 实现chatgpt+Midjourney工具 出图ai 变现
zxcvbnm6859的博客
05-24 719
五分钟零基础开发chatgpt+Midjourney工具赢得被动收入
Vue项目-Table添加Form表单校验
StupidlyGrass的博客
08-12 281
【代码】Vue项目-Table添加Form表单校验。
vue3使用pnpm运行项目但是运行不起来
一个努力不被优化的程序员
08-12 196
重新创建项目，将老项目的package.json，vite.config.ts，src等文件拖拽替换。删除node_modules重新下：文字编译乱码，utf-8可能解析处理问题。（如果哪位知道为什么会这样或者怎么解决麻烦留言下）运行项目的时候发现根本运行不起来了。删除node_modules重新下。尝试过创建.npmr文件。创建.npmr：不管用。
element table 判断当前行是否展开和只展开一行
最新发布
m0_68716504的博客
08-15 254
element组件提供了table的展开和收起功能，并提供了expand-change事件用来监听table行的展开和收起在一些特殊情况下如：处理异步数据时，希望展开行时请求接口，关闭行时不用请求，但是expand-change，无论是展开还是收起都会触发，于是就希望能有一个类似isExpended布尔类型的状态属性来判断是否调用接口。
monaco-editor自定义定制/扩展其他语言
m0_51431448的博客
08-12 86
目前monaco-editor内置有61种语言，但是只对css、html、json、typescript 支持的，功能也比较全。我们要是使用其他的语言比如javascript、java、sql等可能会报错，使用上面内置的四种语言之外的其他语言就需要我们自己定制、扩展了。如果有更多的可以自行扩展，monaco-editor中也都有对应语言的提示的自带的包，也可以自己编写逻辑哈。但是没考虑到语言的问题。我这边写了最常用的javascript、java、sql基础扩展支持。
Vue 3的Computed属性
计算机图形学
08-15 324
Vue 3的组合式API为Computed属性的使用带来了新的变化和可能性。通过computed函数，开发者可以轻松地创建只读或可写的Computed属性，并在组件中高效地处理响应式数据。合理使用Computed属性，可以使代码更加简洁、清晰和高效。
使用el-menu跳转时偶尔会出现路由已经变了，但是页面却显示空白的情况
qq_49080239的博客
08-15 210
我改的期间发现，是上一个跳转的组件如果出现template里包了多个标签，那么下一个组件就会变成空白。所以当你发现有一个页面跳转出错，但是怎么也找不到错误时，那你就去看看它的上一个跳转的页面是不是存在错误。刚开始我以为是我数据加载的问题，后来又看有人说是template里不能包多个div，但我去看我出错的组件，并没有出现两个div。后来我就把每个都给改了，即使是elemen-ui的标签也全部改在一个div里，就发现没问题了。
midjourney 无需魔法
09-02
很抱歉，我没有找到您提到的midjourney无需魔法的相关信息。引用提到了Midjourney AI魔法盒，它似乎是一个提供海量关键词素材和教程的资源。而引用中提到了通过discord间接操作使用midjourney的nodejs包，并通过https://laf.dev的新加坡节点Serverless来运行程序来连接midjourney服务。但是在这些引用中没有提到midjourney无需魔法的信息。请提供更多关于midjourney无需魔法的背景或描述，我将尽力提供帮助。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Midjourney AI魔法盒，海量关键词素材+保姆级教程gpt](https://download.csdn.net/download/u010291330/87748315)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [无需魔法，教你Midjourney随意用【内附源码】【示例】](https://blog.csdn.net/xiealan/article/details/130804742)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值