后台管理系统之前端页面搭建

刘小爱今天自学Java第140天。

谢谢你的观看，谢谢你。

学习计划如下：

       了解传统项目和互联网项目的区别。 电子商务项目的特点和任务。 项目分为后台管理系统和前台门户系统。每个系统分为前端和后端，分为前端页面和后台微服务。我们首先学习后台管理系统。 今天是后台管理系统的前端页面建设，明天是后台管理系统的微服务建设。

一、刘小爱商城

Java项目基本都是web具体项目分为传统项目和互联网项目。

1传统项目

像OA办公系统是典型的传统项目：

其典型特点是：企业内部员工可以使用，不对外开放。

正因为如此，业务本身重业务本身。至于网站性能，我们不太注重。

毕竟一共也就那么些人用，也不会出现高并发的情况，对技术本身要求不高。

2互联网项目

就像门户一样，电子商务网站是互联网项目。

它最大的特点是对外开放，比如淘宝，大家都可以用，注册。

正因为如此，网站的性能要求相对较高，你知道现在淘宝用户数亿，一旦性能不好，用户体验就很差。

而且用户太多，会出现高并发问题。

为什么双十一这么牛？

数百万用户可能在凌晨0点1秒内使用淘宝下订单。

即使是机器也难以忍受，服务器也会崩溃，阿里巴巴或多或少能承受这种压力。

正是由于电子商务行业的高强度并发压力，阿里巴巴的技术进步才得以推动。

3刘小爱商城

我们要做的项目叫刘小爱商城。

从用户的角度来看，整个刘小爱商城可分为后台管理系统和前台门户系统两部分。

前台门户系统就是淘宝这样的网站，用户可以直接注册使用，我们先不学。

我们先学习后台管理系统，网站管理者用来管理网站，前端页面如下图所示:

后台管理系统主要包括以下功能：

       商品管理包括商品分类、品牌、商品规格等信息的管理。 销售管理，包括订单统计、订单退款处理、促销活动生成等。 用户管理，包括用户控制、冻结、解锁等。 权限管理，整个网站的权限控制，使用JWT鉴定方案，用户及API控制权限。 统计，各种数据的统计分析显示。……等等

分为前端页面和后台微服务。

二、管理系统前端页面

整个管理系统会使用Vue.js框架构建单页应用（SPA），也就是刚学的组件开发。

我们不会从0到1编写前端代码，直接使用项目提供的前端资源导入：

运行命令：npm run dev

输入此命令可以获得访问地址，当然也可以在相应的代码中设置。

点击该路径就能直接跳转到刘小爱商城后台管理界面了。

如果我们想自己写，估计需要几天时间。不值得直接使用项目提供的资源。

但我们也应该理解，否则我们甚至不能测试，毕竟，背景响应的数据需要到相应的页面。

简单了解前端页面的代码:

emm，这涉及的知识点有点多，我没有解释一些文件的作用。

其中一个可以理解，事实上，大多数人都理解它的英语意思，也知道它的作用。

三、Vuetify框架

Vuetify是一个基于Vue的UI可以使用预定义的页面组件快速构建页面。

有点像学过的BootStrap框架。

为什么要用这个框架？

我们刚学的Vue虽然框架会帮助我们渲染视图，但风格是由我们自己完成的。

这显然不是我们的优势，所以后端开发人员通常喜欢使用一些现成的UI组件，即用。

那怎么用呢？

具体来说，我们可以去这里找到相应的组件，然后提供代码模板 ** 到相应的地方。

以上就是对vuetify框架的初步介绍，以后用什么组件，可以查询。

前端页面是由专门的前端人员完成的，我们只在后台建立后台微服务，毕竟，现在基本上是前后端分离。

但是现在不可能找前端人员陪我学习，所以还是要自己搭建前端页面。

这就是为什么我们必须学习前端基础。

最后

谢谢你的观看。

如果可以，请帮忙点赞，谢谢。