致远软件工作室第一讲

1.用好工具

VS2013：快捷键、网站建立（ASP.net）、学会debug（js调试）

JS+Bootstrap动态生成表格+查询功能

（1）DIY js代码：

<pre name="code" class="javascript">var figure = "";//定义全局变量

$(function () {
    $("#save").click(function () {
        $("#del" + figure + "").attr("onclick", "deltr(" + (figure) + ")");//使得删除按钮有效

        var username = $("#userName").val();
        var sex = $('input:radio[name="sex"]:checked').val();
        if (sex == null) {
            alert("什么也没选中!");
            return false;
        }
        else {
            //alert(sex);
        }
        var age = $("#age").val();
        var mail = $("#mail").val();

        var userInfo = new UserInfo(username, sex, age, mail);
        var aIndex = figure;
        //alert(figure);
        if (validate(userInfo)) {

            $("table tr:eq(" + aIndex + ") td:eq(1)").html(userInfo.username);
            $("table tr:eq(" + aIndex + ") td:eq(2)").html(userInfo.sex);
            $("table tr:eq(" + aIndex + ") td:eq(3)").html(userInfo.age);
            $("table tr:eq(" + aIndex + ") td:eq(4)").html(userInfo.mail);

            $("#userName").val('');
            $('input').removeAttr('checked');
            $("input[name='sex']").get(0).checked = true;
            $("#age").val('10~20');
            $("#mail").val('');
            $("#submit").removeAttr("disabled");//使得新增按钮有效

        } else {
        }


    });

    $('#userName').focusin(function () {
        hidden("#userNameErr");
    });

    $("#mail").focusin(function () {
        hidden("#mailErr");
    });

    $("#searchName").focusin(function () {
        hidden("#searchErr");
        $("tr").css("background-color", "");
    });

    function hidden(val) {
        disappear();
        $(val).attr('style', 'visibility:hidden');
    }

    $("#submit").click(function () {

        var username = $("#userName").val();
        var sex = $('input:radio[name="sex"]:checked').val();
        if (sex == null) {
            alert("性别没选中!");
            return false;
        }
        else {
            //alert(sex);
        }
        var age = $("#age").val();
        var mail = $("#mail").val();


        var userInfo = new UserInfo(username, sex, age, mail);

        //alert(userInfo.username, userInfo.sex, userInfo.age, userInfo.mail);

        if (validate(userInfo)) {
            //增加<tr/>
            var len = $("table tbody tr").length;
            //alert(len);
            $("#tb").append("<tr id=" + (len + 1) + ">"
                                + "<td>" + (len + 1) + "</td>"
                                + "<td>" + userInfo.username + "</td>"
                                + "<td>" + userInfo.sex + "</td>"
                                + "<td>" + userInfo.age + "</td>"
                                + "<td>" + userInfo.mail + "</td>"
                                + "<td><a id=del" + (len + 1) + " href=\'#\' οnclick=\'deltr(" + (len + 1) + ")\'>删除</a> <a href=\'#\' οnclick=\'updatetr(" + (len + 1) + ")\'>修改</a></td>"
                           + "</tr>");

            $("#userName").val('');

            $('input').removeAttr('checked');
            $("input[name='sex']").get(0).checked = true;

            $("#age").val('10~20');
            $("#mail").val('');

            //alert("合法");
        } else {

            //alert("不合法");
        }

    });

    function disappear() {
        $("#searchName").val("");
        //$("tr").css("background-color", "");
    }
    //检查查询用户名
    $("#btn").click(function () {
        hidden("#userNameErr");
        hidden("#mailErr");
        var searchName = $("#searchName").val();
        if (searchName == "") {
            $("tr").css("background-color", "");
            $("#searchErr").attr('style', 'visibility:visible');
            return;
        } else {
            //   alert(searchName);
            var nameString = /^([\u4e00-\u9fa5]*$)+/;//中文检测正则表达式
            var bool = nameString.test(searchName);
            if (!bool) {
                $('#searchErr').attr('style', 'visibility:visible');
                $('#searchErr').html('请输入合法的中文姓名!');
                return;
            }
        }
        var num = 0;
        $('table tbody tr').find('td').each(function () {
            var me = $(this).index();
            var userName = $("table tr:eq(" + me + ") td:eq(1)").text();
            if (userName == searchName) { // 如果当前是第一列
                num++;
                var sex = $("table tr:eq(" + me + ") td:eq(2)").text();
                var age = $("table tr:eq(" + me + ") td:eq(3)").text();
                var mail = $("table tr:eq(" + me + ") td:eq(4)").text();
                $("tr[id='" + me + "']").css("background-color", "#EC897F");
            }
        });
        if (num == '0') {
            alert("你查询的结果不存在！");
            $("#searchName").val('');
            $("#searchName").focus();//锁定焦点
        }


    });
    $("#searchName").focusin(function () {
        hidden("#searchErr");
        hidden("#userNameErr");
        hidden("#mailErr");
    });

    function hidden(val) {
        $(val).attr('style', 'visibility:hidden');
    }

});

//验证UserInfo合法性
function validate(userInfo) {
    var flag = true;
    //alert("++" + userInfo.sex);
    if (userInfo.username == "") {
        $('#userNameErr').attr('style', 'visibility:visible');
        flag = false;
    }

    if (!isName(userInfo.username)) {
        $('#userNameErr').attr('style', 'visibility:visible');
        $('#userNameErr').html('请输入合法的中文姓名!');
        flag = false;
    }

    if (userInfo.mail == "") {
        $('#mailErr').attr('style', 'visibility:visible');
        flag = false;
    }

    if (!isEmail(userInfo.mail)) {
        $('#mailErr').attr('style', 'visibility:visible');
        $('#mailErr').html('邮箱输入不合法!');
        flag = false;
    }
    return flag;
}

//正则表达式检验邮箱
function isEmail(str) {
    var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
    return reg.test(str);
}

//验证输入是否为中文
function isName(nameStr) {
    var name = /^([\u4e00-\u9fa5]*$)+/;
    return name.test(nameStr);
}

//鼠标移走事件
function onblus(index) {
    var aIndex = $("#" + index + "").val();
    if (aIndex == "") {
        $("#" + index + "Err").attr('style', 'visibility:visible');
    } else {
        if (index == "userName" && !isName(aIndex)) {
            $('#userNameErr').attr('style', 'visibility:visible');
            $('#userNameErr').html('请输入合法的中文姓名!');
        }
        if (index == "mail" && !isEmail(aIndex)) {
            $('#mailErr').attr('style', 'visibility:visible');
            $('#mailErr').html('邮箱输入不合法!');
        }
    }

}

//鼠标置入事件


//封装一个UserInfo对象
function UserInfo(username, sex, age, mail) {
    this.username = username;
    this.sex = sex;
    this.age = age;
    this.mail = mail;
}

//删除
var deltr = function (index) {
    //alert(index);
    if ($("#userName").val('') != "") {
        $('#userNameErr').attr('style', 'visibility:hidden');
    }
    if ($("#mail").val('') != "") {
        $('#mailErr').attr('style', 'visibility:hidden');
    }
    if (confirm("确定删除？")) {
        i - 1
        var len = $("table tbody tr").length;
        // 显示索引值
        //$('table tbody tr').bind('click', function () {
        //    alert($('table tbody tr').index(this));
        //});
        $("tr[id='" + index + "']").remove();//删除当前行
        for (var i = index + 1, j = len; i <= j; i++) {
            var k = i - 1;
            var nextUserName = $("table tr:eq(" + k + ") td:eq(1)").text();
            var nextSex = $("table tr:eq(" + k + ") td:eq(2)").text();
            var nextAge = $("table tr:eq(" + k + ") td:eq(3)").text();
            var nextMail = $("table tr:eq(" + k + ") td:eq(4)").text();
            $("tr[id=\'" + i + "\']")
            .replaceWith("<tr id=" + k + ">"
                                + "<td>" + k + "</td>"
                                + "<td>" + nextUserName + "</td>"
                                + "<td>" + nextSex + "</td>"
                                + "<td>" + nextAge + "</td>"
                                + "<td>" + nextMail + "</td>"
                                + "<td><a id=del" + k + " href=\'#\' οnclick=\'deltr(" + k + ")\'>删除</a> <a href=\'#\' οnclick=\'updatetr(" + k + ")\'>修改</a></td>"
                           + "</tr>");
        }
    }
}

//修改
var updatetr = function (index) {

    if ($("#userName").val('') != "") {
        $('#userNameErr').attr('style', 'visibility:hidden');
    }
    if ($("#mail").val('') != "") {
        $('#mailErr').attr('style', 'visibility:hidden');
    }
    figure = index;
    $("#submit").attr("disabled", true);//使得新增按钮失效

    $("#del" + index + "").attr("onclick", "");//使得删除按钮失效
    var userName = $("table tr:eq(" + index + ") td:eq(1)").text();
    var sex = $("table tr:eq(" + index + ") td:eq(2)").text();
    var age = $("table tr:eq(" + index + ") td:eq(3)").text();
    var mail = $("table tr:eq(" + index + ") td:eq(4)").text();

    $("#userName").val(userName);//填充内容

    $('input').removeAttr('checked');
    if (sex == '男') {
        $("input[name='sex']").get(0).checked = true;
    } else {
        $("input[name='sex']").get(1).checked = true;
    }

    $("#age").val(age);
    $("#mail").val(mail);
    //$("#mail").attr("value", mail);
    //alert(tr);
}

（2）html代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!--引用js-->
    <!--<script src="js/bootstrap.min.js"></script>-->
    <script src="js/jquery-1.11.1.js"></script>
    <script src="js/myJs.js"></script>
    <!--引用css-->
    <link href="css/bootstrap.css" rel="stylesheet" />
    <link href="css/myCss.css" rel="stylesheet" />
    <title>用户信息录入</title>
    <style type="text/css">
    </style>
    <script type="text/javascript">
    </script>
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <a class="brand" href="#">用户信息</a>
            </div>
        </div>
    </div>
    <div class="container">
        <div>
            姓名：
            <input type="text" id="searchName" placeholder="请输入用户名" class="input-medium search-query">
            <button type="submit" class="btn" id="btn">查 询</button>
            <span class="errors" id="searchErr">姓名不能为空</span>
        </div>

        <h3><code>用户列表</code></h3>
        <div class="bs-docs-example">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>年龄</th>
                        <th>电子邮件</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="tb">
                    <!--<tr>
                        <td colspan="6">。。。。。。</td>
                    </tr>-->
                    <!--<tr>
                        <td>1</td>
                        <td>丁海军</td>
                        <td>男</td>
                        <td>20~30</td>
                        <td>1730853800@qq.com</td>
                        <td><a id="delete">删除</a> <a id="update">修改</a></td>
                    </tr>-->
                </tbody>
            </table>

            <h4>个人信息编辑</h4>
            <form class="form-horizontal" id="userForm" method="post">
                <div class="control-group">
                    <label class="control-label" for="inputId">姓名：</label>
                    <div class="controls">
                        <input type="text" value="" οnblur="onblus('userName')" id="userName" placeholder="请输入姓名">
                        <span class="errors" id="userNameErr">姓名不能为空</span>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">性别：</label>
                    <div class="controls">
                        <label class="radio">
                            <input type="radio" name="sex" id="male" value="男" checked>
                            男
                        </label>
                        <label class="radio">
                            <input type="radio" name="sex" id="female" value="女">
                            女
                        </label>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">年龄：</label>
                    <div class="controls">
                        <select value="" id="age">
                            <option>10~20</option>
                            <option>21~30</option>
                            <option>31~40</option>
                            <option>41~50</option>
                            <option>其他</option>
                        </select>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="inputId">电子邮件：</label>
                    <div class="controls">
                        <input type="text" id="mail" οnblur="onblus('mail')" value="" placeholder="请输入电子邮件">
                        <span class="errors" id="mailErr">邮箱格式不正确</span>
                    </div>
                </div>
            </form>

            <div class="right">
                <button type="submit" id="submit" class="btn btn-primary">新增</button>  
                <button type="button" id="save" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
    <hr>
    <footer class="footer">
        <div class="container">
            <div class="row footer-bottom">
                <ul class="list-inline text-center">
                    <li>Copyright © 2015-11-05 All Rights Reserved Powered By Taoyouxian</li>
                    <li>联系方式： 15061112860</li>
                </ul>
            </div>
        </div>
    </footer>
</body>
</html>

（3）CSS代码

body {
}

body {
    padding-top: 60px;
    padding-bottom: 10px;
}

li {
    list-style: none;
}

table thead tr th {
    text-align: center;
}

table tbody tr td {
    text-align: center;
}

#delete, #update {
    cursor: pointer;
}

h4 {
    padding-top: 10px;
}

.right {
    text-align: right;
}

.errors {
    color: red;
    visibility: hidden;
}

Eclipse：快捷键、Web工程建立、配置web.xml、debug模式调试get()、post()方法

web简单规范：UserList，类似于简单的信息管理系统（源代码联系楼主1730853800@qq.com）

2.学习经验

定期整理、收藏博客、多使用、多分享

3.数据库（SQL server）

五大约束：PK（主键）、FK（关系）、Unique（唯一键索引）、Default、Check

转载：http://blog.csdn.net/zhang_xinxiu/article/details/8861033，说明的很详细，关键在于实际操作

Check约束：sex='男' or sex='女'

PK：自增

Default：(getdate())

4.微信公众号开发

三种类型：订阅号（测试号）、服务号、企业号

（1）企业号：企业内部运动，类似于订阅号的编辑模式，有专门的后台

（2）订阅号：编辑模式、开发模式（需要配置信息，个人建议是花生壳映射）

开发用测试号（因为可以配置菜单）

微信测试号开发基础是access_token的获取与应用，通过一些get()、post()，注意java后台json数据与xml解析

JS-SDK最重要的是签名算法

（3）微信公众号管理平台

数据库配置表：T_AppMessage（订阅号与测试号）、T_WxUserInfo（关注用户信息表）、T_MessageRecord（用户发送信息表）、T_Medias（发送图片、语音、视频保存信息表）

5.四层架构

表示层UI、业务逻辑层（Business）、数据实体层（DataEntity）、数据访问层（DataAccess）

转载：http://mp.weixin.qq.com/s?__biz=MzAwNjA3NDMyOA==&mid=400769316&idx=6&sn=d7b6c6e4b2310a563c14a4ac52222935&scene=23&srcid=1121pZdBxcgAVI12MaMFJOtd#wechat_redirect