微信小程序+Java後台開發(詳細解釋,附代碼) - 新聞資(zī)訊 - 雲南小程序開發|雲南軟件開發|雲南網站(zhàn)建設-西山區知普網絡科技工作室

159-8711-8523

雲南網建設/小程序開發/軟件開發

知識

不管是網站(zhàn),軟件還是小程序,都要直接或間接能為您産生價值,我們在追求其視覺表現的同時,更側重于功能的便捷,營銷的便利,運營的高效,讓網站(zhàn)成為營銷工具,讓軟件能切實提升企業(yè)内部管理水平和(hé)效率。優秀的程序為後期升級提供便捷的支持!

微信小程序+Java後台開發(詳細解釋,附代碼)

發表時間:2021-1-11

發布人:葵宇科技

浏覽次數:68

微信小程序+Java後台開發

全部代碼鍊接

鍊接:pan.baidu.com/s/1viujpT2E… 提取碼:wcvd

  • 通(tōng)過這個(gè)博客,你(nǐ)可(kě)以快速的搭建一個(gè)微信小程序前端和(hé)後台相連的一個(gè)功能,在這裡我會詳細的解說每一個(gè)步驟,就是如(rú)何實現小程序的前後台相互關(guān)聯;因為是實現簡易的小程序的某個(gè)功能,主要是為了了解小程序前台如(rú)何和(hé)後台相連,所以在此博客中(zhōng)使用的是本地tomcat服務器(qì)。

使用的工具:

idea
springmvc
微信小程序開發工具 tomcat
微信小程序API
**所使用的jar包 **
我已經上傳到百度雲盤裡了,如(rú)果有需要可(kě)以去下(xià)載 鍊接:pan.baidu.com/s/1KSqQLs9J… 提取碼:9s0s

1.JAV後端詳解

我寫後台主要使用的是Java,框架是SSM,由于自己的知識淺薄,隻能使用自己已有的知識進行開發學習,因為微信小程序前台和(hé)後台數據傳輸是以Json數據格式傳送的,所以建議如(rú)果了解過springBoot的話,用它更加方便快捷。

在這裡我給大家說一個(gè)json數據格式究竟是什麼,希望對大家有點幫助!!!

  1. json數據格式
    json有兩種格式:一個(gè)是json對象,另一種是json數組
    2.1 json對象:可(kě)以理解為Java中(zhōng)對象,是以鍵值對形式存在的
    例子(zǐ): {"key":value, "key1":value1}
    2.1.2 json數組:
    例子(zǐ):[{"key":value,"key":value}]

首先在idea中(zhōng)創建一個(gè)JavaEE項目,具體如(rú)何創建,在這裡我就不祥解了,如(rú)果有不會的,可(kě)以去網上搜一艘,在這裡我會直接打開我先前創建下(xià)個(gè)JavaEE項目。

  1. 首先在微信小程序開發工具中(zhōng)新建一個(gè)項目,然後再自己所寫的某一個(gè)頁面中(zhōng),其次在自己頁面的wxml文(wén)件中(zhōng)編寫内容 web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">

    <!--前端控制器(qì)-->
    <servlet>
        <servlet-name>springmvc</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:springmvc.xml</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>springmvc</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>
    <!--字符編碼-->
    <filter>
        <filter-name>encoding</filter-name>
        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
        <init-param>
            <param-name>encoding</param-name>
            <param-value>utf-8</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>encoding</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
</web-app>
複制代碼
  1. 其次在src/springmvc.xml編寫springMVC的配置文(wén)件 springMVC.xml
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xmlns:context="http://www.springframework.org/schema/context"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/mvc
        http://www.springframework.org/schema/mvc/spring-mvc.xsd
         http://www.springframework.org/schema/context
        http://www.springframework.org/schema/context/spring-context.xsd"
       default-autowire="byName">

    <!--注解掃描-->
    <context:component-scan base-package="com.zb.lq.controller"/>
    <!--注解驅動(dòng)-->
    <mvc:annotation-driven></mvc:annotation-driven>
</beans>
複制代碼
  1. 然後在控制器(qì)中(zhōng)編寫代碼 我的實在DemoController中(zhōng)編寫的

    DemoController.java
@Controller
public class DemoController {
    @RequestMapping("getUser")
    @ResponseBody
    public List<String> getUser(){
        List<String> list = new ArrayList<>();
        list.add("中(zhōng)北大學");
        list.add("653");
        list.add("實驗室");
        return list;
    }
}
複制代碼

至此,使用Java編寫的後台已經基本完成,接下(xià)來啟動(dòng)tomcat,測試看是否編寫成功 如(rú)果出現一下(xià)内容,則說明後台編寫成功,要以json格式輸出,因為小程序前台和(hé)後台相連是以json格式輸出的

  1. 我以簡單的按鈕實現前後台交互: index.wxml
<button bindtap='houduanRequest'>獲取信息</button>
<view wx:for="{{list}}" wx:fot-item="item">
  姓名:{{item}}
</view>
複制代碼

index.js

//index.js
const app = getApp()

Page({
  data: {
    list:''
  },
  houduanRequest:function(){
    var that = this;
    wx.request({
      url: 'http://localhost:8888/xiaochengxu/getUser',//自己請求的服務器(qì)的地址
      method: 'GET',
      header: {
        'content-type': 'application/json' // 默認值
      },
      success: function (req) {
        var list = req.data;
        if (list == null) {
          wx.showToast({
            title: 'ErrorMessage',
            icon: 'false',   //圖标
            duration: 1500  //提示的延遲的時間
          })
        } else {
          that.setData({
            list: list
          })
        }
      }
    })
  },

  onLoad: function() {
    
  }, 

})

複制代碼

到此基本的功能代碼已經完成了,現在我們開始啟動(dòng)tomcat,進行運行,看看結果究竟是什麼...

到此,實現小程序前後台相連已經實現了 希望對大家有點幫助!!!

相關(guān)案例查看更多