array(2) { ["docs"]=> array(10) { [0]=> array(10) { ["id"]=> string(3) "428" ["text"]=> string(77) "Visual Studio 2017 单独启动MSDN帮助(Microsoft Help Viewer)的方法" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(8) "DonetRen" ["tagsname"]=> string(55) "Visual Studio 2017|MSDN帮助|C#程序|.NET|Help Viewer" ["tagsid"]=> string(23) "[401,402,403,"300",404]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511400964" ["_id"]=> string(3) "428" } [1]=> array(10) { ["id"]=> string(3) "427" ["text"]=> string(42) "npm -v;报错 cannot find module "wrapp"" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(4) "zzty" ["tagsname"]=> string(50) "node.js|npm|cannot find module "wrapp“|node" ["tagsid"]=> string(19) "[398,"239",399,400]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511400760" ["_id"]=> string(3) "427" } [2]=> array(10) { ["id"]=> string(3) "426" ["text"]=> string(54) "说说css中pt、px、em、rem都扮演了什么角色" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(12) "zhengqiaoyin" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511400640" ["_id"]=> string(3) "426" } [3]=> array(10) { ["id"]=> string(3) "425" ["text"]=> string(83) "深入学习JS执行--创建执行上下文(变量对象,作用域链,this)" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(7) "Ry-yuan" ["tagsname"]=> string(33) "Javascript|Javascript执行过程" ["tagsid"]=> string(13) "["169","191"]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511399901" ["_id"]=> string(3) "425" } [4]=> array(10) { ["id"]=> string(3) "424" ["text"]=> string(30) "C# 排序技术研究与对比" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(9) "vveiliang" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(8) ".Net Dev" ["catesid"]=> string(5) "[199]" ["createtime"]=> string(10) "1511399150" ["_id"]=> string(3) "424" } [5]=> array(10) { ["id"]=> string(3) "423" ["text"]=> string(72) "【算法】小白的算法笔记:快速排序算法的编码和优化" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(9) "penghuwan" ["tagsname"]=> string(6) "算法" ["tagsid"]=> string(7) "["344"]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511398109" ["_id"]=> string(3) "423" } [6]=> array(10) { ["id"]=> string(3) "422" ["text"]=> string(64) "JavaScript数据可视化编程学习(二)Flotr2,雷达图" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(7) "chengxs" ["tagsname"]=> string(28) "数据可视化|前端学习" ["tagsid"]=> string(9) "[396,397]" ["catesname"]=> string(18) "前端基本知识" ["catesid"]=> string(5) "[198]" ["createtime"]=> string(10) "1511397800" ["_id"]=> string(3) "422" } [7]=> array(10) { ["id"]=> string(3) "421" ["text"]=> string(36) "C#表达式目录树(Expression)" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(4) "wwym" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(4) ".NET" ["catesid"]=> string(7) "["119"]" ["createtime"]=> string(10) "1511397474" ["_id"]=> string(3) "421" } [8]=> array(10) { ["id"]=> string(3) "420" ["text"]=> string(47) "数据结构 队列_队列实例:事件处理" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(7) "idreamo" ["tagsname"]=> string(40) "C语言|数据结构|队列|事件处理" ["tagsid"]=> string(23) "["246","247","248",395]" ["catesname"]=> string(12) "数据结构" ["catesid"]=> string(7) "["133"]" ["createtime"]=> string(10) "1511397279" ["_id"]=> string(3) "420" } [9]=> array(10) { ["id"]=> string(3) "419" ["text"]=> string(47) "久等了,博客园官方Android客户端发布" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(3) "cmt" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511396549" ["_id"]=> string(3) "419" } } ["count"]=> int(200) } 222 基于Spring boot + Oracle +Vue + Element UI 的 电商网站 - 爱码网

写在前面:

这是一个简单的电商网站。

部署和访问形式

部署在Google Cloud上,静态IP,没买域名,是一个 web网站 ,手机/电脑输入 访问地址(http://35.189.127.74:8010) 即可访问。值得注意的是这个网站也许只撑到 2020/09 ,然后我的Google 账户 的钱应该就 耗光了。

功能

普通使用者:游客免登录,注册账号,以账号方式登录,修改资料,预览商品(文字,图片),搜索,加入购物车,编辑购物车,选择运送时间地点并check out 购物车(等待商家确认),确认付款,查看自己的历史订单

管理员:普通使用者的所有功能,商品上传,商品信息删改,审查(驳回,通过,删改数量,添加extra cost)用户check out的订单,查看所有人的历史账单。

技术关键字

Spring boot, dubbo service, mybatis,oracle, Vue , Element UI , Google Could

写这个的动机:

我人在国外,响应stay at home号召,我买食物都是网购的,这边的网购和中国外卖差不多,你在网站上选,然后选派送时间和地点,他送过来给你。 但是这边的中超却没有网站,他们是微信朋友圈展示,然后你想要什么就和他讲,然后运送给你,或者你自己去店里买,这都很不方便。所以我就打算写一个电商网站给他们用,也当时在这个奇怪的疫情时期为大家的安全出一份力。

Github:

https://github.com/JianTang2000/OnlineShopService

https://github.com/JianTang2000/OnlineShopPortal

web 展示 :

点击访问 (http://35.189.127.74:8010) ,

这就是一个类似于国外 tesco 之类的网站 的简化版本 , 或者中国美团外卖超市 的简化版。

这是基于 ElementUi写的,全部都是ElementUI的官方组件,没有复杂的样式。不算难,就是比较麻烦。

以非管理员身份登录,网站可简单分为五部分 (管理员可以看到和进行一些额外的功能,之前已经描述过了就不再说了):

点击头像进入个信息界面:注册,登录,删改信息等操作;

点击首页:商品预览,搜索,加入购物车等操作;

点击处理:查看商家的审阅(接单)结果,确认付款等;

点击购物车:进一步确认,选择派送方式,check out 购物车等;

点击订单:搜索,查看历史订单等;

基于Spring boot + Oracle +Vue + Element UI 的 电商网站

workflow :

分为使用者和管理员(商家)两条线,基本上和美团买东西差不多的流程。

但值得注意的是网站上不涉及直接付款(这个我这边不太好弄),而是线下付款,在这个网站上双方确认。

数据库:

第一个github连接有完整的建表脚本,.sql结尾。

大概就是 用户,用户细节,商品,商品细节,购物车,在行订单,历史订单几张表。

表不算多,但表设计和改动的过程的艰难,真的只有自己能体会:写到一半觉得表不太合适想改一改动一动,操作量巨大,OMG,流下了悔恨的泪水。

表的结构嵌套略严重,这不算很好,这是因为写到一半我有些改动,所以只能牺牲下空间换取方便。

没有集成内存数据库redis之类的,也没有写进程缓存,因为这边中超撑死也就200+商品,没必要。

后台:

后台是用Java 写的,通过架构,就不多描述了,懂的都懂,有几个细节可说一下:

重复注册检测是如何实现的:

没有短信/邮件之类的,因为国外用户,不好搞这个,我使用的是IP检测,一个IP一段时间内只能注册一次。

前台拿到登录IP,后台起个 计时器 存放用过的IP,定时清空即可。

搜索是如何实现的:

这个略微复杂一些,我当时没有来得及研究比较简洁快速的搜索方法,所以按照自己的想法写了一个。

目标就是支持模糊搜索,快。

我是使用分词器来实现的,首先有一个商品信息的收集过程,用分词器切分这些信息形成一个字典,每个商品对应自己的词块信息。用户输入关键字查询时,用分词器切分这个输入,形成词块,然后寻找和输入词块有交集的商品词块,按照交集大小排序,这就是搜索结果。

代码量:

因为前后台都是基于比较通用的框架,所以写起来还挺顺利的,除去框架代码,前后台加起来应该没有超过2W行,我大概写了一周多。

后话:

后来中超老板和我说 五六份你们都回国了,店开不下去了,要停业 一段时间,九月再来,网站他九月份再用,我晕了。。。

相关文章: