2018年6月13日 By mikel 分类: 项目管理

来源: GitHub版本控制使用(命令行实际操作图解Git使用方法) – CSDN博客

Git是一款免费、开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目

Git的优势: (说到优势,那么自然是相对与SVN而言的)

  1. 版本库本地化,支持离线提交,相对独立不影响协同开发。每个开发者都拥有自己的版本控制库,在自己的版本库上可以任意的执行提交代码、创建分支等行为。例如,开发者认为自己提交的代码有问题?没关系,因为版本库是自己的,回滚历史、反复提交、归并分支并不会影响到其他开发者。
  2. 更少的“仓库污染”。git对于每个工程只会产生一个.git目录,这个工程所有的版本控制信息都在这个目录中,不会像SVN那样在每个目录下都产生.svn目录。
  3. 把内容按元数据方式存储,完整克隆版本库。所有版本信息位于.git目录中,它是处于你的机器上的一个克隆版的版本库,它拥有中心版本库上所有的东西,例如标签、分支、版本记录等。
  4. 支持快速切换分支方便合并,比较合并性能好。在同一目录下即可切换不同的分支,方便合并,且合并文件速度比SVN快。
  5. 分布式版本库,无单点故障,内容完整性好。内容存储使用的是SHA-1哈希算法。这能确保代码内容的完整性,确保在遇到磁盘故障和网络问题时降低对版本库的破坏。

Git的安装方式在windows下安装需要下载一个git的软件,在linux下相对方便,只需要一条指令,Git安装后的配置网上也有一堆的教程,就不详细说了。

下面说下Git的基本使用:

一、建立远程仓库:
要使用git,首先得有一个远程仓库吧,下面是在自己的主页中新建一个远程仓库:
ps:其中仓库类型要选择public(公开),私有的是要收费的
这里写图片描述
这里写图片描述

建立远程仓库之后会有这样一个页面,点击箭头所指按钮,拷贝仓库地址: (这个地址一会要用)
这里写图片描述

通过命令 git init 把当前目录变成git可以管理的仓库:
首先创建一个文件,文件内容为111111
这里写图片描述

二、基本的推送功能:
使用 git init 指令,这时候你当前 TestGit 目录下会多了一个 .git 的目录,这个目录是Git来跟踪管理版本的。 .git 文件夹里面的任何文件都不能动
这里写图片描述

首先使用 add 指令,将当前更改或者新增的文件加入到Git的索引中,加入到Git的索引中就表示记入了版本历史中,这也是提交之前所需要执行的一步,(在第一条指令前少了一个 git add file 命令)
其次使用 commit 指令,提交当前工作空间的修改内容到本地版本库
然后 remote 把本地版本库与远程仓库建立联系
最后使用 push 指令,把本地版本推送到远端仓库
这里写图片描述

接下来使用 status 命令,查看本地提交情况,(下面是没有需要提交的)
然后在文件的最后追加一行 222222
使用 diff 指令,查看之前的文件与现在的文件有什么改变(文件增加了一行内容)
这里写图片描述

再次使用status指令查看提交状态,发现有一个文件做了修改,并且没有添加到Git索引中(因为状态是红色的)
接着使用三步,再次把修改提交,并推送到远端仓库
这里写图片描述

三、版本回退:
按照上面的步骤我们再在文件最后增加一行 “333333”;至此,我们已经做了三次修改,并且都推送到远端仓库中了,下面的图可以看出
这里写图片描述

现在我已经对文件file做了三次修改了,那么我现在想查看下历史记录,如何查呢?我们现在可以使用命令 log, 演示如下所示:
这里写图片描述

精简的日志信息,可以使用 git log –pretty=oneline 指令
这里写图片描述

现在我发现刚提交的添加的333333有问题,我想回到添加333333之前的状态,也就是只有 111111 222222这两行的状态,可以使用 reset 指令
这里写图片描述

再次查看提交日志,发现提交333333 的日志没了,这个时候 file 中已经没有333333了
这里写图片描述

但是现在的问题假如我想回到只有111111的状态,可以通过 git reset –hard HEAD^^,这不是很笨吗?或者
我发现之前的333333是有用的,我有怎么回到有333333的状态呢?
这时候可以通过 reflog 指令获得每次提交的版本号,演示如下:
这里写图片描述

git reset –hard 版本号 ,回退到任意一次提交状态
这里写图片描述

下面是 log 与 reflog 的区别:可以看到 log 只能查看 commit(提交)记录,并不是所有记录,而 reflog 指令可以查看版本库的任何记录,包括回退记录
这里写图片描述

如果在 commit 之前,想要返回之前的状态,可以使用checkout指令
具体用法如下:
1、例如在file后面追加一行444444, file被修改后,还没有使用add命令添加到Git索引中
这里写图片描述

使用 git checkout – file (file是想要回退的文件,可以换成其他的) 把修改除去。
这里写图片描述

2、再次在 file 尾部添加 444444, 并且使用了 git add 之后
这里写图片描述

checkout 之后,修改并没有消失
这里写图片描述

再次添加 555555
这里写图片描述
这里写图片描述

没办法了,只有提交了
这里写图片描述

提交之后还可以回退到没有 444444 的版本:
这里写图片描述
这里写图片描述
当然除了这一种办法,还可以在 commit (提交)之前,自己在file中把 444444 删除了,然后再 commit 一次就可以了。

四、删除与恢复功能:
新建一个 test 文件,把test推送到远程仓库中
这里写图片描述

新增了一个文件 test :
这里写图片描述

可以在工作区中直接删除 test 来测试:
这里写图片描述

使用 git checkout – test(已删除的文件名)来回复test:
这里写图片描述

再试试另一种不能恢复的删除方式:(删除之后提交一次,就彻底地把 test 从版本库中删除了)
这里写图片描述

五、下载功能:
在任意一个目录下(即使没有之前的 .git 版本库),可以使用 clone 指令,克隆任意一个存在的远程仓库到本地
这里写图片描述

下面大致总结一下上面讲到的指令:

git init 当前的目录变成可以管理的git仓库,生成隐藏.git文件。
git add XX 把xx文件添加到暂存区去(XX可以使 单独的一个 . 表示添加工作区所有文件)
git commit –m “XX” 提交文件 XX是这次提交的注释。
git status 查看仓库状态
git diff XX 查看XX文件修改了那些内容
git log 查看历史记录
git reset –hard HEAD^ 或者 git reset –hard HEAD~ 回退到上一个版本
(如果想回退到100个版本,使用git reset –hard HEAD~100 )
git reflog 查看历史记录的版本号
git checkout – XX 把XX文件在工作区的修改全部撤销。
git rm XX 删除XX文件
git remote add origin https://github.com/用户id/远程仓库名.git 关联一个远程库
git push –u(第一次要用-u 以后不需要) origin master 把当前master分支推送到远程库
git clone https://github.com/用户id/远程仓库名.git 从远程库中克隆到本地

Git的使用还用其他很多方面,这里只是列举了一些常用的指令,其他的指令我也在学习中,如果有什么不对的地方,欢迎大神留言指正,非常感激。。

GitHub版本控制使用(命令行实际操作图解Git使用方法) – CSDN博客已关闭评论
2018年6月11日 By mikel 分类: 开发笔记

来源: Asp.NET MVC 导入Excel数据教程 手把手教你系列!!! http://www.cnblogs.com/Lxy-/p/5791721.html – 高达 – 博客园

复制代码
复制代码
@section scripts{
    <script type="text/javascript">
        $('input[id=fileUpload]').change(function () {
            $('#txt_Path').val($(this).val());
            $('#form_Upload').submit();
        });
    </script>}
复制代码
复制代码

 

 

这段JS代码功能就是在<input id=”fileUpload” type=”file” name=”file” style=”display:none”>选择文件后就把文件路径赋给我们自己构造的文本框里,然后就是提交表单,上传它的选择的文件到我们的服务器。

请注意灰色那段代码是如何用我们自己构建的按钮绑定到fileUpload的功能上

 

1  @*浏览本地文件按钮*@
2     <span id="btn_Browse" style="cursor:pointer;" onclick="$('input[id=fileUpload]').click();" class="input-group-addon">
3         <i class="glyphicon glyphicon-folder-open"></i>&nbsp;&nbsp;&nbsp;浏览文件
4     </span>

 

现在就来测试下我们写的代码能不能跑!F5运行!如果是以下效果就是正确的

 

 

 

为了浏览文件有响应的效果,我们在视图页加一小段CSS代码

复制代码
复制代码
 1 @section scripts{
 2 
 3 
 4     <style type="text/css">
 5         #btn_Browse:hover {
 6             color: #3C763D;
 7         }
 8     </style>
 9 
10     <script type="text/javascript">
11         $('input[id=fileUpload]').change(function () {
12             $('#txt_Path').val($(this).val());
13             $('#form_Upload').submit();
14         });
15 
16 
17     
18     </script>}
复制代码
复制代码

 

第五步

到了这里我们的文件已经可以上传到我们服务了,如果不信你在Browse操作打个断点,看看file参数是不是已经接受了文件,如果接受到了说明已经成功一半了!我们还是先不写Browse操作处理Excel文件的代码,焦点还是在视图页上,在本博客第一张效果图里,大家看到浏览文件下面有张table表格吗?小弟创建这个表格只是为了更好的交互效果,让使用的人更直观而已。而且也很简单!

接下来我们来构建它,在视图页新增table表格的代码

 

复制代码
复制代码
@model Student
@using School.Entity


<table class="table  table-striped  table-hover table-bordered">
    <tr>
        <th>@Html.DisplayNameFor(model => model.Name)</th>
        <th>@Html.DisplayNameFor(model => model.Age)</th>
        <th>@Html.DisplayNameFor(model => model.ChineseScore)</th>
        <th>@Html.DisplayNameFor(model => model.EnglishScore)</th>
        <th>@Html.DisplayNameFor(model => model.MathScore)</th>
    </tr>

    @if (ViewBag.Data != null)
    {
        //生成前10条数据 填充表格table
        foreach (var item in (ViewBag.Data as IEnumerable<Student>).Take(10))
        {
            <tr>
                <td>@Html.DisplayFor(model => item.Name)</td>
                <td>@Html.DisplayFor(model => item.Age)</td>
                <td>@Html.DisplayFor(model => item.ChineseScore)</td>
                <td>@Html.DisplayFor(model => item.EnglishScore)</td>
                <td>@Html.DisplayFor(model => item.MathScore)</td>
            </tr>
        }
    }
</table>
<h5 class="text-info">
    默认显示前10条记录
</h5>
复制代码
复制代码

在这里我依然用的@HTML辅助方法,如果你还不会使用它,赶紧花一天学习它,入门非常简单!非常强大! 设想如果没有@Html扩展方法 小弟得写多少硬编码啊!

 

然后再次按F5运行先看看效果

 

 

这里的表头是英文的,如果你想变成中文的话,可以在实体上加上数据注解特性(如下)

 

复制代码
复制代码
1 public class Student
2   {
3 
4         [Display(Name="中文成绩")]
5         public int ChineseScore { get; set; }
6 
7    }
复制代码
复制代码

 

 

 

对了还忘了一个东西,就是上传提交按钮,我们现在来构建它!在视图页form表单下面添加如下代码

 

复制代码
复制代码
1 @using (Html.BeginForm("Browse", "UploadExcel", FormMethod.Post, new { enctype = "multipart/form-data", id = "form_Upload" }))
2 {
3     @Html.AntiForgeryToken()
4     <input id="fileUpload" type="file" name="file" style="display:none"> 
5 }
6 
//红色部分是我构建的上传提交按钮
7 <div class="input-group pull-right" style="margin:0 0 5px 0">
8     @Html.RouteLink("开始提交", new { action = "Upload" }, new { id="submit", @class = "btn  btn-primary ladda-button ", data_style = "expand-right" })
9 </div>
复制代码
复制代码

 

 

 

@Html.RouteLink扩展方法会根据我定义的路由生成一个<a>锚标签,最后生成如下html标记

<a id=”submit” class=”btn  btn-primary ladda-button” data-style=”expand-right” href=”/UploadExcel/Upload” >开始提交</a>

 

在这里我把它伪装成了一个button按钮

 

 

data-style=”expand-right”这些属性是我用bootstrap加了个5毛钱的特效,你也可以不用管,也可以使用自己的特效。这个上传提交按钮的功能就是最后一个功能,把经过Browse操作转换成List<T>的数  据导入到我们的数据库。到现在为止我们的导入Excel的页面已经全部完成了,当然我的审美观和前端技术就是渣渣,所以请原谅小弟! href=”/UploadExcel/Upload” 这个<a>锚标签会访问UploadExcelController控制器的Upload操作,所以我再添加最后一个操作。在控制器添加如下代码

 

复制代码
复制代码
 public class UploadExcelController : Controller
    {
        // GET: /UploadExcel
        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        [ValidateAntiForgeryToken]
        [HandleError(View = "~/Views/Shared/Error.cshtml")]
        public ActionResult Browse(HttpPostedFileBase file)
        {

            return null;
        }

        //红色部分是我新增的Action操作,这个操作的作用是把Browse操作转换好的List<T> 通过业务服务层 导入我们数据库
        [HandleError(View = "~/Views/Shared/Error.cshtml")]
        public ActionResult Upload()
        {
            return View("UploadSuccess"); //导入成功的页面 这个页面就留给大家自己设计吧
        }

      }
复制代码
复制代码

 

 

现在我们来检查下我们构造好的页面,F5运行。如果是下面的样子我们就全部完成视图页面了

 

 

现在我们把重点放在Excel文件的逻辑处理上了,我们先从Browse操作下手,因为此操作负责把我们上传的Excel文件转换成List Entity对象,只要转换成这个集合对象你后面就可以想怎么插入就怎么插入了 !想插入MSSQL MYSQL 等不同数据都可以呵呵!因为我们用的ORM框架!

按照我上传的那个思维图,我想我先处理验证!先判断文件的格式是不是Excel的格式。(Excel的格式是根据版本来的 2007-2010 是xlsx,2003是xls)这里我只默认了2007-2010 。

在Browse操作添加如下代码

 

复制代码
复制代码
 1         [HttpPost]
 2         [ValidateAntiForgeryToken]
 3         [HandleError(View = "~/Views/Shared/Error.cshtml")]
 4         public ActionResult Browse(HttpPostedFileBase file)
 5         {
 6 
 7             if (string.Empty.Equals(file.FileName) || ".xlsx" != Path.GetExtension(file.FileName))
 8             {
 9                 throw new ArgumentException("当前文件格式不正确,请确保正确的Excel文件格式!");
10             }
11 
12             var severPath = this.Server.MapPath("/files/"); //获取当前虚拟文件路径
13 
14             var savePath = Path.Combine(severPath, file.FileName); //拼接保存文件路径
15 
16             try
17             {
18                 file.SaveAs(savePath);
19                 stus = ExcelHelper.ReadExcelToEntityList<Student>(savePath);
20                 ViewBag.Data = stus;
21                 return View("Index");
22             }
23             finally
24             {
25                 System.IO.File.Delete(savePath);//每次上传完毕删除文件
26             }
27 
28         }
复制代码
复制代码

 

我在MVC项目的根目录创建了个files的文件夹,用来保存上传的Excel文件。然后读取文件转换成List Entity对象,然后把它传给我们创建的视图。这样就可以一选择Excel文件就把数据显示在页面上了,转换数据的核心是这句代码

stus = ExcelHelper.ReadExcelToEntityList<Student>(savePath);

ExcelHelper是我自己封装的一个工具库,我现在来创建它。在根目录添加一个文件夹,然后添加一个类

 

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
ppublic class ExcelHelper
   {
       //Excel数据转List<T>
       public static IList<T> ReadExcelToEntityList<T>(string filePath) where T : classnew()
       {
           DataTable tbl = ReadExcelToDataTable(filePath);//读取Excel数据到DataTable
           IList<T> list = DataTableToList<T>(tbl);
           return list;
       }
       //Excel数据转DataTable 使用的oledb读取方式
       public static DataTable ReadExcelToDataTable(string filePath)
       {
           if (filePath == string.Empty) throw new ArgumentNullException("路径参数不能为空");
           string ConnectionString = "Provider=Microsoft.ACE.OLEDB.12.0; Persist Security Info=False;Data Source=" + filePath + "; Extended Properties='Excel 8.0;HDR=Yes;IMEX=1'";
           OleDbDataAdapter adapter = new OleDbDataAdapter("select * From[Sheet1$]", ConnectionString); //默认读取的Sheet1,你也可以把它封装变量,动态读取你的Sheet工作表
           DataTable table = new DataTable("TempTable");
           adapter.Fill(table);
           return table;
       }
       //DataTable转List<T>
       public static List<T> DataTableToList<T>(DataTable dt) where T : classnew()
       {
           if (dt == nullreturn null;
           List<T> list = new List<T>();
           //遍历DataTable中所有的数据行 
           foreach (DataRow dr in dt.Rows)
           {
               T t = new T();
               PropertyInfo[] propertys = t.GetType().GetProperties();
               foreach (PropertyInfo pro in propertys)
               {
                   //检查DataTable是否包含此列(列名==对象的属性名)   
                   if (dt.Columns.Contains(pro.Name))
                   {
                       object value = dr[pro.Name];
                       value = Convert.ChangeType(value, pro.PropertyType);//强制转换类型
                       //如果非空,则赋给对象的属性  PropertyInfo
                       if (value != DBNull.Value)
                       {
                           pro.SetValue(t, value, null);
                       }
                   }
               }
               //对象添加到泛型集合中 
               list.Add(t);
           }
           return list;
       }
   }

 

 

代码很简单我就不翻译了,就是读取Excel数据转各种C#对象,但是这是教学代码不是产品代码,我很粗暴的封装了。你如果要用到生成环境,得还要加上各种逻辑验证和测试!

好了到了这步,我们就可以出现下面的效果了:

 

写到这里,感觉最后一个功能把List<T>集合导入数据库大家应该都会,我就不想再继续往下写了。但是还是要说下注意的地方就是导入数据一定要支持事物回滚功能,就是哪怕前面已经导入了几十条数据了,如果发生一条脏数据导致插入异常,也必须回滚判定全部导入失败。避免重复导入,导致数据库脏数据。

我贴最后导入数据库的代码就是Upload操作,我在DAL层是使用了事物处理的,支持回滚!

 

复制代码
复制代码
        [HandleError(View = "~/Views/Shared/Error.cshtml")]
        public ActionResult Upload()
        {
            var result= Ioc.Service.IocBll<IStudentBll>.Provide.Insert(stus);

            if(string.Empty!=result.Success)  
                ViewBag.Info = result.Info;

            return View("UploadSuccess");

        }
复制代码
复制代码

 

Asp.NET MVC 导入Excel数据教程 手把手教你系列!!! http://www.cnblogs.com/Lxy-/p/5791721.html – 高达 – 博客园已关闭评论
2018年6月11日 By mikel 分类: iOS开发

来源: 苹果笔记本开机出现闪烁的问号文件夹解决方法 – CSDN博客

苹果笔记本开机出现闪烁的问号文件夹解决方法 如果出现这种情况,这就意味着你的Mac无法找到自身的系统软件*

这里写图片描述
这个问题有两种情况:
**

一、 如果问号只出现几秒钟,然后继续启动。

**
这时候需要我们进入电脑找到“系统偏好设置”中重新选择你的启动磁盘。
这里写图片描述
1. 从苹果菜单中选取“系统偏好设置”,然后点按“启动磁盘”。
2. 点按您通常用于启动电脑的磁盘图标。通常名为“Macintosh HD”。
3. 关闭“系统偏好设置”窗口。
Mac 现在应能正常启动,而不再出现闪烁的问号。

二、 问号文件夹一直闪烁,无法启动Mac

  1. 通过按住其电源按钮几秒钟来关闭 Mac。(即强制关机啦)
  2. 按一下电源按钮,以重新打开 Mac。立即按住键盘上的 Command 和 R 键或者Option键,以便从 macOS 恢复功能启动您的 Mac。一直按住,直到看到 Apple 标志或地球图标。(据小编经验出现的都是地球图标)
  3. 在启动过程中,如果出现提示,请选择一个 Wi-Fi 网络来连接互联网。(必须保持网络处于连接状态)
  4. 在“macOS 实用工具(从地球图标进到此处取决于你的网络速度了,最好找个网络好的连接)”窗口出现后,从苹果菜单中选取“启动磁盘”。
  5. 选择启动磁盘,然后点按“重新启动”
    如果没有看到您的启动磁盘
    如果您没有在“启动磁盘”窗口中看到您的启动磁盘,请按照以下步骤操作以查看您的启动磁盘是否需要目录修复。
  6. 从macOS 实用工具窗口中打开磁盘工具。
  7. 在“磁盘工具”窗口中,从窗口的左侧选择您的启动磁盘(通常名为“Macintosh HD”)。
    这里写图片描述
  8. 点按“急救”标签页。
  9. 点按“修复磁盘”按钮以验证并修复任何与您的启动磁盘有关的问题。
  10. 您的磁盘成功修复后,退出“磁盘工具”。
  11. 从苹果菜单中选取“启动磁盘”。选择启动磁盘,然后点按“重新启动”。
    如果按重新启动后,出现如下问题:
    这里写图片描述

那就出最后的杀手锏了(重装系统),用TransMac在 Windows系统下制作 OS X启动盘(类似于我们Windows的制作一个PE)

需要的工具有:win电脑一台,8G以上的U盘
(1)、首先下载软件TransMac 11下载地址:链接:http://pan.baidu.com/s/1nvS4ASh 密码:6xvi 安装软件前先看安装说明。
(2)、下载苹果系统镜像。
注1:苹果镜像一定要下载下列版本(镜像都论坛大神制作的为了大家不走弯路下错镜像特此提供常见版本下载链接)
注2:下列镜像文件只能保证在白苹果机器上成功安装,黑苹果请绕行。。谢谢。。
镜像下载地址:
10.8.5 百度云 http://pan.baidu.com/s/1jIAZJcM 密码:1s96
10.9.5 百度云 http://pan.baidu.com/s/1bp0yEBX 密码:4k0n
10.10.5 百度云 http://pan.baidu.com/s/1jH8bJoi 密码:yrhw
10.11.6 百度云 https://pan.baidu.com/s/1qYGOX9i 密码:rtsn
10.12 百度云 http://pan.baidu.com/s/1dE75UTV 密码:hfn4
10.12.1 百度云 http://pan.baidu.com/s/1ccMab8 密码: kbw9
10.12.2 百度云 http://pan.baidu.com/s/1skGDLCh 密码: bbr4
10.12.3 百度云 http://pan.baidu.com/s/1i5v8geT 密码:1hip

以上链接来自伟大的网络资源!!!!!!!!

接下来参照下面这个链接继续操作:
http://bbs.feng.com/read-htm-tid-10510823-page-1.html
终于又再次进入“macOS 实用工具(见下图:)
这里写图片描述
选择“重新安装macOS” ,点击继续,然后根据屏幕提示继续操作,最后会进入到这样一个界面:
这里写图片描述
当安装完后,电脑会立刻重启,此时要立刻拔了U盘,否则等下会再次从U盘进入。
如果电脑重启后发现还是出现一个问号,该如何是好?(此时是不是已经绝望了!!!!)
不要灰心,我们再次插上U盘试一次,此时我们要用磁盘工具检查一下启动磁盘(通常名为“Macintosh HD”),会发现该盘并没有装载(此时左侧显示出来该盘是灰色的),点击最上面一栏的“装载”,完成后发现该盘的框架会变成黑色。
此时再次进入实用工具,选择“重新安装macOS” ,点击继续,然后根据屏幕提示继续操作。同上一致,安装好后重启要立刻拔掉U盘。
最后,我们就可以再次进入系统了,和原来一模一样,文件没有任何损失。

苹果笔记本开机出现闪烁的问号文件夹解决方法 – CSDN博客已关闭评论
2018年6月11日 By mikel 分类: JavaScript

来源: 用meteor快速实现跨平台应用 – CSDN博客

作者:华清远见讲师

一:跨平台APP开发

目前采用html5+JavaScript+css 开发跨平台应用正成为一个热点。html5开发网页的骨架,CSS开发网页皮肤,JS用于网页互动。即仅需维护一套代码,通过不同编译方式,适配PC端,ios移动端,Android移动端。 在跨平台框架中,meteor 以快速开发著称。

二: Meteor 强大之处

1. 极速构建

a. 几条命令完成创建

b. 服务端客户端一体(屏蔽通讯实现)

c. 包含数据库

2.Plugin插件 丰富

3.包容第三方(如react)

4.官方文档完善

三:Meteor App 效果演示

meteor官网上有app 效果演示,如下面的截图。功能强大。

四:用meteor 快速实现 App

1. 创建

#curl https://install.meteor.com | /bin/sh 安装meteor

#meteor create a1_hello

#cd a1_hello

#meteor 运行

更改a1_hello.html 保存 网页会同步变化

浏览器访问http://localhost:3000会看到:

//—-源码a1_hello.html 实现界面的显示

Welcome to Meteor!

{{> hello}} //调用模板hello

//定义模板hello (模块对外的显示)

Youve pressed the button {{counter}} times.

//{{counter} 调用模板hello里的对象counter//—-源码a1_hello.js 实现界面的互动

if (Meteor.isClient) { //检测是否是客户端,是则使用下面的代码运行

// counter starts at 0

Session.setDefault(‘counter’, 0); //设置counter的键值为0 — Session 用于处理 键值对(key-value)

Template.hello.helpers({ // 实现模板hello的 helpers方法

counter: function () { // 把对象counter和函数function 关联起来 (接口+实现)

return Session.get(‘counter’); //返回counter的键值

}

});

Template.hello.events({ // 实现模板hello的事件 click button

‘click button’: function () { //click button 是事件,function是事件触发的函数 (接口+实现)

// increment the counter when button is clicked

Session.set(‘counter’, Session.get(‘counter’) + 1); //使counter值加一

}

});

}

if (Meteor.isServer) { //检测是否是服务端,是则使用下面的代码运行

Meteor.startup(function () {

// code to run on server at startup

});

}

2. 列表显示

//—-源码a1_hello.html 加入 列表显示

List

{{> task}}

list 1

list 2

list 3

//—-源码 a1_hello.css 设置 显示效果

body { //设置 html中自带的body标签对象的 显示属性

font-family: sans-serif;

background-color: #315481;

background-image: linear-gradient(to bottom, #315481, #918e82 100%);

background-attachment: fixed;

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

padding: 0;

margin: 0;

font-size: 14px;

}

.container { //设置自建的类名为container的对象的 显示属性

max-width: 600px;

margin: 0 auto;

min-height: 100%;

background: white;

}

header { //设置header对象的 显示属性

background: #d2edf4;

background-image: linear-gradient(to bottom, #d0edf5, #e1e5f0 100%);

padding: 20px 15px 15px 15px;

position: relative;

}

ul { //设置ul列表对象的 显示属性

margin: 0;

padding: 0;

background: white;

}

li { //设置li列表项对象的 显示属性

position: relative;

list-style: none;

padding: 15px;

border-bottom: #eee solid 1px;

}

3. 远程数据库存储

//—-源码a1_hello.html 使用表单输入方式,添加列表内容显示

<head>

<title>list</title>

</head>

<body>

<p class=”container”>

<header>

<h1> List </h1>

<form class=”new-task”>   加入 表单的输入项

<input type=”text” name=”text” placeholder=”Type to add new tasks” />   输入框里灰色的提示信息

</form>

</header>

<ul>

{{#each tasks}}

{{> task}}

{{/each}}

</ul>

</p>

</body>

<template name=”task”>

<li> {{text}}</li>

</template>

//—-源码a1_hello.js 表单输入后能插入数据库中(MongoDB Collection)

Tasks = new Mongo.Collection(“tasks”); //创建数据库连接(MongoDB collection) “tasks” 用于存储列表内容

if (Meteor.isClient) {

// This code only runs on the client

Template.body.helpers({

tasks: function () {

return Tasks.find({},{sort: {createdAt: -1}}); //查找数据库MongoDB内容并排序, 详见API文档 http://docs.meteor.com/#/basic/Mongo-Collection-find

}

});

Template.body.events({

“submit .new-task”: function (event) { //实现对象new-task的submit事件的触发函数

// Prevent default browser form submit

event.preventDefault();

// Get value from form element

var text = event.target.text.value;

// Insert a task into the collection

Tasks.insert({

text: text,

createdAt: new Date() // current time

});

// Clear form

event.target.text.value = “”;

}

});

}

if (Meteor.isServer) {

Meteor.startup(function () {

// code to run on server at startup

});

}

五:丰富组件

搜索组件 https://atmospherejs.com

使用account组件

Ÿ#meteor add accounts-ui

#meteor add accounts-password

六:开源的样例

#meteor create –example todos

#cd todos

#meteor

浏览器访问http://localhost:3000会看到

#meteor create –example localmarket

#cd localmarket

#meteor

浏览器访问http://localhost:3000会看到

文章选自华清远见嵌入式培训
用meteor快速实现跨平台应用 – CSDN博客已关闭评论
2018年6月4日 By mikel 分类: JavaScript

来源: ProjectRecord/2、LayUI之table数据表格获取行、行高亮等相关操作.md at master · TangHanF/ProjectRecord

前言

    目前LayUI数据表格既美观有不乏一些实用功能。基本上表格应有的操作已经具备,LayUI作者【贤心】肯定是煞费苦心去优化,此处致敬。但是实话实话,如果单纯那数据表格功能来说,EasUI的数据表格更能更加强大、更加灵活,怎奈于丑的没法说,当然可以美化,但是成本太高了。我相信在后续的LayUI版本更新中,作者应该会着重优化数据表格,因为作为一个前端框架,美观度、效率相关、导航相关、数据展现相关无疑是最重要的。

操作说明

现在转入我们今天要说的数据表格相关操作。目前LayUI数据表格获取行数据的方式有如下方式(个人理解有限,不全之后望提醒):

  1. 表头加入checkbox列,用户选择一行或者多行数据后通过
var checkStatus = table.checkStatus('表格唯一ID值');
var data = checkStatus.data;

获取到相关行数据,其中 data 就是当前选中行的数据对象集合。具体参考: 点击此处直达


但是,如果说没有checkbox,没有行内工具条等设置,就一个常规表格,例如:

目标

  • 要做到双击某一个单元格触发获取整行数据操作,可以拿到当前行tr的DOM对象以及单元格td的DOM对象,以便利用JQuery进行操作,例如高亮显示单元格/行,更改字体颜色等等
  • 能够根据相关条件进行数据筛选、进行高亮显示
  • 能够获取某一个单元格数据,以及该单元格的DOM对象,以便利用JQuery进行操作,例如高亮显示单元格,更改字体颜色等等
  • 能够动态隐藏指定列(实际作用可能不大,因为隐藏数据的话直接在定义cols时不定义即可,LayUI的table数据对象还是会指向你服务端返回的数据,即:你服务端返回哪些字段,table数据容器会原封保留,只是你不在cols定义的话不进行展示,但是数据还是有的),但是有时候可能也需要动态隐藏吧,所以保留了该功能

重点

相关逻辑写在table.render()方法的done回调中,例如:

table.render({
    ....
    ,//详细的配置此处就不描述了
    ,....
    ,done:function(res, curr, count){
        // 此处写逻辑即可
    }
});

相关实现

  • 表格数据 点击此处直达 然后下载或者复制其内容自行新建文件即可。
  • JS实现

新建JavaScript文件,例如新建一个DataTableExtend.js的文件,代码如下:

var LayUIDataTable = (function () {
    var rowData = {};
    var $;

    function checkJquery () {
        if (!$) {
            console.log("未获取jquery对象,请检查是否在调用ConvertDataTable方法之前调用SetJqueryObj进行设置!")
            return false;
        } else return true;
    }

    /**
     * 转换数据表格。
     * @param callback 双击行的回调函数,该回调函数返回三个参数,分别为:当前点击行的索引值、当前点击单元格的值、当前行数据
     * @returns {Array} 返回当前数据表当前页的所有行数据。数据结构:<br/>
     * [
     *      {字段名称1:{value:"当前字段值",cell:"当前字段所在单元格td对象",row:"当前字段所在行tr对象"}}
     *     ,{字段名称2:{value:"",cell:"",row:""}}
     * ]
     * @constructor
     */
    function ConvertDataTable (callback) {
        if (!checkJquery()) return;
        var dataList = [];
        var rowData = {};
        var trArr = $(".layui-table-body.layui-table-main tr");// 行数据
        if (!trArr || trArr.length == 0) {
            console.log("未获取到相关行数据,请检查数据表格是否渲染完毕!");
            return;
        }
        $.each(trArr, function (index, trObj) {
            var currentClickRowIndex;
            var currentClickCellValue;

            $(trObj).dblclick(function (e) {
                var returnData = {};
                var currentClickRow = $(e.currentTarget);
                currentClickRowIndex = currentClickRow.data("index");
                currentClickCellValue = e.target.innerHTML
                $.each(dataList[currentClickRowIndex], function (key, obj) {
                    returnData[key] = obj.value;
                });
                callback(currentClickRowIndex, currentClickCellValue, returnData);
            });
            var tdArrObj = $(trObj).find('td');
            rowData = {};
            //  每行的单元格数据
            $.each(tdArrObj, function (index_1, tdObj) {
                var td_field = $(tdObj).data("field");
                rowData[td_field] = {};
                rowData[td_field]["value"] = $($(tdObj).html()).html();
                rowData[td_field]["cell"] = $(tdObj);
                rowData[td_field]["row"] = $(trObj);

            })
            dataList.push(rowData);
        })
        return dataList;
    }

    return {
        /**
         * 设置JQuery对象,第一步操作。如果你没有在head标签里面引入jquery且未执行该方法的话,ParseDataTable方法、HideField方法会无法执行,出现找不到 $ 的错误。如果你是使用LayUI内置的Jquery,可以
         * var $ = layui.jquery   然后把 $ 传入该方法
         * @param jqueryObj
         * @constructor
         */
        SetJqueryObj: function (jqueryObj) {
            $ = jqueryObj;
        }

        /**
         * 转换数据表格
         */
        , ParseDataTable: ConvertDataTable

        /**
         * 隐藏字段
         * @param fieldName 要隐藏的字段名(field名称)参数可为字符串(隐藏单列)或者数组(隐藏多列)
         * @constructor
         */
        , HideField: function (fieldName) {
            if (!checkJquery()) return;
            if (fieldName instanceof Array) {
                $.each(fieldName, function (index, field) {
                    $("[data-field='" + field + "']").css('display', 'none');
                })
            } else if (typeof fieldName === 'string') {
                $("[data-field='" + fieldName + "']").css('display', 'none');
            } else {

            }
        }
    }
})();
  • 调用

完整示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<script src="../../js/jquery-3.3.1.js"></script>-->
    <script src="../../js/layui.js"></script>
    <script src="DataTableExtend.js"></script>
    <link rel="stylesheet" href="../../js/css/layui.css" media="all">

    <script>
        (function () {
            layui.use(['table', 'layer'], function () {
                var table = layui.table;
                var layer = layui.layer;
                var $ = layui.jquery;
                table.render({
                    id: "tableID"// 设定表格的唯一ID进行标识
                    , elem: '#tableDataLoad'// 绑定table对应的元素
                    , height: 'full-300'
                    , url: 'data2.json' // TODO: 此处写你实际数据来源
                    , size: 'sm'
                    , page: true
                    , limits: [10, 20, 30, 40, 50]
                    , limit: 30
                    , cols: [[
                        {field: 'match_name', width: 93, align: 'center', title: '比赛名称', rowspan: 2}
                        , {align: 'center', title: '比赛信息', colspan: 3}
                        , {field: 'jingcai', width: 200, align: 'center', title: '竞猜项', rowspan: 2}
                        , {field: 'num', width: 100, align: 'center', title: '竞猜数量', rowspan: 2}
                    ]
                        , [
                            {field: 'match_time_beijing', width: 200, align: 'center', title: '比赛时间'}
                            , {field: 'match_master', width: 100, align: 'center', title: '主队'}
                            , {field: 'match_guest', width: 100, align: 'center', title: '客队'}
                        ]]
                    , done: function (res, curr, count) {// 表格渲染完成之后的回调

                        $(".layui-table th").css("font-weight", "bold");// 设定表格标题字体加粗

                        LayUIDataTable.SetJqueryObj($);// 第一步:设置jQuery对象

                        //LayUIDataTable.HideField('num');// 隐藏列-单列模式
                        //LayUIDataTable.HideField(['num','match_guest']);// 隐藏列-多列模式

                        var currentRowDataList = LayUIDataTable.ParseDataTable(function (index, currentData, rowData) {
                            console.log("当前页数据条数:" + currentRowDataList.length)
                            console.log("当前行索引:" + index);
                            console.log("触发的当前行单元格:" + currentData);
                            console.log("当前行数据:" + JSON.stringify(rowData));

                            var msg = '<div style="text-align: left"> 【当前页数据条数】' + currentRowDataList.length + '<br/>【当前行索引】' + index + '<br/>【触发的当前行单元格】' + currentData + '<br/>【当前行数据】' + JSON.stringify(rowData) + '</div>';
                            layer.msg(msg)
                        })

                        // 对相关数据进行判断处理--此处对【竞猜数量】大于30的进行高亮显示
                        $.each(currentRowDataList, function (index, obj) {
                             /*
                                * 通过遍历表格集合,拿到每行数据对象obj,通过obj["列名"]["row"]可以拿到行对象,obj["列名"]["cell"]可以拿到单元格对象
                                * */
                            if (obj['num'] && obj['num'].value > 30) {
                                obj['num']["row"].css("background-color", "#FAB000");// 对行(row)进行高亮显示
                                obj["num"]["cell"].css("font-weight","bold");// 对单元格(cell)字体进行加粗显示
                            }
                        })
                    }// end done


                });//end table.render

                function dealLighthigh (rowIndexArr, bgColor) {
                    $.each(rowIndexArr, function (index, val) {
                        if (typeof val == "number") {
                            $($(".layui-table-body.layui-table-main tr")[val]).css("background-color", bgColor ? bgColor : "yellow");
                            $($("div .layui-table-fixed.layui-table-fixed-l .layui-table-body tr")[val]).css("background-color", bgColor ? bgColor : "yellow");
                        } else if (typeof val == 'object') {
                            $($(".layui-table-body.layui-table-main tr")[val.rowIndex]).css("background-color", val.bgColor ? val.bgColor : "yellow");
                            $($("div .layui-table-fixed.layui-table-fixed-l .layui-table-body tr")[val.rowIndex]).css("background-color", val.bgColor ? val.bgColor : "yellow");
                        }
                    })
                }


            });// end layui use
        })()
    </script>
</head>
<body>
<table id="tableDataLoad" lay-filter="demo"></table>

</body>
</html>

效果图展示

图一:获取行数据

图二:对符合条件的行进行高亮显示

图三:隐藏列

特别说明

通过 LayUIDataTable.HideField隐藏列之后如果进行排序出现被隐藏的列再次出现的问题,解决方案如下:

监听排序事件,进行隐藏处理

table.on('sort(demo)', function(obj){
    // 此处写你要隐藏的field
    $("[data-field='num']").css('display', 'none');
    //....
    
    
    //.....
    // 其它逻辑自行处理
    //.....
});
LayUI之table数据表格获取行、行高亮等相关操作已关闭评论
2018年5月28日 By mikel 分类: JavaScript

来源: JQuery控制radio选中和不选中方法总结 – Franson – 博客园

一、设置选中方法

代码如下:
$("input[name='名字']").get(0).checked=true; 
$("input[name='名字']").attr('checked','true');
$("input[name='名字']:eq(0)").attr("checked",'checked'); 
$("input[name='radio_name'][checked]").val();  //获取被选中Radio的Value值

 

二、设置选中和不选中示例

代码如下:
<input type="radio" value="0" name="jizai" id="0"/>否
<input type="radio" value="1" name="jizai"  id="1"/>是
#jquery中,radio的选中与否是这么设置的。
$("#rdo1").attr("checked","checked");
$("#rdo1").removeAttr("checked");

 

通过name

代码如下:
$("input:radio[name="analyfsftype"]").eq(0).attr("checked",'checked');
$("input:radio[name="analyshowtype"]").attr("checked",false);

通过id

代码如下:
$("#tradeType0").attr("checked","checked");
$("#tradeType1").attr("checked",false);

 

三、另一种设置选中方法

 

代码如下:
<script type="text/javascript">  
$(document).ready(function(){  
        $("input:radio[name=sex][value=1]").attr("checked",true);  
});  
</script>

 

您的性别:

代码如下:
<input type="radio" name="sex" value="1" <s:if test="user.sex==1">checked</s:if>/>男  
<input type="radio" name="sex" value="0" <s:if test="user.sex==0">checked</s:if>/>女

 

四、根据值设置radio选中

代码如下:
$("input[name='radio_name'][value='要选中Radio的Value值']").attr("checked",true);  //根据Value值设置Radio为选中状态

 

五、使用prop方法操作示例

代码如下:
$('input').removeAttr('checked'); 
$($('#'+id+'input').eq(0)).prop('checked',false);
$($('#'+id+' input').eq(0)).prop('checked',true);

 

JQuery控制radio选中和不选中方法总结 – Franson – 博客园已关闭评论
2018年5月28日 By mikel 分类: JavaScript
第一步:mui如果想使用系统自带的图片展示功能,,那么必须要引入如下2个js文件
    <script src="../../js/mui.zoom.js"></script>
	    <script src="../../js/mui.previewimage.js"></script>
这两个文件就是处理图片放大缩小,弹出层,图片预处理和加载的直接js文件
第二步:图片展示的样式表,也就是对图片弹出层的样式
建议自己弄一个css文件保存,因为内容比较多
<style type="text/css">
			.mui-preview-image.mui-fullscreen {
				position: fixed;
				z-index: 20;
				background-color: #000;
			}
			.mui-preview-header,
			.mui-preview-footer {
				position: absolute;
				width: 100%;
				left: 0;
				z-index: 10;
			}
			.mui-preview-header {
				height: 44px;
				top: 0;
			}
			.mui-preview-footer {
				height: 50px;
				bottom: 0px;
			}
			.mui-preview-header .mui-preview-indicator {
				display: block;
				line-height: 25px;
				color: #fff;
				text-align: center;
				margin: 15px auto 4;
				width: 70px;
				background-color: rgba(0, 0, 0, 0.4);
				border-radius: 12px;
				font-size: 16px;
			}
			.mui-preview-image {
				display: none;
				-webkit-animation-duration: 0.5s;
				animation-duration: 0.5s;
				-webkit-animation-fill-mode: both;
				animation-fill-mode: both;
			}
			.mui-preview-image.mui-preview-in {
				-webkit-animation-name: fadeIn;
				animation-name: fadeIn;
			}
			.mui-preview-image.mui-preview-out {
				background: none;
				-webkit-animation-name: fadeOut;
				animation-name: fadeOut;
			}
			.mui-preview-image.mui-preview-out .mui-preview-header,
			.mui-preview-image.mui-preview-out .mui-preview-footer {
				display: none;
			}
			.mui-zoom-scroller {
				position: absolute;
				display: -webkit-box;
				display: -webkit-flex;
				display: flex;
				-webkit-box-align: center;
				-webkit-align-items: center;
				align-items: center;
				-webkit-box-pack: center;
				-webkit-justify-content: center;
				justify-content: center;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				width: 100%;
				height: 100%;
				margin: 0;
				-webkit-backface-visibility: hidden;
			}
			.mui-zoom {
				-webkit-transform-style: preserve-3d;
				transform-style: preserve-3d;
			}
			.mui-slider .mui-slider-group .mui-slider-item img {
				width: auto;
				height: auto;
				max-width: 100%;
				max-height: 100%;
			}
			.mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
				width: 100%;
			}
			.mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
				display: inline-table;
			}
			.mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
				display: table-cell;
				vertical-align: middle;
			}
			.mui-preview-loading {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				display: none;
			}
			.mui-preview-loading.mui-active {
				display: block;
			}
			.mui-preview-loading .mui-spinner-white {
				position: absolute;
				top: 50%;
				left: 50%;
				margin-left: -25px;
				margin-top: -25px;
				height: 50px;
				width: 50px;
			}
			.mui-preview-image img.mui-transitioning {
				-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
				transition: transform 0.5s ease, opacity 0.5s ease;
			}
			@-webkit-keyframes fadeIn {
				0% {
					opacity: 0;
				}
				100% {
					opacity: 1;
				}
			}
			@keyframes fadeIn {
				0% {
					opacity: 0;
				}
				100% {
					opacity: 1;
				}
			}
			@-webkit-keyframes fadeOut {
				0% {
					opacity: 1;
				}
				100% {
					opacity: 0;
				}
			}
			@keyframes fadeOut {
				0% {
					opacity: 1;
				}
				100% {
					opacity: 0;
				}
			}
			p img {
				max-width: 100%;
				height: auto;
			}
		</style>
第三步: 给图片加上属性 data-preview-src=” data-preview-group=’1’,告诉js我要进行最大化展示,那么框架就会把所有的 带有这两个属性的图片进行展示,会根据图片数量进行上一个下一个滑动展示,效果很棒,如果图片没有设置这2个属性,那么这个图片点击是没有反应的,其他图片展示的时候上下滑动也不会展示该图片
下面是我动态展示图片的额代码
mui.each(json,function(i, item) {
var url=item.imageUrl;
var img="<img src='http://"+server_ip+":8090"+url+"'  data-preview-src='' data-preview-group='1' style='width: 100px;height: 100px;margin-right: 3px;' />";
		imgs+=img;
		});
		imgShow.innerHTML=imgs;
},
最后一步:也是最关键的一步,调用 mui.previewImage();进行预加载,在页面的最先面,只有预加载了,才能进行展示处理。
<script>
		   mui.previewImage();
	    </script>

原文地址:http://www.itmmd.com/201708/817.html 

mui 图片预览-采用层图片最大化展示已关闭评论
2018年5月24日 By mikel 分类: ASP.NET, C#

来源: 我的ASP.NET之旅(四):IIS网站部署步骤及常见错误 – Luke Zhang – 博客园

ASP.NET程序已经有几年了,可是每每将网站或者Web应用程序部署到IIS上的时候,还总是出错。每次都需要查看错误信息,甚至搜索网络找到处理方法,于是这一次来了个全程记录,把步骤和遇到的问题都记下来,与同道共享:)

1、在IIS中创建虚拟目录(WebSite)或者应用程序(WebApp);

注意:发布的程序必须创建应用程序,否则出错如下:

Parser Error Message: Could not load the assembly ‘App_Web_nqebt6fg’. Make sure that it is compiled before accessing the page.

Source Error:

Line 1:  <%@ page language="C#" autoeventwireup="true" inherits="_Default, App_Web_nqebt6fg" %>

2、给IIS_IUSRS和IUSR赋予虚拟目录读写权限,否则出错如下:

HTTP Error 500.19 – Internal Server Error

The requested page cannot be accessed because the related configuration data for the page is invalid.

3、设置“认证”属性,启用“仿冒”,否则出错如下:

HTTP Error 401.3 – Unauthorized

You do not have permission to view this directory or page because of the access control list (ACL) configuration or encryption settings for this resource on the Web server.

4、设置应用程序池为“经典模式”(如果需要的话),否则出错如下:

HTTP Error 500.24 – Internal Server Error

An ASP.NET setting has been detected that does not apply in Integrated managed pipeline mode.

5、在连接字符串中不要使用集成安全,而是使用用户名/密码(如果不是Windows认证的话),否则出错如下:

  Exception Details: System.Data.SQLClient.SQLException: Login failed for user ‘NT AUTHORITY\IUSR’.

我的ASP.NET之旅(四):IIS网站部署步骤及常见错误 – Luke Zhang – 博客园已关闭评论
2018年5月23日 By mikel 分类: JavaScript

来源: layui 重载传参以及加载两次问题

layui.use([‘table‘,‘layer‘], function () {
var $ = layui.JQuery, layer = layui.layer;
var table = layui.table;
var txtRet = document.getElementById(“<%= txt_RegName.ClientID %>”);
var tableIns = table.render({
elem: ‘#idTest‘
, height: 500
, url: ‘/Hander/VehicleReport.ashx‘ //数据接口
//, data: { “vehicleId”: vehicleId }
//,where:{
// RegName: txtRet.value
//}
, page: true //开启分页
, id: ‘testReload‘
, cols: [[ //表头
{ title: ‘序号‘, field: ‘rownumber‘ }
, { field: ‘RegName‘, title: ‘车牌号‘}
, { field: ‘DriverName‘, title: ‘司机‘ }
, { field: ‘StatusStr‘, title: ‘状态‘ }
, { field: ‘InStationTime‘, title: ‘进站时间‘ }
, { field: ‘OutStationTime‘, title: ‘出站时间‘}
, { field: ‘StationName‘, title: ‘中转站名称‘ }
, { field: ‘InFactoryTime‘, title: ‘进厂时间‘}
, { field: ‘OutFactoryTime‘, title: ‘出厂时间‘ }
, { field: ‘FactoryName‘, title: ‘工厂名称‘}

]]
});
$(‘.layui-btn‘).on(‘click‘, function () {
var type = $(this).data(‘type‘);
active[type] ? active[type].call(this) : ‘‘;
});
var active = {
reload: function () {
//执行重载
tableIns.reload({
page: {
curr: 1 //重新从第 1 页开始
}
, where: {
RegName: txtRet.value
}
});
}
};

代码是这样,传参使用一般处理程序接收,接收不到是因为此页面引用母版页,获取不到真实的ID,需要document.getElementById(“<%= txt_RegName.ClientID %>”).value去赋值

重载两次是因为搜索用的是button,改成<a class=”layui-btn” data-type=”reload”>搜索</a>就可以了,虽然不知道是什么原因

layui 重载传参以及加载两次问题已关闭评论
2018年5月21日 By mikel 分类: Android

来源: 自动售货机控制系统 – CSDN博客

设计说明

根据要求可自动出售两种货物,这里的自动售货机可销售cola和pepsi两种饮料:售货机可识别1元和0.5元两种货币,在一次购买过程中,可购买一个或者多个商品,系统会自动计算所需钱数和找零的钱数并自动找零。另外有3个发光二极管、6个LCD数码管:两个用来显示所需金额,两个用来显示已付金额,两个用来显示找零数。


流程说明

这里设计的自动售货机当通电时,表示一次销售的开始。顾客选择一种商品或多种商品后就进入投币状态。若不投币,则自动返回初始状态。投币后,系统自动计算所投钱数。若投币够,则出货并找零。若投币不够,如果顾客没有继续投币,则退币并回到初始状态。本系统的投币销售流程图如图所示:
流程图


各模块说明

本文设计的自动售货机总体分四个模块:总控模块、二进制译码模块、BCD码译码模块和顶层模块。

总控模块:总控模块是本系统最重要的模块,该模块大体有5个输入端口和6个输出端口。其输入端口包括clk、coin1(投入一元货币)、coin5(投入0.5元货币)、cola(选择cola)、pepsi(选择pepsi),输出端口有paid(已投入多少钱)、needed(还需多少钱)moneyout(找零)、success(灯亮表示交易成功)、failure(灯亮表示交易失败)、showmoneyout(灯亮表示正在找零)。该模块实现了本系统最重要的交易过程,包括选择商品、投入货币,计算剩余金额,找零出货等。

二进制译码模块:该模块有一个输入端口和两个输出端口。输入端口是一个8位的二进制数输出端口bcd0、bcd1是两个4位的BCD码。该模块的主要的功能是实现将主控模块输出的二进制数(paid、needed、moneyout)转换成BCD码,以便输出到七段数码管上显示出来。该模块的原理是将一个8位的二进制转换成2个4位的BCD码,分为高四位和低四位。

BCD码译码模块:该模块有一个输入端口和一个输出端口

顶层模块:该模块有五个输入和九个输出端口。其输入口包括clk1、P2(选择pepsi)、P1_5(选择cola)、C5(投入5毛)、C1(投入1块),输出端口有shuwout(退币指示灯)、s(交易成功指示灯)、f(交易失败指示灯)、paid_lcd0、paid_lcd1(已付金额)、needed_lcd0、needed_lcd1(需付金额)、mout__lcd0、mout_lcd1(退币金额)。


程序设计

主控模块完整程序
BCD译码模块完整程序
顶层模块完整程序
具体的代码见我的github网站(1自动售货机文档).

各模块连接

售货机主控系统和译码器模块图:
售货机主控系统和译码器模块图

售货机顶层模块:
顶层模块

波形仿真

主控模块的波形方真

这里写图片描述
上图表示顾客选择了pepsi饮料后,且投了2个一元的硬币。Success为高电平,代表售货机有饮料售出。且余额为0.

这里写图片描述
上图表示顾客选择了cola饮料后,且投2个一元的硬币。Success为高电平,代表有饮料售出,且找回顾客0.5元。

BCD译码仿真

这里写图片描述
上图表示自动售货机的译码系统,上图表示将8位数字转换成4位BCD码。

TOP文件的仿真

这里写图片描述
上图表示顾客选择了pepsi饮料后,且投了2个一元的硬币。Success为高电平,代表售货机有饮料售出。且余额为0。

以上是我的一些仿真图,希望对您有帮助。更全面文档点这里

总结

其实这个自动售货机控制系统老师很早之前就要我弄了,我自己一直拖,直到老师要考核才重视起来。
这个项目很多都是在网上找资料借鉴的别人的东西,自己就是把别人的代码读懂了,再将整个的流程走了一遍。收货还是很多的。自己为了第二天老师考核(答辩)的时候能够顺利通过,前一天晚上熬夜到三点。也算是体会到了做项目的艰辛。
在答辩的过程中,老师的一些问题,一些话语也是让我受益匪浅。做项目真的是让我收益很多。这里也希望这篇博客能给大家带来帮助,但是希望只是作为一个参考,更多的部分还是要自己去做,这才您才能真正学习到知识。

自动售货机控制系统 – CSDN博客已关闭评论
备案信息冀ICP 0007948