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

一、前言

上篇讲述了 零基础手把手教你如何使用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="isDisab