温湿度上报管理系统
1.开发平台与背景
2.硬件准备
3.WPF登录界面开发
4.数据库开发
4.WPF上位机开发
5.ASP.net网页开发
一、开发平台
由于最近需要做一个物联网场景的应用,花了5天时间做了一个简单的物联网综合管理平台,借此机会分享给各位参考和学习。
开发平台使用的是Visual Studio2019;虚拟串口使用“Configure Virtual Serial Port Driver”工具
虚拟串口数据生成使用“Modbus Slave”,接受串口数据测试使用“Modbus Poll”。
二、硬件准备(可选)
由于时间紧迫,尚未来得及写单片机串口,项目调试全程使用虚拟串口工具;不会写底层硬件代码可购买温湿度变送器(RS485),采用Modbus-rtu协议,直接串口输出温湿度数据。
三、登录界面开发(WPF应用程序)
需要使用的控件:
登录界面:textbox1(账户)、textbox2(密码)、Button1(登录)、Button2(注册)、若干text文本提示和背景图片资源
注册界面:若干textbox收集用户信息、若干text文本提示和背景图片资源、Button1(注册)、Button2(取消)
最后实现效果:
登录界面
注册界面
第一步:因为使用Modbus-rtu协议,需要先下载插件“Nmodbus4”
菜单栏---工具(T)----Nuget包管理器---管理解决方案的Nuget程序包
第二步:放入images图片资源到项目中
第三步:创建一个存储数据的数据库(需要提前安装SQL Server环境)
打开服务器资源管理器,创建本地数据库、新建表
贴出创建注册表代码
CREATE TABLE [dbo].[Users] (
[UserId] INT IDENTITY (1, 1) NOT NULL,
[UserName] NVARCHAR (50) NOT NULL,
[UserPwd] NVARCHAR (50) NOT NULL,
[Sex] [nchar](2) NULL,
[NativePlace] NCHAR(20) NULL,
[Hobby] [nvarchar](50) NULL
PRIMARY KEY CLUSTERED ([UserId] ASC),
[Suggest] NCHAR(100) NULL,
);
接下来开始设计界面
工程项目名字“IntegratedPJ75”
登录WPF窗口命名“UserLogin”
UserLogin.XMAL
<Window x:Class="IntegratedPJ75.UserLogin"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:IntegratedPJ75"
mc:Ignorable="d"
Title="用户登录,用户注册界面" Height="581.992" Width="1089.56" Loaded="Window_Loaded_1">
<Grid>
<Grid.Background>
<ImageBrush ImageSource="images/gourd.png"/>
</Grid.Background>
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="176*"/>
<ColumnDefinition Width="74*"/>
<ColumnDefinition Width="586*"/>
<ColumnDefinition Width="85*"/>
<ColumnDefinition Width="161*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="25*"/>
<RowDefinition Height="29*"/>
<RowDefinition Height="169*"/>
<RowDefinition Height="46*"/>
<RowDefinition Height="7*"/>
</Grid.RowDefinitions>
<Grid.Background>
<SolidColorBrush Color="Black" Opacity="0.3"/>
</Grid.Background>
<!--登陆-->
<Grid x:Name="grdLogin" Visibility="Hidden" Grid.Row ="2" Grid.Column ="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<Border BorderBrush="Blue" Opacity="0.6" CornerRadius="20" BorderThickness="2" Background="#FF17547C">
</Border>
<Border Background="#015CAF" Visibility="Visible" Margin="20" CornerRadius="20" BorderThickness="2" BorderBrush="#FF002EFF">
<Grid Margin="20">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="137*"/>
<ColumnDefinition Width="115*"/>
<ColumnDefinition Width="250*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="38*"/>
<RowDefinition Height="29*"/>
<RowDefinition Height="28*"/>
<RowDefinition Height="32*"/>
</Grid.RowDefinitions>
<Image HorizontalAlignment="Center" Grid.RowSpan="1" Grid.ColumnSpan="3" VerticalAlignment="Stretch" Source="images/image_user.png" Grid.Column="0" />
<Label Content="用户名:" Foreground="White" Grid.Column="0" Grid.Row="1" FontSize="30" HorizontalContentAlignment="Right" VerticalContentAlignment="Center"></Label>
<TextBox x:Name="txtLoginUserName" Grid.Column="1" Grid.Row="1" Grid.ColumnSpan="2" FontSize="30" HorizontalAlignment="Stretch" VerticalAlignment="Center" Background="#FF4084C3" BorderBrush="{x:Null}" />
<Label Content="密 码:" Foreground="White" Grid.Column="0" Grid.Row="2" FontSize="30" HorizontalContentAlignment="Right" VerticalContentAlignment="Center"></Label>
<PasswordBox x:Name="pwdLoginUserPwd" Grid.Column="1" Grid.Row="2" Grid.ColumnSpan="2" FontSize="30" HorizontalAlignment="Stretch" VerticalAlignment="Center" Background="#FF4084C3" Padding="0" SelectionOpacity="0" BorderBrush="{x:Null}" />
<Button Grid.Column="2" Click="btnRegisteredShow_Click_1" x:Name="btnRegisteredShow" Content="注册" FontSize="23" Foreground="White" Grid.Row="3" Width="150" Height="40" HorizontalAlignment="Center" VerticalAlignment="Center" Background="#0085FE"/>
<Button Grid.Column="0" Click="btnLogin_Click_1" x:Name="btnLogin" Content="登录" FontSize="23" Foreground="White" Grid.Row="3" Grid.ColumnSpan="2" Width="150" Height="40" HorizontalAlignment="Center" VerticalAlignment="Center" Background="#FFF0A401"></Button>
</Grid>
</Border>
</Grid>
<!--注册-->
<Grid x:Name="grdRegistered" Grid.Row ="1" Grid.RowSpan="3" Visibility="Visible" Grid.Column ="1" Grid.ColumnSpan="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<Border BorderBrush="Blue" Opacity="0.6" CornerRadius="20" BorderThickness="2" Background="#FF17547C">
</Border>
<Border Background="#015CAF" Visibility="Visible" Margin="20" CornerRadius="20" BorderThickness="2" BorderBrush="#FF002EFF">
<Grid Margin="20">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="172*"/>
<ColumnDefinition Width="62*"/>
<ColumnDefinition Width="185*"/>
<ColumnDefinition Width="242*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="61*"/>
<RowDefinition Height="52*"/>
<RowDefinition Height="52*"/>
<RowDefinition Height="52*"/>
<RowDefinition Height="52*"/>
<RowDefinition Height="52*"/>
<RowDefinition Height="52*"/>
<RowDefinition Height="52*"/>
<RowDefinition Height="52*"/>
</Grid.RowDefinitions>
<Image HorizontalAlignment="Center" Grid.RowSpan="3" VerticalAlignment="Stretch" Source="images/image_user.png" Grid.Column="3" Stretch="None" Margin="81,0" Width="80" />
<Label Content="用户名:" Foreground="White" Grid.Column="0" Grid.Row="0" FontSize="30" HorizontalContentAlignment="Right" VerticalContentAlignment="Center" Margin="-28,0,28,0"></Label>
<TextBox Grid.Column="1" x:Name="txtRegisteredUserName" Grid.Row="0" Grid.ColumnSpan="2" FontSize="30" HorizontalAlignment="Stretch" VerticalAlignment="Center" Background="#FF4084C3" BorderBrush="{x:Null}" Height="40" Margin="0,6" />
<Label Content="密 码:" Foreground="White" Grid.Column="0" FontSize="30" HorizontalContentAlignment="Right" VerticalContentAlignment="Center" Margin="-28,50,28,2" Grid.RowSpan="2"/>
<PasswordBox Grid.Column="1" x:Name="pwdRegisteredUserPwd1" Grid.Row="1" Grid.ColumnSpan="2" FontSize="30" HorizontalAlignment="Stretch" VerticalAlignment="Center" Background="#FF4084C3" BorderBrush="{x:Null}" Height="40" Margin="0,2" />
<Label Content="确认密码:" Foreground="White" Grid.Column="0" Grid.Row="1" FontSize="30" HorizontalContentAlignment="Right" VerticalContentAlignment="Center" Margin="8,42,60,2" Grid.ColumnSpan="2" Grid.RowSpan="2"/>
<PasswordBox Grid.Column="1" x:Name="pwdRegisteredUserPwd2" Grid.Row="2" Grid.ColumnSpan="2" FontSize="30" HorizontalAlignment="Stretch" VerticalAlignment="Center" Background="#FF4084C3" Padding="0" SelectionOpacity="0" BorderBrush="{x:Null}" Height="38" Margin="0,3" />
<Label Content="性 别:" Foreground="White" Grid.Column="0" Grid.Row="2" FontSize="30" HorizontalContentAlignment="Right" VerticalContentAlignment="Center" Margin="-28,41,28,3" Grid.RowSpan="2"></Label>
<RadioButton Content="男" x:Name="rbtnBoy" FontSize="30" Height="40" Grid.Column="1" Foreground="White" HorizontalAlignment="Left" Grid.Row="3" VerticalAlignment="Center" Margin="0,2" Width="46"/>
<RadioButton Content="女" x:Name="rbtnGirl" FontSize="30" Height="40" Grid.Column="2" Foreground="White" HorizontalAlignment="Left" Grid.Row="3" VerticalAlignment="Center" Margin="0,2" Width="46"/>
<Label Content="籍 贯:" Foreground="White" Grid.Column="0" Grid.Row="4" FontSize="30" HorizontalContentAlignment="Right" VerticalContentAlignment="Center" Margin="-28,0,28,0"></Label>
<ComboBox x:Name="cboOriginType" SelectionChanged="cboOriginType_SelectionChanged_1" Grid.ColumnSpan="2" Grid.Column="1" FontSize="20" Height="30" Width="120" HorizontalAlignment="Left" Background="#FF4084C3" Grid.Row="4" VerticalAlignment="Center" Margin="0,7" >
<ListBoxItem Content="省"/>
<ListBoxItem Content="直辖市"/>
<ListBoxItem Content="自治区"/>
</ComboBox>
<ComboBox x:Name="cboOriginName" IsEnabled="False" Grid.ColumnSpan="1" Grid.Column="2" FontSize="20" Height="30" Width="120" HorizontalAlignment="Right" Background="#FF4084C3" Grid.Row="4" VerticalAlignment="Center" Margin="0,7" />
<Label Content="爱 好:" Foreground="White" Grid.Column="0" Grid.Row="4" FontSize="30" HorizontalContentAlignment="Right" VerticalContentAlignment="Center" Margin="-28,42,28,2" Grid.RowSpan="2"></Label>
<CheckBox Content="体育运动" x:Name="chkSports" Grid.Column="1" FontSize="25" Height="40" Foreground="White" HorizontalAlignment="Left" Grid.Row="5" VerticalAlignment="Center" Grid.ColumnSpan="2" Margin="0,2" Width="117"/>
<CheckBox Content="上网聊天" x:Name="chkInternetChat" Grid.Column="2" FontSize="25" Height="40" Foreground="White" HorizontalAlignment="Center" Grid.Row="5" VerticalAlignment="Center" Margin="64,2,4,2" Width="117"/>
<CheckBox Content="" x:Name="chkHobbiesOther" Grid.Column="3" FontSize="25" Height="40" Foreground="White" HorizontalAlignment="Left" Grid.Row="5" VerticalAlignment="Center" Margin="0,2" Width="17"/>
<TextBox Grid.Column="3" x:Name="txtHobbiesOther" Grid.Row="5 " FontSize="30" HorizontalAlignment="Stretch" VerticalAlignment="Center" Background="#FF4084C3" Margin="19,2,0,2" BorderBrush="{x:Null}" Height="40" />
<Label Content="建 议:" Foreground="White" Grid.Column="0" Grid.Row="5" FontSize="30" HorizontalContentAlignment="Right" VerticalContentAlignment="Center" Margin="-28,42,28,2" Grid.RowSpan="2"></Label>
<TextBox Grid.Column="1" x:Name="txtSuggest" Grid.Row="6" Grid.ColumnSpan="3" Grid.RowSpan="2" FontSize="30" TextWrapping="Wrap" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="#FF4084C3" BorderBrush="{x:Null}" Margin="0,5,0,5" />
<Button Grid.Column="3" Click="btnRegisteredCancel_Click_1" x:Name="btnRegisteredCancel" Content="取消" FontSize="23" Foreground="White" Grid.Row="8" Width="150" Height="40" HorizontalAlignment="Center" VerticalAlignment="Center" Background="#0085FE" Margin="46,2" />
<Button Grid.Column="0" Click="btnRegistered_Click_1" x:Name="btnRegistered" Content="注册" FontSize="23" Foreground="White" Grid.Row="8" Grid.ColumnSpan="2" Width="150" Height="40" HorizontalAlignment="Center" VerticalAlignment="Center" Background="#FFF0A401" ></Button>
</Grid>
</Border>
</Grid>
<!--欢迎-->
<Grid x:Name="grdWelcome" MouseDown="grdWelcome_MouseDown_1" Visibility="Hidden" Grid.Row ="0" Grid.Column ="0" Grid.ColumnSpan="5" Grid.RowSpan="4" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<Grid.Background>
<ImageBrush ImageSource="images/welcome.png"/>
</Grid.Background>
<Button Content="温湿度监控" HorizontalAlignment="Left" Margin="491,416,0,0" VerticalAlignment="Top" Height="40" Width="93" FontSize="16" Click="btnWelcome_Click_1" Background="#FFF0A401"></Button>
</Grid>
</Grid>
</Grid>
</Window>
UserLogin.xmal.cs
using System;
using System.Collections.Generic;
using System.Data.SqlClient;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
namespace IntegratedPJ75
{
/// <summary>
/// UserLogin.xaml 的交互逻辑
/// </summary>
public partial class UserLogin : Window
{
public UserLogin()
{
InitializeComponent();
}
//用户名
private string UserName = "";
//用户密码
private string UserPwd = "";
//用户性别
private string UserGender = "";
//用户籍贯
private string UserOriginName = "";
//用户爱好
private string UserHobbies = "";
//用户建议
private string UserSuggest = "";
#region Welcome
private void grdWelcome_MouseDown_1(object sender, MouseButtonEventArgs e)
{
GridShow(grdLogin);
}
#endregion
#region Registered
private void btnRegisteredCancel_Click_1(object sender, RoutedEventArgs e)
{
GridShow(grdLogin);
txtRegisteredUserName.Text = "";
pwdRegisteredUserPwd1.Password = "";
pwdRegisteredUserPwd2.Password = "";
}
private void btnRegistered_Click_1(object sender, RoutedEventArgs e)
{
//信息完整检测
if (txtRegisteredUserName.Text == "" ||
pwdRegisteredUserPwd1.Password.ToString() == "" ||
pwdRegisteredUserPwd2.Password.ToString() == "")
{
MessageBox.Show("请填写完整!", "提示", MessageBoxButton.OK, MessageBoxImage.Information);
return;
}
//两次密码一致性检测
if (pwdRegisteredUserPwd1.Password.ToString() !=
pwdRegisteredUserPwd2.Password.ToString())
{
MessageBox.Show("两次密码不一致,请重新输入!", "提示", MessageBoxButton.OK, MessageBoxImage.Information);
return;
}
//注册成功===========================
//用户名
UserName = txtRegisteredUserName.Text;
//密码
UserPwd = pwdRegisteredUserPwd1.Password.ToString();
//性别
if (rbtnBoy.IsChecked != null)
{
UserGender = (((bool)rbtnBoy.IsChecked) ? "男" : "女");
}
else
{
UserGender = "女";
}
//爱好
CheckBox[] HobbiesS = new CheckBox[] { chkSports, chkInternetChat, chkHobbiesOther };
UserHobbies = "";
for (int i = 0; i < HobbiesS.Length; i++)
{
CheckBox chk = HobbiesS[i];
if (chk.IsChecked == true && chk.Content != "")
{
UserHobbies += chk.Content.ToString();
}
else if (chk.IsChecked == true)
{
UserHobbies += txtHobbiesOther.Text;
}
}
//籍贯
UserOriginName = "";
if (cboOriginName.IsEnabled == true)
{
UserOriginName = cboOriginName.Text;
}
//建议
UserSuggest = txtSuggest.Text;
MessageBox.Show(
"用户名:" + UserName + "\r\n" +
"性 别:" + UserGender + "\r\n" +
"籍 贯:" + UserOriginName + "\r\n" +
"爱 好:" + UserHobbies + "\r\n" +
"建 议:" + UserSuggest + "\r\n" +
"注册成功!", "提示", MessageBoxButton.OK, MessageBoxImage.Information);
GridShow(grdLogin);
txtRegisteredUserName.Text = "";
pwdRegisteredUserPwd1.Password = "";
pwdRegisteredUserPwd2.Password = "";
//需要更改数据库连接字符------------------------------------------------------------
string connString = @"Data Source=(localdb)\Pooling=False;";
string sql = String.Format("INSERT INTO Users(UserName,UserPwd,Sex,NativePlace," +
"Hobby,Suggest) VALUES(N'{0}',N'{1}',N'{2}',N'{3}',N'{4}',N'{5}')",
UserName, UserPwd, UserGender, UserOriginName, UserHobbies, UserSuggest);//SQL语句
using (SqlConnection conn = new SqlConnection(connString))
{
conn.Open();
SqlCommand comm = new SqlCommand(sql, conn);//command对象
int n = comm.ExecuteNonQuery();//执行添加命令,返回值为更新的行数
if (n > 0)
{
MessageBox.Show(
"用户名:" + UserName + "\r\n" +
"性 别:" + UserGender + "\r\n" +
"籍 贯:" + UserOriginName + "\r\n" +
"爱 好:" + UserHobbies + "\r\n" +
"建 议:" + UserSuggest + "\r\n" +
"注册成功!", "提示", MessageBoxButton.OK, MessageBoxImage.Information);
}
else
MessageBox.Show(
"注册失败!", "提示", MessageBoxButton.OK, MessageBoxImage.Information);
}
}
/// <summary>
/// 籍贯类型选择事件
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void cboOriginType_SelectionChanged_1(object sender, SelectionChangedEventArgs e)
{
string[] OriginTypeName = new string[0];
switch (cboOriginType.SelectedIndex)
{
case 0:
{
//省
OriginTypeName = new string[]{
"河北省",
"山西省",
"辽宁省",
"吉林省",
"黑龙江省",
"江苏省",
"浙江省",
"安徽省",
"福建省",
"江西省",
"山东省",
"河南省",
"湖北省",
"湖南省",
"广东省",
"海南省",
"四川省",
"贵州省",
"云南省",
"陕西省",
"甘肃省",
"青海省",
"台湾省"
};
}
break;
case 1:
{//直辖市
OriginTypeName = new string[] {
"北京",
"天津",
"上海",
"重庆"
};
}
break;
case 2:
{
//自治区
OriginTypeName = new string[] {
"新疆维吾尔族自治区",
"广西壮族自治区",
"宁夏回族自治区",
"内蒙古自治区",
"西藏自治区"
};
}
break;
default:
break;
}
if (OriginTypeName.Length > 0)
{
cboOriginName.ItemsSource = OriginTypeName;
if (cboOriginName.IsEnabled == false)
{
cboOriginName.IsEnabled = true;
}
}
else
{
cboOriginName.IsEnabled = false;
}
}
#endregion
#region Login
private void btnRegisteredShow_Click_1(object sender, RoutedEventArgs e)
{
GridShow(grdRegistered);
txtLoginUserName.Text = "";
pwdLoginUserPwd.Password = "";
}
private void btnLogin_Click_1(object sender, RoutedEventArgs e)
{
//需要更改数据库连接字符------------------------------------------------------------
string connString = @"Data Source=(localdb)\ProjectsXXXPooling=False;";
//创建数据库连接对象
SqlConnection conn = new SqlConnection(connString);
string sql = String.Format("select count(*)from [Users] where UserName='{0}'and UserPwd='{1}'", txtLoginUserName.Text, pwdLoginUserPwd.Password);
try
{
conn.Open();
SqlCommand comm = new SqlCommand(sql, conn);
int n = (int)comm.ExecuteScalar();//执行查询语句,返回匹配的行数
if (n >= 1)
{
//登陆成功
GridShow(grdWelcome);
txtLoginUserName.Text = "";
pwdLoginUserPwd.Password = "";
}
else
{
MessageBox.Show("您输入的用户名或密码错误!请重试", "登录失败", MessageBoxButton.OK, MessageBoxImage.Error);
}
}
catch (Exception ex)
{
MessageBox.Show(ex.Message, "操作数据库出错", MessageBoxButton.OK, MessageBoxImage.Error);
}
finally { conn.Close(); }
}
#endregion
private void GridShow(Grid grd)
{
grdRegistered.Visibility = Visibility.Hidden;
grdLogin.Visibility = Visibility.Hidden;
grdWelcome.Visibility = Visibility.Hidden;
grd.Visibility = Visibility.Visible;
}
private void Window_Loaded_1(object sender, RoutedEventArgs e)
{
GridShow(grdLogin);
}
private void btnWelcome_Click_1(object sender, RoutedEventArgs e)
{
UserLogin userlogin = new UserLogin();
this.Close();
}
}
}
注意:126行和258行需要更改字符串连接字段(否则无法连接到数据库) 脱离数据库只能在内存中存储注册信息。
string connString = @"Data Source=(localdb)\ProjectsV13;Initial Catalog=Mydata;Integrated Security=True;Pooling=False;";
获取方法:打开服务器资源管理器-右键数据库-属性-即可得到连接字符串“Data Source..............."
敬请关注 持续整理更新中............