ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

vue和mybatis-plus实现登录页面

2022-06-30 11:03:52  阅读:179  来源: 互联网

标签:axios 请求 vue plus user mybatis data name


参考教程 suncaper - 05.VUE语法

VUE的一点基础设置

参考教程

VSCode 新建 vue文件 自定义模板并添加注释 - CSDN

相关说明

"* @Author:muhuai", 作者
"* @Date: $CURRENT_YEAR/$CURRENT_MONTH/$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND",
"* @Description:$1",

代码

"Print to console": {
    "prefix": "log",
    "body": [
        "console.log('$1');",
        "$2"
    ],
    "description": "Log output to console"
},
"Create vue template": {
    "prefix": "vue",
    "body": [
        "<!--",
        "* @Author:muhuai",
        "* @Date: $CURRENT_YEAR/$CURRENT_MONTH/$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND",
        "* @Description:$1",
        "-->",
        "<template>",
        "<div>",
        "</div>",
        "</template>",
        "",
        "<script>",
        "export default {",
        "  name: \"${1:component_name}\",",
        "}",
        "</script>",
        "",
        "<style scoped>",
        "</style>"
    ],
    "description": "Create vue template"
}

使用效果

  1. 在写入 vue 时出现 vue 提示,回车
    在这里插入图片描述

  2. 得到结果
    在这里插入图片描述

  3. ESLint快捷修复报错字段【VSCode如何开启ESLint - CSDN

数据准备

数据库

drop database if exists logintest;
create database logintest;
commit;

use logintest;

drop table if exists lg_user;
create table lg_user
(
		id bigint not null auto_increment comment '用户表的主键【物理主键】自增',
		userid varchar(25) comment '用户唯一ID,雪花算法生成,字符串存储',
		username varchar(30) comment '用户名',
		usertele varchar(15) comment '用户电话号码',
		userpwd varchar(20) comment '用户密码',
		useremail varchar(40) comment '用户邮箱',
		primary key (id)
) comment '用户表';
commit;

逆向工程

这个就不用多说了,反正就是把基础结构弄出来

逆向工程相关说明【逆向工程 - 教程】

注意事项

@MapperScan

启动类上加上 MapperScan 注解,不然可能报错
【expected at least 1 bean which qualifies as autowire candidate. Dependency annotations】

com.mysql.cj.jdbc.Driver

application配置文件的配置项:driver-class-name: com.mysql.cj.jdbc.Driver
当 mysql 在 5 版本及以下,使用的是 com.mysql.jdbc.Driver
当 mysql 在 5 版本以上,使用的是 com.mysql.cj.jdbc.Driver
【根据相应 mysql 版本配置】【IDEA右侧边 -- Maven -- mysql查看版本】

登录前端

路由

// 格式:import 【别名】 from '【路径】'
import Login from '@/login/Login'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/login', // 访问路径 如 localhost:8080/login 的意思【这是前端的域名啊】
      name: 'Login',
      component: Login // 组件别名 【import中规定的别名】
    }
  ]
})

页面

代码

<template>
<div class=''>
    <div>用户名:<input type="text" name="username" id="username"></div>
    <div>密码:<input type="password" name="password" id="password"></div>
    <!-- <button @click="函数名">登录</button> -->
    <div><button @click="logincheck">登录</button></div>
</div>
</template>

<script>
export default {
  name: 'Login', // 注意这里的 name 和文件名一致
  methods: {
    logincheck () {
      console.info('test-print')
      var name = document.getElementById('username').value
      var pwd = document.getElementById('password').value
      this.$axios.post('/api/user/login-check', {
        username: name,
        userpwd: pwd
      })
        .then(res => {
          console.info(res)
          if (res.data.data === 471) {
            console.info('用户名不存在')
          } else if (res.data.data === 671) {
            console.info('密码错误')
          } else {
            console.info('登录成功')
          }
        })
    }
  }
}
</script>

<style scoped>
</style>

axios说明

<script>
export default {
  name: 'Login', // 注意这里的 name 和文件名一致
  methods: {
    logincheck () { // 这里的 logincheck 对应 @click 的方法名
      // 此时要向后端发请求【向后端 8888 接口发请求】
      // 将会使用 axios 请求,类似于 ajax 请求
      // 为了使用 axios ,需要安装依赖 安装命令 cnpm install --save axios
      // 【或者是npm install --save axios】

      // 请求
      /**
       * this.$axios.请求方式(请求的后端路径【注意不要把它写成 127.0.0.1/···,后续会进行跨域处理】)
        .then(获取到的响应参数res => {
            成功获取参数的操作
        })
        .catch(){
            未成功获取参数的操作
        }
       */
</script>
1. 请求参数
<script>
// 请求参数以 XXX?XXX='' 传递【类似于 /user?ID=1 】
  axios.get('/user?ID=1')
  .then(function (response) {
    // 成功获取参数后的操作
  })
  .catch(function (error) {
    // 获取参数失败的操作
  });
    
// 请求参数多个,以 json 形式传递
// get 请求需要用 params 声明参数体,post 请求不需要,直接 {} 包裹参数体即可
// 【注意参数名称和后端对应】【put 请求 的参数方式应该和 post 一样吧】
  axios.get('/user', {
    params: {
      ID: 1
      name: 'muhuai'
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
</script>
2. 响应参数

在这里插入图片描述

以上部分为 res 的全部数据
因此要渲染后端给出的实体数据,需要 res.data.data

{
  // `data` 由服务器提供的响应
  data: {
  	code: 
  	data: {
  		接收到的实体等响应参数
  	}
  	···
  },
  
  // `status` 来自服务器响应的 HTTP 状态码
  status: 200,
 
  // `statusText` 来自服务器响应的 HTTP 状态信息
  statusText: 'OK',
 
  // `headers` 服务器响应的头
  headers: {},
 
  // `config` 是为请求提供的配置信息
  config: {},
  // 'request'
  // `request` is the request that generated this response
  // It is the last ClientRequest instance in node.js (in redirects)
  // and an XMLHttpRequest instance the browser
  request: {}
}

注意事项

axios依赖

为了使用 axios ,需要安装依赖 安装命令 cnpm install --save axios【或者是 npm install --save axios

注意!!!
引入 axios 依赖之后还要进行全局注册,在 main.js 文件中进行修改

// 全局 axios 配置
var axios = require('axios')
Vue.prototype.$axios = axios

以上步骤的目的是:为了整个项目的任何位置都能够使用 axios,之后再其他组件中通过 this.$axios 发送数据

配置代理【解决跨域问题】

【建议:建议后端请求前缀 /api/】【修改之后重启项目】

【文件 config/index.js】

proxyTable: {
 '/api': { // 意思是:以 /api 开头的接口
		// 转化其域名为 http://localhost:8888 【即后端接口】
     target: 'http://localhost:8888', 
     changeOrigin: true, // 允许跨域
     pathRewrite: {
         // 重写接口 【将 /api 改写成 /api(不改成别的的原因:防止在部署时出问题)】
     	'^/api': '/api'
     }
 }
},

因此页面部分的 () 路径部分不写上后端域名

axios的get请求默认只能传递 字符串 类型的请求

参考教程 vue axios get请求参数为json对象 而非字符串形式 - 博客园

解决办法

QS 这个我之后学了再过来补上

直接把 get 请求全部换成 post 请求 awa
此时需要注意 axios 中参数的写法

jaskson依赖

可能在项目运行之后发现前端数据无法传递到后端或者其他问题,反正先把这个数据处理的依赖给加上

<dependency>
 <groupId>com.fasterxml.jackson.core</groupId>
 <artifactId>jackson-databind</artifactId>
 <version>2.12.3</version>
</dependency>
== 和 ===

参考教程 == 与 === 的详细区别 - CSDN

简单来说就是 :
== 自动转化参与比较对象的类型,比较的是其值相同 如:(int)42 == "42" = true
=== 严格比较两个对象,包括其类型 如:(int)42 === "42" = false; (int)42 === (int)42 = true

【This dependency was not found:】

这个是我 自动配置 vue 框架的问题
<style lang="stylus" scoped> 改成 <style scoped> 即可

为了后续方便代码编写,我已经对配置代码进行了部分修改【可自行按需修改】【但是上面的图我就不改了awa】

登录后端

代码

@ApiOperation("登录验证")
@PostMapping("/login-check")
public JsonResponse loginCheck(@RequestBody LgUser lgUser)
{
    System.out.println(lgUser);
    LgUser user = lgUserService.getByusername(lgUser.getUsername());
    if(user == null)
    {
        return JsonResponse.success(471,"用户不存在");
    }
    if(!user.getUserpwd().equals(lgUser.getUserpwd()))
    {
        return JsonResponse.success(671,"密码错误");
    }
    return JsonResponse.success(user);
}

说明

因为我是个写后端的,所以就不详细写这部分了,只记录一下常见的坑点

data | code 所在的位置

在这里插入图片描述

如果是以上这种返回写法,471 会被包裹在 data 中传到前端【写前端的时候要注意这点】

在这里插入图片描述

雪花算法生成的 id 用 String 存储

我使用的雪花算法来自一位大佬的CSDN,但是我现在找不到他的原博客了,找到了一个和他博客很像的贴在这
Java实现雪花算法的示例代码 - 脚本之家

原因:前端渲染的时候,会损失 long 的精度,导致作为唯一标识的 id 被 "四舍五入" 发生变化
为了解决这个问题,直接在 id 生成时,就将其数据类型写为 String 更为方便

【但是我现在还没有学 vue 的一些更高级的用法,而且也不会 css 什么的,所以前端页面很丑就不放上来了】

【等我学习了更多的前端知识,我再来补这一部分吧awa】

标签:axios,请求,vue,plus,user,mybatis,data,name
来源: https://www.cnblogs.com/Muhuai/p/16426046.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有