Vue电商后台管理系统项目开发实战(一)

前言

当下根据不同的应用场景,电商系统一般都提供了PC端,移动APP,移动Web,微信等多种访问方式。如下图。 不同的客户端共用同一个服务器,数据库,API。本次项目着重设计PC后台管理,供电商后台管理员管理商品,商品分类等。

Vue电商后台管理系统项目开发实战(一)_第1张图片

电商后台管理系统功能

电商后台管理系统用于管理用户账号,商品分类,商品信息,订单,数据统计等业务功能,模块详细如下图。

Vue电商后台管理系统项目开发实战(一)_第2张图片

 电商后台管理系统的开发模式(前后端分离)

电商后台管理系统整体采用前后端分离的开发模式,其中前端项目是基于Vue技术栈的SPA(Single Page Application)项目

Vue电商后台管理系统项目开发实战(一)_第3张图片

 后端:主要负责操作数据库,像前端暴露API接口

前端:负责绘制页面,运用基于Ajax技术调用后端所提供的API接口

SPA:单页面应用,它将所有的活动局限于一个Web页面中,仅在该Web页面初始化时加载相应的HTML、JavaScript 和 CSS。一旦页面加载完成了,SPA不会因为用户的操作而进行页面的重新加载或跳转。取而代之的是利用 JavaScript 动态的变换HTML的内容,从而实现UI与用户的交互。由于避免了页面的重新加载,SPA 可以提供较为流畅的用户体验。

电商后台管理系统的技术选型

前端项目技术栈

  • Vue (前端渐进式JavaScript框架)
  • Vue-router (Vue中用于调用组件,提供俩种模式:history、hash)
  • Element-ui (饿了吗团队开发的ui库)
  • Axios (ES6中 基于promise对象分装的函数,与Ajax不同的是,Ajax早期是面向MVC模型设计的,Axios则是面向当下前端主流的MVVM模型,并且它是异步请求,解决了Ajax的回调地狱问题)
  • Echarts (由百度公司开源的项目 主要用于绘制图标,实现数据可视化)

后端项目技术栈

  • Node.js (JavaScript 在后端的运行环境,可以通过npm导入第三方模块,操纵数据库)
  • Express (Express 简而言之就是可以 向前端提供接口,通过前端发送的请求,返回内容提供给前端)
  • Jwt (JSON Web Token 用于身份认证)
  • Mysql
  • Sequelize

前端项目初始化

  1. 安装Vue脚手架
  2. 通过Vue脚手架创建项目
  3. 配置Vue路由
  4. 配置Element-ui 组件库
  5. 配置Axios库
  6. 初始化git远程仓库
  7. 将本地项目托管到GitHub或Gitee中

 总结

学累了,写点博客放松一下,接下来放一些以及做完的效果图,日后一个组件一篇文章的进行更新,巩固知识的同时,也分享给做这些项目的家人们参考参考

Vue电商后台管理系统项目开发实战(一)_第4张图片

 Vue电商后台管理系统项目开发实战(一)_第5张图片

 Vue电商后台管理系统项目开发实战(一)_第6张图片

 Vue电商后台管理系统项目开发实战(一)_第7张图片

 Vue电商后台管理系统项目开发实战(一)_第8张图片

 Vue电商后台管理系统项目开发实战(一)_第9张图片

 Vue电商后台管理系统项目开发实战(一)_第10张图片

Vue电商后台管理系统项目开发实战(一)_第11张图片 

Vue电商后台管理系统项目开发实战(一)_第12张图片 Vue电商后台管理系统项目开发实战(一)_第13张图片

 

 

你可能感兴趣的:(vue.js,前端,javascript)