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

//参考文章:https://www.cnblogs.com/daweige9742/p/13869189.html
npm 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.Yum
2.yum install node
3.curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash
4.source /root/.bashrc
5.Nvm
6.nvm install v10
7.node -v
//以上命令为安装(node),如果失败的话可使用
1,curl --silent --location https://rpm.nodesource.com/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,项目部署完成

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

小说阅读器未能连接服务器怎么办,vue移动端小说阅读器vue全家桶项目，已部署到服务器可访问预览...
暑假实习了几个月辞职后,闲着无聊自己开发的一个vue小说阅读器链接预览地址,里面的小说接口调用的是追书神器,然后我把里面的vip和收费章节做了处理加了个换源功能,里面需要收费或者vip的小说都可以免 ...
Vue项目webpack打包部署到服务器
Vue项目webpack打包部署到服务器这篇博文主要说的就是我今天遇到的问题,而且在经过我的询问,好多人在打包部署的时候都遇到了一些问题,下面就来说下,如何将Vue项目放置在服务器上,这里以Tomc ...
Vue PC商城项目开发笔记与问题汇总
Vue PC商城项目开发笔记与问题汇总负责PC端商城项目,这也是人生第一个真正的项目.刚做了一天,就遇到不少问题,在这里列出自己的问题与解决办法,与大家交流,提升自己,希望以后不会掉进同一个坑里. ...
sau交流学习社区--基于thinkjs+vue+redis+mysql+es6开发的周报企业管理系统weekly
weekly 周报系统主要是node+vue+redis+mysql+es6,一个企业管理系统,企业员工汇报每周工作情况,以及完成情况,各级负责人可以查看和提醒相应未写周报人员. ,后端完全使用nod ...
实验管理系统springboot+vue+element ui项目开发
实验管理系统某学院实验老师长期采用人工的形式完成药品试剂的入库.查询.出库的流程.但这种方式存在诸多问题和不便: 1. 在仓库运行流程中效率不高,容易出错. 2. 管理人员不能方便的了解每种物品的状 ...
Vue 移动端项目开发流程
目录移动端电影项目 1.项目效果 2.开发项目流程 3.开发环境 4.初始化项目 5.vant 移动端组件库介绍 5.5.1.安装 5.5.2.自动按需引入组件 (推荐) 5.5.3.移动端样式设 ...
node --- [express项目] 开发环境下使用morgan控制台输出访问信息
说明源代码记录.遗忘回顾 process.env node中提供了一个process.env接口用于访问计算机中的系统环境变量. 可以利用以上属性来区分当前的环境是开发环境还是生产环境,代码如下: ...
vue项目打包后部署到服务器(超详细步骤)
耽误了几天, 终于开始写第二篇博客了, 这篇会讲怎么将vue项目打包部署到服务器, 其实和上一篇的uni-app步骤一样的, 就是最后多了一步修改nginx配置, 好 , 上操作一 ,打包项目 vs ...
超简单的React项目打包后部署到服务器上
前言:我们都知道有些react项目路由采用的是BrowserRouter跟vue的history模式一样,打包后生成的不管是dist,还是build的文件,直接打开都无法直接浏览到项目,然后查看控制器 ...

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

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

最新文章

热门文章