精华内容
参与话题
问答
  • 使用Vue写一个登录页面

    万次阅读 多人点赞 2018-07-31 11:24:20
    上一博客讲到构建了一个vue项目,现在在那个项目之上实现一个登录页面。 1.构建项目的目录 2.App.vue <template> <div id="app"> <router-view/> &...

    上一博客讲到构建了一个vue项目,现在在那个项目之上实现一个登录页面。

    1.构建项目的目录

    2.App.vue

    <template>
      <div id="app">
        <router-view/>
      </div>
    </template>
    
    <script>
      export default {
        name: 'App'
      }
    </script>
    

    main.js

    // The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import App from './App'
    import router from './router'
    
    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    
    //自己写的样式
    import './style/theme.css'
    import './style/characters.css'
    
    // 注册element-ui
    Vue.use(ElementUI)
    
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      components: { App },
      template: '<App/>'
    })
    

    theme.css

    body {
      padding: 0;
      margin:0;
      font-family: "Microsoft YaHei UI Light";
    }
    
    .outer_label {
      position: relative;
      left: 0;
      top: 0;
      width: 100%;
      height: 220px;
      background: -webkit-linear-gradient(left, #000099, #2154FA); /* Safari 5.1 - 6.0 */
      background: -o-linear-gradient(right, #000099, #2154FA); /* Opera 11.1 - 12.0 */
      background: -moz-linear-gradient(right, #000099, #2154FA); /* Firefox 3.6 - 15 */
      background: linear-gradient(to right, #000099 , #2154FA); /* 标准的语法 */
      /*background-color: #000099;*/
      text-align: center;
      filter: brightness(1.4);
    }
    .inner_label {
      position: absolute;
      left:0;
      right: 0;
      bottom: 0;
      top:0;
      margin: auto;
      height: 50px;
    }
    .qxs-icon {
      height: 40px;
      width: 90%;
      margin-bottom: 5px;
      padding-left: 10%;
      border: 0;
      border-bottom: solid 1px lavender;
    }
    

    character.css

    .text-size12px{
      font-size: 12px;
    }
    .text-size14px{
      font-size: 14px;
    }
    .text-size16px{
      font-size: 16px;
    }
    .float-right {
      float: right;
    }
    .item-color {
      color: #848487;
    }
    

    index.js

    import Vue from 'vue'
    import Router from 'vue-router'
    // import HelloWorld from '@/components/HelloWorld'
    import Login from '@/components/login/Login'
    
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'Login',
          component: Login
        }
      ]
    })
    

    Login.vue

    <template>
      <div>
        <div class="outer_label">
          <img class="inner_label login_logo" src="../../assets/logo.png">
        </div>
        <div class="login_form">
          <input type="text"  class="qxs-ic_user qxs-icon"  placeholder="用户名" v-model="userName">
          <input type="text"  class="qxs-ic_password qxs-icon"  placeholder="密码" v-model="password">
          <!--<button class="login_btn el-button el-button&#45;&#45;primary is-round" type="primary" round>登录</button>-->
          <el-button class="login_btn" @click.native="login" type="primary" round :loading="isBtnLoading">登录</el-button>
          <div style="margin-top: 10px">
            <span style="color: #000099;" @click="login">司机账号登陆</span><span style="float: right;color: #A9A9AB">忘记密码?</span>
          </div>
        </div>
      </div>
    </template>
    
    
    
    <script>
    //  import { userLogin } from '../../api/api';
    
      export default {
        data() {
          return {
            userName: '',
            password: '',
            isBtnLoading: false
          }
        },
        created () {
          if(JSON.parse( localStorage.getItem('user')) && JSON.parse( localStorage.getItem('user')).userName){
            this.userName = JSON.parse( localStorage.getItem('user')).userName;
            this.password = JSON.parse( localStorage.getItem('user')).password;
          }
        },
        computed: {
          btnText() {
            if (this.isBtnLoading) return '登录中...';
            return '登录';
          }
        },
        methods: {
          login() {
            if (!this.userName) {
              this.$message.error('请输入用户名');
              return;
            }
            if (!this.password) {
              this.$message.error('请输入密码');
              return;
            }
    
          }
        }
      }
    </script>
    <style>
      .login_form {
        padding-top: 10%;
        padding-left: 10%;
        padding-right: 10%;
      }
      .qxs-ic_user {
        background: url("../../assets/login/ic_user.png") no-repeat;
        background-size: 13px 15px;
        background-position: 3%;
      }
      .qxs-ic_password {
        background: url("../../assets/login/ic_password.png") no-repeat;
        background-size: 13px 15px;
        background-position: 3%;
        margin-bottom: 20px;
      }
      .login_logo {
        height: 100%;
      }
      .login_btn {
        width: 100%;
        font-size: 16px;
        background: -webkit-linear-gradient(left, #000099, #2154FA); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(right, #000099, #2154FA); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(right, #000099, #2154FA); /* Firefox 3.6 - 15 */
        background: linear-gradient(to right, #000099 , #2154FA); /* 标准的语法 */
        filter: brightness(1.4);
      }
    </style>
    

    ic_password.png

    ic_user.png

    logo.png

     

    3.根据npm run dev 命令启动,启动完成之后会有个链接,访问链接就直接可以看到下面页面:

     

    问题交流群,不定期分享各种技术文档:

    QQ群号:464512055

    群二维码:

    这是一个神器的二维码,扫描之后你会少掉一块钱。

     

    展开全文
  • 构建 Spring Boot 项目并通过登录 DEMO 打通前后端的联系,为下一步开发打下基础。

    前面我们已经完成了前端项目 DEMO 的构建,这一篇文章主要目的如下:

    一、打通前后端之间的联系,为接下来的开发打下基础
    二、登录页面的开发(无数据库情况下)

    前言:关于开发环境

    每位 Coder 都有自己偏好的开发工具,从大的方面划分主要有文本编辑器流和 IDE 流两种,我有一段时间也喜欢用编辑器(Sublime Text、Vim),但对我来说开发效率确实不如使用 IDE 高,所以就放弃了。不过需要修改某一代码片段时,使用编辑器还是比较便捷的。

    虽说大家可以按照自己的情况任意选择工具,但做教程只能顾及其中一种,所以不好意思了读者大人们。

    我比较习惯用 IntelliJ IDEA,在 Java 后端方面地位没得说,然而我前端也是用它做的。。。说实话没感到有什么不妥当的地方,界面什么的都和 WebStorm 差不多,只要不是只用 Eclipse 的同学,应该不会觉得别扭。

    (用 Eclipse 的同学,是时候尝试改变了 /手动狗头)

    第一篇文章也放上了 GitHub 的地址,有些小伙伴可能没看到,这里再放一遍:

    https://github.com/Antabot/White-Jotter

    追到第三篇的同学都是动手能力比较强的了,今天我测试了一下,按照项目的 README 运行基本没有问题,有兴趣的小伙伴可以搞一下,如果发现新的问题请在评论区指出,感谢。

    一、后端项目创建

    这个就很简单了。在 IDEA 中新建项目,选择 Spring Initializr,点击 Next
    在这里插入图片描述
    输入项目元数据,Next
    在这里插入图片描述
    选择 Web -> Web,Next
    在这里插入图片描述
    最后是项目名称和项目地址,Finish 后等待项目自动初始化即可。
    在这里插入图片描述
    运行 Application.java
    在这里插入图片描述
    访问 http://localhost:8080,发现弹出了错误页面,OK,这就对了,因为我们啥页面都没做啊。
    在这里插入图片描述

    二、登录页面开发

    1.关于前后端结合

    注意我们的项目是前后端分离的,这里的结合意思不是就不分离了,是如何把这俩分离的项目串起来用。

    前面提到过前后端分离的意思是前后端之间通过 RESTful API 传递 JSON 数据进行交流。不同于 JSP 之类,后端是不涉及页面本身的内容的。

    在开发的时候,前端用前端的服务器(Nginx),后端用后端的服务器(Tomcat),当我开发前端内容的时候,可以把前端的请求通过前端服务器转发给后端(称为反向代理),这样就能实时观察结果,并且不需要知道后端怎么实现,而只需要知道接口提供的功能,两边的开发人员(两个我)就可以各司其职啦。

    艾玛做一个完整的教程真不容易,遇到的每个知识点感觉都能讲一堆。上次的文章被一位老哥反问是不是太着急了,也不知道是什么意思,我自己反思可能是讲的不够细吧,这里我就再啰嗦一下讲两句 正向代理反向代理

    正向代理就是,你要访问一个网站,比如“谷弟弟”,然后发现访问不到,于是你访问了一个能访问到“谷弟弟”的代理服务器,让它帮你拿到你想浏览的页面。

    反向代理就是,你访问了一个网站,你以为它是“谷弟弟”,但其实它是“谷姐”,“谷姐”知道你其实是想找她弟,就取回“谷弟弟”的内容给你看。作为用户的你,是不知道有这个过程的,这么做是为了保护服务器,不暴露服务器的真实地址。

    知乎上有张神图可以描述这两种过程
    在这里插入图片描述

    2.前端页面开发

    Login.vue

    首先我们开发登录页面组件,右键 src\components 文件夹,New -> Vue Component,命名为 Login,如果没有 Vue Component 这个选项,可以选择新建一个 File,命名为 Login.vue 即可。代码如下:

    <template>
      <div>
          用户名:<input type="text" v-model="loginForm.username" placeholder="请输入用户名"/>
          <br><br>
          密码: <input type="password" v-model="loginForm.password" placeholder="请输入密码"/>
          <br><br>
          <button v-on:click="login">登录</button>
      </div>
    </template>
    
    <script>
    
      export default {
        name: 'Login',
        data () {
          return {
            loginForm: {
              username: '',
              password: ''
            },
            responseResult: []
          }
        },
        methods: {
          login () {
            this.$axios
              .post('/login', {
                username: this.loginForm.username,
                password: this.loginForm.password
              })
              .then(successResponse => {
                if (successResponse.data.code === 200) {
                  this.$router.replace({path: '/index'})
                }
              })
              .catch(failResponse => {
              })
          }
        }
      }
    </script>
    
    

    <template> 标签中随便写了一个登录的界面, methods 中定义了登录按钮的点击方法,即向后端 /login 接口发送数据,获得成功的响应后,页面跳转到 /index。因为之前我们设置了默认的 URL,所以请求实际上发到了 http://localhost:8443/api/login

    AppIndex.vue

    右键 src\components 文件夹,新建一个 directory,命名为 home,再在 home 下新建一个 Appindex.vue ,即首页组件,这里暂时不做过多开发,先随便写个 Hello World。

    <template>
        <div>
          Hello World!
        </div>
    </template>
    
    <script>
      export default {
        name: 'AppIndex'
      }
    </script>
    
    <style scoped>
    
    </style>
    
    

    3.前端相关配置

    设置反向代理

    修改 src\main.js 代码如下:

    import Vue from 'vue'
    import App from './App'
    import router from './router'
    // 设置反向代理,前端请求默认发送到 http://localhost:8443/api
    var axios = require('axios')
    axios.defaults.baseURL = 'http://localhost:8443/api'
    // 全局注册,之后可在其他组件中通过 this.$axios 发送数据
    Vue.prototype.$axios = axios
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      components: { App },
      template: '<App/>'
    })
    
    

    因为使用了新的模块 axios,所以需要进入到项目文件夹中,执行 npm install --save axios,以安装这个模块。

    配置页面路由

    修改 src\router\index.js 代码如下

    import Vue from 'vue'
    import Router from 'vue-router'
    // 导入刚才编写的组件
    import AppIndex from '@/components/home/AppIndex'
    import Login from '@/components/Login'
    
    Vue.use(Router)
    
    export default new Router({
      routes: [
      // 下面都是固定的写法
        {
          path: '/login',
          name: 'Login',
          component: Login
        },
        {
          path: '/index',
          name: 'AppIndex',
          component: AppIndex
        }
      ]
    })
    
    

    跨域支持

    为了让后端能够访问到前端的资源,需要配置跨域支持。

    config\index.js 中,找到 proxyTable 位置,修改为以下内容

        proxyTable: {
          '/api': {
            target: 'http://localhost:8443',
            changeOrigin: true,
            pathRewrite: {
              '^/api': ''
            }
          }
        }
    

    注意如果不是在最后的位置,大括号外需要添加一个逗号。

    运行项目

    执行 npm run dev,或双击 dev(start 也一样)脚本,查看登录页面效果。

    注意地址是 localhost:8080/#/login ,中间有这个 # 是因为 Vue 的路由使用了 Hash 模式,是单页面应用的经典用法,但连尤雨溪本人都觉得不太好看,所以可以在路由配置中选择使用 History 模式,但会引发一些问题,需要在后端作出处理,所以这里先不更改,之后我单独写一篇关于这个的文章。
    在这里插入图片描述
    教程的内容简化了一下,我做的是这个样子的。。。
    在这里插入图片描述
    呃,总之这个页面的功能都是一样的。

    4.后端开发

    User 类

    Login.vue 中,前端发送数据的代码段为

    .post('/login', {
                username: this.loginForm.username,
                password: this.loginForm.password
              })
    

    后端如何接收这个 JS 对象呢?我们很自然地想到在需要创建一个形式上一致的 Java 类。

    打开我们的后端项目 wj,首先在 src\main\java\com\evan\wj 文件夹(就是你自己的 web 项目的包)下,新建一个 pojo 包(package),然后新建 User类,代码如下

    package com.evan.wj.pojo;
    
    public class User {
        int id;
        String username;
        String password;
    
        public int getId() {
            return id;
        }
    
        public void setId(int id) {
            this.id = id;
        }
    
        public String getUsername() {
            return username;
        }
    
        public void setUsername(String username) {
            this.username = username;
        }
    
        public String getPassword() {
            return password;
        }
    
        public void setPassword(String password) {
            this.password = password;
        }
    }
    
    

    Result 类

    Result 类是为了构造 response,主要是响应码。新建 result 包,创建 Result 类,代码如下

    package com.evan.wj.result;
    
    public class Result {
        //响应码
        private int code;
    
        public Result(int code) {
            this.code = code;
        }
    
        public int getCode() {
            return code;
        }
    
        public void setCode(int code) {
            this.code = code;
        }
    
    }
    
    

    实际上由于响应码是固定的,code 属性应该是一个枚举值,这里作了一些简化。

    LoginController

    Controller 是对响应进行处理的部分。这里我们设定账号是 admin,密码是 123456,分别与接收到的 User 类的 usernamepassword 进行比较,根据结果返回不同的 Result,即不同的响应码。前端如果接收到成功的响应码(200),则跳转到 /index 页面。

    wj 下新建 controller 包,新建 LoginController 类,代码如下

    package com.evan.wj.controller;
    
    import com.evan.wj.result.Result;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.*;
    import org.springframework.web.util.HtmlUtils;
    
    import com.evan.wj.pojo.User;
    
    import java.util.Objects;
    
    @Controller
    public class LoginController {
    
        @CrossOrigin
        @PostMapping(value = "api/login")
        @ResponseBody
        public Result login(@RequestBody User requestUser) {
        // 对 html 标签进行转义,防止 XSS 攻击
            String username = requestUser.getUsername();
            username = HtmlUtils.htmlEscape(username);
    
            if (!Objects.equals("admin", username) || !Objects.equals("123456", requestUser.getPassword())) {
                String message = "账号密码错误";
                System.out.println("test");
                return new Result(400);
            } else {
                return new Result(200);
            }
        }
    }
    
    

    这里只是为了演示前后端的交互过程,真正的登录验证要考虑更多因素,后面的文章会有详细介绍。另外教程初期对项目结构做了一些简化,实际上在 controller 里写这么多逻辑是不合理的,要尽量封装到 service 里面去。

    最后,在 src\main\resources 文件夹下找到 application.properties 文件配置端口,即加上 server.port=8443(初始应该是空白的,后期还要配置数据库等)

    5.测试项目

    同时运行前端和后端项目,访问 localhost:8080/#/login,输入用户名 admin,密码 123456
    在这里插入图片描述
    点击确定,成功进入 localhost:8080/#/index
    在这里插入图片描述
    通过这篇文章,希望大家可以直观地感受到前后端分离项目中前后端的过程,之后的功能开发基本思路就是在后端开发 Controller,在前端开发不同的组件,这个顺序可以随意。实际的项目应该是前后端人员根据功能需求约定好接口,然后齐头并进,以提高开发效率。

    接下来一段时间需要写的内容大概有以下这些:

    • 数据库的引入
    • 后端拦截器的配置
    • 部署项目时会遇到的一些坑
    • 使用 Element 辅助前端开发
    • 公共组件的开发

    顺序我再想一想,教程做的比较慢,大家可以在 GitHub 上看项目的进度。

    查看系列文章目录:
    https://learner.blog.csdn.net/article/details/88925013

    上一篇:Vue + Spring Boot 项目实战(二):搭建 Vue.js 项目

    下一篇:Vue + Spring Boot 项目实战(四):数据库的引入

    展开全文
  • bootstrap3 登录页面

    万次阅读 2019-02-21 15:16:38
    bootstrap3 纯bootstrap样式登录页面,页面部署在Github上:https://www.jnnvc.com/others/login.html 为了防止图片变形,或这出现空白区域,我将图片设置为自适应百分比大小了。 欢迎加入JavaQQ交流群:774075496 ...

     bootstrap3 纯bootstrap样式登录页面,页面部署在Github上: https://one-few.github.io/others/login.html

    为了防止图片变形,或这出现空白区域,我将图片设置为自适应百分比大小了。

    欢迎加入JavaQQ交流群:1001342116

    
    
    <!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>love</title>
        <link href="favicon.ico" rel="shortcut icon" />
        <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body style=" background: url(http://global.bing.com/az/hprichbg/rb/RavenWolf_EN-US4433795745_1920x1080.jpg) no-repeat center center fixed; background-size: 100%;">
    
    
        <div class="modal-dialog" style="margin-top: 10%;">
            <div class="modal-content">
                <div class="modal-header">
    
                    <h4 class="modal-title text-center" id="myModalLabel">登录</h4>
                </div>
                <div class="modal-body" id = "model-body">
                    <div class="form-group">
    
                        <input type="text" class="form-control"placeholder="用户名" autocomplete="off">
                    </div>
                    <div class="form-group">
    
                        <input type="password" class="form-control" placeholder="密码" autocomplete="off">
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="form-group">
                        <button type="button" class="btn btn-primary form-control">登录</button>
                    </div>
                    <div class="form-group">
                        <button type="button" class="btn btn-default form-control">注册</button>
                    </div>
    
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    
    </body>
    </html>
    

     

    展开全文
  • 登录页面的代码

    万次阅读 2019-06-27 09:34:59
    登录页面的代码 开发工具与关键技术:MVC/JavaScript 作者:邱慧敏 撰写时间:2019/06/25 在把页面和数据库做好之后,我的登录页面只需要 用户名和密码 ,所以代码比较简单。 先找到登录按钮,给一个点击事件,然后...

    登录页面的代码

    在把页面和数据库做好之后,我的登录页面只需要 用户名和密码 ,所以代码比较简单。
    先找到登录按钮,给一个点击事件,然后再获取他们的表单值,然后对用户名和密码进行判断,判断是否填写了资料和是否是正确的账户和密码,在这之前还要检查登录页面是否是属于外层页面。dataValidationForm 是from表单的ID,用户名和密码必须要加上value

    <input type="text" name="UserNuber" id="UserNuber" class="form-control" placeholder="用户名" value="@ViewBag.UserNuber" style="width:93%;" />
     <input type="Password" name="Password" id="Password" class="form-control" placeholder="密码" value="@ViewBag.Password" style="width:93%;" />
    
    <script>
     var layer;
       $(function () {
           //键盘按下事件
           window.onkeydown = onreturn;
             //用于检查登录页面是否是外层页面
             if (window.top.location.href != window.location.href) {
                 window.top.location.href = window.location.href;
                }
             //加载&初始化layui模块,弹出层模块
             layui.use(['layer'], function (args) {
                 layer = layui.layer;
             });
            $("#btnSubmit").click(function () {
              //获取值
              var UserNuber = $('#dataValidationForm [name="UserNuber"]').val();//用户名
              var Password = $('#dataValidationForm [name="Password"]').val();//密码
    var rememberMe = $('#dataValidationForm[name="rememberMe"]:checked').val();//是否记住密码
                //判断是否填写数据 判断用户名和密码
                if (strValIsNotNull(UserNuber) && strValIsNotNull(Password)) {
                    var layerIndex = layer.load();//打开加载层
                    $.post("/WCommerce/UserLogin",//路径:控制器名称+控制器中的方法名称
                      {
                         UserNuber: UserNuber,//用户名
                         Password: Password,//密码
                         rememberMe: rememberMe,//是否记住密码
                       }, function (msg) {
                         layer.close(layerIndex);//加载层
                       if (msg == "success") {
                           //alert("登录成功");
                           //跳转到主页面
                    window.location.replace("/WCommerce/Main");//跳转路径:控制器名称+主页面
                    } else {
                        if (msg == "PasswordErro") {
                            layer.alert('请输入正确的账号或密码');
                          }
                         else if (msg == "userNoExsit") {
                             layer.alert('用户不存在');
                          }
                          else {
                             layer.alert('登录失败');
                          }
                           //清空密码
                           $("#Password").val("");
                                }
                            });
                    } else {
                        alert("请填写完整数据");
                    }
                });
                //字符串值不为空
                function strValIsNotNull(strVal) {
                    return strVal != undefined && strVal != null && strVal != '';
                }
        </script>
    

    然后在后台里获取cookie,

    public ActionResult Login()
    {
       string UserNuber = "";
       string Password = "";    
       bool isRember = false;
       //获取cookie
      HttpCookie cookie = System.Web.HttpContext.Current.Request.Cookies["user"];
        if (cookie != null)
          {
           if (cookie["UserNuber"] != null)
            {
          UserNuber = System.Web.HttpContext.Current.Server.UrlDecode(cookie["UserNuber"]);
                }
                if (cookie["Password"] != null)
                 {
          Password = System.Web.HttpContext.Current.Server.UrlDecode(cookie["Password"]);
                  }
                  isRember = true;
                }
                ViewBag.UserNuber = UserNuber;
                ViewBag.Password = Password;
                ViewBag.isRember = isRember;
                return View();
            }
    

    接下来就是最关键的后台代码了,获取页面传递的变量,然后用linq的查询方法,根据账号查询出一条用户数据…

     public ActionResult UserLogin(PW_User pwUser)
    {
       string strMsg = "fail";//定义一个记录状态的变量
       //获取页面传递的变量
       string strUserNuber = pwUser.UserNuber;   //用户名
       string strPassword = pwUser.Password;     //密码
       string strIsRember = Request["rememberMe"];    //记住否        
       //验证码正确
        try
         {
          //根据账号查询出一条用户数据
          //linq
           PW_User dbUser = (from tbUser in myModels.PW_User
                             where tbUser.UserNuber == strUserNuber && tbUser.ToVoidNo == true
                             select tbUser).Single();//结果只能有一条数据,0条或者大于等于2条都会出现异常(一般单表查询时用)
           //对用户输入的密码加密
           string password = Common.AESEncryptHelper.Encrypt(strPassword);
           //用加密后的密码和数据库查询到的密码比较
           if (password == dbUser.Password)
            {
              //=验证选择的角色是否正确
              var listUserType = (from tbUser in myModels.PW_User
                                  join tbUserRoleDetail in myModels.PW_UserRoleDetail on tbUser.UserID equals tbUserRoleDetail.UserID
                                  join tbUserType in myModels.SYS_UserType on tbUserRoleDetail.UserTypeID equals tbUserType.UserTypeID
                                  where tbUser.UserID == dbUser.UserID
                                  select new
                                  {
                                     tbUserType.UserTypeID,
                                     tbUserType.UserType
                                   }).ToList();
               if (listUserType.Count > 0)
                 {
                    //=确认身份正确
    //把用户数据放到session中
                    //获取用户类型名称
                    string userTypeName = listUserType[0].UserType.Trim();
                    //获取用户类型ID
                    int userTypeId = listUserType[0].UserTypeID;
                    //设置session
                    Session["UserID"] = dbUser.UserID;//传递UserID
                    Session["UserTypeID"] = userTypeId;//传递UserTypeID
                    Session["ServerTime"] = DateTime.Now.ToString("yyy-MM-dd HH:mm:ss");//登录时间
                    //记住用户信息 使用cookie
                    if (strIsRember != null && strIsRember.Trim() == "true")
                       {
                         //记住
                         //记住密码 保存cookie
                         HttpCookie cookie = new HttpCookie("user");
                         cookie.Expires = DateTime.Now.AddDays(7);//保存7天
                         cookie["UserNuber"] = strUserNuber;//用户名
                         cookie["Password"] = strPassword;//密码
                         Response.Cookies.Add(cookie);
             }
             else
                 {
                    //忘记
                    HttpCookie cookie = new HttpCookie("user");
                    cookie.Expires = DateTime.Now.AddDays(-1);//有效期设置为昨天,浏览器会自动删除cookie
                    Response.Cookies.Add(cookie);
                   }
                     strMsg = "success";//登录成功
                     }
                      else
                          {
                            strMsg = "userTypeErro";//用户类型错误
                            }
                        }
                        else
                        {
                            strMsg = "passwordErro";//密码错误
                        }
                    }
                    catch (Exception e)
                    {
                        strMsg = "userNoExsit";//没有此用户
                        Console.Write(e);
                        //throw;
                    }
                return Json(strMsg, JsonRequestBehavior.AllowGet);
            }
    

    完整代码就是这样的了,如果还需要其他的判断条件可自行添加上去。效果图:
    在这里插入图片描述
    如果需要按回车键登录的话,

    //按下回车键实现登录效果
     function onreturn() {
      if (window.event.keyCode == 13) {
         $("#btnSubmit").click();
             }
         }
    
    展开全文
  • 使用Vue.js和Element-UI做一个简单的登录页面
  • C#登录页面

    千次阅读 2019-05-08 12:02:39
    C#登录页面 开发工具与关键技术:VS MVC、SQL 撰写时间:2019/5/6 验证登录 登录一个系统,必须要有验证登录部分,如果没有验证登录的信息就可以登录一个系统,想必这个系统的意义不大,不然怎么可能什么账号、密码...
  • 登录页面跳转

    千次阅读 2019-05-16 18:08:05
    登录页面跳转 开发工具与关键技术:VS、MVC 作者:黎官凤 撰写时间:2019/05/10 在做项目的时候有很多的项目都是需要实现登录的,在登录页面上填写完整各种登录信息然后点击登录按钮跳转到主页面从而实现到你...
  • JavaWeb快速入门(二)——实现登录页面

    万次阅读 多人点赞 2018-07-04 21:36:37
    (一)静态登录页面我们在https://blog.csdn.net/qq_35616167/article/details/80917262的基础上,继续对javaweb项目进行操作,以熟悉javaweb。在项目工程下的WebRoot文件夹下,为使得项目清晰,我们可以分别新建...
  • 编写3个页面,实现登录页面login.jsp,在其中输入用户名,密码,发送到登录验证页面loginCL.jsp,验证登录成功,在success.jsp页面显示成功提示、打印出相关信息,验证登录失败,返回login.jsp页面,在login.jsp页面...
  • 登录页面ajax请求

    千次阅读 多人点赞 2017-12-19 14:27:20
    登录页面ajax请求
  • 登录页面增加回车登录功能

    千次阅读 2019-06-06 09:32:00
    当我们在某个网站登录页面填写完用户名和密码做登录的时候,总是会情不自禁的按下回车键,往往有些网站不会给登录页面增加按下回车登录的功能。 下面是一个回车登录的例子: $(function () { //回车登录 $(...
  • jsp+servlet实现简单登录页面功能Demo

    万次阅读 多人点赞 2018-05-28 17:55:16
    小白新路历程-1 [转载请联系本人]实现功能:模拟简单登录功能,登录成功跳转新页面登录失败在原登录界面提示登录失败信息开发环境:eclipseTomcat-8.0预备知识:HTML标签,Servlet相关知识——请求的转发与重定向...
  • Spring security 自定义登录页面,登录后仍然跳转到登录页面 死循环的问题 搭建个人博客项目时遇到的bug,查阅多方资料无解,在改了四个小时后发现是csrf关闭失败的原因 版本信息 springboot 2.2.6 springsecurity 5...
  • 自己在配置spring security自定义的登录页面时,出现 页面直接返回登录页面,不走验证登录流程的问题 解决办法: 图中1 的位置必须注意,2、3的位置可以自己配置,配置的话在这里不用多说,如果想尽快看到效果,...
  • java登录超时回到登录页面 有没有实现此功能的思想呢? 或者有demo 代码最好了 ,谢谢~
  • 我们在做很多基于frame的页面时,一个frame里面的链接内容在另外一个frame中显示,如果页面超时我们在后台的处理基本上都是重定向到登录页面,那么此时这个登录页面就会显示在一个frame中,但是我们需要的效果是整个...
  • keycloak 自定义登录页面

    千次阅读 2020-05-08 11:33:19
    keycloak 自定义登录页面详细步骤如下: 因为keycloak是jboss开发的,使用FTL后缀开发前端文件,可能根据以下方式实现 keycloak将前端页面分为四类:按类设置主题。 •Account - Account management •Admin - ...
  • 制作京东登录页面

    千次阅读 2019-05-12 13:21:12
    制作京东登录页面 制作京东登录页面 header {/头部界面/ height: 100px; background-image: url(“img/608ba4ceaa996be86f6f62c0bf3f5cd.png”); background-repeat: no-repeat; background-position: 120px ...
  • 登录页面的逻辑

    千次阅读 2019-04-23 21:48:55
    登录页面的逻辑 开发工具与关键技术:Visual Studio 2015 登录逻辑 作者:李国旭 撰写时间:2019年4月23日 我们平常玩的微信、QQ、微博、游戏等,这些聊天的工具和游戏都会有一个登录的界面,让我们输入用户的信息来...
  • 前几天做个APP,需要用到登录页面,无奈本人艺术细胞太差,于是去GitHub逛了一圈,没有找到特别满意的,于是只能自己设计了一个,将就着用一下,后续会继续扩充。大家有比较好的设计方案欢迎评论区分享! 废话不多说...
  • 模仿京东登录页面

    万次阅读 多人点赞 2017-01-02 18:52:47
    简单的模仿京东登录页面
  • 上百套HTML5登录页面模板

    万次阅读 多人点赞 2019-03-01 10:54:57
    html登录页面
  • 前端小案例:登录页面

    千次阅读 多人点赞 2020-01-31 21:26:59
    前端入门相对来说不是太难,当然想要学得很精通还是有一定难度的,至少对于刚刚接触这方面知识的我来说,还是比较掉头发的(开个小玩笑啦),下面是我做的一个小案例,比较简单和常见的登录页面,不足之处,希望给为...
  • 登录页面测试用例

    千次阅读 2018-07-16 10:01:30
    登录页面的测试对于软件测试相当于hello world对于程序员的意义,甚至意义更大。有时候最基础的东西,往往最难,也往往被人忽略。已经在软件测试行业摸爬滚打两年了,但是如果面试的时候让我设计登录页面的测试用例...
  • 例:1) 完成登录页面效果2) 输入用户名(手机号)和密码,并做合法性校验,当手机号格式不正确时,提示“请输入合法的手机号”3) 完成记住密码和自动登录的选中状态切换4) 当选择自动登录时,自动选中记住...
  • 项目存在不同的子系统,需要根据不同的登录路径,登录成功后跳转不同的登录页面。 2.总体思路 将点击的路径记录到session中,登录成功后获取路径进行跳转 3.代码 目的是获得登录时的路径,保存到session中 ...
  • Swing实现登录页面

    万次阅读 2018-06-24 22:10:59
    Swing实现登录页面,输入用户名和密码正确之后,点击确定按钮可以显示登录成功,输入错误会显示错误,点击重置按钮会将将用户名和密码清零。输入用户名和密码正确之后:输入用户名和密码错误之后:点击重置按钮之后:...
  • Android登录页面设计

    千次阅读 2018-09-01 11:23:43
    今天呢,给大家奉上一篇android登录页面,当然这个页面也是我写的,不过可能并不美观,只是帮大家理解相对布局和线性布局。 程序截图 很多app大致界面就是这个样子。至于美观性,就需要童鞋们自己去添加一些效果...
  • 登录页面测试点

    千次阅读 多人点赞 2018-07-12 16:09:00
    (转载,原文出处:点击打开链接)登录页面测试点:1、界面测试:与UI设计(颜色、字号、边距)一致、界面按钮布局摆放一致2、输入框空值测试:保持输入框为空,点击登录3、空格测试:(1)输入空格,点击登录(2)...
  • android实现简单的登录页面

    万次阅读 2018-06-23 18:10:28
    最近在做一个小项目,然后要求要有登录页面.其实现在大多数app都是有登录页面的.所以就学习了一下怎样实现一个简单的登录页面,然后就写这篇博客和大家分享一下 一个登录页面最基本的需要三个组件,包括两个文本输入框...

空空如也

1 2 3 4 5 ... 20
收藏数 65,559
精华内容 26,223
关键字:

登录页面