1. 程式人生 > >微信小程式開發(一)——使用ssh(struts2+hibernate+spring)框架實現後臺與微信前臺進行通訊

微信小程式開發(一)——使用ssh(struts2+hibernate+spring)框架實現後臺與微信前臺進行通訊

使用ssh框架實現對微信小程式前臺的通訊,做到前後臺分離,後臺頁面都為靜態頁面,通過用json來現實與前臺通訊(面向介面程式設計)。在這次因為只為了實現通訊所以沒有用hibernate。只用了struts2+spring,也是ssh框架中struts和spring整合。實現了前臺傳送使用者名稱密碼,後臺返回連線成功。

專案環境(Tomcat8.5+myeclipse2016 ci)

一、所需要匯入的包。

1.struts2的包

2.spring的包

二、目錄包結構

三、dao層程式碼

1.UserDao.java

package com.demo.dao;

import com.demo.po.User;

public interface UserDao {
	
	String toGet(User user);//獲取前臺傳送的使用者名稱密碼
	
}

2.UserDaoImp.java

package com.demo.dao;

import org.springframework.stereotype.Repository;

import com.demo.po.User;
@Repository
public class UserDaoImp implements UserDao{

	@Override
	public String toGet(User user) {
		// TODO Auto-generated method stub
		String msg = user.getUsername()+user.getUserpass();
		return msg;
	}

}

四、po層程式碼

1.JsonResult.java

package com.demo.po;

import java.util.HashMap;
import java.util.Map;

public class JsonResult {
	private String result;
	private Map<String,Object> map = new HashMap<String, Object>();
	
	public String getResult() {
		return result;
	}
	public void setResult(String result) {
		this.result = result;
	}
	public Map<String, Object> getMap() {
		return map;
	}
	public void setMap(Map<String, Object> map) {
		this.map = map;
	}
	public String getTest(){
		return "我伺服器,你連線到我了";
	}
}

2.User.java

package com.demo.po;

public class User {
	private String username;
	private String userpass;
	
	public String getUsername() {
		return username;
	}
	public void setUsername(String username) {
		this.username = username;
	}
	public String getUserpass() {
		return userpass;
	}
	public void setUserpass(String userpass) {
		this.userpass = userpass;
	}
	public User(String username,String userpass){
		super();
		this.username=username;
		this.userpass=userpass;
	}
	public User(){
		super();
	}
}

五、server層

1.UserService.java

package com.demo.server;

import com.demo.dao.UserDao;
import com.demo.po.User;

public interface UserService {

	public UserDao getUserDao();
	
	public void setUserDao(UserDao userDao);
	
	public String toGet(User user);
}

2.UserServiceImp.java

package com.demo.server;

import javax.annotation.Resource;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.demo.dao.UserDao;
import com.demo.po.User;
@Service
public class UserServiceImp implements UserService {
	@Autowired
	private UserDao userDao;

	public UserDao getUserDao() {
		return userDao;
	}

	public void setUserDao(UserDao userDao) {
		this.userDao = userDao;
	}
	
	public String toGet(User user){
		String msg = userDao.toGet(user);
		if(msg==null)
			return "failed";
		else
			return "success";
	}
}

六、Action層

1.UserAction.java

package com.demo.testAction;

import java.util.Map;
import java.util.logging.Logger;

import org.apache.struts2.interceptor.RequestAware;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;

import com.demo.po.JsonResult;
import com.demo.po.User;
import com.demo.server.UserService;
import com.google.gson.Gson;
@Controller
public class UserAction implements RequestAware {
	@Autowired
	private UserService userService;
	private Map<String,Object>request;
	private JsonResult jsonResult;
	private User user;
	Logger log = Logger.getLogger(this.getClass().getName());


	public JsonResult getJsonResult() {
		return jsonResult;
	}


	public void setJsonResult(JsonResult jsonResult) {
		this.jsonResult = jsonResult;
	}


	public User getUser() {
		return user;
	}


	public void setUser(User user) {
		this.user = user;
	}

	
	public Map<String, Object> getRequest() {
		return request;
	}


	@Override
	public void setRequest(Map<String, Object> arg0) {
		// TODO Auto-generated method stub
		request=arg0;
	}
	
	public String toget(){
		jsonResult = new JsonResult();
		log.info("userService ---->" + userService );
		String msg = userService.toGet(user);
		jsonResult.setResult(msg);
		/*Map map = new HashMap<String, Object>();
		map.put("user", user);
		jsonResult.setMap(map);*/
		log.info(new Gson().toJson(jsonResult));
		return "success";
		
	}
	

}

七、spring的配置檔案applicationContext.xml編寫(因為使用註解,所以配置檔案只寫了自動掃描包)

<?xml version="1.0" encoding="UTF-8"?>
<beans
	xmlns="http://www.springframework.org/schema/beans" 
	xmlns:context="http://www.springframework.org/schema/context"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:p="http://www.springframework.org/schema/p"
	xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.1.xsd
	http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.0.xsd">
	<context:annotation-config/>
	<context:component-scan base-package="com.demo" />
</beans>

八、struts.xml配置檔案編寫

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd">
<struts>
	<package name="default" namespace="/" extends="struts-default,json-default">
		<action name="toget" class="com.demo.testAction.UserAction" method="toget">
           <!-- 頁面顯示json -->
			<result name="success" type="json">
				<param name="root">jsonResult</param>
			</result>
		</action>
	
	</package>
</struts>    

九、微信小程式前臺程式碼

1.index.xml(點選按鈕傳送請求)

<!--index.wxml-->
<view class="container">
  <view class="userinfo">
    <button bindtap='requestdemo'> 傳送請求 </button>
  </view>
</view>

2.index.js

//index.js
//獲取應用例項
const app = getApp()

Page({
  data: {

  },
  //事件處理函式
  requestdemo:function(){
    wx:wx.request({
      url: 'http://localhost:8080/serverDemo/toget.action',
      data: {
        'user.username':'qwe',
        'user.userpass': '123'
        },
      header: {
        'content-type': 'application/json' // 預設值
      },
      method: 'GET',
      dataType: 'json',
      responseType: 'text',
      success: function(res) {
        console.log(res.data);
      },
      fail: function(res) {
        console.log("連線失敗");
      }
      
    })
  },

  onLoad: function () {
  
  }
})

3.index.wxss

/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 200px;
}

十、效果展示

ps:本人也是剛學習完不久如果有說錯和不足的地方歡迎指出