微信小程序通过asp.net访问sql server数据库_微信小程序连接sql server数据库

今天来说一下微信小程序如何通过asp.net访问sql server数据库，因为js代码不宜直接访问数据库，所以要用asp.net的网站来充当一个webapi。这是本人第一次写微信小程序开发的相关文章，不足之处难免。
　　在讲正题前，不得不提到一个重要名词JSON,JSON是一种轻量级的数据交换格式。采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。相信有一定移动端开发基础的人一定对不陌生。很多第三方平台的webapi都通过JSON来共享数据，如图1，通过经纬度查询料某地的天气(网站为devapi.qweather.com，需要先注册然后申请key)，返回的结果就一个JSON。
　　好了，进入正题，首先我们将实现过程分三块，第一块是数据库，即数据层，第二块是webapi，通过asp.net调用数据库，将结果以json格式输出，即使业务层，第三块是微信小程序，微信小程序wx.request来访问webapi，查询数据。为了尽量简洁讲解，这里尽量简化了设计需求。
　　第一块：建立数据库，在sql server上建立一个数据库，新建一张表，这里取名为Product，字段也十分简单，一个Id，用于主键，一个Name用于产品名称，一个Num用于数量。表格建立后，根据表格编写四个最基本存储过程，列出所有数据，添加数据、根据主键删除数据、根据主键修改数据、根据主键查询数据，当然也可在asp.net直接调用。
　　第二块：webapi编码。打开vs.net，新建一个网站，在资源管理器添加一个新项，弹出对话框，选择一般处理程序(如图2)，即扩展名为ashx,这里命名为ProductHandler.ashx。将其设为起始页，运行之，可以看到默认输出了"Hello World",一会我们对其改造。
　　第一步引用一个叫“Newtonsoft.Json”的库文件，我们用它处理json。
　　第二步，在web.config中配置数据库链接，也就是添加一个connectionStrings节点，具体配置如下，读者请根据实际替换Data Source、Initial Catalog等属性。

 <connectionStrings>
    <add name="WebSite" connectionString="Data Source=localhost;Initial Catalog=dbtest;User ID=sa;Password=123"/>
  </connectionStrings>
1
2
3

第三步，新建一个类，它与刚才建立的表名对应的种子类——Product.cs,代码如下

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

/// <summary>
///Product 的摘要说明
/// </summary>
public class Product
{
    public bool IsCorrect;
    public string LastError;
    public List<XProduct> ArrXProduct;
    
    public Product()
	{
		//
		//TODO: 在此处添加构造函数逻辑
		//


	}
}

public class XProduct
{
    //与字段对应
    public int Id = 0;
    public String Name = "";
    public int Num = 0;

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

第四步，打开刚才的ProductHandler.ashx，对其编码如下

<%@ WebHandler Language="C#" Class="ProductHandler" %>

using System;
using System.Web;

using System.Collections.Generic;
using System.Linq;

using System.Web.Services;
using System.Data;
using System.Data.SqlClient;

using Newtonsoft.Json;

using System.Configuration;

public class ProductHandler : IHttpHandler {

    public void ProcessRequest (HttpContext context) {
        //listproduct(context);
        context.Response.ContentType = "text/plain";

        if (context.Request["op"]==null)
        {
            context.Response.Write("未知的操作参数");
            return;
        }
        string op = context.Request["op"].ToString();

        switch (op)
        {
            case "list":
                listproduct(context);
                break;
            case "add":
                Add(context);
                break;
            default:
                context.Response.Write("未知的操作参数");
                break;



        }






        //context.Response.Write(name);



    }

    public void Add(HttpContext context)
    {
        String Name = "";
        int Num = 0;
        string result = "";

        if (context.Request["name"]==null || context.Request["num"]==null)
        {
            result= "参数获取失败";
            context.Response.Write(result);
            return;
        }
        else
        {
            Name = context.Request["name"].ToString();
            Num = int.Parse(context.Request["num"].ToString(), 0);
        }



        SqlConnection conn;
        string sqlconn = ConfigurationManager.ConnectionStrings["WebSite"].ConnectionString;
        conn = new SqlConnection(sqlconn);
        try
        {
            conn.Open();
            SqlCommand cmd = new SqlCommand("p_my_ProductAdd", conn);
            cmd.CommandType = CommandType.StoredProcedure;
            SqlParameter RETURN_VALUEParam = cmd.Parameters.Add("@RETURN_VALUE", SqlDbType.Int, 4);
            RETURN_VALUEParam.Direction = ParameterDirection.ReturnValue;

            SqlParameter NameParam = cmd.Parameters.Add("@Name", SqlDbType.VarChar, 50);
            NameParam.Value = Name;

            SqlParameter NumParam = cmd.Parameters.Add("@Num", SqlDbType.Int);
            NumParam.Value = Num;

            cmd.ExecuteNonQuery();
            cmd.Dispose();
            result = "添加成功";
        }
        catch (SqlException ex)
        {

            result = ex.Message;
        }
        catch (System.Exception ex)
        {
            result = ex.Message;

        }
        finally
        {
            conn.Close();
        }


        context.Response.Write(result);
    }

    private void listproduct(HttpContext context)
    {

        context.Response.ContentType = "text/plain";
        //context.Response.Write("Hello World");
        SqlConnection conn;
        SqlDataReader dr = null;
        string result = "";
        string sqlconn = ConfigurationManager.ConnectionStrings["WebSite"].ConnectionString;

        //conn = new SqlConnection(Application["ConnectString"].ToString());
        conn = new SqlConnection(sqlconn);
        List<XProduct> ArrXProduct = new List<XProduct>();
        Product MyProduct = new Product();
        try
        {
            conn.Open();
            SqlCommand cmd = new SqlCommand("p_my_ProductList", conn);
            cmd.CommandType = CommandType.StoredProcedure;
            SqlParameter RETURN_VALUEParam = cmd.Parameters.Add("@RETURN_VALUE", SqlDbType.Int, 4);
            RETURN_VALUEParam.Direction = ParameterDirection.ReturnValue;

            MyProduct.LastError = "";
            MyProduct.IsCorrect = true;
            dr = cmd.ExecuteReader();
            while (dr.Read())
            {

                XProduct MyXProduct = new XProduct();




                MyXProduct.Id = int.Parse(dr["Id"].ToString());

                MyXProduct.Name = dr["Name"].ToString();

                MyXProduct.Num = int.Parse(dr["Num"].ToString());

                ArrXProduct.Add(MyXProduct);
            }
            MyProduct.ArrXProduct = ArrXProduct;
            dr.Close();
            cmd.Dispose();
        }
        catch (SqlException ex)
        {
            MyProduct.IsCorrect = false;
            MyProduct.LastError = ex.Message;
            ArrXProduct.Clear();
            MyProduct.ArrXProduct = ArrXProduct;


        }
        catch (System.Exception ex)
        {
            MyProduct.IsCorrect = false;
            MyProduct.LastError = ex.Message;
            ArrXProduct.Clear();
            MyProduct.ArrXProduct = ArrXProduct;


        }
        finally
        {
            conn.Close();
        }

        result = JsonConvert.SerializeObject(MyProduct); //将列表及是否正确等信息以JSON格式输出

        context.Response.Write(result);
    }


    public bool IsReusable {
        get {
            return false;
        }
    }

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197

到此api端的代码已经完成，再次运行网站，然后在地址配置参数op=list，可以看到查询结果已经用json的格式输出了。
　　第三块内容启动微信开发者工具，新建一个项目，填写事先申请的app id，这里选择“不使用云开发”和js-基础版的模板。会自动得index和log的page,将log对应的三个文件全部删除，同时在app.json的列表将log的配置删除，删除index.wxml中的布局代码，删除index.wxss中的样式表代码，删除index.js中的无用代码，只保留onLoad等基本函数，和data，交将data定义的变量也清除，接着点击微信开发者工具右上角的详情，切换到本地设置标签，勾选“不校验合法域名”这个选项(如图3)。完成之后就以编码了（注意本文省略样式表的代码）。
　　第一步，打开index.js，代码如下，注意将域名替换你自己的，下同。

// index.js


Page({
  data: {
    List:[]
   
  },
   /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.listproudct();
  },

  listproudct()
  {
    var that=this;
    wx.request({
      url: 'http://localhost:10524/ProductHandler.ashx',
      data:{
       op:"list"
      },
      success:function(res){
        console.log(res.data.ArrXProduct);
        // that.data.List=res.data.ArrXProduct;
         that.setData({
           List:res.data.ArrXProduct
         })
        for (var i=0;i<that.data.List.length;i++)
        {
          console.log(that.data.List[i].Name)
        }


      }
      
      
    
    })
  }
 
  
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

第二步，打开index.wxml文件，布局代码如下

<navigator url="../addproduct/addproduct"><button type="primary">添加产品</button></navigator>

<scroll-view scroll-x="true">
  <view>
    <view class="list-item" wx:for="{{List}}" wx:for-item="prdouct">
    <text>名称：{{prdouct.Name}}数量：{{prdouct.Num}}</text>
    </view>
  </view>
</scroll-view>
1
2
3
4
5
6
7
8
9

接着我们建立一个addproduct的page文件，用它向数据库添加文件，同样的也用通过wx.request来完成。
　　第三步，打开addproduct.js,代码如下

// pages/addproduct/addproduct.js
var num;
var name;
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  },

  bindproductinput(e)
  {
    this.name=e.detail.value
  },
  bindnuminput(e)
  {
    this.num=e.detail.value
  },
  insertproduct()
  {
    var that=this;
    wx.request({
      url: 'http://localhost:10524/ProductHandler.ashx',
      data:{
       op:"add",
       name:that.name,
       num:that.num
      },
      success:function(res){
        console.log(res.data);
        wx.showToast({
          title: res.data,
        })
       

      }
      
      
    
    })
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100

第四步,打开addproduct.wxml文件,布局代码如下

<view class="container">
<view>产品名称:<input placeholder="请输入产品名称" class="box" bindinput="bindproductinput"/></view>
<view>产品数量:<input placeholder="请输入产品数量" class="box" type="number" bindinput="bindnuminput"/></view>
<button type="primary" bind:tap="insertproduct">提交</button>
<navigator url="../index/index"><button type="primary">返回列表</button></navigator>
</view>
1
2
3
4
5
6

在微信开发者工具自带的模拟器中运行，我们可以在index页面看到产品列表，单击添加产品按钮，跳转到addproduct，我们可以添加新产品。一个最简单的微信小程序通过asp.net访问sql server代码就完成了，当然由于是localhost,所以只能在自带的模拟器中运行，如果要用有开发者权限的手机“真机调试”，还得组建一个局域网，发布asp.net的网站，然后布置到iis中，使充当服务器的电脑和手机处于同一局域网中。如果发布到互联网，要记得登录到微信公众号管理员后台，添加自己的服务器域名到白名单。如何组件局域网，发布到互联网请读者自行参考文档。
　源码放到了csdn上。请自行下载https://download.csdn.net/download/wstcl/88938668?spm=1001.2014.3001.5501。