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

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.htmlindex 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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

重学SpringBoot3-自动配置机制

重学SpringBoot3-自动配置机制 引言Spring Boot 自动配置原理示例:Spring Boot Web 自动配置深入理解总结相关阅读 引言 Spring Boot 的自动配置是其最强大的特性之一,它允许开发者通过最少的配置实现应用程序的快速开发和部署。这一切都得益于 Spring …

OmniPlan Pro mac版:简单、智能,项目管理新选择!

OmniPlan Pro是一款功能强大的项目管理软件,它以其直观的用户界面和丰富的功能,帮助用户轻松管理各种复杂的项目。无论是个人任务还是团队协作,OmniPlan Pro都能提供全面的解决方案,让项目管理变得更加简单高效。 OmniPlan Pro软…

从0开始回顾Mysql --- MySQL初体验

大白话从0开始回顾MySQL,去除了一些繁琐的操作的演示以及内容,如MySQL安装等,本篇文章适合复习MySQL语法,学习MySQL语句,对MySQL不太熟练的同学,希望对大家有一些帮助。 MySQL初体验 首先,我将…

如何在Window系统部署VisualSVN服务并结合cpolar实现无公网ip远程访问

文章目录 前言1. VisualSVN安装与配置2. VisualSVN Server管理界面配置3. 安装cpolar内网穿透3.1 注册账号3.2 下载cpolar客户端3.3 登录cpolar web ui管理界面3.4 创建公网地址 4. 固定公网地址访问 前言 SVN 是 subversion 的缩写,是一个开放源代码的版本控制系统…

数字孪生与智慧交通的融合发展:推动交通行业数字化转型,构建智慧城市新生态

随着信息技术的快速发展和城市化进程的深入推进,交通行业正面临着前所未有的机遇与挑战。传统的交通管理模式已难以满足日益增长的交通需求,而数字化转型则成为了推动交通行业创新发展的必由之路。数字孪生技术作为一种前沿的信息技术手段,为…

基于springboot+vue的公寓报修管理系统

博主主页:猫头鹰源码 博主简介:Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战,欢迎高校老师\讲师\同行交流合作 ​主要内容:毕业设计(Javaweb项目|小程序|Pyt…

每天的三哥牌小鸡腿没了

查看印度基金(164824)公告,从2024年2月28日起,暂停印度基金的申购,限额100块的一拖七套利告一段落。这意味着看好印度股市的国内投资者,以后只能通过在场内买入获得份额。 关于暂停申购的原因,官方说是为保护基金持有…

重磅!交通领域顶级会议TRB会议将进行重大改革

美国交通研究委员会年会(Transportation Research Board annual meeting,以下简称TRB会议)是由美国交通研究委员会举办的交通领域的国际顶级会议。该会议每年举办一次,在华盛顿特区召开。TRB会议是交通研究领域知名度最高的学术会议之一&…

安装 node 错误的配置环境变量之后使用 npm 报错

安装 node 错误的配置环境变量之后使用 npm 报错 node:internal/modules/cjs/loader:1147 throw err; ^ Error: Cannot find module ‘F:\ACodeTools\Node\node_modules\npm\bin\node_modules\npm\bin\npm-cli.js’ at Module._resolveFilename (node:internal/modules/cjs/loa…

基于springboot实现企业员工绩效考评系统项目【项目源码+论文说明】

基于springboot实现企业员工绩效考评系统演示 摘要 时代的变化速度实在超出人类的所料,21世纪,计算机已经发展到各行各业,各个地区,它的载体媒介-计算机,大众称之为的电脑,是一种特高速的科学仪器&#xf…

AI-数学-高中-32-统计-样本空间与随机事件

原作者视频:【概率】【一数辞典】1样本空间与随机事件_哔哩哔哩_bilibili 1.随机试验: 2.样本点、样本空间、有限样本空间: 示例1 示例2 3.事件: 示例:

[DEBUG] spring boot-如何处理链接中的空格等特殊字符

问题&#xff1a; get或者post中提交的内容可能有空格、#等特殊字符&#xff0c;不做处理的话可能解析错误。 解决&#xff1a; html中&#xff1a; <a th:href"{/listSgrna(id${item.getGeneId()},geneName${item.getGeneName()},genome${genome},sgrnaNum${sgrnaN…

Qt CMake 国际化相关配置

文章目录 更新ts文件发布ts文件 本来用qmake使用pro文件很简单的一件事&#xff0c;结果用cmake折腾了半天。 何必呢~ 参考&#xff1a;QT6.3 CMake 多语言切换 这是我的 cmake_minimum_required(VERSION 3.16)project(testQml3_6 VERSION 0.1 LANGUAGES CXX)set(CMAKE_AUTO…

06.QT信号和槽-1

一、信号和槽概述 在Qt中&#xff0c;用户和控件的每次交互过程称为一个事件。比如"用户点击按钮"是一个事件&#xff0c;"用户关闭窗口"也是一个事件。每个事件都会发出一个信号&#xff0c;例如用户点击按钮会发出"按钮被点击"的信号&#xff…

Java练习(第5天)【总结】在字符串中寻找特定的字符(5种方法)

问题描述&#xff1a;在字符串中寻找特定字符 1、第1次出现位置 实现函数原型&#xff1a; int indexOf(char c) Java代码&#xff1a; import java.io.*; public class Way_1 {public static void main(String args[]){String str "Geeks for Geeks is a computer s…

疲劳驾驶监测报警摄像机

疲劳驾驶是导致交通事故的重要原因之一&#xff0c;为了提高驾驶安全性&#xff0c;科技日新月异&#xff0c;疲劳驾驶监测报警摄像机因其先进的技术而成为关注焦点。 疲劳驾驶监测报警摄像机采用先进的人脸识别技术和人工智能算法&#xff0c;能够实时监测驾驶员的状态。通过对…

文件操作和IO(2):Java中操作文件

目录 一、File的属性 二、File的构造方法 三、File的方法 四、代码示例 1、getName&#xff0c;getParent&#xff0c;getPath方法 2、getAbsolutePath&#xff0c;getCanonicalPath方法 3、exists&#xff0c;isDirectory&#xff0c;createNewFile方法 4、createNewF…

龙蜥 Anolis OS8.4 设置IP

1、配置文件路径 /etc/sysconfig/network-scripts/ [rootlocalhost ~]# cd /etc/sysconfig/network-scripts/ [rootlocalhost network-scripts]# ls ifcfg-ens32 进入配置文件路径后&#xff0c;展示。ifcfg-ens32这个不同的服务器不一样&#xff0c;本次虚拟机所对应的是ens3…

2. vue 工程创建

1. 基于 vite创建 官方文档: https://v3.cn.vuejs.org/guide/installation.html#vite vite官网: https://vitejs.cn 使用vite创建的优势&#xff1a; 开发环境中&#xff0c;无需打包操作&#xff0c;可快速的冷启动。轻量快速的热重载(HMR)。真正的按需编译&#xff0c;不再…

CSS列表属性

CSS列表属性 列表相关的属性&#xff0c;可以作用在 ul、ol、li 元素上。 代码如下&#xff1a; <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><title>列表相关属性</title><style>ul {/* …