素材準備：
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 = https://www.cnblogs.com/dzlishen/p/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 >
<div >
<div >
{% for item in data.orderList %}
{% set index = ((page-1) * pageSize + loop.index) %}
{% include "./item.tpl" %}
{% endfor %}
</div>
<div ></div>
<div ></div>
<div ></div>
</div>
<nav aria-label="Page navigation" >
<ul ></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 >' + (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 = https://www.cnblogs.com/dzlishen/p/window.location.href,
index = href.indexOf('?')
window.location.href = https://www.cnblogs.com/dzlishen/p/href.substr(0,index+1) + paramsStr
}
})
};
{% set paginatorData = https://www.cnblogs.com/dzlishen/p/{
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="https://www.cnblogs.com/?cid={{item.id}}" >
<img src="https://www.cnblogs.com/dzlishen/p/{{item.furl}}" /> {{item.title}}({{item.count}})
</a>
{% else %}
<a href="https://www.cnblogs.com/?cid={{item.id}}" >
<img src="https://www.cnblogs.com/dzlishen/p/{{item.furl}}" />{{item.title}}({{item.count}})
</a>
{% endif %}
</li>
{% endfor %}
</ul>
<div >共有{{ orderCount}}條訂單資訊</div>
{% endblock%}
/view/home/item.tpl
<div >
<div >
<img src="https://www.cnblogs.com/dzlishen/p/{{item.img}}" height="600"/>
</div>
<div >
<div >{{ index }}. {{item.title}}</div>
<div >訂單編號:{{item.bianhao}}</div>
<div >技術要求:{{item.ctitle}}</div>
<div >特殊要求:{{item.description}}</div>
<div >客服QQ:{{item.kfqq}}</div>
<div >交付時間:{{helper.formatTime(item.enddate)}}</div>
<div >
<a target="_blank" 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這個編輯器上傳的，代碼高亮比較麻煩一些，改天再通過后臺調整一下吧，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/343049.html
標籤：JavaScript