nginx的初次学习_nginx 前缀dev-api

http://nginx.org/en/download.html
nginx下载地址
我的是nginx1.12

解压之后目录 点击exe运行
打开任务管理器看见nginx进程就ok了
然后进入conf配置
server配置把#字段删除之后留下基本配置
配置完之后 输入localhost就会出现 欢迎页面

 server {
        listen       80;监听端口 我尝试过更换端口 但是建议用80 
        server_name  localhost;服务器名字
        *******
        location / {
            root   html;运行目录
            index  index.html index.htm;目录下的运行文件
        }    
        默认
        *******
        *******
        location / {当匹配根的时候就会跳转显示视图界面
           proxy_pass   http://127.0.0.1:8080;这是我的vue-cli端口
        }
	location ~ /tp5/ {当发送这样的请求后缀就会跳转8000端口响应接口
           proxy_pass   http://127.0.0.1:8000;这是我PHP接口的端口
        }
        至于很详细的过程原理 由于第一次学 不清楚 很多博客有可以自行搜索
        把默认删除 替换这个两个 就可以做代理服务器
        *******
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;报错的错误页面
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

下面是使用vue-cli通过axios发送请求的代码
这是我写在vuex里面的api
有get与post

import Vue from 'vue'
import vuex from 'vuex'
import axios from 'axios'
import qs from 'qs'
axios.defaults.baseURL="/tp5/"
Vue.use(vuex);
const state={//仓库
    user:"liu",
    pass:"yong",
    page:[],
    index:0,
    info:"100",
    phone:"",
    search:"",
    text:"",
    book:""
}
export const info=state.info.success;
const mutations={//同步提交
    hello(state,a){//两个回调参数一个state，一个形参
        console.log("hello world"+a.a+state.pass)
        this.state.user="liuyu"
    },
    page(state){
        const data={
            params:{
                a:state.index
            }
        }
        axios.get("publica/index/Api/page",data,{headers:{"Content-Type":"application/json"}}).then(res=>{
            state.page=res.data.b
        })
    },
    zhu(state,pho){
        const ph={
                phone:pho
        }
        const header={
            headers:{
                "Content-Type":"application/x-www-form-urlencoded"
            }
        }
        axios.post("publica/index/Api/zhu",qs.stringify(ph),header).then(res=>{
                state.info=res.data
        })
    },
    search(state){
        const data={
            params:{
                inf:null
            }
        }
        const header={
            headers:{
                "Content-Type":"application/json"
            }
        }
        axios.get("publica/index/Api/search",data,header).then(res=>{
            state.text=res.data
        })
    },
    book(state){
        const data={
            params:{
                book:null
            }
        }
        const header={
            headers:{
                "Content-Type":"application/json"
            }
        }
        axios.get("publica/index/Api/book",data,header).then(res=>{
            state.book=res.data
        })
    }
   
    
}
const actions={//分发dispatch
    hel(con){//{commit}
        con.commit("hello",{a:10,b:11})
    },
    page(con){
        con.commit("page",);
    },
    zhu(con){
        con.commit("zhu",state.phone)
    },
    search(con){
        con.commit("search")
    },
    book(con){
        con.commit("book")
    }
}
const getters={//获取属性
    he(state){
        return  state.user;
    }
}
const ma={//模块
  state  
}
const modules={//模块
    ma:ma
}
export  default new vuex.Store({
    state,
    mutations,
    actions,
    getters,
    modules
    
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115

2022年3 22更新 重写前缀如下

location ^~/dev-api/  {
            rewrite ^/dev-api/(.*)$ /$1 break;
            proxy_pass http://localhost:5000/;
        }
1
2
3
4

/dev-api/ 自定义前缀