|
开发工具：Visual Studio2017
数据库：mongodb
开发框架：Devextreme
运用技术：ajax，jquery，web服务
例子：通过在input框里输入对应id号，显示相关user信息（姓名，爱好，年龄）
home.dxview（dev框架的前端代码） ：
<div data-options="dxView : { name: 'home', title: 'Home' } " >
<div class="home-view dx-content-background" data-options="dxContent : { targetPlaceholder: 'content' } " >
<div id="container" style="margin:30px auto">
<div id="inputId"></div> //输入框
<div id="subBtn"></div> //提交按钮
<br />
<br />
<br />
姓名：<div id="name"></div> //信息显示区
爱好：<div id="hobby"></div>
年龄：<div id="age"></div>
</div>
</div>
</div>
【这个框架的方便之处就是解决了平台兼容性问题，只需要用html+css+jquery就可以打造可运行在ios、Android和windows的系统软件，所以前端代码的主内容就是html（框架问题，我在home.js文件里定义各个div的控件类型及属性）】
home.js (jquery)
Application1.home = function (params) {
"use strict";
function get() {
//实例化各个控件
$("#inputId").dxTextBox({
placeholder: "please input one user ID："
})
$("#name").dxTextBox({
placeholder: "name"
})
$("#hobby").dxTextBox({
placeholder: "hobby"
})
$("#age").dxTextBox({
placeholder: "age"
})
$("#subBtn").dxButton({
text: "提交",
onClick: function () {
var url = "http://localhost:62615/WebService1.asmx/GetUsers" //此url的获取，在点开webServer服务器的页面时候会出现，webServer服务器端代码编写在下面
var val = $("#inputId").dxTextBox("instance").option("value")
if (Number(val) >= 5) { //数据库里面只有4个实例数据
alert("没找到")
}
$.ajax
({
type: "post",
url: url,
data: { "uid": val }， //uid被输入框内容指定
dataType: "json",
success: function (data) {
if (data == null) {
alert("not found")
} else {
var dataObj = data
$.each(dataObj, function (index, item) { //遍历后台传入的data（json格式）
$("#name").dxTextBox("instance").option("value", item.name)
$("#hobby").dxTextBox("instance").option("value", item.hobby)
$("#age").dxTextBox("instance").option("value", item.age)
})
}
},
error: function (XMLHttpRequest, status, error) {
alert("访问不到服务器！", "error", 3000);
}
});
}
})
}
var viewModel = {
viewShown: function () {
get()
}
};
return viewModel;
};
webServer（服务）：
【新建一个webServer项目，作为我们软件的服务器端，负责连接mongodb，处理数据】
【这里打开的页面，点击对应方法，显示的页面地址直接作为上面ajax的url地址】
【这里需要引用
using MongoDB.Bson;
using MongoDB.Driver;
using MongoDB.Driver.Linq;//LINQ支持
using System.Web.Script.Serialization;
using MongoDB.Driver.Builders;
可去nuget包自行下载
】
//查询指定字段值
//连接数据库
private const string connectionString = "mongodb://localhost:27017/";
private const string dbName = "mydb";
private static MongoClient client = new MongoClient(connectionString);
private static MongoServer server = client.GetServer();
private static MongoDatabase db = server.GetDatabase(dbName);
MongoCollection<BsonDocument> collection = db.GetCollection("read_test");
//数据读取
[WebMethod]
public void GetUsers(string uid)
{
var linquery = from e in collection.AsQueryable<Users>()
where e.uid == uid
select e;
var returnValue = linquery.ToList();
string json = ToJSON(returnValue);
Context.Response.Write(json);
}
public class Users
{
public ObjectId _id { get; set; }
public string uid { get; set; }
public string name { get; set; }
public string hobby { get; set; }
public int age { get; set; }
}
//对数据序列化，返回JSON格式
public string ToJSON(object obj)
{
JavaScriptSerializer serializer = new JavaScriptSerializer();
return serializer.Serialize(obj);//json 序列化对象数组
}
mongodb图形化数据库：
【写此文章为我这一个多月来研究的知识打一个断点。对于刚毕业的我，我的技术知识是稀少的散状的，只能开发一个简单的系统，而且也并不会开发手机app。此番学习是我一个初级的技术总结，并且也开发了我对新知识的学习方法。只要是学习，能增强自身价值的，花多少时间都是有意义的。这过程中可以钻钻牛角，但钻不出来还是要多与人交流，勤学好问】
| 
转播
