天天看点

使用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框架搭建一个方便自己预览的小型系统(此处应该说是一个站点吧,具体的名词不去纠结了)。

使用Egg改造订单系统展示效果,方便快速浏览

在本地搭建的站点效果如下:

使用Egg改造订单系统展示效果,方便快速浏览

这样是不是就一目了然了呢,当然了这个只是订单的展示,并未做接单的操作(这个由于官方是基于接单是基于微信公众号的微信登录,暂时不考虑做接单了)

接下的操作分为,

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这个编辑器上传的,代码高亮比较麻烦一些。改天再通过后台调整一下吧。