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': '/'
                }
            }
        }
    }
}
  1. 在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('/userinfo');
....
  1. 在组件中测试该请求函数，你可以用一个button点击事件触发，也可以在mounted钩子函数里触发等等，由你决定，但是要用之前先引入import {reqUser} from './api'，当然后端还没写，这里测试了也没用
  2. 此时你可以启动你的前端部分 npm run serve

node+express部分

我相信现在大多数前端开发都是用的webstorm工具的，我也不例外，所以我就用这个工具创建一个node后端开发模板

创建node过程
node创建过程
就这么简单创建完成，成功后的目录结构是这个样子的
node成功创建
node差不多就这样，但是后面的数据库操作都得在这个工程里面完成

数据库mySql部分

  1. 在你所创建的node工程根目录下创建一个操作数据库的文件夹sqlName，文件夹里的sqlName.js填入
    sqlName.js

先下载 npm i -D mysql

const mySql = require('mysql');

let connection = mySql.createConnection({
    host:'你的云服务器公网ip',
    user:'root',
    password:'password',
    database:'要操作的数据库名'
});

connection.connect((err)=>{
    if(err){
        console.log(err,"连接错误",err.stack);
        return;
    }
    console.log('连接成功！',connection.threadId);
});
module.exports = connection;//把此数据库连接对象暴露出去，在接口操作数据库是要使用到

此处的以下部分是关于MySQL数据库的增删改查，你可以通过node执行该文件测试观察每个操作返回的结果有什么不同，只做练习

//const connection = require('./mySql');

//查询
// module.exports =  getUser = () => {
//     connection.query('select * from userinfo where username = "xly"',(err,result,fields)=>{
//         if(err){
//             console.log('err',err);
//             return;
//         }
//         console.log(result);
//     });
//
// }
 // getUser();

//添加
// connection.query('insert into userinfo (username,password)value(?,?)',['hh','111'],(err,result)=>{
//     if(err){
//         console.log('err',err);
//         return;
//     }
//     console.log(result);
// });

//删除
// connection.query('delete from userinfo where username = "hh"',(err,result)=>{
//     if(err){
//         console.log('err',err);
//         return;
//     }
//     console.log(result);
// });

//更新
// connection.query('update userinfo set password = "321" where username ="xly"',(err,result)=>{
//     if(err){
//         console.log('err',err);
//         return;
//     }
//     console.log(result);
// });

// console.log('mySqlObj',connection);

2.写一个接口在routes目录里的index.js文件里写入

var express = require('express');
var router = express.Router();
const connection = require('../mySql_test/mySql');

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

+ router.get('/userinfo', (req,res)=>{
//此处的‘/userinfo’要与前端对应api文件夹下index.js里的请求函数里的路径相同，就只写了一个写其他的也没有啊
+  connection.query('select * from userinfo where username = "xly"',(err,result,fields)=>{
+    if(err){
+      res.send({code:1,msg:'没有'});
+      console.log('err',err);
+      return;
+    }
+    res.send({code:0,data:result});
+    console.log(result);
+  });
+});

module.exports = router;

在运行之前，你可以先下载一个nodemon工具来实现后端数据更改时的热更新
npm i -D nodemon
下载完成后更改一下package.json文件
添加nodemon

此时你就可以通过npm start 命令将后端启动起来

成功运行
如果显示这个，说明两个事，一是你的nodemon起作用了，二是你的后端项目启动成功了

云服务器操作你的数据库

我是通过xshell软件连接我的云服务器的，你们随意
1.安装MySQL数据库

yum install mariadb-server mariadb

2.启动数据库

systemctl start mariadb

3.登录数据库

mysql -u root -p //-u 指定root用户登录 -p需密码验证

4.设置数据库密码

set password for ‘root’@‘localhost’ =password(‘你的密码’);

5.把在所有数据库的所有表的所有权限赋值给位于所有IP地址的root用户。

grant all privileges on . to root@’%'identified by ‘password’; //此处的密码最好与你上面一步相同，方便

6.配置编码

vim /etc/my.cnf

在后面加上

default-character-set =utf8

到此，数据库可以实现远程连接

用个简单的软件navicat,可以连接你的云服务器直接操作你云服务器里的数据库
在这里插入图片描述
我用的腾讯云的服务器操作就是这样的，你可能会注意到选的是MariaDB而node代码里用的是mysql依赖，不用担心，就这样操作
在这里插入图片描述
当然最终目的只为唤出此界面
在这里插入图片描述
连接名随你取，主机是你的云服务器公网ip，端口不管，用户名是root，因为后面的操作使用root要方便些，密码是你设置的在后面再说填啥！！

连接成功后就是这样的
在这里插入图片描述
在这里插入图片描述
默认会有前四个数据库，第五个是我自己创建的，但是要与你node工程下sqlName文件夹下sqlName.js里的配置database名相同，
你可以在这个软件里随意创建你的表格

测试

以下测试环境是在开发环境下的

  1. 前端测试我是这样做的
    触发条件
    其他都没动，只在app.vue文件里添加了一个button触发请求
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <button @click="getUserInfo">获取用户</button>
  </div>
</template>

<script>
+  import {reqUser} from './api'
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    HelloWorld
  },
+  methods:{
+    getUserInfo(){
+      reqUser().then(res=>{
+        window.console.log(res)//有点意思，非要添加window,可能是vue3.0的特性吧,不是很确定，你们也去验证吧
+      }).catch(err=>window.console.log(err))
+    }
+  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

在这里插入图片描述

nginx部分

在此之前将你的后端项目部署到云服务其上，有两种方式将你的代码传输到云服务其上，
第一种：在你的云服务器root目录下创建一个文件夹存放你的代码，通过该指令

cd 你本地代码的根目录下
scp ./* root@你的ip地址:/root/你云服务器的目录 //注意你的代码里有node_moduls文件也会传上去，你知道的会很慢的，所以先删除了在传，在云服务器上npm i 再下载依赖

第二种：以为是我推荐的，webstorm是个好东西
在这里插入图片描述
在这里插入图片描述
名字你随意↓
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
欧克 ， 你就可以从你右边的代码目录直接拖到右边你的云服务目录里，实在不要太爽

别忘了在云服务器上下载依赖，然后运行起来

接下来开始nginx

  1. 在你的云服务器上下载nginx

yum install -y nginx

  1. 配置你的nginx

vim /etc/nginx/nginx.conf

在这里插入图片描述
在server对象里添加红框部分
设置完后 启动nginx

systemctl start nginx.service

停止

systemctl stop nginx.service

重启

systemctl restart nginx.service

这个location地方怎么理解呢，举个例子：你前段请求的地址是:你的公网IP/api/userinfo,nginx配置这个后，nginx获取到这个地址会自动匹配/api/即以前的部分，就是:你的公网IP/api/,转化为localhost:4000即127.0.0.1：4000，就是你的公网IP/api/userinfo->127.0.0.1：4000/userinfo,解决了路径访问的简便问题

打开你的postman测试一下：
在这里插入图片描述
关于跨域：在app.js文件里设置如下

app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By", ' 3.2.1')
        //这段仅仅为了方便返回json而已
    res.header("Content-Type", "application/json;charset=utf-8");
    if(req.method == 'OPTIONS') {
        //让options请求快速返回
        res.sendStatus(200); 
    } else { 
        next(); 
    }
});

欧克 你的后端就在云端部署完成

版权声明：本文为weixin_43480867原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。