目录
- Element-UI 组件:form 组件 ，message 消息弹框组件
- axios：配置，使用
- window.sessionStorage：使用
- 添加新的组件：导入组件，添加路由规则，路由跳转
- 路由导航守卫：配置，使用
- 退出功能：清除token，跳转路由
- 语法警告：新配置，禁用
- 按需导入和使用：element-ui
- 提交代码：完成一个功能后
Element-UI 组件
-
el-from表格
el-from-item表格项
el-input输入框
el-button按钮
字体图标
规则属性 ：`:rules`
使用步骤：
el-form：通过 :rules="nameRules" 绑定一个校验规则对象
nameRules：定义校验规则的属性
el-form-item：通过 prop=“nameRule” 指定不同的校验规则
nameRules 校验规则例子
校验规则1
returired：是否必须
message“”不合法的提示信息
trigger:blur 表示失去焦点时触发校验规则
校验规则2
min :最小字符数量
max：最大字符数量
message：不合法的提示信息
trigger：blur 表示失去焦点时触发校验规则
------------------------------------------------------------------
`:model`：表单的数据绑定对象
------------------------------------------------------------------
引用属性 ref="nameRef":声明表单实例实例对象的引用
this.$refs.nameRef : 获取实例对象
例子
this.$refs.nameRef.resetFields() 重置表单
this.$refs.nameRef.validate((valid)=>{console.log(valid)}) 预验证
message 弹框提示组件
- 配置element.js
- 使用
//配置element.js
//导入弹框提示组件：
import{Message} form 'element-ui'
//挂载到Vue上
Vue.prototype.$message = Message
-----
// 使用
this.$message.error('登录失败！')
this.$message.success('登录成功')
axios
- 1 配置main.js
2 使用
//配置main.js
`import axios from 'axios'` //导入包
`axios.defaults.baseURL =''` //设置根路径
`Vue.prototype.$http = axios` //挂载到vue的实例上
-------------------------------------
// 使用
login() {
// async await 配套使用
this.$refs.loginFormRef.validate(async valid => {
if (!valid) return
// 解构赋值并命名为res
const { data: res } = await this.$http.post('login', this.loginForm)
if (res.meta.status !== 200) return this.$message.error('登录失败！') //发送请求
this.$message.success('登录成功')
// 1. 将登录成功之后的 token，保存到客户端的 sessionStorage 中
// 1.1 项目中出了登录之外的其他API接口，必须在登录之后才能访问
// 1.2 token 只应在当前网站打开期间生效，所以将 token 保存在 sessionStorage 中
window.sessionStorage.setItem('token', res.data.token)
// 2. 通过编程式导航跳转到后台主页，路由地址是 /home
this.$router.push('/home')
})
}
window.sessionStorage
- 使用
- 有效期:回话 期间有效
// login.vue中使用
// 1. 将登录成功之后的 token，保存到客户端的 sessionStorage 中
// 1.1 项目中出了登录之外的其他API接口，必须在登录之后才能访问
// 1.2 token 只应在当前网站打开期间生效，所以将 token 保存在 sessionStorage 中
window.sessionStorage.setItem('token', res.data.token)
添加新的组件
- 导入组件
- 添加路由规则
// router.js中
// 导入组件
import Login from './components/Login.vue'
// 添加路由规则
const router = new Router({
routes: [
{ path: '/login', component: Login },
]
})
-------------------------------------------------
// .vue中使用
this.$router.push('/home')
路由导航守卫
- 配置router.js
- 使用
// 挂载路由导航守卫
router.beforeEach((to, from, next) => {
// to 将要访问的路径
// from 代表从哪个路径跳转而来
// next 是一个函数，表示放行
// next()放行 next('/login') 强制跳转
if (to.path === '/login') return next() // 放行
// 获取token
const tokenStr = window.sessionStorage.getItem('token')
if (!tokenStr) return next('/login') //强制跳转
next()
})
退出功能
- 清除token
- 路由跳转
// .vue中
// template
// 按钮
<el-button type="info" @click="logout">退出</el-button>
//script
// 退出方法:销毁token, 跳转登录页
methods: {
logout() {
window.sessionStorage.clear()
this.$router.push('/login')
}
}
语法警告
- 创建配置文件：.prettierrc
- 配置.eslintrc.js：禁用 语法规则
//.prettierrc中
{
"semi": false, //去除分号
"singleQuote": true //使用单引号
}
--------------------------------------
//.eslintrc.js中
rules: {
// 禁用规则 （禁用 方法名和括号之间要有空格 的规则）
'space-before-function-paren': 0
},
按需导入的优化
- element-ui 按需导入 和 使用
import { Button, Form, FormItem, Input, Message } from 'element-ui'
Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.prototype.$message = Message
提交代码
- 完成一个功能后
git add .
git commit -m ""
// 切换到master分支
git checkout master
// 合并分支到当前分支
merge 分支名
// 推送
git push
// 切换到新的分支
git checkout 新的分支名称
// 推送新的分支
git push -u origin 新的分支名
