首页 > 其他分享 >华为云服务器+前后端分离项目部署-中

华为云服务器+前后端分离项目部署-中

时间:2023-10-24 12:04:29浏览次数:39  
标签:Vue CLI 项目 部署 前端 js 华为 服务器

 

在前后端分离的项目,我们将其部署在了华为云耀云服务器L实例上,在上一期的教程中,我们成功的部署了后端项目,并启动了后端服务,现在我们需要启动前端的服务。

启动一个基于Vue.js的前端应用通常涉及以下步骤:

1. 安装Node.js和npm:首先,确保你的计算机上安装了Node.js和npm(Node包管理器)。你可以在Node.js官方网站上下载和安装它们:https://nodejs.org/

2. 安装Vue CLI(可选):Vue CLI是一个用于创建和管理Vue.js项目的官方工具。你可以使用以下命令全局安装Vue CLI:

   ```

   npm install -g @vue/cli

   ```

   这将在全局范围内安装Vue CLI,以便你可以在任何地方使用它。

3. 创建Vue项目:使用Vue CLI,你可以轻松创建一个新的Vue项目。进入你想要创建项目的目录,并运行以下命令:

   ```

   vue create my-vue-app

   ```

   这将提示你选择一些配置选项,例如是否使用Babel、TypeScript等,选择适合你项目的选项后,Vue CLI会创建一个新的Vue项目。

4. 进入项目目录:使用cd命令进入你的Vue项目目录:

   ```

   cd my-vue-app

   ```

5. 启动开发服务器:在项目目录中运行以下命令以启动开发服务器:

   ```

   npm run serve

   ```

   这将启动一个本地开发服务器,并在终端中显示访问你的应用程序的URL(通常是http://localhost:8080)。

6. 打开浏览器:使用你喜欢的Web浏览器访问上面显示的URL,你应该能够看到你的Vue.js应用程序运行在本地开发服务器上。

7. 开始开发:现在,你可以在项目目录中的src目录中找到Vue.js组件,并编辑它们以构建你的应用程序。当你保存文件时,开发服务器将自动重新加载应用程序,以便你可以立即查看更改。

这就是启动一个Vue.js前端应用程序的基本流程。从这里开始,你可以根据你的项目需求添加更多的组件、路由、状态管理等功能。如果你选择使用Vue CLI,它还提供了许多工具和插件,可以帮助你更轻松地开发和构建Vue应用程序。

接下来,我们需要启动前端的服务,使用vs code打开前端项目的代码。

这个文件夹即为前端的项目文件夹,打开之后使用vs code运行。

可以看到整个前端项目的文件目录,然后我们需要安装一些依赖包。

安装成功,然后我们需要运行项目。

找到package.json文件,里面包含项目运行的指令。

然后运行npm run dev

可以看到运行成功,然后我们在浏览器打开前端访问的地址。

进入浏览器后,可以看到前端的项目运行成功,现在需要验证钱后端的项目是否连接成功。我们默认账号登录进入系统。

可以看到已经成功登录进入了系统,现在我们需要测试后端的接口个功能是否正常,我们点击添加用户,添加一个用户。

点击确认。

系统显示登录成功,然后我们需要在华为云的数据库里面查看,这一条数据是否添加到了华为云数据库中。

打开数据库后,可以看到用户表中已经添加的新账号,至此,我们的前后端分离项目已经运行成功,接下来,我们来将项目打包发布在华为云数据库中。

 

标签:Vue,CLI,项目,部署,前端,js,华为,服务器
From: https://www.cnblogs.com/jishuseng/p/17784461.html

相关文章

  • 华为云耀云服务器L实例 - 购买与简单配置
     华为云耀云服务器L实例是一种基于云计算技术的虚拟服务器,它提供了计算资源、存储空间和网络功能,允许用户通过互联网访问和管理这些资源。与传统的物理服务器相比,云服务器具有以下优势:1. 弹性可伸缩:云服务器可以根据业务需求进行快速扩展或收缩。您可以根据实际需求轻松增......
  • 华为云服务器+前后端分离项目部署-下
     在前面的教程中我们已经在本地环境中运行了前后端分离的项目,然而,这个前后端分离的项目需要让其他人都能访问到,所以,我们需要将其部署在华为云耀云服务器L实例上,地址(https://www.huaweicloud.com/product/hecs-light.html)这里面,我们购买了华为云耀服务器并开始部署前后端分离项......
  • 华为云耀云服务器L实例 - mysql部署
     MySQL数据库使用结构化查询语言(SQL)作为其查询语言,支持多用户访问,具备良好的性能、可靠性和可伸缩性。它适用于各种规模的应用程序和网站,从小型个人网站到大型企业级应用程序都可以使用MySQL来存储和管理数据。以下是其中一些主要的优势:1. 开源和免费:MySQL是一款开源软件,......
  • 华为云耀云服务器L实例 - 安全组配置
     华为云耀云服务器L实例安全组是一种网络安全功能,它在云计算环境中用于控制和管理服务器的入站和出站流量。安全组相当于一道虚拟的防火墙,通过配置规则来过滤和允许特定的网络流量通过。以下是云服务器安全组的功能:1. 网络流量过滤:安全组可以定义入站和出站规则,控制允许流......
  • 华为云耀云服务器L实例 - java环境配置
     Java环境在云服务器上是为了支持Java应用程序的运行、开发和使用Java生态系统中的各种工具和库。它为开发人员提供了一个稳定和可靠的平台,使他们能够利用Java的强大功能来构建高性能、可扩展和安全的应用程序。1. 登录华为云耀云服务器L实例:使用SSH或远程桌面工具登录到您......
  • 华为云耀云服务器L实例 - 使用navicat管理数据库
     Navicat是一款功能强大的数据库管理工具,可用于管理多种数据库系统,如MySQL、PostgreSQL、Oracle、SQL Server等。它提供了直观的用户界面和丰富的功能,使得开发者和数据库管理员能够轻松地进行数据库设计、查询、维护和管理。Navicat的一些主要优势包括:1. 多数据库支持:Nav......
  • 从零用VitePress搭建博客教程(7) -– 如何用Github Actions自动化部署到Github Pages?
    接上一节:从零用VitePress搭建博客教程(6)-–第三方组件库的使用和VitePress搭建组件库文档 我们搭建完成vitePress后,那么接下来就是如何部署到线上服务器,这里使用GithubPages,免得自己购买服务器,当然你也可以自己购买服务器来部署(比如阿里云服务器)。在部署之前,我们先简单了解......
  • Redis主从复制部署小结
    Redis主从搭建主从架构单节点Redis的并发能力是有上限的,要进一步提高Redis的并发能力,就需要搭建主从集群,实现读写分离。主从数据同步原理全量同步主从第一次建立连接时,会执行全量同步,将master节点的所有数据都拷贝给slave节点,流程:这里有一个问题,master如何得知salve是第一......
  • 华为云服务器+mysql部署
     MySQL 是一种开源的关系型数据库管理系统(RDBMS),它广泛用于存储和管理结构化数据。MySQL 最初由瑞典的 MySQL AB 公司开发,后来被 Oracle 公司收购。MySQL 提供了高性能、稳定性和可靠性,成为许多应用程序的常用数据库选择。以下是 MySQL 数据库的一些关键特点和功能:......
  • 华为云服务器+java环境配置
     在华为云耀云服务器L实例(官网地址https://www.huaweicloud.com/product/hecs-light.html)中,我们有着部署管理系统的场景,本期教程中,我们需要开始部署管理系统,在前面教程中我们已经配置好了服务器的数据库以及基本的运行环境,现在我们需要开始部署java环境的配置,来为后期的项目......