vue+node+mysql+nginx+express完成云服务器前后端分离搭建

vue+node+mysql+nginx+express完成云服务器前后端分离初建

本内容部分均为搭建地基，（建筑地基），文章出入可能有点大，只做参考

vue部分

此处我用的vue3.0创建的前端项目

1. vue3.0安装

npm install -g @vue/cli
//or
yarn add global @vue/cli

2.创建项目

vue create programName
//or
vue ui //此命令执行后，会在浏览器中打开一个图形化界面，图形化操作创建，依赖，插件，显示等功能，很方便

3.项目创建成功后

1. 在项目根目录下创建vue.config.js文件(这个文件是vue的配置文件，添加此文件的目的在于，在开发环境下，能够解决访问问题，比如你的前端vue项目运行在localhost:8080,而你的node后端项目运行在local host：4000，你就需要通过以下方法来解决此问题，但是仅仅只是下面还不够)，并在该文件里添加：

module.exports = {
   
    devServer:{
   
        proxy: {
   
            '/api': {
   
                target: 'http://localhost:4000',
                changeOrigin: true,
                pathRewrite: {
   
                    '^/api': '/'
                }
            }
        }
    }
}

2. 在src目录里创建一个api文件夹，创建一个index.js和ajax.js文件
   ajax.js

使用axios封装的功能函数，npm i -D axios

import axios from 'axios'

export default function ajax(url,data={
   },method='GET') {
   
    if(method==="GET"){
   
        let paramStr = '';
        Object.keys(data).forEach((key)=>{
   
            paramStr+=key+'='+data[key]+'&'
        });
        if(paramStr){
   
            //去除后面多余的 '&'
            paramStr.substring(0,paramStr.length-1);
            url+='?'+paramStr;
        }
        return axios.get('/api'+url)//此处的`/api`就与前面的代理取得联系了
    }
    return axios.post('/api'+url,data);
}

index.js

此文件里可以写一些你要发请求调用接口的函数

import ajax from './ajax'

export const reqUser = () =>ajax(