开发工具与关键技术：VS 实现登录页面
作者：赖文扬
撰写时间：2019年4月25日
首先一开始要进入VS然后新建项目选择一个空模板，建好了模板之后，在数据库里面把数据库的数据库文件分离出来，然后附加在新建的项目里面，然后在到数据库里面把数据文件附加回来，然后再添加一个Model文件，Model文件专门放数据类型的文件，然后还要添加一个MainController的主控制器，添加好了主控制之后，就开始编写主页面html的代码，写完了html的部分代码后，那就要来写脚本的代码了，在写脚本语言代码之前，首先要在主页面创建一个登录页面，并且添加视图。
（下面截图）
添加好了视图之后，然后在视图那里写登录页面的html代码，html代码中会引用到一些图片、css、js插件的，这时候应该要把那些插件和图片放在Content文件里面，方便引用。还有要用html代码编写登录页面的布局，写完了html代码、正确的引入了图片和插件后，就要来到路由的基础上设置一下默认启动主页面，这时候登录页面写完了，那就可以启动运行了，它的那个登录页面的效果就会出来了，但是还不能登录进去，还有页面显示的时候，验证码的图片是没有的，因为还没有编写点击图片的切换。这时候还要创建一个主页面，并且添加视图，添加了主页面视图后，就要编写主页面的html的代码，同时也要正确的引入一些css，js的插件和图片，主页面写完了之后就可以启动运行了。
（下面截图）
完成了主页面和登录页面之后，接下来要完成script脚本代码了，现在要写在登录页面中写登录按钮的点击事件，会直接跳转到页面里面去。首先复制上面登录的id，在script里面写选择在到登录的id，然后给它一个function，然后再写页面最核心的那一句代码，给它一个.replace防止代码跳转不了，不过最主要的还是页面核心的那句代码。跳转成功了之后，就要完成实现登录页面，并且要把验证码的图片成功生成，还要把验证码的字符串放入session，在实现登录页面之前，要新建一个Common的目录，目录主要是存放验证码图片和验证码生成的。这时候要创建一个生成验证码图片的方法，并且在方法里面生成随机的验证码字符串，然后在上面要引入方法，在根据生成的验证码字符串来生成验证码图片，然后再将验证码的字符串存入session中，再把图片返回视图。
（下面截图）
写完了生成图片方法，然后还要把路径写一下，在主页面的上面图片img src那里写上/Main/CreateValidCodeImage，然后再启动运行一下，那个图片的验证码就会显示出来了，不过点击它还不会图片切换，因为还没有写点击事件。现在写一下点击事件，点击事件里面要改变里面的url，所以要用.prop（”src”），然后把路径名称复制下来，然后传输一下参数，用data把时间拼接一下，时间拼接成毫秒值，再加上.getTime这样就每一次的路径都会不一样了，这样启动运行后点击验证码图片就可以切换了，不过也有可能验证码图片切换不了，因为浏览器可能存在缓存，如果是浏览器存在缓存的话，可以直接在浏览器那里清除缓存就可以了，这样验证码图片就可以随意点击切换了。
（下面截图）
验证码图片生成写完了，现在要实现一下登录的功能，在登录之前一定要熟悉一下数据库，先在数据库中选上某一张表，在完成登录功能之前，一定要获取登录逻辑、获取值。获取了登录的用户帐户、密码、验证码之后，然后再用字符串来判断字符串值不为空，还要判断是否已经填写了数据，然后再提交数据。再创建一个用户登录的方法，在方法里面用strMsg = “fail”来接收全部的数据，然后再用Json返回strMsg，允许给它请求，再把参数放到用户登录的方法里面，获取页面传递的变量，然后再判断验证码，获取session中的验证码。再判断用户输入的验证码和session中的验证码是否一致，最后对用户输入的密码加密，然后确认身份，获取用户类型和用户类型ID，记住用户信息，记住密码，最后就登录成功了。