1. 描述
最近项目需要开发微信手机端,本来用的架构是bootstrap+jquery,但每次数据绑定前台的时候jquery都把javascript代码和html代码混着写,违背业务与界面相分离的原则,希望找个轻量级的数据绑定js架构,觉得vue.js是个不错的选择,这里做个小demo把servlet+bootstrap+jquery+vue整合在一起。
2. 所需jar包
3. 项目结构
4. 创建servlet
<?xml version="1.0" encoding="UTF-8"?> VueDatagridLoadDataServletLoadDataServletcom.vue.datagrid.LoadDataServletLoadDataServlet/LoadDataServlet.do
1
2
3
4
5
6
7
8
9
10
11
12
13
14
5. 编写servlet代码
package com.vue.datagrid; import java.io.IOException; import java.io.PrintWriter; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.alibaba.fastjson.JSON; import com.alibaba.fastjson.JSONArray; import com.alibaba.fastjson.JSONObject; public class LoadDataServlet extends HttpServlet { private static final long serialVersionUID = 1L; public LoadDataServlet() { super(); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-8;pageEncoding=UTF-8"); response.setCharacterEncoding("UTF-8"); Goods goods1 = new Goods(); goods1.setId("1"); goods1.setBarcode("101"); goods1.setName("中华面粉"); goods1.setShortName("面粉"); Goods goods2 = new Goods(); goods2.setId("2"); goods2.setBarcode("102"); goods2.setName("中华面包"); goods2.setShortName("面包"); Goods goods3 = new Goods(); goods3.setId("3"); goods3.setBarcode("103"); goods3.setName("中华面条"); goods3.setShortName("面条"); List goodList = new ArrayList(); goodList.add(goods1); goodList.add(goods2); goodList.add(goods3); PrintWriter out = response.getWriter(); try { String json = JSONObject.toJSONString(goodList); System.out.println("json:" + json); out.write(json); } catch (Exception e) { e.printStackTrace(); } finally { out.flush(); out.close(); } } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
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
6. 编写页面代码
页面代码有个坑,弄了很久才弄出来,但还是不知所以然。在ajax调用后台servlet时,已经设置了datatype:”json”,但servlet的printwriter处理后response的仍然是“text”,需要在success后加上JSON.parse(data)把字符串转成JSON类型,希望有哪位大神可以告诉缘由和告诉我怎么可以response JSON类型到前台。
Vue Bind DataVue demo
ID | 名称 | 条形码 | 简称 |
---|---|---|---|
{{goods.id}} | {{goods.name}} | {{goods.barcode}} | {{goods.shortName}} |
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
7. 运行程序