常见问题

登录页如何开启注册用户功能

参考登录页如何开启注册用户功能

登录页面如何不显示验证码

参考登录页面如何不显示验证码

如何通过命令行或工具运行

有时候开发编译项目不想使用HbuilderX，想使用其他工具或命令行，就可以集成如下插件。例如使用vscode或webstrom就可以运行的项目。

插件相关脚本实现ruoyi-app/使用命令行或其他工具运行移动端.zip

链接: https://pan.baidu.com/s/1y1g8NkelRT_pS0fIbmyP8g 提取码: mjs7

解压文件，然后把RuoYi-App项目下面的所有子目录及文件放到插件src目录下面即可。

运行项目

# 安装依赖
npm install --registry=https://registry.npmmirror.com

# 本地开发 启动项目
npm run dev

# 打包项目
npm run build:h5

其他打包命令格式

npm run build:%PLATFORM%

可以参考后面这个表格

PLATFORM值	平台
h5	H5
mp-alipay	支付宝小程序
mp-baidu	百度小程序
mp-weixin	微信小程序
mp-toutiao	抖音小程序
mp-lark	飞书小程序
mp-qq	qq 小程序
mp-360	360 小程序
mp-kuaishou	快手小程序
mp-jd	京东小程序
mp-xhs	小红书小程序
quickapp-webview	快应用(webview)
quickapp-webview-union	快应用联盟
quickapp-webview-huawei	快应用华为

如何使用RuoYi-Cloud作为后端

RuoYi-App实现了与RuoYi-Vue后台完美对接，也能与RuoYi-Cloud完美对接。只需要简单修改一下，流程如下：

1、RuoYi-Cloud微服务版本后端新增跨域支持类CorsConfig.java

package com.ruoyi.gateway.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.http.HttpHeaders;
import org.springframework.http.HttpMethod;
import org.springframework.http.HttpStatus;
import org.springframework.http.server.reactive.ServerHttpRequest;
import org.springframework.http.server.reactive.ServerHttpResponse;
import org.springframework.web.cors.reactive.CorsUtils;
import org.springframework.web.server.ServerWebExchange;
import org.springframework.web.server.WebFilter;
import org.springframework.web.server.WebFilterChain;
import reactor.core.publisher.Mono;

/**
 * 跨域配置
 * 
 * @author ruoyi
 */
@Configuration
public class CorsConfig
{
    /**
     * 这里为支持的请求头，如果有自定义的header字段请自己添加
     */
    private static final String ALLOWED_HEADERS = "X-Requested-With, Content-Type, Authorization, credential, X-XSRF-TOKEN, token, Admin-Token, App-Token";
    private static final String ALLOWED_METHODS = "GET,POST,PUT,DELETE,OPTIONS,HEAD";
    private static final String ALLOWED_ORIGIN = "*";
    private static final String ALLOWED_EXPOSE = "*";
    private static final String MAX_AGE = "18000L";

    @Bean
    public WebFilter corsFilter()
    {
        return (ServerWebExchange ctx, WebFilterChain chain) -> {
            ServerHttpRequest request = ctx.getRequest();
            if (CorsUtils.isCorsRequest(request))
            {
                ServerHttpResponse response = ctx.getResponse();
                HttpHeaders headers = response.getHeaders();
                headers.add("Access-Control-Allow-Headers", ALLOWED_HEADERS);
                headers.add("Access-Control-Allow-Methods", ALLOWED_METHODS);
                headers.add("Access-Control-Allow-Origin", ALLOWED_ORIGIN);
                headers.add("Access-Control-Expose-Headers", ALLOWED_EXPOSE);
                headers.add("Access-Control-Max-Age", MAX_AGE);
                headers.add("Access-Control-Allow-Credentials", "true");
                if (request.getMethod() == HttpMethod.OPTIONS)
                {
                    response.setStatusCode(HttpStatus.OK);
                    return Mono.empty();
                }
            }
            return chain.filter(ctx);
        };
    }
}

2、RuoYi-App编辑api/login.js，修改几个接口。

import request from '@/utils/request'

// 登录方法
export function login(username, password, code, uuid) {
  const data = {
    username,
    password,
    code,
    uuid
  }
  return request({
    'url': '/auth/login',
    headers: {
      isToken: false
    },
    'method': 'post',
    'data': data
  })
}

// 获取用户详细信息
export function getInfo() {
  return request({
    'url': '/system/user/getInfo',
    'method': 'get'
  })
}

// 退出方法
export function logout() {
  return request({
    'url': '/auth/logout',
    'method': 'delete'
  })
}

// 获取验证码
export function getCodeImg() {
  return request({
    'url': '/code',
    headers: {
      isToken: false
    },
    method: 'get',
    timeout: 20000
  })
}

3、RuoYi-App编辑store/modules/user.js，修改一下token返回值。

// res.token 更换为 res.data.access_token
....
login(username, password, code, uuid).then(res => {
  setToken(res.data.access_token)
  commit('SET_TOKEN', res.data.access_token)
  resolve()
})
....

按照上述修改完成后我们就支持微服务了，微服务和分离版本接口基本上是一样的，都能互相通用。