@jikeytang
2019-11-18T16:00:26.000000Z
字数 3243
阅读 1170
2019-blog
当微燕商城进行到一半的时候发现并没有一个官网介绍这样一款产品，所以就萌生了开发介绍一个微燕科技官网的想法，经过一过多月时间的折腾，终于在国庆前夕基本完成。下面就个人这个小项目开发的经验总结分享一下，能力有限，不足之外还有很多，正在努力完善中，路过的大佬多多指点。
微燕商城 名字唯一为便于搜索引擎和Github搜索直达，区别于其它开源项目，同时组成整个动物系列开源项目。整个的风格代码基本是vyan-shop-admin的拷贝，区别是数据不在是mock，而是对接真实的Node返回的API数据。
| 技术 | 说明 | 官网 |
|---|---|---|
| Vue-CLI-3 | Vue脚手架工具 | https://cli.vuejs.org/zh/guide/ |
| Vue | 渐进式JavaScript 框架 | https://vuejs.org/ |
| Vue-router | 官方的路由管理器 | https://router.vuejs.org/ |
| Vuex | 全局状态管理模式 | https://vuex.vuejs.org/ |
| Axios | 基于promise 的HTTP 库 | https://github.com/axios/axios |
| Element-UI | 前端UI组件库 *1 | https://element.eleme.io/ |
| Momentjs | JavaScript 日期处理类库 | http://momentjs.cn/ |
| SCSS | CSS预处理器 | https://sass-lang.com/ |
| Tinymce | 可视化HTML编辑器 | https://www.tiny.cloud/ |
| Fontawesome | 图标字体库 | http://www.fontawesome.com.cn/ |
| js-cookie | Cookies封装 | https://github.com/js-cookie/js-cookie |
1. 虽然采用Element，但整体样式风格趋向于 ant-design，目的就是区别于大多数admin
整个前台展示的页面，基本技术栈也比较简单和原始，着重还是熟悉一下相关的技术。
| 技术 | 说明 | 官网 |
|---|---|---|
| body-parser | HTTP请求体解析中间件 | https://github.com/expressjs/body-parser |
| cookie-parser | 主要实现cookie的解析 | https://github.com/expressjs/cookie-parser |
| cors | 解决跨域中间件 | https://github.com/expressjs/cors |
| dayjs | 和Moment.js一样API的超轻量时间库 | https://github.com/iamkun/dayjs |
| express | Node.js Web 框架 | https://expressjs.com |
| jsonwebtoken(jwt) | 跨域认证解决方案 | https://github.com/auth0/node-jsonwebtoken |
| morgan | 日志组件 | https://github.com/expressjs/morgan |
| multer | 表单上传文件中间件 | https://github.com/expressjs/multer |
| mysql | 数据库驱动 | https://github.com/mysqljs/mysql |
| mysql2 | 数据库驱动 | https://github.com/sidorares/node-mysql2 |
| nunjucks | 模板引擎 | https://mozilla.github.io/nunjucks/ |
| sequelize | 基于 promise 的 Node.js ORM | https://github.com/sequelize/sequelize |
| utility | 方法集合 | https://github.com/node-modules/utility |
| 系统 | 工具 | 官网 |
|---|---|---|
| VScode | 主开发工具 | https://code.visualstudio.com/ |
| Webstorm | 开发工具(兼Git提交) | https://www.jetbrains.com/webstorm/ |
| Atom | 源码阅读工具 | https://atom.io/ |
| Cmder | Cmd替代工具[windows] | https://cmder.net/ |
| Notepad2 | 临时单文件编辑[windows] | http://www.flos-freeware.ch/notepad2.html |
| Chrome | 调试工具 | https://www.google.com/intl/zh-CN/chrome/ |
| Navicat | 源码阅读工具 | https://www.navicat.com/en/ |
| Atom | 源码阅读工具 | |
| Atom | 源码阅读工具 | |
| Atom | 源码阅读工具 |
├─admin├─public│ ├─css│ │ └─swiper│ ├─images│ │ ├─about│ │ ├─common│ │ ├─contact│ │ └─home│ ├─js│ │ └─libs│ │ └─swiper│ └─uploads│ └─cases├─routes│ └─admin│ ├─about│ ├─cases│ ├─dashboard│ ├─message│ ├─news│ ├─system│ ├─upload│ └─user├─sql├─utils└─views├─default│ ├─about│ ├─cases│ ├─contact│ ├─css│ ├─news│ └─_includes│ ├─common│ ├─form│ └─pages└─green
├─admin├─public│ └─static│ └─tinymce4.7.5│ ├─langs│ ├─plugins│ │ ├─codesample│ │ │ └─css│ │ ├─emoticons│ │ │ └─img│ │ └─visualblocks│ │ └─css│ └─skins│ └─lightgray│ ├─fonts│ └─img└─src├─api│ ├─about│ ├─cases│ ├─common│ ├─dashboard│ ├─message│ ├─news│ ├─system│ ├─upload│ └─user├─assets│ ├─fontawesome│ │ ├─css│ │ └─fonts│ └─images├─components│ ├─AppFilter│ ├─AppPageTitle│ ├─AppView│ ├─Copyright│ ├─Tinymce│ │ └─components│ └─Upload├─config├─layout│ └─pages│ └─components│ ├─NavSub│ └─SubMenu├─plugins├─router│ └─modules├─store│ └─modules├─styles├─utils└─views├─about│ └─add│ └─pages├─cases│ └─add│ └─pages├─dashboard│ └─pages├─login├─message│ └─add│ └─pages├─news├─other├─system│ ├─add│ │ └─pages│ └─pages└─user└─add└─pages
需要注意的点：
登，这中间并没有动画的过渡，右下角不仔细看并不容易发现，容易引起用户思考。构想：点击关闭之后，像一般购物车处理有个抛物线到右下角的效果。