記我的博客工程從設計到落地(二)
記我的博客工程從設計到落地(二)
連接： github/meteor
開發期:04/01-04/09
前文簡述
前文主要敘述了項目啓動的緣由與分析過程，以及一些初期的設計和前端功能的落地。css
二期內容
二期主要的開發內容是博客管理後臺及數據庫的環境搭建和邏輯服務，以及先後端的一些聯調工做。
需求確認
- 博客可視化管理
- 博客展現帶類目、標籤
- 提供書籤收集功能
- 提供記錄（追劇/書進度、車票記錄...）功能
數據庫設計
總體梳理
前端路由說明
技術選型
在一期的基礎上，第二期開發時作了些修改調整，對於技術選型更加明確。html
前端 vue+element+front-matter（vue-cli4.2）後端 node+express/koa數據庫 MongoDB自動化 python網絡 內網穿透
技術方案 - 前端腳手架 vue-cli4.2 - 前端 vue(vuex/router)+element-ui - 前端請求 axios - 前端第三方api跨域 vue-jsonp - 前端樣式預處理語言 less - 前端markdown編輯器 mavon-editor - 後端 node+express - 後端swagger swagger-ui-express+swagger-jsdoc - 後端日誌 express-winston - 後端跨域 cors - 後端數據庫事務 mongoose - 數據庫 MongoDB - 圖牀 PicGo+github - 網絡 內網穿透
項目結構
後端目錄前端
後端目錄
- service
- config // 配置
- lib // 工具
- logs // 日誌
- logs.log // 開發日誌
- error.log // 錯誤日誌
- success.log // 成功日誌
- middlewares // 中間件
- checkUser // 檢測用戶session（未使用）
- models // 數據模型
- public // 靜態資源（未使用）
- routes // 路由層 controller
- swagger // swagge插件配置
- views // 視圖頁面（未使用）
- app.js // 服務入口
前端目錄vue
前端目錄
- src
- api // 請求封裝
- assets // 資源
- components // 組件
- config // 配置
- plugin // 插件
- router // 路由
- store // vuex
- util // 工具
- views // 頁面
- App.vue // 主視圖
- main.js // 服務入口
- registerServiceWorker.js // pwa（暫未開發）
入口文件
後端入口node
// 引入依賴
var express = require('express');
var path = require('path');
var createError = require('http-errors');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var ejs = require('ejs');
var cors = require('cors');
var http = require('http');
var mongoose = require('mongoose');
var winston = require('winston');
var expressWinston = require('express-winston');
// 引入路由接口
var routers = require('./routes');
// 引入配置文件
const config_default = require('./config/default.js');
// 鏈接數據庫
var db = mongoose.connection;
// 監聽是否有異常
db.on('error', function callback() {console.log("**** Connection error")});
// 鏈接成功
db.on("connected",function () {console.log(`**** 數據庫表[${config_default.dbName}]鏈接成功`)});
// 鏈接數據庫
// mongoose.connect('mongodb://數據庫登陸用戶名:數據庫登陸密碼@數據庫鏈接地址')
mongoose.connect(config_default.mongodb, {
"useNewUrlParser": true , // 地址處理
"useUnifiedTopology": true // 解除警告
});
// 定義express應用
var app = express();
// 設置 host&port
app.set('host', config_default.host);
app.set('port', config_default.port);
// 配置模板引擎
app.set('views', path.join(__dirname, 'views'));
app.engine('.html',ejs.__express); //引用ejs引擎
app.set('view engine', 'html');
app.use(logger('dev'));
// 調用中間件
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(cookieParser());
// 設置公用資源地址
// app.use(express.static(path.join(__dirname, 'public')));
app.use(express.static(path.resolve(__dirname, './../dist')));
// 支持跨域
app.use(cors());
// 正常請求的日誌
app.use(expressWinston.logger({
transports: [
new (winston.transports.Console)({
json: true,
colorize: true
}),
new winston.transports.File({
filename: path.join(__dirname, './logs/success.log')
})
]
}));
// 裝填路由
routers(app);
// 引入swagger
var setSwagger = require ('./swagger');
setSwagger(app);
// 錯誤請求的日誌
app.use(expressWinston.errorLogger({
transports: [
new winston.transports.Console({
json: true,
colorize: true
}),
new winston.transports.File({
filename: path.join(__dirname, './logs/error.log')
})
]
}));
// catch 404 and forward to error handler
app.use(function(req, res, next) {
next(createError(404));
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
console.log(err.message);
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
// Create HTTP server
var server = http.createServer(app);
// Listen on provided port, on all network interfaces.
server.listen(config_default.port);
server.on('error', onError);
server.on('listening', onListening);
/**
* Event listener for HTTP server "error" event.
*/
function onError(error) {
if (error.syscall !== 'listen') {
throw error;
}
var bind = typeof port === 'string'
? 'Pipe ' + port
: 'Port ' + port;
// handle specific listen errors with friendly messages
switch (error.code) {
case 'EACCES':
console.error(bind + ' requires elevated privileges');
process.exit(1);
break;
case 'EADDRINUSE':
console.error(bind + ' is already in use');
process.exit(1);
break;
default:
throw error;
}
}
/**
* Event listener for HTTP server "listening" event.
*/
function onListening() {
const hello = require('./config/hello');
var addr = server.address();
var bind = typeof addr === 'string'
? 'pipe ' + addr
: 'port ' + addr.port;
console.log([
`${hello.ctx}`,
`${hello.line}`,
`${config_default.name} | Listening on ${bind}`,
`${hello.line}`,
].join('\n'));
}
前端入口python
import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'
// 全局引入element-ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI)
// markdown編輯器，樣式需單獨引入
import mavonEditor from 'mavon-editor'
Vue.use(mavonEditor)
// markdown md-str轉html工具類
Vue.prototype.$markDown = mavonEditor.markdownIt
// 初始化瀏覽器樣式
import "./assets/style/reset.less"
// 全局基本樣式
import "./assets/style/common.less"
// 佈局組件相關樣式
import "./assets/style/layout.less"
import "mavon-editor/dist/css/index.css";
// 跨域請求
import VueJsonp from 'vue-jsonp'
Vue.use(VueJsonp)
// util工具
import util from './util'
Vue.prototype.$util = util
// api接口
import api from './api'
Vue.prototype.$api = api
// 配置信息
import conf from './config'
Vue.prototype.$conf = conf
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#meteor')
總體進度
- 前端
- 開始頁 √
- 404頁
- Empty組件
- 博客站點
- 頁首 √
- 頁首搜索功能
- 頁腳 √
- 協議版權 √
- 應用信息 √
- 開發者信息 √
- 首頁 √
- 懸浮翻轉對聯 √
- 動漫-死神-背景 √
- 像素打印動畫 √
- 博客頁 √
- 博客類目樹 √
- blog查看窗口開發 √
- blog分享頁開發
- 瀏覽數 √
- 無限滾動列表 √
- 點贊文章
- 分享連接
- 快照截圖
- 評論功能
- 書籤頁 √
- 三類書籤數據導入 √
- 首字母快速檢索
- 記錄頁
- log-開發日誌 √
- 多媒體（書籍、動漫、影視劇）進度記錄 開發
- 票據（車票）使用記錄 開發
- 我的信息頁
- 加載態
- 管理平臺 √
- 頁首 √
- 每日一詩 √
- 頁腳 √
- 音樂播放器
- 博客管理
- 標籤詞雲
- 博客備份文件默認命名（日期_文件名) √
- 用戶管理 √
- 密碼強度檢測
- 隨機生成頭像
- 標籤管理 √
- 書籤管理 √
- 類目管理 √
- 拖拽頂點
- 排序
- 導入
- 導出
- 其餘
- 多屏端適配（@media）
- 瀏覽器兼容（主要適配safari）
- 引入 element-scroll 滾動條 √
- 側邊進度條
- 回到頂部 √
- 背景粒子動畫particles √
- 地理位置獲取 √
- 當地日出日落時間獲取 √
- 天氣獲取
- ...
- 後端
- user-CRUD √
- cats-CRUD √
- tag-CRUD √
- blog-CRUD √
- 更新文章同時本地備份md文件 √
- 根據blog/tags標籤生成詞雲
- bookmark-CRUD √
- record/media-CRUD
- record/ticket-CRUD
- record/log √
- 成功/異常日誌輸出 √
- 增刪改接口session請求校驗
- 數據庫
- conf_user √
- conf_tag √
- conf_cats √
- conf_blog √
- conf_bookmark √
- conf_ticket
- conf_media
- conf_session
截圖
swagger
登陸
開發日誌
管理平臺
博客管理
博客編輯
ios
下期計劃
- 接口session認證
- 內網穿透
- ...
參考連接
相關文章
- 1. 我的博客地址
- 2. 我的博客數據庫設計
- 3. 我的博客平面設計
- 4. 我的博客網站設計
- 5. 【搭建我的博客】新我的博客地址
- 6. 我與博客的故事（上）——博客花落知多少
- 7. 我的博客做業二
- 8. 我的第二篇博客
- 9. java web我的博客開發（二產品設計）
- 10. Java 課設我的博客
- 更多相關文章...
- • Web 創建設計 - 網站建設指南
- • 移動設備 統計 - 瀏覽器信息
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • IDEA下SpringBoot工程配置文件沒有提示
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 我的博客地址
- 2. 我的博客數據庫設計
- 3. 我的博客平面設計
- 4. 我的博客網站設計
- 5. 【搭建我的博客】新我的博客地址
- 6. 我與博客的故事（上）——博客花落知多少
- 7. 我的博客做業二
- 8. 我的第二篇博客
- 9. java web我的博客開發（二產品設計）
- 10. Java 課設我的博客