专栏首页零基础自学Java【微服务】156:前台门户系统

【微服务】156:前台门户系统

学习计划安排如下:

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

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

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

一、前台门户介绍

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

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

而前台门户系统是给用户看的,如下图:

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

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

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

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

那使用到的技术是什么呢?

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

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

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

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

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

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

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

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

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

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

当然做一个强调

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

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

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

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

做一个总结就是:

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

二、搭建前台系统

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

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

安装live-server

使用npm命令完成安装即可,命令如下:

npm install -g live-server

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

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

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

命令:live-server --port=9002

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

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

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

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

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

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

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

三、业务需求

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

①搜索业务的实现

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

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

②商品详细以及RabbitMQ?

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

③用户中心的实现

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

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

④购物车以及下单的实现

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

本文分享自微信公众号 - 刘小爱(liuxiaoai946),作者:刘小爱

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-09-15

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【微服务】144:跨域问题及其解决方法

    其实第③种方式直接使用网关域名访问也是可以的,在前天使用nginx时配置了网关域名。

    刘小爱
  • 【Java】基础01:什么是二进制?

    刘小爱
  • 【微服务】169:搜索页面的请求与响应

    使用axios发送请求,当然为了后续方便,axios被封装到了自定义的common组件中。

    刘小爱
  • ubuntu: du指令

    Note: 仅使用 -h 参数项时,du 会自动过滤掉所有的文件,只搜索文件夹。

    JNingWei
  • 真的要做一辈子的程序员吗?来自10年程序员的心声

    经常听一些同学说:不知道下一份工作该去哪类公司做些什么,我的职场人际一团糟老板不重视我,我现在成长的非常慢所以又想跳槽了,我看不到公司的发展前景好迷茫,其实这一...

    一墨编程学习
  • RabbitMQ实战代码

    RabbitMQ 支持多种语言访问,以 Java 为例看下一般使用 RabbitMQ 的步骤。

    剑行者
  • 一周播报| 为啥在英国拿税后27K的全栈程序员愿意回国?我大中华还是可圈可点的……

    上周一位技术朋友向场主咨询,「他最近正在看机会,有没有合适他的岗位」。场主便利用社群的优势,帮这位技术朋友「打了一则广告」,并提炼出了这位朋友4点核心竞争优势。

    养码场
  • 程序员因年纪大惨遭公司开除,网友评论:物竞天择,适者生存!

    文章来源:http://www.yidianzixun.com/article/0KtzmKvT

    用户1257393
  • Python+matplotlib绘制多门课程学生成绩分布饼状图

    饼状图比较适合展示一个总体中各个类别所占的比例,例如商场年度营业额中各类商品、不同员工的占比,家庭年度开销中不同类别的占比等。

    Python小屋屋主
  • 十倍程序员的传说

    最近关于 10 倍程序员的事又开始在各个社交平台火了起来,CODING 作为国内领先的一站式 DevOps 解决方案,今天也来讨论一下 10 倍程序员到底存不存...

    CODING研发管理系统

扫码关注云+社区

领取腾讯云代金券