素材準備:
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):
2.上面的操作完成之後就可以看到一個簡單的頁面,内容顯示hello,egg。
我們使用egg.js在渲染頁面時需要用到模闆引擎,此處我使用的是egg-view-nunjucks
引入 view 插件
$ npm i egg-view-nunjucks --save
啟用插件
//另外還要注意一下此處配置的寫法啊。由于我也是第一次玩egg啊,在此處剛開始配置的時候沒太注意那麼多,導緻寫錯了配置結構,報了一堆錯誤,後來根據報錯的堆棧資訊,逐漸調試才發現是配置檔案寫錯了結構。
或者以下方的寫法,我用的就是下面的方式,剛開始沒注意到,結構裡面寫nunjucks,導緻一系列的報錯。。。
另外還要在config下的配置檔案中配置一下模闆引擎
3.模闆引擎安裝上了,接下來我們就寫一下模闆
寫模闆之前需要先寫一下路由、控制器
在router.js定義一下通路的路由
首先來看首頁的路由對應的控制器方法就是controller.home.index,也就是controller目錄下的home.js中的index()方法
4.模闆寫完了之後,接下來該搞資料了呢。
資料我是使用python将訂單、訂單分類資訊采集至了本地,然後使用egg-mysql從資料庫中讀取資料。
先寫這麼多吧,今天使用的marsEdit這個編輯器上傳的,代碼高亮比較麻煩一些。改天再通過背景調整一下吧。