头条管理后台(移动端后台)day01

最新推荐文章于 2024-05-26 08:34:44 发布

菠萝-米勒

最新推荐文章于 2024-05-26 08:34:44 发布

阅读量518

点赞数

文章标签： vue js

本文链接：https://blog.csdn.net/qq_33316107/article/details/109440298

版权

项目前奏

在脚手架里下载以下包,支持项目的开发

**路由守卫:**npm install vue-router

**Element-ui:**npm i element-ui -S

element的使用需要全局引入
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

axios: npm i axios

样式重置

在main.js引入重置样式,作用全局,在开发的时候我们不需要默认的样式,所有重置我们自己写的样式

axios的基地址封装

基地址:http://localhost:3000,是访问服务器的基准路径,一般我们需要封装,方便维护和修改

三步曲:

1.引入axios

2.配置基准路径,使用axios.defaults.baseURL=‘基准地址’

3.默认暴露axios

//封装基准路径
//引入axios
import axios from 'axios'

//配置基准路径
axios.defaults.baseURL = 'http://localhost:3000'

//暴露基准路径
export default axios

创建登陆组件配置路由

一,模块化三步曲:

1.引入vue

2.引入路由模块

3.安装路由

二,创建路由对象

1,实例化路由

2.通过routes属性进行路由添加,routes是一个数组,数组里面写对象,对象里面写路由配置,

3.路由配置有name:路由名称,path:路由跳转路径,component路由跳转的组件路径

三暴露路由:需要默认暴露路由

//路由模块化
//引入vue
import Vue from 'vue'
//引入路由
import VueRouter from 'vue-router'
//安装路由
Vue.use(VueRouter)


//创建路由对象
const router = new VueRouter({
    routes: [
        {
            name: 'login',
            path: '/login',
            //使用异步加载组件,只有用到了这个组件才会去加载这个组件
            component: () => import('@/views/login.vue')
        },
        {
            name: 'index',
            path: '/index',
            //使用异步加载组件,只有用到了这个组件才会去加载这个组件
            component: () => import('@/views/index.vue')
        }
    ]
})

//暴露路由
export default router

路由注入和映射

配置好路由需要在脚手架的main.js里面引入并注入才能生效,main.js是影响全局

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pvwmzOVZ-1604242425981)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201031173949690.png)]

在app.js里使用路由映射路由,这里是项目网页展示的地方

登陆请求API

在apis/user.js中
//引入基准路径
import axios from '@/utils/myaxios.js'

//登陆API
export const login = (data) => {
    return axios({
        url: '/login',
        method: 'post',
        data
    })
}

Element-ui框架的调用和api的使用

使用Eement框架的from表单完成对输入框的制作

**from表单中:**model绑定的属性就是整个用户的数据(用户名和密码)

rules:是验证的规则属性,可在data中定义验证规则,如下:

  <el-form
        :model="user"
        :rules="rules"
        ref="loginForm"
        class="demo-ruleForm"
      >
        <!-- 用户名框 -->
        <el-form-item prop="username">
          <el-input
            v-model="user.username"
            placeholder="请输入用户名"
            prefix-icon="el-icon-user-solid"
          ></el-input>
        </el-form-item>
        <!-- 密码框 -->
        <el-form-item prop="password">
          <el-input
            v-model="user.password"
            type="password"
            placeholder="请输入密码"
            prefix-icon="el-icon-lock"
          ></el-input>
        </el-form-item>
        <el-button type="primary" class="login-btn" @click="userlogin"
          >登陆</el-button
        >
      </el-form>

rules验证规则:在data中定义rules是一个对象,对象里面可以定义单个属性验证规则,通过prop获取验证规则,

required: true,是必须传一个参数,

message: 是提示信息,

trigger:是触发的时机(触发器),后面可以填写一个触发的事件类型(可写多个事件)

pattern:是填写验证的规则的模板填写处(例如正则表达式)

 data() {
    return {
      user: {
        username: "10086",
        password: "123",
      },
      //在data中定义校验规则rules
      rules: {
        // 定义单个属性的验证规则
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            pattern: /^1\d{4}$|^1\d{10}$/,
            message: "请输入合法的手机号",
            trigger: "blur",
          },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },

验证用户输入的数据是否合法

登陆成功时将token存储到本地,以便日后使用

   userlogin() {
      this.$refs.loginForm.validate(async (valid) => {
        if (valid) {
          //发送登陆请求
          let res = await login(this.user);
          console.log(res);
          //判断验证成功
          if (res.data.message == "登录成功") {
            //1.将token存储到本地
            localStorage.setItem("heima_houtai", JSON.stringify(res.data.data));
            //2.跳转到首页
            this.$router.push({ path: "/index" });
            //3.给出登陆成功的提示
            this.$message({
              message: res.data.message,
              type: "success",
            });
          } else {
            //登陆失败的提示
            this.$message({
              message: res.data.message,
              type: "error",
            });
          }
        } else {
          //验证失败的提示
          this.$message({
            message: "用户输入不合法",
            type: "error",
          });
        }
      });
    },

添加导航守卫

后台管理除了登陆页不需要token其他页面都需要验证token才能进入,所以需要用到导航守卫去帮我们去验证

to和from:是从哪来到哪去在这两个属性中都会有记录

next:进行下一步,也可以进行路由跳转

需要判断本地是否有token取,如果不判断会报错,第二种方法是在JSON.parse(localStorage.getItem(‘heima_houtai’)||’{}).token加一个字符串对象就不会报错

router/index.js页面,添加导航守卫
router.beforeEach((to, from, next) => {
    //除了登陆页后台所有的页面都需要token验证
    if (to.name == 'login') {
        next()
    } else {

        if (localStorage.getItem('heima_houtai')) {
            let token = JSON.parse(localStorage.getItem('heima_houtai')).token
            //验证token是否携带,有就进行操作
            if (token) {
                //有token就进行操作
                next()
            } else {
                //没有token就重置到登陆页
                next({ path: '/login' })
            }
        } else {
            // 没有token可取的话也重置到登陆页
            next({ path: '/login' })
        }

    }

})

       //有token就进行操作
            next()
        } else {
            //没有token就重置到登陆页
            next({ path: '/login' })
        }
    } else {
        // 没有token可取的话也重置到登陆页
        next({ path: '/login' })
    }

}

})