微信小程序項目實戰+JAVA SSM框架後臺管理系統

畢業設計做的是一個閱讀微信小程序+後臺管理系統 ，最後被評爲優秀畢業設計，在此將項目源碼及設計思路進行分享。

小程序端源代碼下載地址：https://download.csdn.net/download/dowhatyousay/11263304

後臺管理端源代碼下載地址：https://download.csdn.net/download/dowhatyousay/11263308

數據庫下載地址：https://download.csdn.net/download/dowhatyousay/11263327

效果圖如下：

 

一、系統開發環境

（1）Windows10操作系統

（2）微信web開發者工具

（3）Eclipse  JDK版本1.8.0_112

（4）Tomcat服務器 版本8.0.39

（5）MySql數據庫

（7）Maven項目管理工具  版本3.3.9

（8）Git項目版本控制系統 版本2.15.1.windows.2

二、所用技術：

微信小程序、Java SSM框架、JavaScript、LayUI前端框架、BootStrap、JQuery、Echarts、KindEditer富文本編輯器等

三、系統運行

（1）將系統所需要的數據庫導入MySql本地數據庫中。

（2）配置Maven

（3）配置本地Tomcat服務器

（4）將服務器系統代碼包以Maven項目導入Eclispe中

（5）安裝微信web開發者工具最新版本，選擇導入已存在項目，將微信小程序端代碼包導入

（6）以Tomcat運行服務器端代碼，訪問後臺管理系統：http://localhost:8080/YucaiAdmin/login.action

（7）使用微信WEB開發者工具編譯運行微信小程序端代碼運行微信小程序。

四、小程序端與管理端功能模塊

五、核心代碼講解（微信小程序端與管理端的交互）

微信小程序端與後臺服務器的數據交互是通過後臺接口實現的，當微信小程序端需要保存或者請求數據時會向服務器端發起請求，調用相應的接口獲取數據，然後根據返回的結果進行響應，此處以微信端分享文章功能爲例進行實例說明：

（1）在小程序端的分享模塊點擊提交按鈕，微信小程序段觸發JS事件，JS事件觸發後調用uploadArticle方法，並將參數進行傳遞：

ArticleAPI.uploadArticle({ ...params }).then(res => {
      console.log(res)
      if(res==1){
        wx.showToast({
          title: '提交成功',
          icon: 'succes',
          duration: 1000,
          mask: true
       })
      }else{
        wx.showToast({
          title: '提交失敗',
          icon: 'Error',
          duration: 1000,
          mask: true
        })
    }
})

（2）uploadArticle方法被調用後，進而觸發封裝好的方法axios，axios中封裝了調用服務器接口的請求，並將請求地址進行拼裝，根據地址調用後臺接口：

const ArticleAPI = {
    uploadArticle: params => axios({
        params: params,
        url: 'addWeiXinArticle.action',
        type: 'POST'
    }),
};

function axios(data) {
  if (!data.params) {
    data.params = {};
  }
  return new Promise((resove, reject) => {
    var u = config.host + data.url;
    wx.request({
      url: u,
      data: {
        "author": data.params.data.author,
        "classifydetailId": data.params.data.classifydetailId,
        "contact": data.params.data.contact,
        "sendword": data.params.data.sendword,
        "sharecontent": data.params.data.sharecontent,
        "sharename": data.params.data.sharename
      },
      method: data.type,
      header: {
        'Content-Type': 'application/json'
      },
      success: res => {
        const result = res.data;
        resove(result);
      },
      fail: err => {
        reject(err);
      }
    });
  });
}

（3）請求接口的方法向此地址發起request請求，後端服務器會根據請求的地址以及數據進行響應，此處調用了後臺服務器的addWeiXinArticle接口，調用此接口後就會像前面的SSM框架的新增文章功能實例一樣進行請求（此處不再過多贅述），最後再依次返回結果，最終小程序端再根據返回結果展示相應的數據。此處的請求地址爲:

http://localhost:8080/YucaiAdmin/addWeiXinArticle.action

//微信端添加文章
@RequestMapping(value = "/addWeiXinArticle", method = RequestMethod.POST)
@ResponseBody
public int addWeiXinArticle(HttpServletRequest reqs, HttpServletResponse resps, @RequestBody RbSharelist rbSharelist){
         resps.setHeader("Access-Control-Allow-Origin", "*");
         try {            
                return rbShareListService.addArticle(rbSharelist);
         }
         catch (Exception e) {
            e.printStackTrace();
                return 0;
         }
       }