微信小程序+Java后台开发
全部代码链接
若失效，关注我的公众号回复关键字【666】点击领取



通过这个博客，你可以快速的搭建一个微信小程序前端和后台相连的一个功能，在这里我会详细的解说每一个步骤，就是如何实现小程序的前后台相互关联；因为是实现简易的小程序的某个功能，主要是为了了解小程序前台如何和后台相连，所以在此博客中使用的是本地tomcat服务器。*

使用的工具：
idea

springmvc

微信小程序开发工具

tomcat

微信小程序API

所使用的jar包

我已经上传到百度云盘里了，如果有需要可以去下载

链接：https://pan.baidu.com/s/1KSqQLs9JMWB2SqgVVEwhKw 

提取码：9s0s



1.JAV后端详解
我写后台主要使用的是Java，框架是SSM，由于自己的知识浅薄，只能使用自己已有的知识进行开发学习，因为微信小程序前台和后台数据传输是以Json数据格式传送的，所以建议如果了解过springBoot的话，用它更加方便快捷。
在这里我给大家说一个json数据格式究竟是什么，希望对大家有点帮助！！！

json数据格式

2.1  jso有两种格式：一个是json对象，另一种是json数组

2.1.1   json对象：可以理解为Java中对象，是以键值对形式存在的

例子：  {“key”:value, “key1”:value1}

2.1.2    json数组：

例子：[{“key”:value,“key”:value}]

首先在idea中创建一个JavaEE项目，具体如何创建，在这里我就不祥解了，如果有不会的，可以去网上搜一艘，在这里我会直接打开我先前创建下个JavaEE项目。

首先在微信小程序开发工具中新建一个项目，然后再自己所写的某一个页面中，其次在自己页面的wxml文件中编写内容

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">

    <!--前端控制器-->
    <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>


其次在src/springmvc.xml编写springMVC的配置文件

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"/>
    <!--注解驱动-->
    <mvc:annotation-driven></mvc:annotation-driven>
</beans>


然后在控制器中编写代码

我的实在DemoController中编写的



DemoController.java

@Controller
public class DemoController {
    @RequestMapping("getUser")
    @ResponseBody
    public List<String> getUser(){
        List<String> list = new ArrayList<>();
        list.add("中北大学");
        list.add("653");
        list.add("实验室");
        return list;
    }
}

至此，使用Java编写的后台已经基本完成，接下来启动tomcat，测试看是否编写成功

如果出现一下内容，则说明后台编写成功，要以json格式输出，因为小程序前台和后台相连是以json格式输出的


我以简单的按钮实现前后台交互：

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',//自己请求的服务器的地址
      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() {
    
  }, 

})


到此基本的功能代码已经完成了，现在我们开始启动tomcat，进行运行，看看结果究竟是什么…

到此，实现小程序前后台相连已经实现了

希望对大家有点帮助！！！
公众号
希望大家多多关注，里面不定期发放干货

领取全套资料：回复关键字【666】

后台开发包括的知识点很多，包括语言基础，算法，linux编程基础，linux内核，网络，数据库，分布式等等。面面俱到很难，一个领域钻研的很深也很难。我认识的大神里有把C++语言吃的非常透的，也有实验室就是搞分布式的，拿offer都非常轻松。




我在本次秋招拿到了：


字节跳动后台开发ssp

网易游戏游戏研发ssp

阿里云基础平台开发

华为15级顶薪

腾讯后台开发ssp


我准备应聘的时间从研一的寒假开始，当然自己探索的路上走了不少弯路。


列举一下自己的学习内容中我自己认为对找工作或者对提升自己非常有帮助的一些书或资料，仅供参考~



语言基础，C++语言相关的：


《C++ Primer》，应该算是工具书，但我花了3个月一个字一个字啃完了，现在能记住的没几个了，但是好在全看完就不用看Effective C++了，基本都包含在内了。


《STL源码剖析》，很老的书了，很多内容都过时来了，比如空间配置器，但是面试官还是会问……可以跟面试官讲讲ptmalloc的实现。整本书都是重点。


《深度探索C++对象模型》，虽然基本只会问虚函数的实现，看一篇博客也能应付面试，但是还是建议多看几遍。


《Effective C++:改善程序与设计的55个具体做法》还有more effective C++，建议快速看一下。


STL和对象模型我都看了3遍以上，因为太容易忘了，Effective C++只是快速浏览了一遍，发现基本都包含在Primer里了。




网络，除了本科学过的(《计算机网络 自顶向下方法》)，我看了《TCP/IP详解卷1》12-16章，重点是TCP、IP、UDP，其它部分看书太麻烦了，直接从博客里看了。




linux环境编程apue和unp两本是必须的，因为太厚了，看起来还是有点痛苦的，但是不需要全看，而且内容重叠很多。unp卷1前面8章是重点，卷2前面4部分都挺重要的，apue全部，先是要有个概念，自己写代码的时候就知道哪块重要了。



此外，《后台开发：核心技术与应用实践》是腾讯的员工写的，虽然这本书评价比较差，几乎都是抄的博客，但是内容上总结的很好(我觉得就是给校招的同学写的)，都是后台开发需要的基础知识的总结，这本书中内容所代表的知识，基本都是腾讯的C++后台开发工程师所必备的基础，可以作为一个复习提纲。

 

下面的书应该算是提高篇了：



linux内核相关，我买了《深入理解linux内核》发现啃不动，后来看了《linux内核设计与实现》，非常推荐，外加一大堆博客，《深入理解计算机系统》讲的东西比较简单，这个可以作为一个补充，面试官问的很多操作系统相关的问题书中都有涉及。



《Linux多线程服务器端编程》，陈硕的书，讲muduo网络库的，我看了3.4遍，源码也读了3.4遍，收获非常多。前面部分是后台开发的一些经验之谈，对面试也很有用。


《Redis设计与实现》看完感觉也特别好，很值得学习，可以很快就看完。有很多重要的数据结构可以在面试的时候讲出来，比如跳表、redis的 hash表啦~


《深入理解Nginx》我也看了一部分，nginx太经典了，很多面试官也都提到过。


短小精悍的源码还非常推荐leveldb，对照博客把leveldb源码看完不需要多长时间(我花了两个周吧)，但是收获非常多。在此基础上还可以了解一下rocksdb。


除此之外，还看过一些其它的书，感觉不值得推荐就不写了。




书是比较系统性的东西，博客通常是总结性的东西，也是对书中内容的一个补充吧。好多东西面试会问到，但是书中很难找到解答，对照着网上的面经搜博客吧。我看了下自己收藏夹里的光是收藏的博客就已经上百篇了，当然还是不能完全覆盖面试官会问到的问题。(这一步是重点啊)

分享一下我自己看过的博客，从手机书签里导出来的，整理了一下：

http://www.linya.pub/




算法


我只刷了Leetcode上的500多题，但是第一遍不会的题都标记了，后面又刷了很多遍。《剑指offer》这种书不太建议看，很啰嗦，解答也不如LeetCode上的高票解答。直接干刷其实还有点无聊的，每周日上午做一下leetcode的周赛也是个不错的选择，可以当做模拟笔试/面试。另外 Top 100 Liked Questions 可以重点关注一下。




项目

https://github.com/linyacool/WebServer


写了一个静态Web服务器，主要是找实习的时候用的，参考了muduo网络库。

 

阿里云校招(实习)内推，可以发送简历至linya.ly@alibaba-inc.com，有hc，也可以微信和我联系，咨询相关问题，微信linyacool

Django微信小程序后台开发教程
1 申请小程序，创建hello world小程序
2 添加交互框和按钮
3 在服务器配置hello django
4 实现计算器接口
5 配置服务器将后端与微信小程序连接
5.1 uwsgi配置
5.2 http协议（80端口）下的nginx配置
5.3 https协议（443端口）下的nginx配置
5.4 配置微信小程序的服务器信息

1 申请小程序，创建hello world小程序

在微信开发平台（https://mp.weixin.qq.com）申请小程序并获取APP id



下载微信开发者工具（https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html），打开后登录并填入APP id 等信息。



2 添加交互框和按钮

index. wxml

<!--index.wxml-->
<view class="container">
  <input type="text" class="input" bindinput='input'/>
  <button bindtap="calculate">cal</button>
  <view>{{ result }}</view>
</view>



index.wxss

/**index.wxss**/
.input {
  border: 1px solid black;
  margin-bottom: 5px;
}


index.js

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    result: "暂无结果",
    formula: ''
  },
  //事件处理函数
  calculate: function () {
    wx.request({
      url: 'https://shatter.xin/calculate',
      data: {
        formula: this.data.formula
      },
      success: res => {
        if (res.statusCode == 200) {
          this.setData({
            result: res.data
          })
        }
      }
    })
  },
  input: function (e) {
    this.setData({
      formula: e.detail.value
    })
  }
})


3 在服务器配置hello django

在服务器安装python3和pip3环境，并安装django

pip3 install django


创建django项目

django-admin startproject calculator
cd calculator



修改calculator/settings.py中的ALLOWED_HOSTS = []为ALLOWED_HOSTS = ['*']


运行hello django项目


cd calculator
python3 manage.py runserver 0.0.0.0:8000


访问http://服务器ip:8000可以看到下图：


4 实现计算器接口

创建django app

python3 manage.py startapp CalculateApi


在calculator/settings.py的INSTALLED_APPS中添加CalculateApi如下：

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'CalculateApi'
]



在calculator/urls.py中将url转发给CalculateApi处理。

from django.contrib import admin
from django.urls import path
from django.conf.urls import url, include

urlpatterns = [
    path('admin/', admin.site.urls),
    url('^', include('CalculateApi.urls')),
]


在CalculateApi中新建urls.py文件，处理/calculate接口。

from django.conf.urls import url
from . import views

urlpatterns = [
    url('calculate', views.calculate)
]


在CalculateApi/views.py文件中添加calculate函数用于计算求值并返回。

from django.http import HttpResponse


def calculate(request):
    formula = request.GET['formula']
    try:
        result = eval(formula, {})
    except:
        result = 'Error formula'
    return HttpResponse(result)



再次运行服务器，访问http://服务器ip:8000/calculate?formula=2*3-5即可得到结果1。


5 配置服务器将后端与微信小程序连接
由于微信要求使用https协议进行通讯，我们使用nginx + uwsgi + django来配置https服务器。
5.1 uwsgi配置

安装uwsgi

pip3 install uwsgi


配置django项目的uwsgi.ini，在calculator文件夹中新建uwsgi.ini文件

touch uwsgi.ini
vi uwsgi.ini

输入以下配置
[uwsgi]
# django项目监听的socket文件（可以使用端口代替）
socket = ./calculator.sock
# django项目所在目录
chdir = .
# django项目wsgi文件
wsgi-file = ./calculator/wsgi.py

master = true
processes = 2
threads = 4
vacuum = true

# 通过touch reload可以重启uwsgi服务器
touch-reload = ./reload
# 日志输出
daemonize = calculator.log


运行uwsgi服务器

uwsgi --ini uwsgi.ini
touch reload

5.2 http协议（80端口）下的nginx配置

安装nginx

sudo apt-get install nginx
cd /etc/nginx


修改nginx用户

vi nginx.conf

将第一行修改为
user root;


添加80端口的配置文件

cd conf.d
sudo touch calculator.conf
sudo vi calculator.conf

填入以下配置：
server{
    listen         80;
    server_name    服务器ip;
    charset UTF-8;

    client_max_body_size 75M;

    location ~ ^/calculate {
   		// replace "path" to the path of your project
        uwsgi_pass unix:///"path"/calculator/calculator.sock;
        include /etc/nginx/uwsgi_params;
    }
}




重启nginx服务器

sudo service nginx restart


访问服务器的80端口即可访问calculate接口，如http://服务器ip/calculate?formula=2*3-4

5.3 https协议（443端口）下的nginx配置

如果有自己的域名和ssl证书，将calculator.conf配置文件修改如下：

server{
    listen         443;
    server_name    your.domain;
    ssl on;
    ssl_certificate path/to/your/ssl.pem;
    ssl_certificate_key path/to/your/ssl.key;
    ssl_session_timeout 5m;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_prefer_server_ciphers on;

    charset UTF-8;

    client_max_body_size 75M;

    location ~ ^/calculate {
        uwsgi_pass unix:///path/to/calculator/calculator.sock;
        include /etc/nginx/uwsgi_params;
    }
}

重启nginx服务器，访问服务器的443端口即可访问calculate接口，如https://服务器域名/calculate?formula=2*3-4

如果你只有自己的域名而没有ssl证书，可以去申请免费的ssl证书或者参考此网址配置（https://certbot.eff.org/#ubuntuxenial-nginx）。
如果你没有自己的域名甚至没有自己的服务器，请出门右转阿里云或左转腾讯云自行购买。

5.4 配置微信小程序的服务器信息

运行小程序，一个简单的计算器就写完啦。

  
2017/5/1第二次更新


前言：

在我写下这篇文章之前，我头脑中的app后台开发，有且只有一个流程“客户端Cilent向服务器Server请求数据，服务器Server响应客户端请求并返回json数据”。但是，仅仅用语言描述出这个流程，对开发没有任何实质性的帮助。

所以不夸张的说，对于app后天开发，我完完全全是零基础。小白小白还是小白。

我是小白，这点毋庸置疑，但是只要对一些概念有一定的了解，后台开发还是有戏的。


  
1： 提前做好刻苦学习的心理准备。因为后台开发的细节确实很多！


正文：

下面我罗列几个当初困扰我的问题，虽然有的现在看来不必要，但是难免其他人会问到。所以就留在那里，不打算删掉。

问1：后台开发和服务器开发有什么区别和联系？ 

答：对于新手，你可以认为他俩么有区别，是一个东西，区不区分清楚对你学习app后台开发没什么影响。 

如果非要严谨点区分： 

问2：http服务器，web服务器，应用服务器有什么区别？ 

答：为什么叫http服务器呢？是因为该服务器支持http协议，所以这样命名。就像支持ftp协议的叫ftp服务器。web服务器是指同时支持http，https，ftp等多种协议的服务器。web服务器支持多种协议，自然要比单一的http服务器要强大。对于初学者，是否区分清楚web服务器http服务器的区别，对开发过程基本没有影响。 

注释：（http服务器==web服务器） 

更多web（http）服务器与应用服务器的关系
问3：web后台开发和手机app后台开发(也就是服务器开发)有什么区别？ 

答:不严谨的说，web后台开发和app后台开发有区别，但区别不大。 

问4：app后台怎么开发 

《App后台开发运维和架构实践》作者主页链接 

《Android 和PHP 开发最佳实践》第二版 

就我个人来说，上面两本书作用不是很大，看看就行，先别着急买。
问5：app后台开发教程 
android 后台开发简单教程
问6：app后台开发路线  

问7：app和服务器如何通讯？ 

问8：api如何调调试？ 

百度在线api测试平台，浏览器api测试插件。
问9：app后台开发长啥样子 

答：后台开发语言有很多，这里以PHP为例，通过代码简单介绍app后台基本原理 

php处理请求返回json数据



php返回的json数据

{
    "products": [
        {
            "pid": "1",
            "name": "iPhone 4S",
            "price": "300.00",
            "created_at": "2012-04-29 02:04:02",
            "updated_at": "0000-00-00 00:00:00"
        },
        {
            "pid": "2",
            "name": "Macbook Pro",
            "price": "600.00",
            "created_at": "2012-04-29 02:04:51",
            "updated_at": "0000-00-00 00:00:00"
        },
        {
            "pid": "3",
            "name": "Macbook Air",
            "price": "800.00",
            "created_at": "2012-04-29 02:05:57",
            "updated_at": "0000-00-00 00:00:00"
        },
        {
            "pid": "4",
            "name": "OS X Lion",
            "price": "100.00",
            "created_at": "2012-04-29 02:07:14",
            "updated_at": "0000-00-00 00:00:00"
        }
    ],
    "success": 1
}

app源码



AllProductsActivity.java

public class AllProductsActivity extends ListActivity {

    // Progress Dialog
    private ProgressDialog pDialog;

    // Creating JSON Parser object
    JSONParser jParser = new JSONParser();

    ArrayList<HashMap<String, String>> productsList;

    // url to get all products list
    //向服务器上的get_all_products.php发出请求，然后才能得到json数据
    private static String url_all_products = "http://api.androidhive.info/android_connect/get_all_products.php";

    // JSON Node names
    private static final String TAG_SUCCESS = "success";
    private static final String TAG_PRODUCTS = "products";
    private static final String TAG_PID = "pid";
    private static final String TAG_NAME = "name";

    // products JSONArray
    JSONArray products = null;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.all_products);

        // Hashmap for ListView
        productsList = new ArrayList<HashMap<String, String>>();

        // Loading products in Background Thread
        new LoadAllProducts().execute();

        // Get listview
        ListView lv = getListView();

        // on seleting single product
        // launching Edit Product Screen
        lv.setOnItemClickListener(new OnItemClickListener() {

            @Override
            public void onItemClick(AdapterView<?> parent, View view,
                    int position, long id) {
                // getting values from selected ListItem
                String pid = ((TextView) view.findViewById(R.id.pid)).getText()
                        .toString();

                // Starting new intent
                Intent in = new Intent(getApplicationContext(),
                        EditProductActivity.class);
                // sending pid to next activity
                in.putExtra(TAG_PID, pid);

                // starting new activity and expecting some response back
                startActivityForResult(in, 100);
            }
        });

    }

    // Response from Edit Product Activity
    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        // if result code 100
        if (resultCode == 100) {
            // if result code 100 is received
            // means user edited/deleted product
            // reload this screen again
            Intent intent = getIntent();
            finish();
            startActivity(intent);
        }

    }

    /**
     * Background Async Task to Load all product by making HTTP Request
     * */
    class LoadAllProducts extends AsyncTask<String, String, String> {

        /**
         * Before starting background thread Show Progress Dialog
         * */
        @Override
        protected void onPreExecute() {
            super.onPreExecute();
            pDialog = new ProgressDialog(AllProductsActivity.this);
            pDialog.setMessage("Loading products. Please wait...");
            pDialog.setIndeterminate(false);
            pDialog.setCancelable(false);
            pDialog.show();
        }

        /**
         * getting All products from url
         * */
        protected String doInBackground(String... args) {
            // Building Parameters
            List<NameValuePair> params = new ArrayList<NameValuePair>();
            // getting JSON string from URL
            JSONObject json = jParser.makeHttpRequest(url_all_products, "GET", params);

            // Check your log cat for JSON reponse
            Log.d("All Products: ", json.toString());

            try {
                // Checking for SUCCESS TAG
                int success = json.getInt(TAG_SUCCESS);

                if (success == 1) {
                    // products found
                    // Getting Array of Products
                    products = json.getJSONArray(TAG_PRODUCTS);

                    // looping through All Products
                    for (int i = 0; i < products.length(); i++) {
                        JSONObject c = products.getJSONObject(i);

                        // Storing each json item in variable
                        String id = c.getString(TAG_PID);
                        String name = c.getString(TAG_NAME);

                        // creating new HashMap
                        HashMap<String, String> map = new HashMap<String, String>();

                        // adding each child node to HashMap key => value
                        map.put(TAG_PID, id);
                        map.put(TAG_NAME, name);

                        // adding HashList to ArrayList
                        productsList.add(map);
                    }
                } else {
                    // no products found
                    // Launch Add New product Activity
                    Intent i = new Intent(getApplicationContext(),
                            NewProductActivity.class);
                    // Closing all previous activities
                    i.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
                    startActivity(i);
                }
            } catch (JSONException e) {
                e.printStackTrace();
            }

            return null;
        }

        /**
         * After completing background task Dismiss the progress dialog
         * **/
        protected void onPostExecute(String file_url) {
            // dismiss the dialog after getting all products
            pDialog.dismiss();
            // updating UI from Background Thread
            runOnUiThread(new Runnable() {
                public void run() {
                    /**
                     * Updating parsed JSON data into ListView
                     * */
                    ListAdapter adapter = new SimpleAdapter(
                            AllProductsActivity.this, productsList,
                            R.layout.list_item, new String[] { TAG_PID,
                                    TAG_NAME},
                            new int[] { R.id.pid, R.id.name });
                    // updating listview
                    setListAdapter(adapter);
                }
            });

        }

    }
}

app效果展示