Web前段开发——登录实例（二）

于 2018-12-02 14:30:23 发布
阅读量291 收藏
点赞数 1
分类专栏： Web前段开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43152859/article/details/84708665
版权

（接上版）

欢迎来到登录界面！ 
<div class="login">
    <div class="box png">
        <div class="logo png"></div>
        <div class="input">
            <div class="log">
                <div class="name">
                    <label>用户名</label><input type="text" class="text" id="value_1" placeholder="用户名" name="value_1" tabindex="1" />
                </div>
                <div class="pwd">
                    <label>密　码</label><input type="password" class="text" id="value_2" placeholder="密码" name="value_2" tabindex="2" />
                    <input type="button" class="submit" onclick="login()" tabindex="3" value="登录" />
                    <!-- <button onclick="login( )">登录</button>;-->
                    <div class="check"></div>
                </div>
                <div class="tip"></div>
            </div>
        </div>
    </div>
    <div class="air-balloon ab-1 png"></div>
    <div class="air-balloon ab-2 png"></div>
    <div class="footer"></div>
</div>

<script type="text/javascript" src="js/jQuery.js"></script>
<script type="text/javascript" src="js/fun.base.js"></script>
<script type="text/javascript" src="js/script.js"></script>


<!--[if IE 6]>
<script src="js/DD_belatedPNG.js" type="text/javascript"></script>
<script>DD_belatedPNG.fix('.png')</script>
<![endif]-->

10.上述为用户视图代码，如若不懂，请问度娘，建议熟悉html的语法！在这里插入图片描述
11.对BLL、DAL、DBUTILITY、MODEL进行引用，右击“引用”——“添加引用”，全选！
在这里插入图片描述
12.对Homecontroller添加代码，代码如下：
在这里插入图片描述

[httppost]
public ActionResult login(string value_1, string value_2)
{
 Maticsoft.BLL.test test = new Maticsoft.BLL.test();
 Maticsoft.Model.test mod = test.GetModel(value_1);
            if (mod == null)
            {
                return Content("用户名不存在！");
                }
            else if ((mod .password  != value_2) || (value_2 == ""))
            {
            return Content("密码错误！");
            }
            return Content("ok");
  }

13.右击“getmodel”——“转到定义”，对BLL层进行编辑；
在这里插入图片描述
14.输入如下代码，代码如下，位置如图所示：

public Maticsoft.Model.test GetModel(string value_1)
        {
         return dal.GetModel(value_1);
        }

在这里插入图片描述
15.右击“getmodel”——“转到定义”，对DAL层进行编辑；

public Maticsoft.Model.test GetModel(string value_1)
        {
            StringBuilder strSql = new StringBuilder();
            strSql.Append("select id,name,password from test ");
            strSql.Append(" where name=@value_1 ");
            MySqlParameter[] parameters = {
     new MySqlParameter("@value_1", MySqlDbType.VarChar)   };
            parameters[0].Value = value_1;
            Maticsoft.Model.test model = new Maticsoft.Model.test();
            DataSet ds = DbHelperMySQL.Query(strSql.ToString(), parameters);
            if (ds.Tables[0].Rows.Count > 0)
            {
                return DataRowToModel(ds.Tables[0].Rows[0]);
            }
            else
            {
                return null;
            }
        }

在这里插入图片描述
16.单击“DButility”——“PubConstant.cs”，进行代码修改，要修改的代码行如图所示：

修改成下列代码：

string _connectionString = ConfigurationManager.ConnectionStrings["ConnectionString"].ToString();

下一个Public的第一行也要修改，修改成如下代码：

string connectionString = ConfigurationManager.ConnectionStrings[configName].ToString();

17.可有可无，因为这一步是再构建一个用户视图，也就是登录成功之后就会跳转的界面，怎么构建呢？回到Homecontroller.cs，右击“Index”，添加视图，跳转到视图，
在这里插入图片描述
在该视图下进行编辑，该界面即为成功登录的界面！我的代码如下：

<html >
<head>
    <title >成功登陆</title></head>
<body >
    <div class=" box">
        <label >欢迎您进入系统</label>
    </div>
</body>
</html>

在这里插入图片描述
18.最后一步，点击调试，就做好了！
在这里插入图片描述
最后附上，所需要的模板文件，js、css。image文件，html代码上述已经给出来了，希望以上内容能对你有所帮助！凡事一步一个脚印，我相信你就是明日的冯诺依曼！
在这里插入图片描述
模板文件

御魇先生
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
web前端页面实例
06-17
学习web前端开发中搜集的一些，js、jquery、css实现的web脚本。在需要的时候可以找找借鉴借鉴。
HTML静态网页作业——我的家乡安庆
QQ_____365392777的博客
08-11 2612
1网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了Logo（源文件）所需的知识点。......
web前段助手
01-07
一个好用的web前端开发工具，包含了代码美化、转码、json格式化、json对比等二十余项功能
Web前端开发案例-源代码
08-04
html 和css 学习源码容翔实、结构清晰、循序渐进，基例实战紧密结合，既可作为HTML5+CSS3初学者的入门，也适合作为中高级用户对新技术作进一步学习的参考
JS各种实例web前端
10-09
JS 实例 特效整理的各种JS特效 实例，时钟，跑马灯，弹出层，下拉菜单，隔行变色，幻灯片焦点图，图片点击放大，图片局部放大，div绝对居中等等etc
高效WEB前端开发之路：YUI3.15
12-31
JavaScript是一种最初由Netscape的LiveScript发展而来的面向对象的Web脚本语言，被ECMA国际定义为国际化标准——ECMAScript。JavaScript具有使用局限性。在Web方面，其必须与各种DOM技术结合才能发挥作用。因此，...
Web前端开发案例教程（HTML5+CSS3）（微课版）_源代码.zip
07-10
Web前端开发案例教程（HTML5+CSS3）（微课版）_源代码.zip
Web前端开发项目教程(HTML5+CSS3+JavaScript)全册习题参考答案.pdf
11-28
...
期末前端web大作业——HTML+CSS+JavaScript仿京东购物商城网页制作(7md
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 ...
web前端的武功秘籍——网页设计速成，网页设计-那都不是事
05-31
介绍了最基础的网页设计知识，进阶阶段知识，自带网页实例讲解，还有素材哦，每一章节自带讲义（方便手机阅读），最重要的是老师讲解有趣，内容丰富，面面俱到，而且还...送给刚开始学习web前端的同学，最适合食用。
web设计实现登录和注册页面链接
12-16
先创建一数据库，登录有动态ASP页面和HTML页面，注册页面类似，注册成功后把数据提交到数据库，再在登录页面可以登录成功
第二章示例代码
02-21
循序渐进之Spring.Net框架 第二章示例代码
web-登录界面html
12-05
本资源为登陆界面，通过web显示，编程语言包括html、css、js、php，其中php负责与后端数据库连接，获取后端用户信息。
关于__Federico Milano 的电力系统分析工具箱.zip
04-26
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
mlab-upenn 研究小组的心脏模型模拟.zip
04-26
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
混合图像创建大师matlab代码.zip
04-26
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
中序遍历二叉树-java版本
04-26
在Java中，实现二叉树的中序遍历同样可以通过递归来完成。中序遍历的顺序是：首先递归地中序遍历左子树，然后访问根节点，最后递归地中序遍历右子树。 在这段代码中，Node类定义了二叉树的节点，BinaryTree类包含一个指向根节点的指针和inOrder方法，用于递归地进行中序遍历。printInOrder方法调用inOrder方法并打印出遍历的结果。 在Main类中，我们创建了一个示例二叉树，并调用printInOrder方法来输出中序遍历的结果。输出应该是：4 2 5 1 3，这表示中序遍历的顺序是左子树（4），然后是根节点（2），接着是右子树的左子树（5），然后是右子树的根节点（1），最后是右子树的右子树（3）。
无头单向非循环链表的实现（SList.c）
最新发布
04-26
无头单向非循环链表的实现（函数定义文件）
两个有序链表的合并pta
04-26
"PTA" 通常指的是一种在线编程平台，例如“Pata”或者某些特定学校或组织的编程练习与自动评测系统。在这种平台或系统中，学生或程序员会提交代码来解决各种问题，然后系统会自动运行并评测这些代码的正确性。 当提到“两个有序链表的合并PTA”时，这通常意味着在PTA平台上解决一个特定的问题，即合并两个有序链表。具体任务可能是给定两个已按升序排序的链表，要求编写代码来合并这两个链表，形成一个新的有序链表。
web前端开发项目实例
03-28
以下是一些web前端开发项目实例： 1. 响应式网站设计：开发一个能够自适应不同设备尺寸的网站，如PC、平板电脑和手机等。 2. 电商网站：开发一个类似于京东或淘宝的在线购物网站，包括商品展示、购物车、结算、支付等功能。 3. 社交网站：开发一个类似于微博或Facebook的社交网站，包括用户注册、登录、发布、评论等功能。 4. 新闻网站：开发一个类似于新浪、腾讯等新闻网站，包括新闻列表、分类、搜索等功能。 5. 博客网站：开发一个类似于WordPress或博客园的博客网站，包括文章发布、分类、标签、评论等功能。 6. 在线教育网站：开发一个类似于慕课网或Coursera的在线教育网站，包括课程展示、购买、学习等功能。 7. 论坛网站：开发一个类似于Discuz或phpBB的论坛网站，包括话题发布、回复、私信等功能。 8. 游戏网站：开发一个类似于Steam或Uplay的游戏网站，包括游戏展示、下载、社区等功能。 9. 音乐网站：开发一个类似于网易云音乐或QQ音乐的音乐网站，包括音乐播放、搜索、推荐等功能。 10. 电影网站：开发一个类似于豆瓣电影或IMDb的电影网站，包括电影展示、评分、评论等功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值