Vue+Express+mysql(mongodb)+Vue全家桶架构

项目目录：

tips:序号对应代码参考

|-- build
|-- config
|-- server //express 后端
|-- api //接受请求的API
|-- data //如果用的mongodb可以存放json data文件
|-- data.json
|-- db.js //mongo或者sql配置文件 (1)
|-- index.js //express主要配置文件 (2)
|-- mysqlDB.sql //mysql导出文件
|-- sqlMap.js //sqlmap，mysql执行语句 (3)
|-- src
|-- api //前端发起请求api文件
|-- get.js
|-- post.js
|-- assets //静态资源文件
|-- css.js
|-- js.js
|-- img.js
|-- components //组件
|-- icons //icon图标
|-- router //前端路由
|-- index.js
|-- store //vuex状态
|-- modules
|-- user.js
|-- getters.js
|-- index.js
|-- utils //工具文件
|-- request.js
|-- date.js
|-- views //前端主要显示.vue文件
|-- App.vue
|--
|-- static
|-- css
|-- icon
|-- img
|-- js
|-- test
|-- index.html
|-- package.json


代码参考

(1):db.js代码参考,mysql:

module.exports = {
mysql: {
host:'localhost',
port:'3306',
user:'LV',
password:'123123',
database:'LVShop',
charset : 'utf8mb4'
}
}


(2):index.js代码参考：

let express = require('express');
let app = express();
let bodyParser = require('body-parser');
var mysql = require('mysql');
const db = require('./db.js')
//============ GET POST API ===============//
const mCustomerAPI = require("./api/manage/customer")
//============ GET POST API ===============//
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));
app.use(function (req, res, next){
if (req.url === 'your_alipay_notify_url') {
req.headers['content-type'] = 'application/x-www-form-urlencoded';
}
next();
});
//断开连接后自动连接函数
function handleError (err) {
if (err) {
// 如果是连接断开，自动重新连接
if (err.code === 'PROTOCOL_CONNECTION_LOST') {
connect();
} else {
console.error(err.stack || err);
}
}
}
//数据库连接
function connect () {
var cOnn= mysql.createConnection(db.mysql);
conn.connect(handleError);
conn.on('error',handleError);
}
connect();
// 监听端口
let prot = 3002;
app.listen(prot,function(){ //监听3002端口
console.log("Server running at "+prot+" port.........");
});
app.use(function(req,res,next){
//只允许8080访问
res.header('Access-Control-Allow-Origin','*');
//服务允许客户端发的方法
res.header('Access-Control-Allow-Methods','GET,POST,DELETE,PUT,OPTIONS');
//服务器允许的请求头
res.header('Access-Control-Allow-Headers','Content-Type,Accept,Authorization');
//跨域携带COOKIE 允许客户端把COOKIE发过来
res.header('Access-Control-Allow-Credentials','true');
//如果请求的方法是OPTIONS,那么意味着客户端只要响应头，直接结束响应即可
if(req.method == 'OPTIONS'){
res.end();
}else{
next();
}
});
//请求接口
app.use(mCustomerAPI)


(3):sqlMap.js// sql语句

var sqlMap = {
customer:{
add:'insert into `customer`(`username`,`password`,`telephone`,`permission`) values(?,?,?,?)'}
}