首页 > 其他分享 >项目功能模块

项目功能模块

时间:2022-11-07 23:12:04浏览次数:47  
标签:sort searchObj axios 登录 项目 next 功能模块 token

项目功能模块业务

用户登录模块

流程:

① 在登录页面输入用户名和密码

② 调用后台接口进行验证

③ 通过验证之后,根据后台的响应状态跳转到项目主页

业务逻辑:

登录页面通过输入用户名和密码进行登录

服务器验证通过后生成该用户的token值并返回

客户端将该token值进行存储

后续所有请求都携带该token值进行发送请求

全局引用axios

import axios from "axios"

通过axios调用登录验证接口

登录成功进行调转

var redirect = this.$route.query.redirect || "/";

设置路由守卫控制访问权限

router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) {
    if (localStorage.getItem("token")) {
      next(true);
    } else {
      alert("需要权限");
      next("/login?redirect=" + to.path);
    }
  } else {
    next(true);
  }
});

通过销毁本地的token值实现退出

localStorage.removeItem("token");

搜索页面模块

通过@click事件实现不同的排列顺序

setSortPrice() {
      this.$set(this.searchObj, "main_sort", 2);
      if (!this.searchObj.sort_by) {
        this.$set(this.searchObj, "sort_by", "asc");
      } else {
        if (this.searchObj.sort_by === "asc") {
          this.searchObj.sort_by = "dsc";
        } else {
          this.searchObj.sort_by = "asc";
        }
      }
      this.search();
    },

修改传递不同排列顺序对应的参数实现排序功能

标签:sort,searchObj,axios,登录,项目,next,功能模块,token
From: https://www.cnblogs.com/aureazjl/p/16867860.html

相关文章

  • 【2022.11.7】luffy项目前期部署(3)
    今日内容1前台全局样式和js配置#bodydiv默认样式,统一去掉#写一个,应用到项目中#后端接口的地址,统一写,以后统一改1.1global.css/*声明全局样式和项目的初......
  • 项目接口实现
    项目接口实现后台主页模块接口由原型图可分析,后台首页需要轮播图接口,推荐课程接口软件开发模式瀑布模式如:bbs项目先设计数据库,等数据库全部设计完毕后,开始写项......
  • DevOps|乱谈开源社区、开源项目与企业内部开源
    之前的一篇文章《从特拉斯辞职风波到研发效能中的荒唐事》中关于企业内源的内容在研发效能群内引起了大家的热烈讨论。有的小伙伴不同意,有的小伙伴非常不同意,我觉得这都是......
  • 今日内容,项目模块接口开发和解决跨域问题
    前台全局样式和js配置1.把前端默认样式统一去掉,自己写一个应用到项目中,自定义自己的前端样式2.后端接口的地址统一,方便以后修改1.1assets/css/global.css/*声明......
  • freeCodecamp_认证项目_调查表单
    点击查看代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="view......
  • git 本地初始化项目后 推送到现有分支
    1、添加用户名与邮箱地址gitconfig--globaluser.name"name"gitconfig--globaluser.email"email"2、重置密码gitconfig–system–unsetcredential.hel......
  • 【2022-11-07】 luffy项目实战(三)
    一、luffy前台配置1.1gloabl.css/*声明全局样式和项目的初始化样式*/body,h1,h2,h3,h4,h5,h6,p,table,tr,td,ul,li,a,form,input,select,option,......
  • python--敲击木鱼积累功德小项目
    importpygamepygame.mixer.init()screen=pygame.display.set_mode((700,500))pygame.display.set_caption("木鱼功德")img1=pygame.image.load("images/muyuluck1.jp......
  • luffy项目路由分发
    1.总路由路由分发比较简单fromdjango.urlsimportinclude就需要调用include然后在后面加路由地址就ok,前面和普通路由写法一样path('API/V1/home/',include('home.......
  • vue项目中定义全局变量、全局函数
    在vue项目中,我们经常会遇到要在多个页面组件中都要使用的一个变量或者函数,比如说需要配置的ip地址,在生产环境和测试环境不一样就需要修改。因此我们可以定义一个全局变量来......