素材準備：
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這個編輯器上傳的，程式碼高亮比較麻煩一些。改天再通過後臺調整一下吧。