零基础开发一款微信小程序商城

一个朋友问我能不能帮忙做个商城?我一个完整网页都写不出的 Android 开发者,我该怎么拒绝呢?好吧,看在小程序这么火的形势下,我还是答应了!找了个开源项目,差不多花了三天时间搞定。

本场 Chat 主要是讲一个开源的微信小程序商城的安装运行调试及数据修改,包括前台和后台的开发。

  1. 通过 IDEA 安装后台代码运行。
  2. 安装 MySQL,Navicat 管理工具进行数据库管理操作。
  3. 安装微信小程序开发工具,运行代码。

最后:在决定购买之前,希望您能看下上面内容,这篇文章不讲前后端技术,只是一篇开源商城项目的调试运行。效果可以在我同名公众号上查看,如果真对您有用,再决定订购。

小程序真的太火了,我家四线小城市的朋友都知道了,当然,基于我是程序员,遂找我一块开发微信小程序商城。

正如前面所说,我网页这一块是欠缺的,一个完整的网页都没写过的我,你想让我搞啥呢?造飞机?真以为是个程序员啥都会?

最终还是答应了,主要出于三个方面考虑:

  1. 别人在有需求的时候主动找到我,说明对我能力的信任,不想辜负别人的信任。
  2. 小程序确实是个引流的巨大入口,市场需求很大,可以尝试学习下。
  3. 可以挣钱,下午茶有着落了。

正如前面所说,我是找了个开源项目,差不多花了三天时间搞定。一天时间看找开源项目,一天时间部署运行环境,看了半天 API 文档。差不多就是这么个进度。

下面我们先来看下实现的效果,小程序效果如下:

enter image description here

后台管理系统效果:

enter image description here

下面我们进入正文:

项目介绍

我找的开源项目是李鹏军开源的微信小程序商城,前后端开源。项目地址:platform-wechat-mall,感谢鹏哥的无私奉献,让我坐享其成。当然,他也开通了 QQ 技术交流群,大家可以进群一起讨论。也和他微信聊过,感觉是很有想法很 nice 的人。

关于这个项目的技术选型,好吧,大家还是看图吧,我也不知道几个,了解下就好。

enter image description here

接下来我们主要是做一些软件的安装,如果各位有装好的可以跳过对应的部分。

好了,不多说了,下面是具体的软件安装步骤:

下载 Tomcat

1.点击进入 tomcat 下载官网,下载 Tomcat,我这边使用 Tomcat 8.0。

enter image description here

2.解压 Tomcat 压缩包到指定文件,并运行 bin 目录下的 startup.bat 文件

enter image description here

enter image description here

这时候我们可以在浏览器输入 http://localhost:8080/,运行如下界面即启动成功:

enter image description here

下载安装 MySQL

数据库是后开开发必备,所以如果没有安装 MySQL 的朋友,就先花几分钟将 MySQL 安装一下。

1.下载安装 MySQL:官方下载地址

2.下载打开安装,一直下一步即可,需要注意下面两个点,一是账号名密码,二是服务器名。

enter image description here

enter image description here

3.到 MySQL 的安装目录下,进行 MySQL 服务的启动

enter image description here

显示服务启动成功,表示你的 MySQL 已经安装成功,接下里我们安装可视化管理工具。

下载安装数据库管理工具

数据库管理工具有很多,我这里用的 Navicat 来管理数据库。如果你使用其他的亦可以,对项目无影响。具体可以参考:SQlite 数据库查看工具软件集

Navicat 官方下载地址滑到底部,点击下载。这个只能试用 14 天。

安装运行成功后,我们点击连接上面启动成功的数据库,输入数据库密码。

enter image description here

enter image description here

最终在当前数据库下面有个 platform-shop 的包。及运行成功。导入数据库也可以在下一步启动后台管理系统时再进行。这样就能在当前下载的目录下找到 platform.sql 文件。否则可以到开源项目地址中去下载 platform.sql 文件。

下载安装 IntelliJ IDEA

很多开发的朋友应该电脑中都装有 ItelliJ IDEA,如果你装有 IDEA 可以直接跳过此步骤。

  1. 首先我们下载安装 IntelliJ IDEA 官网下载,安装到本地。IDEA 安装参考链接
  2. 激活 IntelliJ IDEA。激活注册码获取地址

启动后台管理系统

1.将项目导入到 IDEA 中,Check out from Version Control 选择 git

enter image description here

2.输入项目仓库地址:https://gitee.com/fuyang_lipengjun/platform.git

enter image description here

3.配置 tomcat

a. 打开 Edit Configurations,点 + 号,选中 Tomcat Server 选中 Local

enter image description here

enter image description here

b. 配置之前下载的 Tomcat,点击 Configure 配置 Tomcat。如果是最新版本请在 On"Update"action 后选项选择 Update classes and resources,这样每次修改 js、html、java 都不需要重启。

enter image description here

enter image description here

c . 点 Fix 选择 platform_framework:war exploded 把项目部署到 tomcatenter image description here

部署完成之后,我们点击运行按钮,运行整个项目:

enter image description here

等待运行完成。我们就可以看到效果了:

enter image description here

到这里,我们后台管理的编译运行就完成了,我们通过登录管理系统内部对商品进行发布修改:

enter image description here

现在我们本地的数据库已建立完成,现在我们可以开始建立前端界面对数据进行访问了。接下来我们开始编译运行小程序代码。

下载小程序编译器

当然,如果没有注册微信小程序的朋友请在微信开发平台注册自己的微信小程序下载微信小程序开发工具,下载,填写自己微信小程序 APP ID 及获取 AppSecert。

enter image description here

enter image description here

enter image description here

下面我们将请求链接设置为 http://localhost:8080/api,获取数据就是后台管理器修改的数据。这时候我们打开浏览器登陆 localhost:8080,进入综合管理平台,就可以修改自己想展示的数据了。

总结

其实对于后台一窍不通的我暂时还不知道如何通过自己域名访问,之前计划是这篇文章打算将上线的一块总结出来供大家一起学习,但是由于我的域名备案刚通过,时间有限。还需要学习更多后台及服务器方面的知识。下一步计划准备学习下后台开发,这段时间搞了个自己的博客管理系统。当然,我也发了关于学习博客管理系统的 Chat:零基础建立自己的博客网站,有兴趣的朋友可以关注下。有兴趣的朋友也可以在微信公众号 aserbao 给我留言交流。

阅读全文: http://gitbook.cn/gitchat/activity/5b3999075db6f06811eb14f8

一场场看太麻烦?订阅GitChat体验卡,畅享300场chat文章!更有CSDN下载、CSDN学院等超划算会员权益!点击查看

猜你喜欢

转载自blog.csdn.net/valada/article/details/81124218