electron vue 模仿qq登录界面功能实现

目录
  • 1、使用vuecli创建vue项目
  • 2、安装electron
  • 3、vue项目安装Electron-builder打包工具
  • 4、在vue项目的src下有个background.js文件
  • 5、安装remote模块
  • 6、代码
  • 7、效果图

1、使用vuecli创建vue项目

我用的vue2

vue create qq_test

2、安装electron

npm install electron -g
//or
npm install electron@12.0.11   //老版本

3、vue项目安装Electron-builder打包工具

版本我选择的是12

vue add electron-builder

4、在vue项目的src下有个background.js文件

background.js里面有默认的配置,修改后我的配置大概如下

'use strict'

import { app, protocol, BrowserWindow, Menu, Tray } from 'electron'

import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
const isDevelopment = process.env.NODE_ENV !== 'production'

// Scheme must be registered before the app is ready
protocol.registerSchemesAsPrivileged([
  { scheme: 'app', privileges: { secure: true, standard: true } }
])

async function createWindow() {
  // Create the browser window.
  const win = new BrowserWindow({
    width: 432,
    height: 331,
    alwaysOnTop: true,//窗口一直保持在其他窗口前面
    modal: true,
    frame: false,
    darkTheme: true,
    resizable: false,//用户不可以调整窗口
    center: true, // 窗口居中
    transparent: false,//窗口透明
    show: false,// 显示窗口将没有视觉闪烁(配合下面的ready-to-show事件)
    hasShadow: true,//窗口是否有阴影
    webPreferences: {
      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      // nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
      // contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION,
      devTools: true,//客户端可以打开开发者工具(在客户端打开快捷键:ctrl+shift+i)
      nodeIntegration: true,
      enableRemoteModule: true, // 使用remote模块(electron12版本就开始废除了,需要我们自己安装remote模块)
      contextIsolation: false,
      //解决axios请求跨域问题(不推荐,不安全,但简单好用)
      webSecurity: false,
    },
  })

  if (process.env.WEBPACK_DEV_SERVER_URL) {
    // Load the url of the dev server if in development mode
    await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
    if (!process.env.IS_TEST) win.webContents.openDevTools()
  } else {
    createProtocol('app')
    // Load the index.html when not in development
    win.loadURL('app://./index.html')
  }
}

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (BrowserWindow.getAllWindows().length === 0) createWindow()
})

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.once('ready-to-show', () => {
  win.show();
})

app.on('ready', async () => {
  if (isDevelopment && !process.env.IS_TEST) {
    // Install Vue Devtools
    try {
      await installExtension(VUEJS_DEVTOOLS)
    } catch (e) {
      console.error('Vue Devtools failed to install:', e.toString())
    }
  }
  createWindow()
})

// Exit cleanly on request from parent process in development mode.
if (isDevelopment) {
  if (process.platform === 'win32') {
    process.on('message', (data) => {
      if (data === 'graceful-exit') {
        app.quit()
      }
    })
  } else {
    process.on('SIGTERM', () => {
      app.quit()
    })
  }
}

5、安装remote模块

因为electron12版本开始就废除了remote模块,我们需要自己安装

npm install @electron/remote --save
//or
cnpm install @electron/remote --save

能在客户端实现 最大化、最小化、关闭功能

6、代码

1、Login.vue页面(登录页面)

里面的最小化图标、关闭图标、最大化图标 请自己去 iconfont-阿里巴巴矢量图标库 下载

<template>
  <div class="login" style="overflow:hidden;">
    <!-- 顶部 -->
    <header class="header">
      <!-- 最小化按钮 -->
      <span @click="minwin" class="iconfont icon-24gl-minimization"></span>
      <!-- 关闭按钮 -->
      <span @click="close" class="iconfont icon-guanbi"></span>
    </header>

    <main>
      <!-- 顶部背景图 -->
      <div class="bg">
        <img style="" src="../../assets/images/login.gif" />
      </div>
      <!-- 登录表单组件 -->
      <div class="body">
        <Login_form></Login_form>
      </div>
    </main>
    <footer class="footer">
      <div class="zczh" @click="zc">注册账号</div>
      <div>
        <span title="二维码登录" class="iconfont icon-erweima"></span>
      </div>
    </footer>
  </div>
</template>

<script>
import "@/assets/css/login.css";
import "@/assets/fonts/gb/iconfont.css";
import "@/assets/fonts/zxh/iconfont.css";
import "@/assets/fonts/ewm/iconfont.css";
import Login_form from "@/components/Login_form.vue";

//网页测试要关闭,打包成软件要启动
const { remote } = window.require("electron");

export default {
  name: "login",
  data() {
    return {};
  },
  components: {
    Login_form,
  },
  methods: {
    close() {
      // 只是关闭窗口,软件不退出
      // remote.getCurrentWindow().hide()

      // 关闭窗口,退出软件
      remote.getCurrentWindow().close();
    },
    // 最小化
    minwin() {
      // 最小化,在任务栏显示
      remote.getCurrentWindow().minimize()

      // 隐藏窗口,任务栏也隐藏
      // remote.getCurrentWindow().hide();
    },
    zc() {
      this.$router.push("/reg");
    },

  },
  mounted() {
    //显示窗口
    remote.getCurrentWindow().show();
  },
};
</script>

<style lang="scss" scpoed>
.login {
  max-width: 900px;
  overflow: hidden;
  min-width: 430px;
  .bg {
    img {
      width: 430px;
      height: 124px;
      object-fit: cover;
    }
  }
}
</style>

2、login.css

/**
取消全部的外边距和内边距
 */
* {
    padding: 0;
    margin: 0;
}

/*设置窗口的样式*/
.login {
    cursor: default;
    /*设置手型*/
    /* border: 1px solid red; */
    /*加一个边框 调试样式 最后要删除或者更改**/
    width: 430px;
    /*设置宽度  必须要和主进程中设置的一样 不能大于主进程中设置的宽度 否则会出现滚动条*/
    height: 329px;
    /*设置高度  必须要和主进程中设置的一样 不能大于主进程中设置的高度 否则会出现滚动条*/
    position: relative;
    /*设置为相对定位*/
    /* border-radius: 4px; */
    /*设置圆角*/
    border: 1px solid #464545;
    /* 拖 */
    -webkit-app-region: drag;
    /* 禁止滚动条 */
    overflow: hidden;
}

/**
header的样式 header中只会有一个关闭按钮 处于右上角
 */
.login header.header {
    position: absolute;
    /*设置绝对定位 因为背景在他下面*/
    height: 30px;
    /*设置高度*/

    /* border-radius: 20px 20px 0 0; */
    /*给header的左上角 右上角设置圆角 不然会出现很尴尬的页面*/
    width: 428px;
    /* 因为设置了绝对定位 设置宽度*/

    /* background: rgba(255, 255, 255, 0.2); */
    /*暂时设置的 后面要删除或者更改*/
    text-align: right;
}

/**
背景
 */
.login main .bg {
    height: 124px;
    /*设置高度*/
    width: 430px;
    /*设置宽度 也可以不用设置 因为这个元素没有设置绝对定位 所以默认就是100%*/
    /* border-radius: 4px 4px 0 0; */
    /*给左上角 右上角设置圆角 不然会出现很尴尬的页面 这里和header重合在一起了*/
    /* background: url("@/assets/images/login.gif") 10px; */
    background-size: 100%;
}

/**
放置表单的元素
 */
.login main .body {
    width: 428px;
    /*设置宽度 也可以不用设置 因为这个元素没有设置绝对定位 所以默认就是100%*/
    height: 200px;
    /*设置高度 这里的高度是 主窗口(326) - footer(30) - 背景(124) 因为header设置了绝对定位 所以不用关 */
    /* background: green; */
    /*暂时设置的 后面要删除或者更改*/
}

.login footer.footer {
    position: absolute;
    /* 设置绝对定位 要让他处于窗口的最底部*/
    height: 30px;
    /*设置高度 */
    /* background: red; */
    /*暂时设置的 后面要删除或者更改*/
    bottom: 0;
    /*让footer处于底部*/
    width: 397.99px;
    /* 因为设置了绝对定位 设置宽度*/
    /* border-radius: 0 0 5px 5px; */
    background-color: #FFFFFF;
}

.login header.header span{
    display: inline-block;
    height: 30px;
    width:30px;
    text-align: center;
    line-height: 30px;
    color:#E4393c;
    cursor: pointer;

}
.login header.header span:hover{
    background-color: rgba(255,255,255,0.6);
    cursor: pointer;
}
.zczh{
    cursor: pointer;
    color: #7c7a7a;
    user-select: none;
    -webkit-app-region: no-drag;
}
.zczh:hover{
    cursor: pointer;
    color: black;
    user-select: none;
    -webkit-app-region: no-drag;
}

3、Login_form.vue组件

里面的resetMessage信息提示是我重新封装的element组件(我就不放上去了)

里面的最小化图标、关闭图标、最大化图标 请自己去 iconfont-阿里巴巴矢量图标库 下载

<template>
  <div class="login_form">
    <form>
      <div class="form_item">
        <i class="iconfont icon-zhanghao"></i
        ><input
          @focus="i1_get"
          @blur="i1_lose"
          @input="input1($event)"
          id="text"
          v-model="email"
          type="email"
          :placeholder="placeholder1"
          @keyup.enter="login"
        />
      </div>
      <div class="form_item">
        <i class="iconfont icon-mima"></i
        ><input
          @focus="i2_get"
          @blur="i2_lose"
          id="text2"
          v-model="password"
          type="password"
          :placeholder="placeholder2"
          @keyup.enter="login"
        />
      </div>
      <div class="login_options">
        <label
          ><div class="option_item">
            <input
              :disabled="jzmm"
              v-model="zddl"
              type="checkbox"
              autocomplete="off"
            />
          </div>
          <i class="text">记住账号</i></label
        >
        <label
          ><div class="option_item">
            <input
              @click="jzmm_mm"
              v-model="jzmm"
              type="checkbox"
              autocomplete="off"
            />
          </div>
          <i class="text">记住密码</i></label
        >
        <i class="text wjmm">忘记密码</i>
      </div>
    </form>
    <div class="buttons">
      <button @click="login">登录</button>
    </div>
  </div>
</template>

<script>
import "@/assets/css/login_form.css";
import "@/assets/fonts/xlk/iconfont.css";
import "@/assets/fonts/slk/iconfont.css";
import "@/assets/fonts/zh/iconfont.css";
import "@/assets/fonts/mm/iconfont.css";

//网页测试要关闭,打包成软件要启动
const { remote } = window.require("electron");

export default {
  name: "Login_form",
  data() {
    return {
      email: "",
      password: "",
      placeholder1: "邮箱",
      placeholder2: "密码",
      zddl: false,
      jzmm: false,
    };
  },
  methods: {
    i1_get() {
      if (!this.email) {
        this.placeholder1 = "";
      }
    },
    i2_get() {
      if (!this.password) {
        this.placeholder2 = "";
      }
    },
    i1_lose() {
      if (!this.email) {
        this.placeholder1 = "邮箱";
      }
    },
    i2_lose() {
      if (!this.password) {
        this.placeholder2 = "密码";
      }
    },
    input1(e) {
      if (e.target.value == "") {
        // console.log(val);
        this.password = "";
        this.placeholder2 = "密码";
      }
    },
    login() {
      var eamil_gz =
        /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
      switch (true) {
        case this.email == "":
          this.waring("邮箱不能为空!");
          break;
        case !eamil_gz.test(this.email):
          this.error("邮箱格式错误");
          break;
        case this.password == "":
          this.waring("密码不能为空!");
          break;
        default:
          let data = {
            log_email: this.email,
            log_password: this.password,
          };
          this.$axios
            .post("/login/login", data)
            // 在后台查询信息 返回res结果
            .then((res) => {
              // console.log(res.data);
              switch (true) {
                case res.data.code == 200:
                  //登录成功
                  this.success(res.data.msg);
                  //本地存储
                  localStorage.setItem("email", this.email);
                  localStorage.setItem("token", res.data.token);
                  if (this.zddl == true) {
                    localStorage.setItem("zddl", true);
                  } else {
                    localStorage.removeItem("zddl");
                    localStorage.removeItem("email");
                  }
                  if (this.jzmm == true) {
                    localStorage.setItem("zddl", true);
                    localStorage.setItem("jzmm", true);
                    localStorage.setItem("mm", this.password);
                  } else {
                    localStorage.removeItem("jzmm");
                    localStorage.removeItem("mm");
                  }
                  this.$router.push("/chat_index");
                  //登录成功跳转会有点闪屏,先隐藏,到另外一个路由再显示
                  remote.getCurrentWindow().hide();
                  //登录之后设置窗口在电脑桌面显示位置
                  remote.getCurrentWindow().setPosition(386, 192);
                  break;
                case res.data.code == 404:
                  //邮箱不存在
                  this.error(res.data.msg);
                  break;
                case res.data.code == 300:
                  //密码错误
                  this.error(res.data.msg);
                  break;
                case res.data.code == 400:
                  //用户异常
                  this.error(res.data.msg);
                  break;
                default:
                  //未知错误
                  this.error(res.data.msg);
                  break;
              }
            })
            .catch((error) => {
              //报错
            });
          break;
      }
    },
    //记住密码
    jzmm_mm() {
      if (this.zddl == false) {
        this.zddl = true;
      }
      this.jzmm = true;
    },
    // 警告提示
    waring(title) {
      this.$resetMessage({
        message: `${title}`,
        type: "warning",
      });
    },
    // 成功提示
    success(title) {
      this.$resetMessage({
        message: `${title}`,
        type: "success",
      });
    },
    // 错误提示
    error(title) {
      this.$resetMessage.error(`${title}`);
    },
  },
  mounted() {
    // 读取本地存储账号信息
    if (localStorage.getItem("zddl")) {
      this.zddl = true;
      this.email = localStorage.getItem("email");
    }
    if (localStorage.getItem("jzmm")) {
      this.jzmm = true;
      this.password = localStorage.getItem("mm");
    }
    if (localStorage.getItem("email")) {
      this.email = localStorage.getItem("email");
    }
    if (!this.email) {
      document.getElementById("text").focus();
    } else {
      document.getElementById("text2").focus();
    }
  },
};
</script>

4、login_form.css

.login_form{
    -webkit-app-region: drag;
    background-color: #FFFFFF;

}
.login_form form {
    padding: 10px 90px 0 90px;

}

.form_item {
    height: 40px;
    position: relative;

}

.form_item div {
    float: right;
    margin-right: 5px;
}

.form_item i.iconfont {
    position: absolute;
    top: 5px;

}

.form_item input {
    outline: none;
    border: none;
    padding-left: 30px;
    font-size: 16px;
    width: 230px;
    height: 30px;
    border-bottom: 1px solid #CCC;
    user-select: none;
    -webkit-app-region: no-drag;
}

.buttons {
    text-align: center;
}

.buttons button {
    background-color: #0786b4;
    border: none;
    width: 250px;
    color: #FFFFFF;
    height: 35px;
    cursor: pointer;
    font-size: 14px;
    border-radius: 4px;
    outline: none;
  -webkit-app-region: no-drag;
  user-select: none;
}
.buttons button:hover {
    background-color: #0aaae4;
    border: none;
    width: 250px;
    color: #FFFFFF;
    height: 35px;
    cursor: pointer;
    font-size: 14px;
    border-radius: 4px;
    outline: none;
    -webkit-app-region: no-drag;
    user-select: none;
}

.checkbox {
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer {
    display: flex;
    justify-content: space-between;
    padding: 5px 15px 5px 15px;
    align-items: center;
}

.login_options {
    margin-bottom: 10px;
    margin-top: 5px;
}

.login_options .option_item {
    display: inline-block;
    align-items: center;
    width: 13px;
    height: 13px;
    margin-right: 5px;
    position: relative;
    cursor: pointer;
    top: 2px;
    -webkit-app-region: no-drag;
}

.login_options .option_item input {
    /* font-size: 13px; */
    -webkit-app-region: no-drag;
}

.login_options i.text {
    display: inline-block;
    margin-right: 14px;
    font-size: 13px;
    font-style: normal;
    user-select: none;
    -webkit-app-region: no-drag;
}

.login_options .option_item span.checked {
    position: absolute;
    top: -4px;
    right: -3px;
    font-weight: bold;
    display: inline-block;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.option_item span.checked img {
    width: 100%;
    height: 100%;
}

input[type="checkbox"]+span {
    opacity: 0;
}

input[type="checkbox"]:checked+span {
    opacity: 1;
}

.wjmm {
    cursor: pointer;
    color: rgb(139, 134, 134);
}

.wjmm:hover {
    cursor: pointer;
    color: rgb(19, 18, 18);
}

5、package.json文件

{
  "name": "qq_test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "electron:build": "vue-cli-service electron:build",
    "electron:serve": "vue-cli-service electron:serve",
    "postinstall": "electron-builder install-app-deps",
    "postuninstall": "electron-builder install-app-deps"
  },
  "main": "background.js",
  "dependencies": {
    "axios": "^0.27.2",
    "core-js": "^3.8.3",
    "element-ui": "^2.15.9",
    "express": "^4.18.1",
    "qs": "^6.11.0",
    "socket.io": "^4.5.1",
    "socket.io-client": "^3.1.0",
    "vscode-material-icon-theme-js": "^1.0.7",
    "vue": "^2.6.14",
    "vue-router": "^3.5.1",
    "vue-socket.io": "^3.0.10",
    "vuex": "^3.6.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "electron": "^12.0.0",
    "electron-devtools-installer": "^3.1.0",
    "sass": "^1.32.7",
    "sass-loader": "^12.0.0",
    "vue-cli-plugin-electron-builder": "~2.1.1",
    "vue-template-compiler": "^2.6.14"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

6、main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import axios from "axios";      //引入axios

Vue.prototype.$axios = axios;   //axios跟很多第三方模块不同的一点是它不能直接使用use方法,而是用这种方法

//配合文章第4步解释        本地网站
axios.defaults.baseURL = 'http://www.electron.com/index.php/api';//开发环境

//引入element组件
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

//重写提示框只提示一次
import resetMessage from '@/assets/js/resetMessage'
Vue.prototype.$resetMessage = resetMessage

Vue.use(
  new VueSocketIO({
    debug: false,
    // 宝塔   IP:端口号      (生产环境)
    connection: SocketIO('http://127.0.0.1:3000', {//开发环境
      autoConnect: false // 取消自动连接
    }),
    extraHeaders: { 'Access-Control-Allow-Origin': '*' }
  })
)

//客户端禁止按鼠标返回键返回上一个路由
window.addEventListener('popstate', function() {
  history.pushState(null, null, document.URL)
})

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

7、效果图

本地测试

npm run electron:serve

到此这篇关于electron vue 模仿qq登录界面的文章就介绍到这了,更多相关electron vue qq登录界面内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • SpringBoot + Vue + Electron 开发 QQ 版聊天工具的详细教程

    一.简介 这是一款基于 JS 实现的超轻量级桌面版聊天软件.主要适用于私有云项目内部聊天,企业内部管理通讯等功能,主要通讯协议websocket.也支持web网页聊天实现.文字聊天,互传文件,离线消息,群聊,断线重连等功能. 先看一下效果,下图左边是web版,右边为PC版. 二.本地搭建 2.1 技术栈 后端技术栈: springboot: 让开发人员快速开发的一款Java的微服务框架. tio: 是百万级网络框架oauth2.0: OAuth 2.0 是一个行业的标准授权协议. OAuth 2

  • Vue实现简单登录界面

    本文实例为大家分享了Vue实现简单登录界面的具体代码,供大家参考,具体内容如下 实现: 界面实现 表单规则校验 结合后台 api 校验 提示消息 App.vue <template>   <div id="app"> <!--路由占位符 -->    <router-view></router-view>   </div> </template> <script> export defaul

  • Vue 实现登录界面验证码功能

    登录界面 SIdentify 创建验证码组件,实现绘画出图片验证码 <template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas> </div> </template> <script>

  • 如何利用vue+element ui实现好看的登录界面

    目录 界面效果图 下面直接上代码: 附加背景图片 总结 闲暇之余使用vue+element ui制作了个登录界面 话不多说,先上 界面效果图 下面直接上代码: <template> <div class="loginbody"> <div class="logindata"> <div class="logintext"> <h2>Welcome</h2> </div&

  • VUE脚手架框架编写简洁的登录界面的实现

    目录 前言 安装Vue脚手架 创建登录界面的文件--login.Vue 配置路由-- router.js 配置main.js 编写登录界面--Login.Vue 总结 前言 一个好的前端开发项目,都是一个团队负责一个部分进行通力合作的.简单的一个系统网站一般包含登录.主体.各个模块功能这三个大部分,现在我们写的登录界面,我们一般编写这样的登录界面可以说有一定的固定套路. 安装Vue脚手架 1.我们一Windows 10为例子,安装Vue 3脚手架前,我们先要配置node js环境: 2.接下来,

  • electron vue 模仿qq登录界面功能实现

    目录 1.使用vuecli创建vue项目 2.安装electron 3.vue项目安装Electron-builder打包工具 4.在vue项目的src下有个background.js文件 5.安装remote模块 6.代码 7.效果图 1.使用vuecli创建vue项目 我用的vue2 vue create qq_test 2.安装electron npm install electron -g //or npm install electron@12.0.11 //老版本 3.vue项目安装

  • java模仿实现QQ登录界面

    本文实例为大家分享了java模仿实现qq登录界面的具体代码,供大家参考,具体内容如下 这是我模仿QQ2015版界面,实现的基本功能有登陆验证,重置等,当然直接复制代码运行是不一样的,还要注意自己插入自己的图片. 结果截图如下所示: 代码: import java.awt.BorderLayout; import java.awt.Color; import java.awt.FlowLayout; import java.awt.GridLayout; import java.awt.Image

  • java代码块之简易qq登录界面及按钮颜色设置代码

    本文主要分享了关于简洁版qq登录界面及按钮颜色设置的相关代码,供参考. java代码块 公共包(初始化窗口位置) package util; import java.awt.Dimension; import java.awt.Toolkit; import javax.swing.JFrame; //图形化界面的工具类 public class FrameUtil { //设置窗体出现在中间位置 public static void initFrame(JFrame frame,int wid

  • Java Swing仿QQ登录界面效果

    本文实例为大家分享了Java Swing仿QQ登录界面展示的具体代码,供大家参考,具体内容如下 闲来无事将早些时候已实现的QQ登录界面再实现了一遍,纯手工打造(意思是没有用NetBeans.MyEclipse的拖动功能). 源代码如下: package ibees.qq; import java.awt.BorderLayout; import java.net.URL; import javax.swing.ImageIcon; import javax.swing.JButton; impo

  • Vue+Express实现登录注销功能的实例代码

    对Vue全家桶有基本的认知. 用有node环境 了解express 一丶业务分析 1.什么情况下进行权限验证? 访问敏感接口 前端向后端敏感接口发送ajax 后端进行session验证,并返回信息 前端axios拦截返回信息,根据返回信息进行操作 进行页面切换 页面切换,触发vue-router的路由守卫 路由守卫根据跳转地址进行验证,如需权限,则发送ajax至后端验证接口 后端验证接口进行session验证,返回信息 前端根据后端返回信息进行操作 2.前后端进行了怎么的交互? 登录 注销 二丶

  • 使用java swing实现qq登录界面示例分享

    用Java Swing做的一个QQ登录界面 复制代码 代码如下: import java.awt.Container;import java.awt.Image;import java.awt.event.ActionEvent;import java.awt.event.ActionListener; import javax.swing.ImageIcon;import javax.swing.JButton;import javax.swing.JCheckBox;import javax

  • JavaWeb实现同一帐号同一时间只能一个地点登陆(类似QQ登录的功能)

    JavaWeb实现同一帐号同一时间只能一个地点登陆(类似QQ登录的功能)的实现思路如下所示: 一.该功能有什么作用 大家想想吧.反正总会有这样的需求的.这年头什么需求不会有..呵呵.有时候也不一定是需求,很有可能为了安全也会这么做.例如考试系统,在线聊天系统,很有必要做成这样的吧. 二.实现过程 a.问题分析 在系统中,我们一般都是把登录信息绑定到session中,看来从这入手是可能找到解决办法.说白了,也就是当用户登录时,判断一下这个用户有没有登录,如果登录了,就把以前的那个session清除

  • Android实现QQ登录界面遇到问题及解决方法

    先给大家炫下效果图: 首先过程中碰到的几个问题: 1.对 EditText 进行自定义背景 2.运行时自动 EditText 自动获得焦点 3.在获得焦点时即清空 hint ,而不是输入后清空 4.清空按钮的出现时机(在得到焦点并且有输入内容时) ......... --- 这些问题都有一一解决 --- 以下是代码: 布局 fragment_main(问题2) <!-- android:focusable="true" android:focusableInTouchMode=&

  • electron + vue项目实现打印小票功能及实现代码

    一 需求: 公司项目需要通过electron调用系统打印机,实现打印小票的功能. 二.分析: electron打印大概有两种: 第一种:通过window的webcontent对象,使用此种方式需要单独开出一个打印的窗口,可以将该窗口隐藏,但是通信调用相对复杂. 第二种:使用页面的webview元素调用打印,可以将webview隐藏在调用的页面中,通信方式比较简单. 两个对象调用打印方法的使用方式都一样. 本文是通过第二种方法实现静默打印. 三.实现过程: 1.要实现打印功能,首先要知道我们的设备

  • PHP调用QQ互联接口实现QQ登录网站功能示例

    本文实例讲述了PHP调用QQ互联接口实现QQ登录网站功能.分享给大家供大家参考,具体如下: 调用QQ登录接口,首先要到QQ互联完善开发者认证信息,并通过审核,然后创建一个网站应用,获得APP ID和APP Key,通过审核后即可调用基本接口get_user_info(获得用户信息),实现QQ登录网站功能. 废话不多,上示例代码(QQ登录李维山博客): <?php header("Content-Type: text/html;charset=utf-8"); //应用APP ID

随机推荐