項目目錄:
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(?,?,?,?)'}
}