Vue电商管理系统-登录界面

Posted 2022-12-09 Kira~~

• 1.通过可视化操作建立vue_shop项目。
• 2.建立码云远程仓库，地址：https://gitee.com/tyoubin_admin/vue_shop.git
• 3.下载nodejs后台项目，地址：https://gitee.com/tyoubin_admin/vueShop-api-server.git
• 4.使用token解决跨域问题
  由于http协议是无状态的，登录成功之后需要记录用户的状态，有三种方式

1. cookie
2. session
3. token
   当前端和后端不存在跨域问题时，使用 cookie或 session，
   存在跨域问题时则使用token。
   token原理如下图所示
   

• 5.样式设置为scoped，表示样式只在当前组件中生效。
• 6.显示空格错误，百度说缩进的问题，将.eslintic.js文件中的’@vue/standard’这行注释调，问题解决。
• 7.可视化面板中选择添加开发依赖，添加less和lessloder
• 8.报错in ./src/components/Login.vue?vue&type=style&index=0&id=ef68022e&lang=less&scoped=true&
  Syntax Error: TypeError: this.getOptions is not a function，
  百度说是lessloder版本过高，因此卸载调lessloder9.0.0，安装lessloder7.x，成功解决。
• 9.顶部没有沾满全屏，新建./assets/css/global.css添加如下代码，并在main.js中引入，Login.vue中添加.login-container样式height:
  100%;

html,body,#app
    height: 100%;
    margin: 0;
    padding: 0;

• 10.绘制登录盒子，并放到屏幕正中间

  .login_box
    width: 450px;
    height: 300px;
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
  

• 11.绘制头像，刚开始头像背景颜色无法改变，之后发现是因为直接设了img的class属性，应该将img外层包一个div
• 12.按需导入element元素，在element.js中添加如下语句

import Button from 'element-ui'
import Form,FormItem from "element-ui";
import Input from "element-ui";

Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)

• 13.调整账号密码输入框 将输入框的box-sizing设置为border-box。
  box-sizing 属性允许以特定的方式定义匹配某个区域的特定元素，
  content-box 表示宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框。
  border-box表示宽度和高度分别应用到元素的边框盒，通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
• 14.登录和清空按钮靠右显示
  将按钮所在的el-form-item添加class值btns，并设置为弹性布局，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。css代码如下：

  .btns
    display: flex; /*弹性布局*/
    justify-content: flex-end; /*右对齐*/
  

justify-content不同取值和含义
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

• 15.导入字体图标，使用阿里图标库，在main.js中导入css文件，为input添加prefix-icon属性。
• 16.表单验证，第一步：表单添加:rules=“loginFormRules”，第二步：data()的return中添加校验规则，代码如下，第三步：el-form-item通过prop属性绑定校验规则。

      loginFormRules:
        // 验证用户是否合法
        username: [
          // 必填，提示消息，鼠标焦点消失时触发
          required: true,message: "请输入用户名",trigger: "blur",
          min: 3,max: 10,message: "长度在3-10个字符之间"
        ],
        // 验证密码是否合法
        password: [
          required: true,message: "请输入密码",trigger:"blur",
          min: 6,max:10,message: "长度在 3 到 10 个字符",trigger: "blur"
        ]
      

• 17.表单重置功能 为表单设置一个ref属性为loginFormRef，methods中添加一个方法，调用 this.$refs.loginFormRef.resetFields()，按钮中添加click事件，调用重置方法，将表单信息重置为初始状态并去除校验信息。
• 18.表单登录前的预校验，valid中存储的是验证成功或失败的信息

      this.$refs.loginFormRef.validate( valid => 
        if (!valid) return;
      )

• 19.登录功能实现

第一步：main.js中引入axios

import axios from "axios";
axios.defaults.baseURL = "http://127.0.0.1:8888/api/private/v1"
Vue.prototype.$http = axios

第二步：login方法中添加post请求代码。

this.$http.post('login',this.loginForm);

该请求得到的是一个promise对象，因此用在请求前加await，并在离请求最近的函数前添加async，之后结构得到的对象数据中的data值。

this.$refs.loginFormRef.validate( async valid => 
   if (!valid) return;
   const data: res = await this.$http.post('login',this.loginForm);
     console.log(res)
)

根据res的meta属性判断是否登录成功(成功状态码：200)

if(res.meta.status !== 200) return console.log('登录失败')
console.log("登录成功");

• 19.登录消息提示
  element.js中引入message组件,并把message挂载为vue原型上的一个组件,这样在每个组件中都可以弹出提示窗口

import Message from "element-ui";
Vue.prototype.$message = Message

登录按钮点击后的提示

if(res.meta.status !== 200) return this.$message.error("登录失败")
this.$message.success("登录成功")

• 20.登录成功页面跳转
  将登录成功后的token保存到客户端的sessionStorage中，（存sessionStorage是因为这是一次浏览期间保存的信息）之后新建Home组件，添加路由

window.sessionStorage.setItem("token",res.data.token);
this.$router.push("home")

• 21.路由导航守卫控制访问权限（router中添加如下代码）

// 挂载路由导航守卫
router.beforeEach((to, from, next)=>
  // to 将要访问的路径
  // from 代表从哪个路径跳转而来
  // next 是一个函数，表示放行
  // next() 放行  next('login') 强制跳转
  if (to.path === '/login') return next();
  const tokenStr = window.sessionStorage.getItem('token')
  if (!tokenStr) return next('/login')
  next()
)

• 22.添加退出功能 清空sessionStorage并返回登录页面

    <el-button type="info" @click="logout">退出</el-button>

logout ()
  window.sessionStorage.clear()
  this.$router.push('/login')

• 提交git仓库
  git status：查看git状态(新增和修改了哪些文件)
  git add.：将文件添加到暂存区
  git commit -m “完成了登录功能”：暂存区所有代码提交到本地仓库
  git branch：查看当前分支
  git checkout master：切换到主分支
  git merge login：合并login分支
  git push：本地分支提交到云端
  git push -u origin login：在云端创建login分支并将本地login分支提交到云端

——2021-05-16-2021-05-17