关于数据提交上传服务端的数据类型以及项目打包上线的流程

1 请求头的类型: content-type;

01:  application/json   数据以json格式请求:{"key":"value"}

02:  application/x-www.form-urlencoded   from表单的数据格式 name="zs"&age=12

03  mutipart/form-data    上传文件的格式

04 text/xml   xml格式

2 axios中使用: 

01 如果对axios不做任何的请求拦截配置的话 使用方法如下:

const axios from ‘axios’

axios.default.baseURL = 'xxxx' // 配置请求都会携带的地址

axios.default.headers.post['Content-Type'] = 'applocation/x-www-form-urle....' // 配置post请求的数据格式;

axios.default.headers['Content-Type']  = 'application/json'  // 无论是post还是get默认都配置json格式

axios.default.headers.common['Authorization'] = 'Token'  // 配置token

02  封装进行配置:

const axios = axios.create( { headers:{'Content-Type':'application/json'} } )

3 关于使用nginx进行项目的部署:本地loaclhost可以进行访问项目

01 第一种部署方式: 执行命令 npm run build。 将生成的dist目录给到后端

02 nginx进行部署:

第一步 百度nginx 进入官方网站 进行下载 网址:http://nginx.org/en/download.html 

选择Mainline version;nginx/window-1.25.4进行下载, 下载解压后就可以直接使用了

第二步 用法操作:命令环境 

start nginx 启动; nginx -s stop 不保存信息停止; nginx -s quit保存信息停止;

nginx -s reload 重启;nginx -v 查看版本;

启动后查看是否成功,网址输入 localhost就可以了默认端口80;会有一个欢迎界面。

第三步 build完以后 将dist扔到http里面;正常情况下不会正常使用的;

第四步 配置nginx; 需要配置一个正向的代理;代理后端请求的接口:配置完就可以进行访问了。

server { 

  listen  80;

  server_name localhost;

  location / { 

   root  html/dist;   // 因为我们是直接把dist目录放进来了 所以要让她访问dist目录下的index.html

    index index.html index.html;    
  }

   # 正向代理

    location /api { 

        proxy_pass http://139.196.234.125:8080/;
    }
 }

4  关于使用阿里云服务器 进行代理访问项目

第一步 购买服务器:1注册 2 实名认证 3 搜索云服务ecs购买服务器 4 操作系统选择CentOS这是基于nginx的操作系统;5购买完成后会给一个实例以及登录名和密码进入控制台 ;6点击实例的链接;7点击远程链接 用户名root;如果忘记密码到实例列表点击重置密码。进入到了一个命令环境;

第二步 命令环境进行部署:
1 安装yum; 操作命令: yum -y install pcre*       yum -y install openssl*2
2 下载wget;类似于迅雷下载文件;yum install wget
3 下载nginx,下载到对应的目录中,菜单栏有文件,点击 user/ local,鼠标右键点击打开终端然后就这行命令进行复制就可以了  wget http://nginx.org/download/nginx-1.17.9.tar.gz
4 解压 ;还是在local的终端中执行 tar  -zxvf  nginx-1.17.9.tar.gz;然后右击loacl点击刷新
5 编译安装;进入文件夹 cd nginx-1.17.9/   再执行 ./configure ;         make -j4 && make install 会产生一个nginx文件 所有的操作都在这里面
6 右击选择nginx/sbin文件选择进入终端, 然后输入 ./nginx 如果没有任何反应说明启动了nginx了;
这是将购买的服务器的公网ip输入到浏览器中,这时候会一直进行刷新超时。因为阿里云没有配http的实例;
7 设置安全组;进入阿里云的官网,控制台选择自己购买的服务器的实例,点击右侧的更多选择网络和安全组,安全组配置,点击右侧配置规则,点击右上角快速创建规则选择http和https ,端口号 tcp 1-655535,授权对象0.0.0.0.0。 配置完就可以浏览器访问了
8 在http文件下上传项目,在nginx/html目录下上传项目。右键html打开终端;
9 下载一个FinalShell的软件用于文件的上传。下载完后打开,然后点击文件夹的图标,在点击弹框左侧第一个按钮创建ssh链接。 名称随便写  主机服务器公网ip,链接完双击进入。在这里把打包的dist目录直接拖拽到nginx/html目录下上传就可以了。 
10 修改nginx.config文件 双击, 修改如上面一样、
11 这时候在云实例中打开的端口中进入nginx/sbin右击打开终端输入./nginx -s -reload;    再输入 ./nginx

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/427510.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Linux安装JumpServer并结合内网穿透实现公网访问本地服务

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

云计算 2月28号 (linux的磁盘分区)

一 存储管理 主要知识点: 基本分区、逻辑卷LVM、EXT3/4/XFS文件系统、RAID 初识硬盘 机械 HDD 固态 SSD SSD的优势 SSD采用电子存储介质进行数据存储和读取的一种技术,拥有极高的存储性能,被认为是存储技术发展的未来新星。 与传统硬盘相比&#xff0c…

(已解决)emoji及其特殊符号在vue中的使用

问题叙述 使用问题&#xff1a;在表情库中点击后无法展示对应的emoji表情&#xff0c;仅仅显示Unicode代码编号&#xff0c;按照vue eslint规则更改添加分号后&#xff0c;没有报错但是依旧无法正确渲染。 问题源码&#xff1a; <template><div><!-- 被点击的…

Window系统部署Splunk Enterprise并结合内网穿透实现远程访问本地服务

文章目录 前言1. 搭建Splunk Enterprise2. windows 安装 cpolar3. 创建Splunk Enterprise公网访问地址4. 远程访问Splunk Enterprise服务5. 固定远程地址 前言 本文主要介绍如何简单几步&#xff0c;结合cpolar内网穿透工具实现随时随地在任意浏览器&#xff0c;远程访问在本地…

Windows上构建一个和Linux类似的Terminal

感谢大佬批评指正&#xff0c;现已更新 preview Target&#xff1a;致力打造最赏心悦目Window下的终端&#xff0c;同时能够很接近Linux的使用习惯 key word&#xff1a;windows终端美化 windows terminal windows powershell 类似Linux下的Window终端 Window也能用ll windows…

105.从前序与中序遍历序列构造二叉树

// 定义一个名为 Solution 的类 class Solution {// 创建一个哈希映射&#xff08;Map&#xff09;对象&#xff0c;用于根据数值查找对应的索引位置Map<Integer, Integer> map;// 公共方法 buildTree&#xff0c;接收两个整数数组&#xff08;前序遍历序列 preorder 和 …

px、rem、vh、vw

一、基础概念 屏幕分辨率&#xff1a;纵横向上的像素点数&#xff0c;单位是px。 物理分辨率&#xff1a;出厂设置&#xff0c;硬件分辨率&#xff0c;1920*1080 逻辑分辨率&#xff1a;软件/驱动设置&#xff0c;缩放调解的分辨率&#xff0c;1920/150% 制作网页参考逻辑分…

Vue开发实例(八)Vuex状态管理store

Vuex状态管理store 一、Vuex的安装与配置二、store使用方法1、基础使用2、提交变更3、getters使用4、在其他页面&#xff08;组件&#xff09;中显示5、modules多模块 做vue项目的时候&#xff0c; store状态管理器可以帮助我们完成一些数据的存储和管理&#xff0c;通俗理解是…

2024-03-03 c++

&#x1f338; MFC进度条控件 | Progress Control 1。新建MFC项目&#xff08;基于对话框、静态库&#xff09; 2。添加控件&#xff0c;删除初始的3个多余控件 加1个progress control&#xff0c;修改其marquee为true&#xff0c;添加变量&#xff1a;变量名为test_progress。…

mysql8.0安装(zip版本)最详细

下载 https://dev.mysql.com/downloads/mysql/ 解压 [mysqld] # 设置3306端口 port3306 # 设置mysql的安装目录 basedirD:\Atools\mysql-8.0.30-winx64 # 切记此处一定要用双斜杠\\&#xff0c;单斜杠我这里会出错&#xff0c;不过看别人的教程&#xff0c;有的是单斜杠。自己…

探索数字未来:DApp钱包Defi引领新纪元

​小编介绍&#xff1a;10年专注商业模式设计及软件开发&#xff0c;擅长企业生态商业模式&#xff0c;商业零售会员增长裂变模式策划、商业闭环模式设计及方案落地&#xff1b;扶持10余个电商平台做到营收过千万&#xff0c;数百个平台达到百万会员&#xff0c;欢迎咨询。 随…

AI 视频、图片修复 CodeFormer 安装 使用

一 CodeFormer 优秀的开源修复图片与视频的项目 1 下载 开源地址&#xff1a;https://github.com/sczhou/CodeFormer 下载成功&#xff1a; 2 安装 解压进入目录 安装依赖 pip install -r requirements.txt 安装完成&#xff0c;测试运行&#xff0c;报了个错误如下&#xff…

白话transformer(一):注意力机制

前面我们分篇讲述了transformer的原理&#xff0c;但是对于很多刚接触transformer的人来说可能会有一点懵&#xff0c;所以我们接下来会分三篇文章用白话的形式在将transformer 讲一遍。 前文链接 Bert基础(一)–自注意力机制 Bert基础(二)–多头注意力 Bert基础(三)–位置编…

独立游戏《星尘异变》UE5 C++程序开发日志1——项目与代码管理

写在前面&#xff1a;本日志系列将会向大家介绍在《星尘异变》这款模拟经营游戏&#xff0c;在开发时用到的与C相关的泛用代码与算法&#xff0c;主要记录UE5C与原生C的用法区别&#xff0c;以及遇到的问题和解决办法&#xff0c;因为这是我本人从ACM退役以后第一个从头开始的项…

类加载器分类

类加载器&#xff08;Class Loader&#xff09;是Java虚拟机&#xff08;JVM&#xff09;的一个重要组件&#xff0c;负责加载Java类到内存中并使其可以被JVM执行。类加载器是Java程序的核心机制之一。 主要有一下四种类加载器&#xff1a; &#xff08;1&#xff09;启动类加…

01tire算法

01tire算法 #include<bits/stdc.h> using namespace std; #define maxn 210000 int a[maxn], ch[maxn][2], val[maxn], n, ans, tot; void insert(int x) {int now 0;for (int j 31; j > 0; j -- ){int pos ((x >> i) & 1);if (!ch[now][pos])ch[now][po…

【贪心算法】专题练习二

欢迎来到Cefler的博客&#x1f601; &#x1f54c;博客主页&#xff1a;折纸花满衣 &#x1f3e0;个人专栏&#xff1a;题目解析 &#x1f30e;推荐文章&#xff1a;【LeetCode】winter vacation training 目录 &#x1f449;&#x1f3fb;买卖股票的最佳时机&#x1f449;&…

Android Stdio Execution failed for task ‘:app:compileDebugKotlin‘ 报错解决

具体报错信息如下&#xff1a; compileDebugJavaWithJavac task (current target is 1.8) and compileDebugKotlin task (current target is 17)jvm target compatibility should be set to the same Java version.很显然&#xff0c;这是一个版本冲突问题&#xff0c;compile…

深入理解C语言:开发属于你的三子棋小游戏

三子棋 1. 前言2. 准备工作3. 使用二维数组存储下棋的数据4. 初始化棋盘为全空格5. 打印棋盘6. 玩家下棋7. 电脑下棋8. 判断输赢9. 效果展示10. 完整代码 1. 前言 大家好&#xff0c;我是努力学习游泳的鱼&#xff0c;今天我们会用C语言实现三子棋。所谓三子棋&#xff0c;就是…

分享经典、现代和前沿软件工程课程

随着信息技术的发展&#xff0c;软件已经深入到人类社会生产和生活的各个方面。软件工程是将工程化的方法运用到软件的开发、运行和维护之中&#xff0c;以达到提高软件质量&#xff0c;降低开发成本的目的。软件工程已经成为当今最活跃、最热门的学科之一。 本次软件工程MOOC课…