河南做网站企起,作文网入口,江门网络平台,做物流的网站都有什么风险一、准备工作
先从网上#xff08;站长之家、模板之家#xff0c;甚至TB#xff09;下载一个HTML模板#xff0c;要求一整套的CSS和必要的JS#xff0c;比如下图#xff1a; 登录页面的效果是#xff1a; 首页#xff1a; 利用这些模板可以减少前台网页的设计——拿来…一、准备工作
先从网上站长之家、模板之家甚至TB下载一个HTML模板要求一整套的CSS和必要的JS比如下图 登录页面的效果是 首页 利用这些模板可以减少前台网页的设计——拿来主义
网上模板很多比如HUI SA-ADMIN 本例用比较简单的《蓝色超市模板》完成用户登录操作。
二、拷贝内容到工程
把CSS、JS和IMG目录拷贝到工程类似文件拷贝粘贴 右键拷贝到工程目录下右键粘贴可另外新建一个目录也可以简单粘贴到工程根目录 效果如下 三、功能实现
功能用户第一次登录 -》 输入用户账号密码 -》 读数据库验证 -》 通过进入首页
补充
1、登录后的状态应该维持到关闭浏览器使用Cookie——后面解决
2、用户信息错误应该有相应提示
解决思路
1、修改路由还有其他解决方法默认为 Login
2、收集用户信息传送到指定Action (POST比较好
3、控制器读取数据库验证用户信息反馈相应的操作。
修改默认路由 在HOME控制器添加Login Action: 右键添加Login页面 可以测试一下默认进入登录页面 删除上面 Login.cshtml的内容并且粘贴模板中 Login.html 内容
!DOCTYPE html
html
head langenmeta charsetUTF-8title系统登录 - 超市账单管理系统/titlelink relstylesheet hrefcss/style.css/
/head
body classlogin_bgsection classloginBoxheader classloginHeaderh1超市账单管理系统/h1/headersection classloginContform classloginForm actionwelcome.htmldiv classinputboxlabel foruser用户名/labelinput iduser typetext nameusername placeholder请输入用户名 required//divdiv classinputboxlabel formima密码/labelinput idmima typepassword namepassword placeholder请输入密码 required//divdiv classsubBtninput typesubmit value登录 /input typereset value重置//div/form/section/section/body
/html
修改CSS路径后如下 这时候执行功能进入了登录页面 页面上添加JS代码收集用户信息推荐JQUERYJS和JQUERY在菜鸟学堂有介绍
!DOCTYPE html
html
head langenmeta charsetUTF-8title系统登录 - 超市账单管理系统/titlelink relstylesheet href~/css/style.css/script src~/js/jquery.js/scriptscriptfunction login() {var name $(#user).val();var psw $(#mima).val();$.post(/Home/Login, { id: name, password: psw }, function (data) {if (data OK)window.location.href /Home/Index;elsealert(data);});}/script
/head
body classlogin_bgsection classloginBoxheader classloginHeaderh1超市账单管理系统/h1/headersection classloginContform classloginForm div classinputboxlabel foruser用户名/labelinput iduser typetext nameusername placeholder请输入用户名 required//divdiv classinputboxlabel formima密码/labelinput idmima typepassword namepassword placeholder请输入密码 required//divdiv classsubBtninput typesubmit value登录 onclicklogin()/input typereset value重置//div/form/section/section/body
/html
说明
1、添加JQUERY : script src~/js/jquery.js/script
2、自定义login的JS函数来响应按钮登录的点击事件input typesubmit value登录 οnclicklogin()/
3、登录事件处理获取用户名密码两个输入框的内容利用post方式提交到服务器获取服务器的反馈如果是OK转到index页面否则弹出反馈信息
后台控制器再添加一个Login需要与前面的有不同的参数重载 public ActionResult Login(){ return View();}[HttpPost]public ActionResult Login(string id,string password){DataSet set TestMysql.Query(select * from user where nameid);if(set.Tables[0].Rows.Count 0){return Content(无此用户);}if (set.Tables[0].Rows[0][psw].ToString() ! password){return Content(密码错误);}return Content(OK);}
最后按照Login的方法修改Index的内容
!DOCTYPE html
html
head langenmeta charsetUTF-8title超市账单管理系统/titlelink relstylesheet href~/css/public.css/link relstylesheet href~/css/style.css/
/head
body
!--头部--
header classpublicHeaderh1超市账单管理系统/h1div classpublicHeaderRpspan下午好/spanspan stylecolor: #fff21b Admin/span , 欢迎你/pa hreflogin.html退出/a/div
/header
!--时间--
section classpublicTimespan idtime2015年1月1日 11:11 星期一/spana href#温馨提示为了能正常浏览请使用高版本浏览器IE10/a
/section
!--主体内容--
section classpublicMiandiv classlefth2 classleftH2span classspan1/span功能列表 span/span/h2navul classlistli a hrefbillList.html账单管理/a/lilia hrefproviderList.html供应商管理/a/lilia hrefuserList.html用户管理/a/lilia hrefpassword.html密码修改/a/lilia hreflogin.html退出系统/a/li/ul/nav/divdiv classrightimg classwColck src~/img/clock.jpg alt/div classwFonth2Admin/h2p欢迎来到超市账单管理系统!/pspan idhours/span/div/div
/section
footer classfooter
/footer
script srcjs/time.js/script
div styletext-align:center;
p更多模板a hrefhttp://www.mycodes.net/ target_blank源码之家/a/p
/div
/body
/html
运行结果
密码错误 无用户 正常登录 总结
本例基本上完成了MVC三者之间的数据交互其实MVC也没那么神秘切记把握数据传递的主线来学习将会使学习路线更加清晰
