express + layui + angular +mysql 構建 後臺管理系統

jade中文文檔：http://www.nooong.com/docs/jade_chinese.htm

layui中文文檔：https://www.layui.com/doc/element/layout.html

angular1.x : http://www.runoob.com/angularjs/angularjs-tutorial.html

一，jade + angular公用模板

layout.jade

doctype html
html
    head
        title= title
        - var basePath = "http://localhost:3000"
        link(rel='stylesheet', href= basePath + '/thirdParty/layui/css/layui.css')
        link(rel='stylesheet', href= basePath + '/stylesheets/style.css')
        block page_style
    body(ng-app="app").layui-layout-body
        div.layui-body
                block content
    script(src=basePath + '/thirdParty/angular.1.6.9/angular.min.js')
        script(src=basePath + '/thirdParty/layui/layui.js')
        script(type='text/javascript', src=basePath + '/javascripts/main.js')
        block page_script

公用模板的作用在於後期維護十分方便，其他頁面只需引用模板即可；

article.jade

extends ../layout

block content
    div(ng-controller="articleController").layui-container
        p #{title}
        table.layui-table
            thead
                tr
                    th 序號
                    th 分類
                    th 標題
                    th 作者
                    th 內容
                    th 狀態
                    th 添加時間
                    th 操作
            tbody
                tr(ng-repeat="a in articleList")
                    td(ng-bind="$index+1")
                    td(ng-bind="a.type_name")
                    td(ng-bind="a.article_name")
                    td(ng-bind="a.author")
                    td(ng-bind="a.article_content")
                    td(ng-bind="a.status")
                    td(ng-bind="a.create_time | date:'yyyy-MM-dd'")
                    td(ng-bind="")
        div#paging

block page_script
    script(type='text/javascript', src=basePath + '/javascripts/article.js')

二，集中管理路由

routes/index.js

/**
 * 總的路由控制文件
 *
 * 進行統一的路由分發，這樣防止app.js中代碼過於臃腫
 *
 * 注： 在對應的加載文件裏寫 module.exports = router; 否則會報以下錯誤：
 *
 *  throw new TypeError('Router.use() requires a middleware function but got a ' + gettype(fn))
 *
 * @type {*|createApplication}
 */

var express = require('express');
var router = express.Router();

module.exports = function (app) {

    var home = require('../apis/Article');
    app.use('/', home);

    var usersRouter = require('../routes/users');
    app.use('/users', usersRouter);


    var article = require('../apis/Article');
    app.use('/article',article);

};

app.js

……

// 設置/routes/index文件爲總的路由控制文件
// 在routes/index文件中再進行統一的路由分發，這樣防止app.js中代碼過於臃腫
var routes = require('./routes/index');
routes(app);

……

三，數據庫連接

mysql.config.js

// 數據庫配置文件
module.exports={
  "host":"127.0.0.1",
  "port":"3306",
  "user":"root",
  "password":"root",
  "database":"test"
}

 

db.js

//定義數據庫query函數，向外暴露
var mysql = require('mysql');
var databaseConfig = require('./mysql.config');  //引入數據庫配置模塊中的數據

//向外暴露方法
module.exports = {
    query : function(sql,params,callback){
        //每次使用的時候需要創建鏈接，數據操作完成之後要關閉連接
        var connection = mysql.createConnection(databaseConfig);
        connection.connect(function(err){
            if(err){
                console.log('數據庫鏈接失敗');
                throw err;
            }
            //開始數據操作
            connection.query( sql, params, function(err,results,fields ){
                if(err){
                    console.log('數據操作失敗');
                    throw err;
                }
                //將查詢出來的數據返回給回調函數，這個時候就沒有必要使用錯誤前置的思想了，因爲我們在這個文件中已經對錯誤進行了處理，如果數據檢索報錯，直接就會阻塞到這個文件中
                callback && callback(results, fields);
                //results作爲數據操作後的結果，fields作爲數據庫連接的一些字段
                //停止鏈接數據庫，必須再查詢語句後，要不然一調用這個方法，就直接停止鏈接，數據操作就會失敗
                connection.end(function(err){
                    if(err){
                        console.log('關閉數據庫連接失敗！');
                        throw err;
                    }
                });
            });
        });
    }
};

使用時統一引用該js即可；

apis/Article.js

var express = require('express');
var db = require('../config/db');
var router = express.Router();
var responseInfo = require('../config/ResponseInfo');

var responseCode = responseInfo.responseCode;
var responseMsg = responseInfo.responseMsg;

router.get('/', function (req, res, next) {
    res.render('./article/article.jade', { title: '文章列表' });
})

router.get('/list',function (req , res , next) {
    var page=req.query.page;
    var limit=req.query.limit;
    var sql_getCount = 'SELECT count(*) as count from article where flag = 1';
    var sql_getList = 'SELECT * from (SELECT * from article WHERE flag = 1 limit ' + (page-1)*limit+','+limit+') A left join article_type B on A.type_id = B.type_id '

    db.query(sql_getCount, function (err, rows, fields) {
        if (err) {
            return;
        }
        db.query(sql_getList,function (list_err,result) {
            if (list_err) {
                console.log(list_err)
                return;
            }
            res.send({
                code:responseCode.TABLE_DATA,
                data:result,
                count:rows[0].count,
                message:responseMsg.SUCCESS_LIST
            });
        })
    })
})

module.exports = router;

後續更新……