litemall 是一个以SpringBoot + Vue管理员前端 + 微信小程序用户前端 + Vue用户移动端组成的一个小商城,gitee上Star有6000+,不考虑相关中间件的情况下,项目采用的技术比较接近企业用的一些基本技术。对于自学软件测试或者参加培训,找不到合适的项目写简历上,以及平常自己学习,找不到合适的项目练手的,都可以用这个项目搭建在本地练手。
初学者,自己自学的过程中很容易走弯路,比如经常在那自己折腾虚拟机以及各种环境就要折腾大半天,其实在我看来这个还是没必要的,没必要非得在linux上去部署,以我工作7年的经验告诉你们,你们大部分在虚拟机上折腾的这些东西,在工作中基本上用不到,或者很多东西其实都是现成的,不会让你们从头开始去弄,如果非要学习的话,小白就买一个阿里云服务器就好了,新人买个1-3年,费用也不贵,最起码不用去折腾各种什么xshell连接不上虚拟机的问题,这些相关的操作等你入了行,对这个行业有了更多的认知之后,回过头再去学这些,会比较容易接受一点,现阶段,作为测试人员,能够掌握自己在本地windows或者mac电脑上对常用的软件操作熟练就可以了。
接下来简单讲一下在本地怎么去搭建litemall商城用来学习使用,,当然,具体的部署教程,一般的开源项目上都有写,你如果看别人的文档能够直接看懂当然是最好,看不懂的朋友,可以再试试看这篇文章。
准备工作:
- 电脑本地git环境搭建 Git环境搭建
- java环境搭建 Java环境搭建
- maven环境变量配置 Maven环境搭建
- nodejs环境搭建 Node.js环境搭建
代码下载:
代码地址:https://gitee.com/linlinjava/litemall
找一个目录,然后鼠标右键,选择Git Bash Here,在弹出的窗口中输入如下命令:
git clone https://gitee.com/linlinjava/litemall.git
maven修改mirrors镜像地址
修改目的:加快后台代码jar包下载,提升打包效率
修改方式:进入到maven安装的目录后,找到conf文件夹,然后找到里面的settings.xml,用文本文件打开进行编辑:大概在140多行的样子,或者搜索mirrors标签,然后加入如下的配置:
<mirror> <id>nexus-aliyun</id> <mirrorOf>central</mirrorOf> <name>Nexus aliyun</name> <url>http://maven.aliyun.com/nexus/content/groups/public</url> </mirror>
修改后的内容截图如下:
创建数据库以及导入数据
进入到从gitee上下载好的代码文件夹中,然后进入到litemall-db\sql目录下面,依次执行下面的sql文件:
1、litemall_schema.sql 执行后会自动创建一个litemall的数据库,如果数据库已存在,则会删除重建
2、litemall_table.sql 选择litemall数据库后,执行改脚本,会自动创建项目中用到的表
3、litemall_data.sql 选择litemall数据库后,执行该脚本,会导入初始化测试数据,其中包括前端登录的用户账号
代码打包编译
需要进行打包的操作如下:
后端代码打包&本地启动
打包:
先进入到代码的根目录,也就是最外层的pom.xml文件所在的目录,打开cmd窗口(在windows的文件管理器中输入cmd回车),执行以下命令打包后端代码:
mvn -U clean install
执行完命令后,会看到很多SUCCESS则表示打包成功:
这里打包的命令用mvn install / mvn package均可,-U 以及clean 参数不加问题也不大。打完包后,在litemall-all目录下的target文件夹中会有一个xxx-exec.jar的可启动jar包,这就是打好的部署包,在litemall-all-war文件夹下也会生成一个war包,不过war包我没有试过能不能部署,感兴趣的可以自己去试试。
本地启动后端的服务
cmd窗口执行java -jar xx.jar的方式就可以启动服务。
进入代码根目录后,执行下面命令 chcp 65001 java -Dfile.encoding=UTF-8 -jar litemall-all/target/litemall-all-0.1.0-exec.jar 以上第一行不加的话,控制台日志输出可能会是乱码
执行后的效果如下:
如何验证是否启动成功:
打开浏览器,访问http://127.0.0.1:8080/swagger-ui.html页面,能出现以下内容则表示后端部署成功:
如何快速验证部署有没有问题,能不能连接上数据库:
方式1:
curl -X POST "http://127.0.0.1:8080/wx/auth/login" -H "accept: */*" -H "Content-Type: application/json" -d "{\"username\":\"user123\",\"password\":\"user123\"}"
方式2:直接在swagger页面输入账号密码调用登录接口:
然后在wx-auth-controller下面找到/wx/auth/login接口,输入下面的参数进行调用:
{"username":"user123","password":"user123"}
说明:之所以要右上角切换wx分支,是因为wx分组的登录接口不需要验证码,admin分组的登录接口要验证码,稍微麻烦点。
到此,一个完整的后端服务就部署成功了,到这里就可以用这个swagger文档进行接口测试实战了,接下来再看一下如何部署后台管理系统和前端页访问页面。
本地启动后台管理系统前端
进入到代码litemall-admin目录,执行以下命令:
npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm install cnpm run dev
执行完后,最终效果如下:
登陆后页面效果如下:
本地启动前端商城页面
进入到代码litemall-vue目录,执行以下命令:
npm install -g cnpm --registry=https://registry.npm.taobao.org (此命令之前执行过可不再重复执行) cnpm install cnpm run dev
执行后效果:
前端登录用户默认为user123 密码user123
到此,此套商城基本上就部署的差不多了,还有一个是微信小程序的,这个我也暂时还没学会怎么部署,对于小白进行项目实战来说,部署完以上我写的这个足够了。
往期环境部署相关文章:
文章写的不易,有收获的朋友帮忙分享一下。关注公众号,后面教你怎么将开源项目写到简历上,以及如何用这个项目来开始你的小白转行入门之路以及技术提升之路,欢迎进群交流哟!