【微服务】156：前台门户系统的搭建

「爱情、让人受尽委屈。」 2022-12-07 15:04 138阅读 0赞

### 目录 ###

*   *   *  
     *  一、前台门户介绍
     *  二、搭建前台系统
     *  三、业务需求
     *  最后

###  ###

今天是刘小爱自学Java的第156天。

感谢你的观看，谢谢你。

![b5b27bada3f55934231d4054b9456c4d.png][]

学习计划安排如下：

*  开始前台门户系统的学习。
 *  今天只涉及到系统搭建，以及一些简单的介绍，并不涉及到具体的业务。
 *  明天开始进入具体的业务学习。

后台管理系统的学习就暂且告一段落了，其实无外乎就是各种增删改查。

笔记中主要是记录了查询和新增操作，关于修改和删除基本也是大同小异。

## 一、前台门户介绍 ##

后台管理系统是给网站管理人员看的，前几天写的功能主要都用于对商品的管理。

管理人员通过该系统控制商品的样式啊，是否上下架，库存啊这些。

而前台门户系统是给用户看的，如下图：

![3378aa1880afe7db43c91e99372bc152.png][]

现在主流电商网站的前台门户系统，基本上都是这么一个样式。

以前后台管理系统较简单，我可以在对应页面做一个修改，从而将其转换成刘小爱商城。

现在前台门户系统较为复杂，有的还涉及到图片，我一时修改不过来，索性就不改了。

但愿不会说我在打广告什么的哈哈哈，到时候被平台给屏蔽了可就不好了。

**那使用到的技术是什么呢？**

以前后台系统使用的是SPA（单页应用），SPA理解起来其实非常简单。

它就是只有一个html文件，其它的都是以vue组件的形式拼接，从而实现了页面切换。

![5db166580687e4506b9425692afd839f.png][]

SPA的好处在于速度快，但是第一次加载慢，它等于是第一次将静态资源全部加载下来了，所以后续页面切换时就非常流畅。

但是这样有一个问题，不利于SEO优化，当然还有缓存的问题，在此就不说明了。

这个SEO是啥？我大致说下，当然不可能将其说得很清楚，我自己也不太懂，但作为一名程序员对这些有一定的了解肯定是没坏处的。

比如说用户要买东西，他可能会在百度上面搜索，那百度出来的页面是如何排序的呢？

这就涉及到SEO搜索引擎优化了，如果优化好，会排在更前面。

当然最前面的肯定是直接给百度钱打广告的。

而百度搜索引擎的一个机制，是利用爬虫爬别人的网站，再显示出来。

如果只是SPA单页应用，爬虫就只能爬到一个html文件，不利于SEO搜索引擎优化。

![46aa5180fef4d310b35b68910d9574b1.png][]

**当然做一个强调**：

SEO这块我也不是太了解，所以只是简单地做一个描述，自己了解的说不定也有问题。

总之SEO对于网站来说很重要，会增加搜索后的排名，使用单页应用就不太合适了。

**所以前台门户系统使用多页应用**：

依旧是前后端分离，不过前端页面会独立多个html页面，每个页面使用vue完成渲染。

做一个总结就是：

*  前端门户系统使用vue+Nuxt实现多页应用
 *  后台管理系统使用vue+vuetify实现单页应用

## 二、搭建前台系统 ##

后台管理系统中用了webpack，很简单地就实现了热部署，这个太重要了，不像Java代码每次一改就要重启微服务，很麻烦。

而此处使用的叫live-server，其翻译过来就是“活的服务器”，很生动形象。

**安装live-server**

![de51067a07160d477fe85e3d03b41ecb.png][]

使用npm命令完成安装即可，命令如下：

**npm install -g live-server**

这里使用的是全局安装，以后任意位置可用。

*  npm：是Node.js的包管理工具。
 *  install：也就是安装的意思。
 *  \-g：也就是表示全局安装，我大胆地猜测下应该就是global的首字母缩写。
 *  live-server：活的服务器。

安装好了之后运行live-server，同时可以使用命令指定端口：

![4d82677dda767447f5344cd16bf07d0b.png][]

命令：**live-server --port=9002**

port即端口的意思，我们这里指定9002为前台门户系统的端口。

域名即为本地域名，通过域名+端口就能访问到对应的页面了。

和后台管理系统一样，为了让域名更加地正规好看，我们使用SwitchHosts+nginx实现域名和端口的反向代理。

该方式在第142天的学习笔记中专门讲解过，这里做一个简单的回顾：

![c90441ac0b24b5a51e34eb4c85608d14.png][]

在SwitchHosts配置我们想要的一个域名为本地域名，也就是说当在浏览器上访问该域名时，系统会自动认为它对应本地域名。

而浏览器上如果不指定端口时，会默认解析成80端口，所以在nginx配置中监听该端口，并跳转到前台门户系统路径。

所以当在浏览器上访问对应域名时，实际上访问的就是nginx中配置的那个路径。

## 三、业务需求 ##

今天不涉及到具体的业务实现，但是对接下来一段时间的学习做一个了解。

![70fd42dfba32e4f3b275819e969559d4.png][]

**①搜索业务的实现**

一个电商网站，搜索肯定是核心关键了。

现在可不像以前那样，还用什么模糊查询，效率太低了，有专门的搜索技术，明天开始就专门学习。

**②商品详细以及RabbitMQ？**

这是个啥还不太清楚，后续学到了再说。

**③用户中心的实现**

最常见的也就是用户的注册和登录了，这个以前就实现过好几次了。

当然还有其它的一些比如个人信息管理呀，用户地址管理，收藏管理……等。

**④购物车以及下单的实现**

购物车也是商城非常核心的一环，并且肯定是需要使用到支付的，微信支付或者支付宝支付等多种方式。

## 最后 ##

行有不得反求诸己，我是@刘小爱

一个白天上班晚上学习的95后沪漂，不为其它，只为学会自律做好自己，也愿我的每日打卡能给你带来勇气，欢迎点赞关注和评论。

[b5b27bada3f55934231d4054b9456c4d.png]: /images/20221123/cf3b80ffcf124d9dbd89310dac283bad.png
[3378aa1880afe7db43c91e99372bc152.png]: /images/20221123/768bcb6247904ad597f0197fb35f212a.png
[5db166580687e4506b9425692afd839f.png]: /images/20221123/dddb09ab623249a2b5c3715f3b766e27.png
[46aa5180fef4d310b35b68910d9574b1.png]: /images/20221123/358571d88fc5409086dafd142f514e55.png
[de51067a07160d477fe85e3d03b41ecb.png]: /images/20221123/367897181b52403da02348d43759ca16.png
[4d82677dda767447f5344cd16bf07d0b.png]: /images/20221123/0d90893c74b144caae522e63185724be.png
[c90441ac0b24b5a51e34eb4c85608d14.png]: /images/20221123/2f9bd9ccf67c4eb4a2e88f7a1c648120.png
[70fd42dfba32e4f3b275819e969559d4.png]: /images/20221123/ab3253c9a25f4f48bc4fd26fb5f88f72.png