使用Egg改造訂單系統展示效果，方便快速瀏覽

素材准備：

1.Egg.js

Born to build better enterprise frameworks and apps with Node.js & Koa 

為企業級框架和應用而生

2.訂單數據

訂單列表：http://gzh.58yskj.com/qd-sys/

訂單詳情：https://gzh.58yskj.com/public/index-detail.html?id=9bbf0efa-15cc-4898-8a3d-75468ec55ced

3.Bootstrap

Bootstrap樣式文件、腳本文件，插件bootstrap-paginator.js

4.swiper

輪播圖切換效果腳本swiper.js

5.數據

我是通過Python采集了訂單數據，存入了本地數據庫

 

我們在看到下面這種訂單列表時，如果要查看具體的需求，那就需要每個訂單去下載附件，然后再打開查看了。如果可以查看圖片形式的需求豈不是一目了然，為此我以egg.js框架搭建一個方便自己預覽的小型系統（此處應該說是一個站點吧，具體的名詞不去糾結了）。

在本地搭建的站點效果如下：

這樣是不是就一目了然了呢，當然了這個只是訂單的展示，並未做接單的操作（這個由於官方是基於接單是基於微信公眾號的微信登錄，暫時不考慮做接單了）

 

接下的操作分為，

1.基於egg.js快速初始化

直接使用腳手架，只需幾條簡單指令，即可快速生成項目（npm >=6.1.0）:

$ mkdir egg-example && cd egg-example
$ npm init egg --type=simple
$ npm i

啟動項目:

$ npm run dev
$ open http://localhost:7001

 

 

2.上面的操作完成之后就可以看到一個簡單的頁面，內容顯示hello,egg。

我們使用egg.js在渲染頁面時需要用到模板引擎，此處我使用的是egg-view-nunjucks

引入 view 插件
$ npm i egg-view-nunjucks --save

啟用插件

// config/plugin.js  注意此處的文件路徑
exports.nunjucks = {
      enable: true,
     package: 'egg-view-nunjucks',
};

 

//另外還要注意一下此處配置的寫法啊。由於我也是第一次玩egg啊，在此處剛開始配置的時候沒太注意那么多，導致寫錯了配置結構，報了一堆錯誤，后來根據報錯的堆棧信息，逐步調試才發現是配置文件寫錯了結構。

或者以下方的寫法，我用的就是下面的方式，剛開始沒注意到，結構里面寫nunjucks，導致一系列的報錯。。。

module.exports = {
nunjucks: {
enable: true,
package: 'egg-view-nunjucks',
},
};

 

 

另外還要在config下的配置文件中配置一下模板引擎

/config/config.default.js

config.view = {
defaultViewEngine: 'nunjucks',
mapping: {
'.tpl': 'nunjucks',
},
};

 

 

3.模板引擎安裝上了，接下來我們就寫一下模板

寫模板之前需要先寫一下路由、控制器

在router.js定義一下訪問的路由

module.exports = app => {
const { router, controller } = app;
router.get('/', controller.home.index);//首頁的路由
router.get('/order/:id', controller.home.order);//訂單詳情頁面的路由
};

 

 

首先來看首頁的路由對應的控制器方法就是controller.home.index，也就是controller目錄下的home.js中的index()方法

/crontroller/home.js

 

'use strict';

const Controller = require('egg').Controller;

class HomeController extends Controller {
async index() {
const { ctx, app } = this;

const pageSize = app.config.env.pageSize;
const page = parseInt(ctx.query.page) || 1;
const cid = ctx.query.cid || '';

// const orderList = await ctx.service.order.getOrderList();
const data = await ctx.service.order.getOrderListDb(cid, page, pageSize);
const categoryList = await ctx.service.order.getCategoryListDb(page, 50)


await ctx.render('home/list.tpl', { data, categoryList, page, pageSize, cid });
}

async order() {
const { ctx } = this
const { id } = ctx.params
ctx.content = {
name: `hello ${ctx.params.id}`,
};

await ctx.render(‘home/order.tpl', {order });
}
}

module.exports = HomeController;

 

/view/home/list.tpl

 

{% extends "../layout/layout.tpl" %}

{% block content %}
<div class="order-list flex-g1">
<div class="swiper-container">
<div class="swiper-wrapper">
{% for item in data.orderList %}
{% set index = ((page-1) * pageSize + loop.index) %}
{% include "./item.tpl" %}
{% endfor %}
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<nav aria-label="Page navigation" class="flex flex-jc">
<ul class="pagination"></ul>
</nav>
</div>
<script>
// $('.swiper-container img').zoomify();
var mySwiper = new Swiper ('.swiper-container', {
direction: 'horizontal', // 垂直切換選項
loop: true, // 循環模式選項
 
// 如果需要分頁器
pagination: {
el: '.swiper-pagination',
clickable: true,
renderBullet: function (index, className) {
return '<span class="' + className + '">' + (index + 1) + "</span>";
},
},
 
// 如果需要前進后退按鈕
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
})

//分頁功能
var setPaginator = function (page,totalPage) {
$('.pagination').bootstrapPaginator({
bootstrapMajorVersion: 3, //對應bootstrap版本
size: '', //分頁大小
currentPage: page, //當前頁
numberOfPages: 3, //顯示的頁數
// totalPages: Math.ceil(data.totalCount / data.pageSize), // 總頁數
totalPages: totalPage, // 總頁數
/**
* 分頁點擊事件
* @param event [jquery對象]
* @param originalEvent [dom原生對象]
* @param type [按鈕類型]
* @param page [點擊按鈕對應的頁碼]
*/
onPageClicked: function (event, originalEvent, type, page) {
// render(page);//根據點擊頁數渲染頁面

let searchInfo = getQueryObject()
// console.log(searchInfo)
searchInfo.page = page
let paramsStr = convertObjet2Str(searchInfo)

let href = window.location.href,
index = href.indexOf('?')
 
window.location.href = href.substr(0,index+1) + paramsStr

}
})
};
{% set paginatorData = {
page:data.page,
totalPage:data.totalPage
} %}
setPaginator({{ paginatorData.page }},{{paginatorData.totalPage}})
</script>
{% endblock %}

{% block leftNav %}

<ul>
{% set orderCount = 0 %}
{% for item in categoryList %}
{% set orderCount = orderCount + item.count %}
<li>
{% if (item.id== cid) %}
<a href="/?cid={{item.id}}" class="active flex-important flex-ac">
<img src="{{item.furl}}" class="mg-r5" width="20"/> {{item.title}}({{item.count}})
</a>
{% else %}
<a href="/?cid={{item.id}}" class="flex-important flex-ac">
<img src="{{item.furl}}" class="mg-r5" width="20"/>{{item.title}}({{item.count}})
</a>
{% endif %}

 
</li>
{% endfor %}

</ul>
<div class="ta-c pd-tb10">共有{{ orderCount}}條訂單信息</div>

{% endblock%}

 

 

/view/home/item.tpl

 

<div class="swiper-slide flex">
<div class="order-item-img">
<img src="{{item.img}}" width="600" height="600"/>
</div>
<div class="flex-g1 pd-a20">
<div class="fs-18 fw-b">{{ index }}. {{item.title}}</div>
<div class="mg-t10 fs-16">訂單編號:{{item.bianhao}}</div>
<div class="mg-t10 fs-16">技術要求:{{item.ctitle}}</div>
<div class="mg-t10 fs-16">特殊要求:{{item.description}}</div>
<div class="mg-t10 fs-16">客服QQ:{{item.kfqq}}</div>
<div class="mg-t10 fs-16 c-f00">交付時間:{{helper.formatTime(item.enddate)}}</div>

<div class="mg-t10 fs-16">
<a target="_blank" class="sino-a" href="http://gzh.58yskj.com/public/index-detail.html?id={{item.id}}">當前訂單官方鏈接</a>
</div>
</div>
</div>

 

 

 

4.模板寫完了之后，接下來該搞數據了呢。

數據我是使用python將訂單、訂單分類信息采集至了本地，然后使用egg-mysql從數據庫中讀取數據。

 

/service/order.js

async getOrderListDb(cid = '', page = 1, pageSize = 10) {

const options = { // 搜索 yskjOrder 表
columns: [
'id', 'aname', 'bianhao', 'cid', 'ctitle',
'description', 'descs', 'enddate', 'funddate',
'furl', 'host', 'img', 'kfqq', 'qq', 'robName',
'sort', 'title', 'type', 'uid', 'url',
'wximg', 'zt'
], // 要查詢的表字段
orders: [['enddate', 'desc'], ['funddate', 'asc']], // 排序方式
limit: pageSize, // 返回數據量
offset: (page - 1) * pageSize, // 數據偏移量
}

let countSql = 'select count(id) count from yskjOrder '

if (cid != '') {
options.where = {
cid
}

countSql += ' where cid="' + cid + '"'
}

const orderList = await this.app.mysql.select('yskjOrder', options);
const countResult = await this.app.mysql.query(countSql);

const totalCount = countResult[0].count
const totalPage = Math.ceil(totalCount / pageSize)

return { orderList, totalCount, totalPage, pageSize, page }
}

 

先寫這么多吧，今天使用的marsEdit這個編輯器上傳的，代碼高亮比較麻煩一些。改天再通過后台調整一下吧。