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

项目前奏

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

**路由守卫:**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-inputv-model="user.username"placeholder="请输入用户名"prefix-icon="el-icon-user-solid"></el-input></el-form-item><!-- 密码框 --><el-form-item prop="password"><el-inputv-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中定义校验规则rulesrules: {// 定义单个属性的验证规则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' })}}

})