2021-10-14 如何在本地启动服务,前端进行访问

在工作中,我们很多情况都是自己写API自己测试;如果在项目还没有部署,但是有需求说让你启动本地服务,让前端(另一台机器)访问

一、前提
两台机器一定要是在同一个局域网里面,不然是不会访问到的

二、关闭防火墙
防火墙就是保护你机器的,不让你电脑受到其他电脑连接进而操作你电脑。但是我们就是要让其他电脑来访问我们
在这里插入图片描述

百度上面也是可以找到如何关闭的方法,我是直接点击这个Windows安全中心,不用切换其他页面
在这里插入图片描述

进入防火墙设置,关闭
三、启动服务,提供地址
启动服务就不用说了。
win + R 输入命令

ipconfig

IPv4 就是电脑的IP地址,然后再拼接API地址给前端,但是很容易出现跨域问题,添加config

/**
 * Configuration of web application with Servlet 3.0 APIs.
 */
@Configuration
public class WebConfigurer implements ServletContextInitializer {

    private final Logger log = LoggerFactory.getLogger(WebConfigurer.class);

    private final Environment env;

    private final JHipsterProperties jHipsterProperties;

    public WebConfigurer(Environment env, JHipsterProperties jHipsterProperties) {
        this.env = env;
        this.jHipsterProperties = jHipsterProperties;
    }

    @Override
    public void onStartup(ServletContext servletContext) throws ServletException {
        if (env.getActiveProfiles().length != 0) {
            log.info("Web application configuration, using profiles: {}", (Object[]) env.getActiveProfiles());
        }

        log.info("Web application fully configured");
    }

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = jHipsterProperties.getCors();
        if (!CollectionUtils.isEmpty(config.getAllowedOrigins()) || !CollectionUtils.isEmpty(config.getAllowedOriginPatterns())) {
            log.debug("Registering CORS filter");
            source.registerCorsConfiguration("/api/**", config);
            source.registerCorsConfiguration("/management/**", config);
            source.registerCorsConfiguration("/v2/api-docs", config);
            source.registerCorsConfiguration("/v3/api-docs", config);
            source.registerCorsConfiguration("/swagger-resources", config);
            source.registerCorsConfiguration("/swagger-ui/**", config);
        }
        return new CorsFilter(source);
    }
}

如果有其他小伙伴用这个方法,可以一起讨论下

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 启动一个前端 Vue CLI 项目需要执行以下步骤: 1. 确保已经安装了 Node.js 和 npm。 2. 打开命令行终端,进入到 Vue 项目的根目录。 3. 在命令行终端中运行 `npm install` 命令,以安装项目所依赖的所有包和依赖项。 4. 安装完成后,在命令行终端中运行 `npm run serve` 命令,以启动开发服务器。 5. 服务器启动后,打开浏览器并输入 `http://localhost:8080` 地址,即可访问项目。 注意:在执行以上步骤之前,需要先在项目根目录下的 `package.json` 文件中配置好项目所需的依赖项和脚本命令。 ### 回答2: 要启动一个前端Vue-cli项目,需要按照以下步骤进行操作: 1. 安装Node.js:首先需要确保电脑上安装了Node.js,可以在官网(https://nodejs.org/)下载并安装合适版本。 2. 安装Vue-cli:在命令行中运行以下命令来全局安装Vue-cli:npm install -g @vue/cli 3. 创建项目:在命令行中进入到项目想要存放的目录,运行以下命令来创建一个新的Vue项目:vue create 项目名 4. 配置项目:运行上述命令后,命令行会提示选择配置文件。可以选择默认的配置(default),或者手动选择需要的配置,如TypeScript、Router、Vuex等。根据项目需求进行选择。 5. 启动项目:在项目目录下,运行命令:cd 项目名,然后运行以下命令来启动项目:npm run serve 6. 访问项目:项目启动后,命令行中会显示访问的地址(通常为localhost:8080)。在浏览器中输入该地址,即可访问项目。 以上为启动一个前端Vue-cli项目的基本步骤。在项目启动后,可以对Vue-cli进行详细配置和开发,进行开发调试和构建等操作。根据项目的具体需求,还可以添加路由、管理状态、引入组件库等进一步开发。 ### 回答3: 要启动一个前端Vue-cli项目,您可以按照以下步骤进行操作: 1. 首先,确保您的计算机已经安装了Node.js和npm(Node.js的包管理器)。您可以在终端或命令提示符中运行`node -v`和`npm -v`来检查它们是否已经安装。 2. 打开终端或命令提示符,转到您的项目文件夹的根目录。 3. 在项目文件夹中,运行以下命令以安装项目的依赖项:`npm install`。这将根据项目中的package.json文件中的依赖项列表来下载和安装所需的包。 4. 安装完成后,您可以使用以下命令来启动项目:`npm run serve`。这将启动一个开发服务器,并将您的Vue应用程序运行在本地主机的某个端口上。 5. 在终端或命令提示符中,您将看到相关的输出信息,其中包括您的应用程序正在运行的URL地址。您可以在浏览器中访问该URL以查看和测试您的应用程序。 请注意,如果您已经在Vue项目的package.json文件中配置了其他脚本命令,您可以使用类似的方式来执行它们,例如运行构建脚本`npm run build`来生成生产环境中的应用程序。 希望以上的解答对您有所帮助!如果您对任何步骤或概念有疑问,请随时追问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值