- 因爲最近的項目需要,簡單提供一個微信小程序與Java後端進行數據交互的項目模板,同時也建立了網頁WEB的測試,方便搭建pc端後臺管理界面。因爲有些內容網上也比較多,部分環境安裝和項目創建內容不加強調。下面進入主題吧:
1、使用工具:
(1)微信小程序開發者工具
(2)IDEA
(3)SSM框架
(4)MySQL數據庫
2.微信小程序前端框架
這個就不多介紹了,下載安裝好開發環境,建立項目,會自動創建一個框架模板。
建立模板以及底部導航欄:https://study.163.com/course/introduction.htm?
微信小程序基礎入門學習視頻:
courseId=1003283028&trace_c_p_k2=20f6fbe78e844135a0f53a349830a6d2
3.SSM框架搭建
(1)創建項目,選擇創建Maven項目,選擇其中的webapp模板,這個也不在累贅,可搜索相關博客如何創建一個Maven管理的Java Web項目模板。
參考博客: https://blog.csdn.net/zonghengxueba/article/details/80829195
(2)框架相關配置文件設立
首先本項目的後端目錄結構如下:
3.1 Java文件模板建立
(1)配置pom.xml文件
特別需要注意一下數據庫的版本以及一些項目工程信息可能需要改成你的工程名字,本項目名稱爲:Minqingtong_System
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>Minqingtong_System</groupId>
<artifactId>Minqingtong_System</artifactId>
<version>1.0-SNAPSHOT</version>
<packaging>war</packaging>
<name>Minqingtong_System Maven Webapp</name>
<!-- FIXME change it to the project's website -->
<url>http://www.example.com</url>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<maven.compiler.source>1.7</maven.compiler.source>
<maven.compiler.target>1.7</maven.compiler.target>
<!-- spring版本號 -->
<spring.version>4.3.5.RELEASE</spring.version>
<!-- mybatis版本號 -->
<mybatis.version>3.4.1</mybatis.version>
</properties>
<dependencies>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.11</version>
<scope>test</scope>
</dependency>
<!-- https://mvnrepository.com/artifact/jstl/jstl -->
<dependency>
<groupId>jstl</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>
<!-- https://mvnrepository.com/artifact/taglibs/standard -->
<dependency>
<groupId>taglibs</groupId>
<artifactId>standard</artifactId>
<version>1.1.2</version>
</dependency>
<!--日誌 start-->
<dependency>
<groupId>log4j</groupId>
<artifactId>log4j</artifactId>
<version>1.2.17</version>
</dependency>
<dependency>
<groupId>org.slf4j</groupId>
<artifactId>slf4j-api</artifactId>
<version>1.7.25</version>
</dependency>
<!--日誌 end-->
<!-- 實現slf4j接口並整合 -->
<dependency>
<groupId>ch.qos.logback</groupId>
<artifactId>logback-classic</artifactId>
<version>1.2.2</version>
</dependency>
<!-- JSON -->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-core</artifactId>
<version>2.8.7</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.8.7</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-annotations</artifactId>
<version>2.8.7</version>
</dependency>
<dependency>
<groupId>commons-beanutils</groupId>
<artifactId>commons-beanutils</artifactId>
<version>1.9.3</version>
</dependency>
<dependency>
<groupId>commons-collections</groupId>
<artifactId>commons-collections</artifactId>
<version>3.2.1</version>
</dependency>
<dependency>
<groupId>commons-lang</groupId>
<artifactId>commons-lang</artifactId>
<version>2.6</version>
</dependency>
<dependency>
<groupId>commons-logging</groupId>
<artifactId>commons-logging</artifactId>
<version>1.1.1</version>
</dependency>
<dependency>
<groupId>net.sf.ezmorph</groupId>
<artifactId>ezmorph</artifactId>
<version>1.0.6</version>
</dependency>
<dependency>
<groupId>net.sf.json-lib</groupId>
<artifactId>json-lib</artifactId>
<version>2.2.3</version>
<classifier>jdk15</classifier>
</dependency>
<!-- 數據庫 -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>8.0.13</version>
</dependency>
<!-- 數據庫連接池 -->
<dependency>
<groupId>com.mchange</groupId>
<artifactId>c3p0</artifactId>
<version>0.9.5.2</version>
</dependency>
<!-- MyBatis -->
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis</artifactId>
<version>${mybatis.version}</version>
</dependency>
<!-- mybatis/spring整合包 -->
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis-spring</artifactId>
<version>1.3.1</version>
</dependency>
<!-- Spring -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-core</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-beans</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-context</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-jdbc</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-tx</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-web</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-test</artifactId>
<version>${spring.version}</version>
</dependency>
<!-- https://mvnrepository.com/artifact/javax.servlet/servlet-api -->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>servlet-api</artifactId>
<version>2.5</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>javax.websocket</groupId>
<artifactId>javax.websocket-api</artifactId>
<version>1.1</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-websocket</artifactId>
<version>4.0.5.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-messaging</artifactId>
<version>4.0.5.RELEASE</version>
</dependency>
</dependencies>
<build>
<finalName>Minqingtong_System</finalName>
<pluginManagement><!-- lock down plugins versions to avoid using Maven defaults (may be moved to parent pom) -->
<plugins>
<plugin>
<artifactId>maven-clean-plugin</artifactId>
<version>3.1.0</version>
</plugin>
<!-- see http://maven.apache.org/ref/current/maven-core/default-bindings.html#Plugin_bindings_for_war_packaging -->
<plugin>
<artifactId>maven-resources-plugin</artifactId>
<version>3.0.2</version>
</plugin>
<plugin>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.8.0</version>
</plugin>
<plugin>
<artifactId>maven-surefire-plugin</artifactId>
<version>2.22.1</version>
</plugin>
<plugin>
<artifactId>maven-war-plugin</artifactId>
<version>3.2.2</version>
</plugin>
<plugin>
<artifactId>maven-install-plugin</artifactId>
<version>2.5.2</version>
</plugin>
<plugin>
<artifactId>maven-deploy-plugin</artifactId>
<version>2.8.2</version>
</plugin>
</plugins>
</pluginManagement>
</build>
</project>
(2)配置web.xml文件
如果有標紅報錯的地方,先不管,等創建好相應的文件後,回過來看是否是文件名不一致。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE web-app PUBLIC
"-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
"http://java.sun.com/dtd/web-app_2_3.dtd" >
<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_3_1.xsd"
version="3.1">
<context-param>
<!--加載Spring的配置文件,隨着監聽器觸發,Spring調用這裏,找到Spring的核心配置文件-->
<param-name>contextConfigLocation</param-name>
<param-value>classpath:config/spring-mybatis.xml</param-value>
</context-param>
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
<servlet>
<servlet-name>SpringMVC</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<!--當頁面有請求時,DispatcherServlet對象調用這裏,獲取到SpringMVC的核心配置文件-->
<param-name>contextConfigLocation</param-name>
<param-value>classpath:config/Spring-mvc.xml</param-value>
</init-param>
<!--優先級,數字越小級別越高-->
<load-on-startup>1</load-on-startup>
<async-supported>true</async-supported>
</servlet>
<servlet-mapping>
<servlet-name>SpringMVC</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
<!--解決字符編碼異常的過濾器-->
<filter>
<filter-name>EncodingFilter</filter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
<async-supported>true</async-supported>
<init-param>
<param-name>encoding</param-name>
<param-value>utf-8</param-value>
</init-param>
<init-param>
<param-name>forceRequestEncoding</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>forceResponseEncoding</param-name>
<param-value>true</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>EncodingFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<display-name>Archetype Created Web Application</display-name>
</web-app>
(3)配置Spring-mvc.xml文件
文件目錄:resources/config/
<?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:context="http://www.springframework.org/schema/context"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd">
<!--將鏈接中/p的靜態的訪問路徑映射爲URL,常用於加載html、js、css、圖片、視頻等靜態資源-->
<!--<mvc:resources mapping="/resources/**" location="/,classpath:/META-INF/publicResources/"/>-->
<mvc:resources location="/css/" mapping="/css/**" />
<mvc:resources location="/images/" mapping="/images/**" />
<mvc:resources location="/js/" mapping="/js/**" />
<mvc:resources location="/lib/" mapping="/lib/**" />
<!--使用註解(可以代替配置映射器和適配器)-->
<mvc:annotation-driven/>
<!--掃描帶有註解的控制類,不可以放在Spring的配置中-->
<context:component-scan base-package="com.MinQingTong.Controller"/>
<!-- 視圖解析器 -->
<bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/WEB-INF/pages/"></property>
<property name="suffix" value=".jsp"></property>
</bean>
</beans>
(4)配置spring-mybatis.xml文件
文件目錄:resources/config/
<?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:context="http://www.springframework.org/schema/context"
xmlns:tx="http://www.springframework.org/schema/tx"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context.xsd
http://www.springframework.org/schema/tx
http://www.springframework.org/schema/tx/spring-tx.xsd">
<!-- 掃描service包下所有使用註解的類型 -->
<context:component-scan base-package="com.MinQingTong.Service.Impl"/>
<!-- 配置數據庫相關參數properties的屬性:${url} -->
<context:property-placeholder location="classpath:properties/jdbc.properties"/>
<!-- 數據庫連接池 -->
<bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource">
<property name="driverClass" value="${jdbc.driver}"/>
<property name="jdbcUrl" value="${jdbc.url}"/>
<property name="user" value="${jdbc.username}"/>
<property name="password" value="${jdbc.password}"/>
<property name="maxPoolSize" value="${c3p0.maxPoolSize}"/>
<property name="minPoolSize" value="${c3p0.minPoolSize}"/>
<property name="autoCommitOnClose" value="${c3p0.autoCommitOnClose}"/>
<property name="checkoutTimeout" value="${c3p0.checkoutTimeout}"/>
<property name="acquireRetryAttempts" value="${c3p0.acquireRetryAttempts}"/>
</bean>
<!-- 配置SqlSessionFactory對象 -->
<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
<!-- 注入數據庫連接池 -->
<property name="dataSource" ref="dataSource"/>
<!-- 自動掃描mapping.xml文件,**表示迭代查找 -->
<property name="mapperLocations" value="classpath:mapper/*.xml" />
</bean>
<!-- 配置掃描Dao接口包,動態實現Dao接口,注入到spring容器中 -->
<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
<!-- 注入sqlSessionFactory -->
<property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"/>
<!-- 給出需要掃描Dao接口包 -->
<property name="basePackage" value="com.MinQingTong.Dao"/>
</bean>
<!-- 配置事務管理器 -->
<bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
<!-- 注入數據庫連接池 -->
<property name="dataSource" ref="dataSource"/>
</bean>
<!-- 配置基於註解的聲明式事務 -->
<tx:annotation-driven transaction-manager="transactionManager"/>
</beans>
(5)配置jabc.properties文件
文件目錄:resources/properties/,並改成你的數據庫名稱和數據庫用戶名、密碼。
jdbc.driver=com.mysql.cj.jdbc.Driver
#數據庫地址
jdbc.url=jdbc:mysql://localhost:3306/minqingtong_system?useUnicode=true&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=UTC
#用戶名
jdbc.username=root
#密碼
jdbc.password=password
#最大連接數
c3p0.maxPoolSize=30
#最小連接數
c3p0.minPoolSize=10
#關閉連接後不自動commit
c3p0.autoCommitOnClose=false
#獲取連接超時時間
c3p0.checkoutTimeout=10000
#當獲取連接失敗重試次數
c3p0.acquireRetryAttempts=2
(6)配置log4j.properties文件
文件目錄:resources/properties/,
### set log levels ###
log4j.rootLogger = DEBUG,Console,File
### 輸出到控制檯 ###
log4j.appender.Console=org.apache.log4j.ConsoleAppender
log4j.appender.Console.Target=System.out
log4j.appender.Console.layout=org.apache.log4j.PatternLayout
log4j.appender.Console.layout.ConversionPattern= %d{ABSOLUTE} %5p %c{1}:%L - %m%n
(7)Java類和接口文件配置(測試代碼)
Controller模塊:創建TestController類
@Controller
@RequestMapping("/test")
public class TestController {
@Autowired
private TestService testService;
/**
* pc管理後臺數據測試
* @return
*/
@RequestMapping(value = "/user")
@ResponseBody
public List<Test> getTest(){
List<Test> user = testService.test();
System.out.print("測試數據輸出:id:"+user);
return user;
}
/**
* 微信小程序數據測試
* @return
*/
@RequestMapping(value="/xiaochenxu/getUser")
@ResponseBody
public List<Test> getUser(){
List<Test> user = testService.test();
System.out.print("測試數據輸出:id:"+user);
return user;
}
}
Dao模塊:創建TestMapper接口
package com.MinQingTong.Dao;
import com.MinQingTong.Model.Test;
import java.util.List;
public interface TestMapper {
/**
* 數據測試
* @return
*/
List<Test> test();
}
Model模塊:創建Test實體類
package com.MinQingTong.Model;
public class Test {
private Integer id;
private String name;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
@Override
public String toString() {
return "Test{" +
"id=" + id +
", name='" + name + '\'' +
'}';
}
}
Service模塊:創建TestService接口和實現類
package com.MinQingTong.Service;
import com.MinQingTong.Model.Test;
import java.util.List;
public interface TestService {
/**
* 數據測試
* @return
*/
List<Test> test();
}
實現類:
package com.MinQingTong.Service.Impl;
import com.MinQingTong.Dao.TestMapper;
import com.MinQingTong.Model.Test;
import com.MinQingTong.Service.TestService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class TestServiceImpl implements TestService {
@Autowired
private TestMapper testMapper;
/**
* 數據測試
* @return
*/
@Override
public List<Test> test(){
return testMapper.test();
}
}
數據庫mapper模塊:
目錄:resources/mapper/,創建TestMapper.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.MinQingTong.Dao.TestMapper">
<resultMap id="user" type="com.MinQingTong.Model.Test">
<id column="id" property="id"></id>
<result column="name" property="name"></result>
</resultMap>
<select id="test" resultMap="user">
select id,name from test
</select>
</mapper>
pc管理後臺界面:
打開index.jsp,寫入測試代碼:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>測試</title>
<c:set var="path" value="${pageContext.request.contextPath}" scope="page"/>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
<h2>PC後臺數據測試!</h2>
<div>
<div>
用戶ID:<span id="id">
</div>
<div>
用戶名:<span id="name"></span>
</div>
</div>
</body>
<script type="text/javascript" src="${path}/lib/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
$.ajax({
url : "${path}/test/user",
type : "post",
async: true,
success : function(result){
$("#id").html(result[0].id);
$("#name").html(result[0].name);
}
})
})
</script>
</html>
4.數據庫建立
建立數據庫以及數據表,表明可爲test,建立兩個測試字段:id和name。
5.微信小程序關鍵代碼.
.wxml文件:
<!--後臺接入數據測試-->
<button bindtap='houduanRequest'>點擊進行後臺數據測試</button>
<view wx:for="{{list}}" wx:fot-item="item">
用戶ID:{{item.id}}
用戶名:{{item.name}}
</view>
.js文件:
5.運行代碼
(1)配置好tomcat後,運行後端代碼,會彈出一個測試網頁,數據顯示成功即可;
(2)打開微信前端代碼,點擊測試是否獲得數據,若出現提示端口不允許,及url鏈接無法認證,需在開發者工具中進行設置:
解決辦法:
在請求本地接口時,要開啓"不校驗請求域名、TLS版本及HTTPS證書"選項:設置->項目設置->不校驗請求域名、TLS版本及HTTPS證書。因爲wx.request的url請求中不能有端口。
遇到該問題可以參考博客: https://www.cnblogs.com/zeroingToOne/p/8987554.html
至此一個簡單的微信小程序與java後臺通信的項目Demo搭建測試完成!其間如果遇到各種報錯問題多百度,博主也是這樣做的。
同時IDEA有個功能特別強大,就是如果出現運行tomcat項目報錯了,可以查看調試代碼工具底下的Tomcat服務日誌快速定位到哪裏出錯了。
工程源碼下載鏈接:
[link]https://download.csdn.net/download/qq_28406091/12185128