nuxt全棧實踐 開源後臺原始碼
摘要：
nuxt-bnhcp是我寫的一個全棧商城系統，從前端ui切圖到後臺mysql以及redis快取，是一個相對完整且系統的專案，nuxt-bnhcp開源至今，收到了大量的反饋和朋友們遇到的問題以及nuxt-bnhcp後臺原始碼問題，因為後臺配置和專案龐大沒有時間騰出手寫一篇文章去詳細的介紹一下自己...
nuxt-bnhcp是我寫的一個全棧商城系統，從前端ui切圖到後臺mysql以及redis快取，是一個相對完整且系統的專案，nuxt-bnhcp開源至今，收到了大量的反饋和朋友們遇到的問題以及nuxt-bnhcp後臺原始碼問題，因為後臺配置和專案龐大沒有時間騰出手寫一篇文章去詳細的介紹一下自己專案，今天，所有的後臺程式碼以及前端程式碼已經提交至github。 我非常期待大家可以給我提出建議和優化。 下面介紹下我的nuxt-bnhcp:
GitHub地址： ofollow,noindex">github.com/github1586/…
流程圖
後臺目錄介紹
├── api##請求api目錄 │├── controller##處理業務邏輯 ││├── cart##購物車 │││└── index.js ││├── course##課程列表 │││└── index.js ││├── home##首頁載入 │││└── index.js ││├── interface.js ││├── login##登入註冊 │││└── index.js ││├── order##訂單中心 │││└── index.js ││├── paramsFilter.js##sql引數過濾器 ││└── router.js##路由 │├── index.js##匯出路由 │├── model##mysql資料庫相關 ││├── db.js##資料庫增刪改查封裝 ││├── settings.js##資料庫配置使用者 ││└── sql.js##sql語句 │└── redis##redis設定 │└── redis.js └── index.js##後臺服務入口 複製程式碼
後臺原始碼分析
interface.js
import { Router } from 'express'
const myrouter = require('./router.js')
var router = Router()
// index router
router.get('/', myrouter.indexShow)
// 頁面初始化載入一級分類第一個
router.get('/listhome', myrouter.gradeOne)
// 點選對應一級 給出三級響應
router.get('/listhome/:id', myrouter.gradeOne)
// 點選篩選請求展示內容
router.get('/listhome/filter/data', myrouter.filter)
// 課程列表
router.get('/courselist', myrouter.getCourseList)
// 課程詳情
router.get('/courseDetail/index/:id', myrouter.getDetail)
// 課程模糊查詢
router.get('/getleckCourse', myrouter.getleckCourse)
// 購物車儲存id
router.get('/postCourseId', myrouter.postCourseId)
// 是否存在購物車
router.get('/isexistCart/:id', myrouter.isCart)
// 購物車列表
router.get('/cartList', myrouter.cartList)
// 刪除購物車列表
router.get('/deleteCart', myrouter.deleteCart)
// 批量提交購物車
router.get('/mostAddClass', myrouter.mostAddClass)
// 登入
router.post('/longin', myrouter.longin)
// 提交訂單
router.get('/submitOrder', myrouter.submitOrder)
// 支付成功 更改訂單狀態
router.get('/paySuccess', myrouter.paySuccess)
// 請求訂單列表
router.get('/getOrderList', myrouter.getOrderList)
export default router
複製程式碼
匹配路由呼叫處理對應業務邏輯
/**
* Created by bobo on 2017/06/10 21.31
*/
var indexshowController = require('./home') // 主頁
var courseController = require('./course') // 課程
var cartController = require('./cart') // 購物車
var loginController = require('./login') // 登入
var orderController = require('./order') // 訂單
exports.indexShow = indexshowController.indexShow // 首頁展示
exports.gradeOne = courseController.gradeOne // 預設一級分類
exports.filter = courseController.filter // 篩選條件
exports.getCourseList = courseController.getCourseList // 課程列表
exports.getDetail = courseController.getDetail // 課程詳情
exports.getleckCourse = courseController.getleckCourse // 課程模糊查詢
exports.postCourseId = cartController.postCourseId // 購物車 商品id
exports.isCart = cartController.isCart // 是否存在購物車
exports.cartList = cartController.cartList // 購物車列表
exports.deleteCart = cartController.deleteCart // 刪除購物車
exports.mostAddClass = cartController.mostAddClass // 批量提交購物車
exports.longin = loginController.longin // 登入
exports.submitOrder = orderController.submitOrder // 訂單
exports.paySuccess = orderController.paySuccess // 支付成功
exports.getOrderList = orderController.getOrderList // 獲取訂單列表
複製程式碼
引入對應業務模組 匯出對應業務方法
const db = require('../../model/db.js')
const sql = require('../../model/sql.js')
// 引入redis
var dbs = require('../../redis/redis.js')
/**
*index show
*/
exports.indexShow = (req, res, next) => {
db.query(sql.index, function (err, rows, fields) {
if (err) {
throw err
}
// 檢查是否存在獲取值（redis）
dbs.exists('indexshow', function (err, results) {
if (err) {
throw err
}
if (results) {
dbs.get('indexshow', function (err, result) {
if (err) {
return
}
res.json(JSON.parse(result))
})
} else {
var allparentinfo = []
var indexClass = []
for (var i = 0; i < rows.length; i++) {
// 兩個大分類
var classList = []
// 四個小分類
var classMoreList = []
// 兩個大分類
var classImg = rows[i].showMainName.split('&')
for (var j = 0; j < classImg.length; j++) {
// 每次得到的物件push進陣列
classList.push({ classname: classImg[j].split('@')[0], imgurl: classImg[j].split('@')[1], coueseGradeId: rows[i].coueseGradeId })
}
// 四個小分類 課程名稱
var classSmall = rows[i].showSmallName.split('&')
for (var x = 0; x < classSmall.length; x++) {
classMoreList.push({classname: classSmall[x].split('@')[0], imgurl: classSmall[x].split('@')[1], coueseGradeId: rows[i].coueseGradeId})
}
// 把整塊 push 到資料陣列
allparentinfo.push({headinfo: {before: rows[i].showCourseMore, after: rows[i].showCourseName, imgurl: rows[i].showCourseIcon},
course: {
classList: classList,
classMoreList: classMoreList
}})
}
// 查詢分類
db.query(sql.showClass, function (err, rows, fields) {
if (err) {
throw err
}
// 迴圈查詢資料
for (var i = 0; i < rows.length; i++) {
var classObj = {}
classObj.showClassImg = rows[i].showClassImg
classObj.showClassName = rows[i].showClassName
classObj.classPid = rows[i].classPid
indexClass.push(classObj)
}
// 專成json格式
var data = {allparentinfo: allparentinfo, indexClass: indexClass}
// 設定值
dbs.set('indexshow', JSON.stringify(data), 300, function (err, result) {
if (err) {
res.json(err)
}
})
res.json(data)
})
}
})
})
}
複製程式碼
首頁業務處理，接收請求->是否走快取->是否命中快取->正常業務處理
mysql部分
SQL/">MySQL是一種DBMS(資料庫管理系統)，也是一個關係資料庫。其中My是MySQL的聯合創始人 - Monty Widenius 的女兒的名字。MySQL是My和SQL的組合，這就是MySQL命名的由來。它是由Oracle支援的開源軟體。這意味著任何一個人都可以免費使用MySQL。 另外，如果需要，還可以更改其原始碼或進行二次開發以滿足您的需要。
MySQL可以在各種平臺上執行UNIX，Linux，Windows等。可以將其安裝在伺服器甚至桌面系統上。 此外，MySQL是可靠，可擴充套件和快速的。
/**
* 資料庫操作 @bobo
* 2017/06/10
*/
const mysql = require('mysql')
const setting = require('./settings.js')
// 填寫資料庫連線資訊，
const option = {
host: setting.host,
port: setting.port,
user: setting.username,
password: setting.password,
database: setting.name
}
// 建立連線池
const pool = mysql.createPool(option)
/**
* select和delete操作
* @param{string}sqlsql語句
* @param{Function} callback 回撥函式
* @return {none}
* */
const __selsctDelete = (sql, callback) => {
pool.getConnection(function (err, conn) {
if (err) {
console.log('CONNECT ERROR:', err.message)
callback(err, null, null)
} else {
conn.query(sql, function (err, rows, fields) {
// 釋放連線
conn.release()
// 事件驅動回撥
callback(err, rows, fields)
})
}
})
}
/**
* update和insert操作
* @param{string}sqlsql語句
* @param{array}params引數陣列
* @param{Function} callback 回撥函式
* @return {none}
*/
const __updateInsert = function (sql, params, callback) {
pool.getConnection(function (err, conn) {
if (err) {
console.log('CONNECT ERROR:', err.message)
callback(err, null, null)
} else {
conn.query(sql, params, function (err, rows, fields) {
// 釋放連線
conn.release()
// 事件驅動回撥
callback(err, rows, fields)
})
}
})
}
/**
* query函式過載
* @return {none}
*/
exports.query = function () {
var length = arguments.length
var sql = ''
var cb = ''
if (length === 2) {
sql = arguments[0]
cb = arguments[1]
__selsctDelete(sql, cb)
} else if (length === 3) {
sql = arguments[0]
var params = arguments[1]
cb = arguments[2]
__updateInsert(sql, params, cb)
} else {
console.log('ERROR:', '引數不對呀？親～～')
}
}
複製程式碼
利用過載對mysql的增刪改查做一些封裝操作
redis介紹
Redis是一個開源的使用ANSI C語言編寫、支援網路、可基於記憶體亦可持久化的日誌型、Key-Value資料庫，並提供多種語言的API
var dbs = {}
var redis = require('redis')
var client = redis.createClient()
client.on('error', function (err) {
console.log('Error :', err)
})
client.on('connect', function () {
// console.log('Redis連線成功.')
})
/**
* 新增string型別的資料
* @param key 鍵
* @params value 值
* @params expire (過期時間,單位秒;可為空，為空表示不過期)
* @param callBack(err,result)
*/
dbs.set = function (key, value, expire, callback) {
client.set(key, value, function (err, result) {
if (err) {
console.log(err)
callback(err, null)
return
}
if (!isNaN(expire) && expire > 0) {
client.expire(key, parseInt(expire))
}
callback(null, result)
})
}
/**
* 查詢string型別的資料
* @param key 鍵
* @param callBack(err,result)
*/
dbs.get = function (key, callback) {
client.get(key, function (err, result) {
if (err) {
console.log(err)
callback(err, null)
return
}
callback(null, result)
})
}
/**
* 查詢是否存在
* @param key 鍵
* @param callBack(err,result)
*/
dbs.exists = function (key, callback) {
client.exists(key, function (err, result) {
if (err) {
console.log(err)
callback(err, null)
return
}
callback(null, result)
})
}
/**
* 生成自增id
* @param key 鍵
* @param callBack(err,result)
*/
dbs.orderId = function (callback) {
let time = new Date()
let second = time.getTime()
let year = time.getFullYear()
let month = time.getMonth() + 1
let date = time.getDate()
client.exists('orders', function (err, result) {
if (err) {
throw err
}
if (!result) { // 第一次進入生成id
client.set('orders', second, function (err, result) { // 設定id
if (err) {
throw err
}
})
} else {
client.INCR('orders') // 每次自增
dbs.get('orders', function (err, results) { // 得到id 回撥上傳
if (err) {
throw err
}
results = results + '' + year + month + date
callback(null, results)
})
}
})
}
// 匯出物件
module.exports = dbs
複製程式碼
對redis的增刪改查做封裝，其中生成自增id方法是針對提交訂單後生成唯一訂單號
nginx介紹
5、 nginx 配置檔案
nginx.conf檔案：
worker_processes 1;
error_log logs/error.log;
error_log logs/error.log notice;
error_log logs/error.log info;
pid logs/nginx.pid;
events {
use epoll;
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
#gzip on;
include /usr/local/nginx/conf/conf_site/*.conf; // 單獨 include conf檔案
}
include的conf配置 :
server{
listen 80;
location / {
deny all;
}
}
upstream maven_domain_com {
server localhost:8000; // 自己的伺服器ip
}
server{
listen 80;// 監聽80埠
server_name maven.domains.com; // 自己的二級域名
location / {
proxy_pass http://maven_domains_com/nexus/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
location /nexus/ {
proxy_pass http://maven_domain_com/nexus/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
複製程式碼
centos伺服器上的nginx配置。
END！！！
歡迎大家交流~