零基礎開發一款微信小程序商城

零基礎開發一款微信小程序商城

小程序真的太火了,我18線小城市的朋友都知道了,知道我是程序員。遂找我開發一塊微信小程序商城。正如前面所說,我網頁這一塊是欠缺的,一個完整的網頁都沒寫過的我,最終還是答應了這位哥們試試看!主要處於兩個方面考慮:

  1. 別人在有需求的時候主動找到我,說明對我能力的信任,不想辜負別人的信任。
  2. 小程序確實是個引流的巨大入口,市場需求很大,可以嘗試學習下。
  3. 可以掙錢,下午茶有著落了。

正如前面所說,我是找了個開源項目,差不多花了三天時間搞定。一天時間看找開源項目,一天時間部署運行環境,看了半天API文檔。差不多就是這麼個進度。下面我們先來看下實現的效果:

小程序效果如下:

零基礎開發一款微信小程序商城

後臺管理系統效果:

零基礎開發一款微信小程序商城

下面我們進入正文:

項目介紹

下載TomCat

下載安裝MySQL

下載安裝數據庫管理工具

下載安裝IntelliJ IDEA

啟動後臺管理系統

下載小程序編譯器

總結

項目介紹

我找的開源項目是李鵬軍開源的微信小程序商城,前後端開源。項目地址:platform-wechat-mall,感謝鵬哥的無私奉獻,讓我坐享其成。當然,他也開通了QQ技術交流群,大家可以進群一起討論。也和他微信聊過,感覺是很有想法,很nice的人。

關於這個項目的技術選型,好吧,大家還是看圖吧,我也不知道幾個,瞭解下就好。

零基礎開發一款微信小程序商城

接下來我們主要是做一些軟件的安裝,如果各位有裝好的可以跳過對應的部分。

好了,不多說了,下面是具體的軟件安裝步驟:

下載TomCat

  1. 點擊進入tomcat下載官網,下載Tomcat,我這邊使用Tomcat 8.0.
零基礎開發一款微信小程序商城

  1. 解壓Tomcat壓縮包到指定文件,並運行bin目錄下的startup.bat文件

零基礎開發一款微信小程序商城

零基礎開發一款微信小程序商城

這時候我們可以在瀏覽器輸入http://localhost:8080/,運行如下界面即啟動成功:

零基礎開發一款微信小程序商城

下載安裝MySQL

數據庫是後開開發必備,所以如果沒有安裝MySql的朋友,就先花幾分鐘將MySQl安裝一下。

  1. 下載安裝MySQL官方下載地址
  2. 下載打開安裝,一直下一步即可,需要注意下面兩個點,一是賬號名密碼,二是服務器名。

零基礎開發一款微信小程序商城

零基礎開發一款微信小程序商城

  1. 到MySQL的安裝目錄下,進行MySQL服務的啟動

零基礎開發一款微信小程序商城

顯示服務啟動成功,表示你的MySQL已經安裝成功,接下里我們安裝可視化管理工具。

下載安裝數據庫管理工具

數據庫管理工具有很多,我這裡用的Navicat來管理數據庫。如果你使用其他的亦可以,對項目無影響。具體可以參考:SQlite數據庫查看工具軟件集。

  1. Navicat 官方下載地址滑到底部,點擊下載。這個只能試用14天,需要破解版的可以關注我公眾號“aserbao”回覆“navicat”獲取。

安裝運行成功後,我們點擊連接上面啟動成功的數據庫,輸入數據庫密碼。

零基礎開發一款微信小程序商城

零基礎開發一款微信小程序商城

最終在當前數據庫下面有個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

零基礎開發一款微信小程序商城

  1. 輸入項目倉庫地址https://gitee.com/fuyang_lipengjun/platform.git

零基礎開發一款微信小程序商城

  1. 配置tomcat
  2. a. 打開Edit Configurations,點+號,選中Tomcat Server 選中Local

零基礎開發一款微信小程序商城

零基礎開發一款微信小程序商城

b. 配置之前下載的Tomcat,點擊Configure配置Tomcat。如果是最新版本請在On"Update"action後選項選擇Update classes and resources,這樣每次修改js,html,java都不需要重啟。

零基礎開發一款微信小程序商城

零基礎開發一款微信小程序商城

c . 點Fix 選擇platform_framework:war exploded把項目部署到tomcat

零基礎開發一款微信小程序商城

部署完成之後,我們點擊運行按鈕,運行整個項目:

零基礎開發一款微信小程序商城

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

零基礎開發一款微信小程序商城

到這裡,我們後臺管理的編譯運行就完成了,我們通過登錄管理系統內部對商品進行發佈修改:

零基礎開發一款微信小程序商城

現在我們本地的數據庫已建立完成,現在我們可以開始建立前端界面對數據進行訪問了。接下來我們開始編譯運行小程序代碼。

下載小程序編譯器

當然,如果沒有註冊微信小程序的朋友請在微信開發平臺註冊自己的微信小程序

下載微信小程序開發工具,下載,填寫自己微信小程序APP ID及獲取AppSecert.

零基礎開發一款微信小程序商城

零基礎開發一款微信小程序商城

零基礎開發一款微信小程序商城

下面我們將請求鏈接設置為http://localhost:8080/api,獲取數據就是後臺管理器修改的數據。這時候我們打開瀏覽器登陸localhost:8080,進入綜合管理平臺,就可以修改自己想展示的數據了。

總結

其實對於後臺一竅不通的我暫時還不知道如何通過自己域名訪問,之前計劃是這篇文章打算將上線的一塊總結出來供大家一起學習,但是由於我的域名備案剛通過,時間有限。還需要學習更多後臺及服務器方面的知識。下一步計劃準備學習下後臺開發,這段時間搞了個自己的博客管理系統(www.aserbao.com)。當然,我也發了關於學習博客管理系統的Chat零基礎建立自己的博客網站,有興趣的朋友可以關注下。當然,之後會將微信小程序開發學習的一些資料整理出來,到時候就在公眾號aserbao進行發佈,有興趣的朋友可以在微信公眾號給我留言交流。


分享到:


相關文章: