图书信息管理系统（二）

本文是我在学习过程中记录学习的点点滴滴，目的是为了学完之后巩固一下顺便也和大家分享一下，日后忘记了也可以方便快速的复习。

图书信息管理系统登录模块实现

前言

今天学习的主要是关于登录页面的设计和逻辑实现的理解和应用

一、登陆界面设计

1.1、新建登录组件index.vue

views 文件夹（放路由组件的）下新建 login 文件夹，然后新建登录组件 index.vue（这样的好处是导入组件时只要到文件夹位置即可，后面 index.vue 名称不用写，因为默认就会找 index.vue）

<template><div>
登录页面
</div></template>

1.2、配置路由index.js

打开 router/index.js 文件

import Vue from"vue";import VueRouter from"vue-router";//导入登录组件,后面的 index.vue 可以不写，因为默认就会找
index.vue，这就是为什么取名为 index.vue 的好处。
import Login from"../views/login/index.vue" Vue.use(VueRouter);const routes =[{//配置登录路由path:"/login",name:"login",component: Login
},];const router =newVueRouter({mode:"history",base: process.env.BASE_URL, routes
});exportdefault router

1.3、清理下根组件 App.vue

<template><div id="app">//<!-- 显示路由组件位置 --><router-view /></div></template><style lang="scss">
body {font:"微软雅黑";}</style>

1.4、测试

测试下，看到一个空白页面，因为当前显示的是 App.vue 组件，而该组件中没有内容，然后手动地址栏后输入/login 路由，显示登录页面，如下:

二、使用 element 完善系统登录界面设计

2.1、登录界面 Index.vue 表单

直接根据 Element UI 中的表单进行修改
【参考 Form 表单——典型表单即可】。完善后的代码如下：

<template><div id="login-container"><el-form ref="form":model="form" label-width="60px"class="login-form"><h2 class="login-title">小豆子图书信息管理系统</h2><el-form-item label="账号"><el-input v-model="form.username" placeholder="请输入账号"></el-input></el-form-item><el-form-item label="密码"><el-input v-model="form.password" type="password" placeholder="请输入密码"></el-input></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">登录</el-button></el-form-item></el-form></div></template><script>exportdefault{data(){return{form:{username:'',password:'',}}},methods:{onSubmit(){
console.log('submit!');}}}</script>

效果如下：

2.2、登陆界面index.vue表单美化

<style scoped>
#login-container {/* 让这个div100%布满屏幕 */position: absolute;width:100%;height:100%;
  background-image:url("../../assets/login-bg.jpg");
  background-size: cover;}.login-form {width: 350px;
  background-color:rgb(191,208,223);/* margin: 160px auto; */padding: 15px;
  border-radius: 20px;height: 250px;/* 让它真正的居中 */left:50%;top:50%;
  margin-left:-175px;
  margin-top:-125px;position: absolute;}.login-title {color:rgb(9,10,10);
  text-align: center;}</style>

效果如下：

2.3、App.vue的美化

<style lang="scss">
body {font:"微软雅黑";// 解决主页上下左右多出一点点出现滚动条margin: 0px auto;}</style>

三、使用 element 完善系统登录界面设计

3.1、登录表单验证功能

Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。

index.vue 改变以下黄色底纹处。（增加以下 4 处黄色底纹代码）
（1）
<el-form :rules=“rules” ref=“form” :model=“form” labelwidth=“60px” class=“login-form”>
（2）
<el-form-item label=“账号” prop=“username”>
<el-input v-model=“form.username” placeholder=“请输入账号”></el-input>
</el-form-item>
（3）
<el-form-item label=“密码” prop=“password”>
<el-input v-model=“form.password” type=“password” p laceholder=“请输入密码”></el-input>
</el-form-item>
（4）
data() {
return {
form: {
username: ‘’, password: ‘’, },
rules: {
username: [
{required: true, message: ‘请输入账号’, trigger: ‘blur’},
],
password: [
{required: true, message: ‘请输入密码’, trigger: ‘blur’},
{min: 6, max: 32, message: ‘密码长度在 6 到 32 个字符’,
trigger: [‘blur’, ‘change’]}
]
}
}
},

<template><div id="login-container"><el-form
      :ref="form":rules="rules":model="form"
      label-width="60px"class="login-form"><h2 class="login-title">小豆子图书管理系统</h2><el-form-item label="账号" prop="username"><el-input v-model="form.username" placeholder="请输入账号"></el-input></el-form-item><el-form-item label="密码" prop="password"><el-input
          v-model="form.password"
          type="password"
          placeholder="请输入密码"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm(form)">登录</el-button></el-form-item></el-form></div></template><script>//import loginAPI from '@/API/login' //login.js 中 js 不用写,不过这种导入方式导入的是默认对象，而在 login.js 导出的是普通函数对象，所以换下面的按需导入import{ login, getUserInfo }from"@/api/login";exportdefault{data(){return{form:{username:"",password:"",},//定义账号密码的输入规则rules:{username:[{required:true,message:"请输入账号",trigger:"blur"}],password:[{required:true,message:"请输入密码",trigger:"blur"},{min:6,max:23,message:"长度在6~23个字符",trigger:["blur","change"],},],},};}</script>

3.2、登录功能实现

目前不管账号和密码如何输入，都会触发 onSubmit 方法提交数据的，通过控制台可以看到输出了“submit”。
实际需要的是当表单全部校验通过才能去提交数据到后台去。与后台存在的账号进行比对。

（1）原先 onSubmit 方法替换为下面的submitForm方法代码（也是element 官网复制——自定义校验规则）

methods:{submitForm(formName){this.$refs[formName].validate(valid=>{if(valid){//valid 为 true 表示所有表单校验通过alert("submit!");}else{
console.log("error submit!!");returnfalse;}});}}

（2）对应提交方法原来是 onSubmit()改为 submitForm。同时根据 submitForm 方法参数可知，需要传入一个要提交的表单。也就是<el-from 表签中 ref 属性值

运行测试，发现汇报如下错误：
TypeError: this.$refs[formName] is undefined。
如何解决呢？这是因为版本问题，需要在 ref="form"前面加：再次运行测试——ok。

四、使用 Easymock 为登录验证创建模拟接口

因为这个网站是不使用服务器的，所以就使用Easymock模拟数据库来创建数据。Easy mock相当于一个虚拟的数据库，它可以虚构出你想要的任何数据，并且十分逼真，名字真的很像名字，地址真的很像地址！用了成龙大哥都说好！！！

接下来我们要把数据提交到后台去，后台要做 2 件事情：第一，去查找是否存在对应的登录用户与密码；第二，返回响应（是否成功登陆）给客户端。

4.1、首先修改下我们服务接口基础地址

复制这段代码串，打开.env.development 文件修改接口服务地址（就是把请求的目标地址改成easy mock上，这样请求的数据就是easy mock的数据）:

接口服务地址，就是 vue.config.js 中 target 值

VUE_APP_SERVICE_URL = ‘https://www.easy-mock.com/mock/5e78be09048b0c4cff679b80’

4.2、创建服务接口（配置 mock.js）

假设后台只要请求成功，状态码统一规定为 200

（1）创建一个登录认证的接口（失败的不写，即用户名或密码不对)
请求 URL： /user/login
请求方式： post
描述：登陆认证
接口响应的信息如下（这里假设只有成功情况，失败情况的信息不写）

{"code":200,// 状态码"flag":true,"message":'验证成功',"data":{"token":"admin"}}

在这里插入图片描述

（2）添加响应用户信息模拟接口
请求 URL： /user/info/{token} //{token}是一个占位符，后续
请求该接口时传入 token，注意标点符号均为英文的
请求方式： get
描述：响应用户信息

{"code":200,"flag":true,"message":'成功获取用户信息',"data"://生成数据的规则{"id|1-1000":1,"name":"@cname",//cname是中文名字，name是英文名字"roles":["manager"]}}

在这里插入图片描述

调用接口出现接收到上面信息，就表示成功获取到用户信息，就可以登录到主页面了。

五、登录业务逻辑实现

总结：
这里主要是通过点击登录按钮来触发submitForm(formName)方法。
我们上面在easy mock里定义了两个接口，首先我们在login.js里引入我们自己封装的myaxios.js来发送异步请求，login.js里定义了两个方法分别来发送请求去请求easy mock里的两个接口获取数据，所以这里是按需导出，分别导出两个方法。
然后，再在index.vue登陆界面来通过登录按钮来调用submitForm(formName)方法，这个formName是传过来的参数form，这个form就是这整个表单（属性ref=form）。this.$refs[formName].validate((valid) => {}方法里面是获取ref=form的这个表单的校验结果。
如果校验成功则调用login接口并传入参数，然后login接口就会从easy mock中返回数据，如果成功获取数据，认证成功则获取data里面的token令牌。
再然后调用另一个接口getUserInfo(resp.data.token)并传入参数token，如果调用getUserInfo接口成功获取到返回的数据，那么就进一步获取用户的信息并把它存储到浏览器本地内存中，最后再跳转到首页面。

5.1、创建 api 接口文件 login.js

在 src/api/创建 login.js，用于发送 ajax 请求调用 API 接口。（回顾 test.js 如何创建）

import myaxios from'@/utils/myaxios'//发送 ajax 请求，传入账户、密码，用于验证用户是否有资格exportfunctionlogin(username,password){//返回这个promise对象以供后续操作.then.catchreturnmyaxios({url:'/user/login',//最前面的/不要少的method:'post',//url 和 method 两个属性值与前面创建接口时保持一致data:{//发送请求，并带数据过去
            username,//username:username
            password
        }})}//发送 ajax 请求，传入 token，用于获取用户信息exportfunctiongetUserInfo(token){returnmyaxios({url:`user/info/${token}`,//由于这里需要拼接占位符，所以用``method:'get'})}

上面 myaxios 是发送异步请求，返回值是一个 promise 格式的异步对象，通过 return 返回得到就是那个 promise 异步对象，后续就可以通过 promise 异步对象的 then 执行回调

5.2、使用 login.js 发送异步请求

登录组件 index.vue 中导入 login.js，从而使用发送异步请求
import { login, getUserInfo } from “@/API/login”;
使用 login, getUserInfo 两个函数发送异步请求

<script>//import loginAPI from '@/API/login' //login.js 中 js 不用写,不过这种导入方式导入的是默认对象，而在 login.js 导出的是普通函数对象，所以换下面的按需导入import{ login, getUserInfo }from"@/api/login";exportdefault{data(){return{form:{username:"",password:"",},//定义账号密码的输入规则rules:{username:[{required:true,message:"请输入账号",trigger:"blur"}],password:[{required:true,message:"请输入密码",trigger:"blur"},{min:6,max:23,message:"长度在6~23个字符",trigger:["blur","change"],},],},};},methods:{submitForm(formName){// valid是指表单验证结果（就是输入是否符合规则）this.$refs[formName].validate((valid)=>{//valid 为 true 表示所有表单校验通过，符合规则if(valid){//校验成功，调用login接口login(this.form.username,this.form.password).then((response)=>{
            console.log(response.data);const resp = response.data;if(resp.flag){//认证通过，获取token令牌，调用另一个接口getUserInfo(resp.data.token).then((response)=>{
                console.log(response.data);const respUser = response.data;if(respUser.flag){//获取用户信息//存储信息到浏览器本地
                  localStorage.setItem("llf-manager-user",JSON.stringify(respUser.data));
                  localStorage.setItem("llf-manager-token", resp.data.token);this.$router.push("./");//获取到后跳转到主页面}else{//获取用户信息失败this.$message({message: respUser.message,type:"warning",});}});}else{//认证失败this.$message({message: resp.message,type:"warning",});}});}else{//校验失败
          console.log("error submit!!");returnfalse;}});},},};</script>

💕

      原
     
     
      创
     
     
      不
     
     
      易
     
     
      ，
     
     
      还
     
     
      希
     
     
      望
     
     
      各
     
     
      位
     
     
      大
     
     
      佬
     
     
      支
     
     
      持
     
     
      一
     
     
      下
     
    
   
   
    \textcolor{blue}{原创不易，还希望各位大佬支持一下}
   
  
 原创不易，还希望各位大佬支持一下

👍

      点
     
     
      赞
     
     
      ，
     
     
      你
     
     
      的
     
     
      认
     
     
      可
     
     
      是
     
     
      我
     
     
      创
     
     
      作
     
     
      的
     
     
      动
     
     
      力
     
     
      ！
     
    
   
   
    \textcolor{orange}{点赞，你的认可是我创作的动力！}
   
  
 点赞，你的认可是我创作的动力！

⭐

      收
     
     
      藏
     
     
      ，
     
     
      你
     
     
      的
     
     
      青
     
     
      睐
     
     
      是
     
     
      我
     
     
      努
     
     
      力
     
     
      的
     
     
      方
     
     
      向
     
     
      ！
     
    
   
   
    \textcolor{red}{收藏，你的青睐是我努力的方向！}
   
  
 收藏，你的青睐是我努力的方向！

🥕

      评
     
     
      论
     
     
      ，
     
     
      你
     
     
      的
     
     
      意
     
     
      见
     
     
      是
     
     
      我
     
     
      进
     
     
      步
     
     
      的
     
     
      财
     
     
      富
     
     
      ！
     
    
   
   
    \textcolor{green}{评论，你的意见是我进步的财富！}
   
  
 评论，你的意见是我进步的财富！

标签： javascript vue.js 前端

本文转载自: https://blog.csdn.net/qq_46152664/article/details/125337760
版权归原作者 小小福仔 所有，如有侵权，请联系我们删除。

图书信息管理系统（二）

图书信息管理系统登录模块实现

前言

一、登陆界面设计

1.1、新建登录组件index.vue

1.2、配置路由index.js

1.3、清理下根组件 App.vue

1.4、测试

二、使用 element 完善系统登录界面设计

2.1、登录界面 Index.vue 表单

2.2、登陆界面index.vue表单美化

2.3、App.vue的美化

三、使用 element 完善系统登录界面设计

3.1、登录表单验证功能

3.2、登录功能实现

四、使用 Easymock 为登录验证创建模拟接口

4.1、首先修改下我们服务接口基础地址

接口服务地址，就是 vue.config.js 中 target 值

4.2、创建服务接口（配置 mock.js）

五、登录业务逻辑实现

5.1、创建 api 接口文件 login.js

5.2、使用 login.js 发送异步请求

发表评论

“图书信息管理系统（二）”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航

图书信息管理系统（二）

图书信息管理系统登录模块实现

前言

一、登陆界面设计

1.1、新建登录组件index.vue

1.2、配置路由index.js

1.3、清理下根组件 App.vue

1.4、测试

二、使用 element 完善系统登录界面设计

2.1、登录界面 Index.vue 表单

2.2、登陆界面index.vue表单美化

2.3、App.vue的美化

三、使用 element 完善系统登录界面设计

3.1、登录表单验证功能

3.2、登录功能实现

四、使用 Easymock 为登录验证创建模拟接口

4.1、首先修改下我们服务接口基础地址

接口服务地址， 就是 vue.config.js 中 target 值

4.2、创建服务接口（配置 mock.js）

五、登录业务逻辑实现

5.1、创建 api 接口文件 login.js

5.2、使用 login.js 发送异步请求

发表评论

“图书信息管理系统（二）”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航

接口服务地址，就是 vue.config.js 中 target 值