Vue(day8)
使用脚手架初始化项目
- vue init webpack shop_admin_37
- npm run dev
把 没有用的删除掉
Hello Word 这个 组件删除
配置 路由
- 安装路由
npm i vue-router - 创建一个
router/router.js - 步骤
- 引入
import Vue from 'vue'
import VueRouter from 'vue-router'
// 在模块化工程中 Vue.use()
Vue.use(VueRouter)
- 实例化
const router = new VueRouter() - 导出
export default router
- 在
main.js中引入 并且挂载
import router from './router/router.js'
router 放到vue实例里即可
创建两个组件 (Login , Home) 根据路由规则显示出来
- 创建两个组件(单文件组件) Login.vue / Home.vue
- 按照具体的四个步骤
- 入口 手动
- 规则
- 组件 (引入组件)
- 出口
element 的基本 使用
官网 :https://element.eleme.cn/#/zh-CN/component/installation
- 安装 :
npm i element-ui -S- 快速上手 : > 完整引入
// main.js 中引入
// 引入 element-ui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// 安装一下
Vue.use(ElementUI)
- 使用 : 官网拷贝组件的代码复制粘贴即可
login 页 => 登录表单组件
- 居中
- 外面加 el-row el-col
-
- 垂直没有居中,原因是 el-row 高度就这么高
- html,body,#app,.el-row
开始登录
- 安装 axios
- 引入 import axios from 'axios'
- 使用
axios.post('XXXXXX/login', this.rulesForm).then(res => {}) - 提示
- 成功/失败
this.$message({
message : '登录成功', / '登录失败'
type : 'success', / 'error'
duration :800
})
- 跳转
this.$router.push('/home')
scoped
作用 : 当前组件内的样式 只会对当前组件(当前组件的标签或者子组件)起效果
问题 : login 页和 home 页都有一个 h1 标签(组件), 然后在 login 页里面设置 h1 为红色,但是 home 页里的 h1 也变红了
原因 : 组件内的样式进行了共享
解决办法 : 给每一个组件对应的 style 标签上添加 scoped
原理 :
-
在 DOM 上添加了自定义属性 data-v-唯一值 : (每个组件里都有一个对应的唯一值)
login :
home : -
设置样式 : 通过属性选择器 来设置样式
login : h1[data-v-08b4fdc3] { color : red }
home : h1[data-v-74b1de62] {}
不良反应 :
作用 : 组件内设置的样式 只针对于当前组件内的标签或者子组件起效果, html,body 等不属于当前组件内的
动态添加的不起效果 data-v没有加上呢
可以设置为全局的
以后咱们使用 style 都记得加上 scoped
home 页 - 布局容器
home 页 - 头部布局
登录问题
需求 : 未登录的情况下, 如何处理访问了其他页面 (home / users 等等)
问题 1 : 如何判断登录了还是没有登录?
- 如果登录成功了, 后台会返回给我们一个 token 令牌
- 保存到本地
- 从本地获取 token 令牌,如果能获取到, 登录了, 如果获取不到,未登录
// 保存
localStorage.setItem('token', res.data.data.token)
// 获取
localStorage.getItem('token')
问题 2 : 如果未登录, 访问了其他页面,该怎么处理???
-
判断到底登录了还是没有登录 (问题 1 localStorage.getItem('token'))
-
login ? home ? users ? (手动)
-
全局前置导航守卫 (to, from , next) - 登录拦截
-
处理的具体步骤 (重要)
- 判断是否是 login 页面 => 直接访问
- 不是登录页面 => 再次判断
- 判断是否登录 => 登录了 => 访问
=> 未登录 => 跳转 login
退出登录
- 清除 token
- 提示退出成功
- 跳转到首页
左侧栏
左侧栏导航菜单的路由
el-menu 有个属性 router 默认是'false', 开启 vue-router 路由模式 => true
:router='true'
index 的值 作为 path 进行路由跳转
index='/users' , '/roles', '/rights'
创建三个组件 并且显示出来
- 创建组件 users/Users.vue
- 走流程
- 入口 - 规则 - 组件 - 出口
- 需求 :users /roles/rights 三个对应的组件显示在 home 组件里, 而不应该直接把 home 给替换掉
- 嵌套路由(子路由)
- home 组件里 main 位置留一个出口
- 设置子路由 children : [ 三个路由规则]
{
path: '/home',
name: 'home',
component: Home,
children: [
{ path: '/users', name: 'users', component: Users },
{ path: '/roles', name: 'roles', component: Roles },
{ path: '/rights', name: 'rights', component: Rights }
]
}
用户列表
参考 : 表格组件
- element-ui 官网 把
结构 + 数据拷贝过来 - 分析
- 改造
- 请求数据
- 要添加 token
- http 无状态的 , 上一次登录后的结果,后台是不记录的,
- 每次发送请求都要携带这个 token, 因为这个 token 是后台返回给我们的, 再携带 token 过去,后台是知道的,
- 就可以 返回 正确的数据了
// 引入 axios
import axios from 'axios'
// 请求
// 格式 : axios.get(url地址, config)
// {
// params : { query : '', pagenum:1, pagesize:2 },
// headers : { Authorization: localStorage.getItem("token") }
// }
axios
.get('..../users', {
params: {},
headers: {}
})
.then(res => {})
用户列表 -分页
- 展示分页
<el-pagination
background
layout="prev, pager, next"
:current-page="pagenum"
:page-size="2"
:total="total"
></el-pagination>
- 点击分页
<el-pagination @current-change="clickCurrentPage">
clickCurrentPage(curPage) { this.loadUsersData(curPage) } loadUsersData(
pagenum = 1) {}</el-pagination
>
- 查询内容
<el-input v-model='queryText' />
- 点击按钮查询内容
this.loaduserData(1, this.queryText)
- 点击分页
this.loadUsersData(curPage, this.queryText)
- 查询数据
loadUsersData(pagenum= 1, query='') {}
面包屑
lang + 处理 less
- lang='css/less'
- 安装 less-loader
npm i less-loader less -D - webpack 配置好了, 我们只需要把需要安装的包安装一下即可
把 单文件组件抽离成三个部分
template => Users.html
script => Users.js
style => Users.less
<template src="./Users.html"></template>
<script src="./Users.js"></script>
<style src="./Users.less" lang="less" scoped></style>
表格的列分为两种
正常列 : 直接赋值 prop='username'
自定义列 : 组件/需要处理数据之后才能 赋值的
