vue+node+mysql项目开发(包括部署到服务器)

声明:

1．该项目为练习项目,只是基础内容．

2．文章部分内容为网上查阅所得,由于查阅文章较多,无法确认文章地址.如有雷同,算我抄你.

3．本文不讲解vue(ts)的项目搭建.

一,安装的插件

npm install express

npm install mysql

npm install axios

npm install --save vue-axios

npm install body-parser

//参考文章:/daweige9742/p/13869189.htmlnpm i -s log4js

二,项目目录及文件内容

1,userApi.js

var conn = require('../mysql');var express = require('express');var router = express.Router();var mysql = require('mysql');var $sql = require('../sqlMap').default;const {json } = require('body-parser');// 增加用户接口router.post('/addUser', (req, res) => {let id = new Date().getTime().toString();let created_time = new Date();let sql = "INSERT INTO interviewee(id, name,education_background,college,major,phone,gender,created_time) VALUES(?,?,?,?,?,?,?,?)";let addSql = [id, req.body.name, req.body.Education, req.body.college, req.body.major, req.body.phone, req.body.sex, created_time];let data = {code: 200,...req.body,id: id}conn.query(sql, addSql, function (err, result) {if (err) {//返回接口内容let datas = {code: 500,msg: err.sqlMessage || "后台服务异常,请稍后再试"}res.end(JSON.stringify(datas));return;} else {//返回接口内容res.end(JSON.stringify(data));return;}});});module.exports = router;

2,mysql.js(负责保存数据库的地址和防止mysql与node服务断开连接)

var logger=require('./log.js'); //引入日志文件模块var mysql = require('mysql');var connection = {host: "#.#.#.#",user: "#",password: '#',port: "#",database: "#",}// 用于保存数据连接实例var db = null;var pingInterval;// 如果数据连接出错，则重新连接function handleError(err) {connect();}// 建立数据库连接function connect() {if (db !== null) {db.destroy();db = null;}db = mysql.createConnection(connection);db.connect(function (err) {if (err) {logger.info("连接数据库的错误"+err);setTimeout(connect, 2000);}});db.on("error", handleError);// 每半个小时ping一次数据库，保持数据库连接状态clearInterval(pingInterval);pingInterval = setInterval(() => {db.ping((err) => {if (err) {logger.info("数据库发生的错误"+err);console.log('ping error: ' + JSON.stringify(err));}});}, 1800000);}connect();module.exports = db;

2,log.js

var log4js = require('log4js');//引入刚刚下载的log4js日志模板log4js.configure({appenders: {console: {type: 'console' },file: {type: 'file',filename: 'all.log',layout: {type: 'pattern',pattern: '%d{yyyyMMdd hh:mm:ss} {%p} %m'}}},categories: {default: {appenders: ['console', 'file'],level: 'debug'}}})module.exports = log4js.getLogger();//暴露log4js模板，其他功能点才能应用

3,index.js

const userApi = require('./api/userApi');const fs = require('fs');const path = require('path');const bodyParser = require('body-parser');const express = require('express');const app = express();// 采用设置所有均可访问的方法解决跨域问题app.all('*', function (req, res, next) {// 设置允许跨域的域名，*代表允许任意域名跨域res.header('Access-Control-Allow-Origin', '*');// 允许的header类型res.header('Access-Control-Allow-Headers', 'content-type');// 解决node.js返回中文出现乱码的问题res.setHeader('Content-Type', 'text/html; charset=utf-8')// 跨域允许的请求方式res.header('Access-Control-Allow-Methods', 'DELETE,PUT,POST,GET,OPTIONS');if (req.method.toLowerCase() === 'options') {res.sendStatus(200);} else {next();}});app.use(bodyParser.json()); // 以json格式返回出去app.use(bodyParser.urlencoded({extended: true }));// 后端api路由app.use('/api', userApi);// 监听端口app.listen(3000);console.log(`success listen at port:3000......`);

4,sqlMap.js(保存接口地址,本项目并未使用该文件)

const sqlMap = {// 用户user: {add: 'insert into user(name,age) values(?,?)'}}module.exports = sqlMap;

5,login.vue

private ok() {this.visible = false;this.axios({method: "post",url: `${API_URL}/api/addUser`,data: {name: this.formItem.name,Education: this.formItem.Education,college: this.formItem.college,major: this.formItem.major,phone: this.formItem.phone,sex: this.formItem.sex,},}).then((response) => {if (response.status == 200 && response.data != "失败") {this.$router.push({name: "success",params: response.data,});} else {this.$Message.warning({content: "提交失败,请刷新页面并重新提交",duration: 10,closable: true,});}}).catch((error) => {this.$Message.warning({content: "提交失败,请刷新页面并重新提交",duration: 10,closable: true,});});}

6.config.ts

// 开发环境地址export const API_URL = 'http://localhost:3000';export const apiUrlImg = 'http://localhost:3000/fileDown?key=';export const TOKEN_KEY = 'clinic-app-token-key';export const DATE_TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss';

7.main.ts

import axios from 'axios'import VueAxios from 'vue-axios'Vue.use(VueAxios, axios);

三,关于index.js和node服务

1,虽然我们将node服务和vue写在了一起,但需要分别启动才行,即npm run serve和node index.js,node index,js的命令需要在service的文件夹下运行.

2,关于接口地址API_URL的设置

在本机调试环境开启服务后可以通过http://localhost:3000访问接口,但正式环境需要设置为node服务部署的服务器的正式域名;

四,使用pm2部署项目(适用于linux服务器)

1.需安装的软件（winscp，putty）；

2.使用winscp将文件放置到服务器中,并将文件放到根目录中;

3.使用putty安装node;

3.1,依次输入以下命令

1.Yum2.yum install node3.curl -o- /nvm-sh/nvm/v0.34.0/install.sh | bash4.source /root/.bashrc5.Nvm6.nvm install v107.node -v//以上命令为安装(node),如果失败的话可使用 1,curl --silent --location /setup_8.x | bash -2,yum install -y nodejs

4,安装pm2

4.1,npm install -g pm2

4.2,进入文件所在目录

4.3,启动vue项目

详见传送门

4.3,启动node服务

首先我们需要进入server目录

pm2 start index.js --name my-api

使用pm2 list查看结果

4.4,项目部署完成