Vue + ElementUi 管理系统页面制作步骤
登录/退出功能
登录概述
1.登录业务流程
- 在登录页面输入用户名和密码
- 调用后台接口进行验证
- 通过验证之后，根据后台的响应状态跳转到项目主页
2.登录业务的相关技术点
http 是无状态的
通过cookie在客户端记录状态（不跨域推荐）
通过session在服务器端记录状态（不跨域推荐）
通过token方式维持状态 (存在跨域使用）
3.登录功能实现
路有导航守卫控制访问权限
如果用户没有登录，但是直接用过url访问特定页面，需要重新导航到登录页面
如果路由导航守卫 需要使用 vuex 需要先导入 import store from '../store'
然后再使用 store.xxx 例如 store.state.islogin 即可拿到该值
//为路由对象 添加 beforeEach 导航守卫
router.beforeEach( (to, from, next)=>{
// to 将要访问的路径
// from 代表从哪个路径跳转过来
// next 是一个函数，表示放行
// next() 放行 next('/login') 强制跳转
if (to.path === '/login') return next()
// 获取token 使用sessionStorage
const tokenStr = window.sessionStorage.getItem('token')
if ( !tokenStr ) return next('/login')
} )
退出
退出功能实现原理
基于 token 的方式实现退出比较简单，只需要销毁本地的 token 即可，这样，后续的请求就不会携带token ，必须重新登录生成一个新的 token 之后 才可以继续访问页面
// 清空 token
window.sessionStorage.clear()
// 跳出到登录页
this.$router.push('/login')
全局引入都挂载在 main.js文件里 配置axios
import axios from 'axios'
// 配置请求根路径
axios.defaults.baseUrl = ' '
Vue.proptotype.$http = axios
路由重定向 redirect
找的router文件夹 下的 router.js
export default new Router({
routes: [
// 当路由为 / 根路由时 让他跳转至 '/login' 页面 redirect路由重定向
{ path : '/', redirect: '/login' }
]
})
关于js中localStorage和sessionStorage之间的区别对比
1、localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。
2、他们均只能存储字符串类型的对象（虽然规范中可以存储其他原生类型的对象，但是目前为止没有浏览器对其进行实现）。
3、localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。
4、sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。
5、不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标 签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。
一、数字滚动插件
1、vue-count-to
//1、安装
cnpm install vue-count-to --save
//2、使用
<countTo :startVal='startVal' :endVal='endVal' :duration='3000'></countTo>
<script>
import countTo from 'vue-count-to';
export default {
components: { countTo },
data () {
return {
startVal: 0,
endVal: 2021
}
}
}
</script>
2、@huoyu/vue-digitroll（https://github.com/yingtian666/vue-digitroll）
//1、安装
cnpm i -S @huoyu/vue-digitroll
//2、使用
<DigitRoll :rollDigits="digits" />
<script>
import DigitRoll from '@huoyu/vue-digitroll';
export default {
components: { DigitRoll },
data () {
return {
digits: 123456,
}
}
}
</script>
二、滚屏插件
1、vue-seamless-scroll（https://github.com/chenxuan0000/vue-seamless-scroll）
//1、安装
cnpm install vue-seamless-scroll --save
//2、使用
<vue-seamless-scroll
:data="selectMarker.buildAdminList"
class="seamless-warp"
:class-option="classOption"
>
<div class="list_item" v-for="(item,index) in selectMarker.buildAdminList" :key="index">
<div class="item_left">
<div class="item_img">
<img v-if="item.userImage" :src="item.userImage" alt="">
</div>
</div>
<div class="item_right">
<div class="item_info"><i class="iconfont iconuser_selector_post"></i> ：{{item.buildAdminName}}</div>
<div class="item_info"><i class="iconfont iconshouji1"></i> ：{{item.buildAdminTel}}</div>
<div class="item_info info_des"><i class="iconfont iconquyu"></i> ：{{item.buildAdminAddress}}</div>
</div>
</div>
</vue-seamless-scroll>
import vueSeamlessScroll from 'vue-seamless-scroll'
components: {
vueSeamlessScroll,
},
data(){
return {
classOption: {
step: 0.2, // 数值越大速度滚动越快
limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length
hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
},
}
}
.seamless-warp{
width: 100%;
height: 69.7rem;
overflow: hidden;
}
四、获取当前时间及天气
<div class="home_little_title">
<div class="little_title_item">{{ title.time }}</div>
<div class="little_title_item">周{{ title.week }}</div>
<div class="little_title_item">{{ title.date }}</div>
<div class="little_title_item">{{ title.weather }}</div>
<div class="little_title_item">{{ title.temperature }}</div>
<div class="little_title_item">{{ title.wind }}</div>
</div>
data(){
return {
weekMap: {
0: "日",
1: "一",
2: "二",
3: "三",
4: "四",
5: "五",
6: "六",
},//星期
title: {
time: "",
week: "",
date: "",
temperature: "", //温度
weather: "", //天气
wind: "", //风向
},//天气对象
}
}
//获取天气
async getWeather() {
const res = await this.$http.get(
"https://tianqiapi.com/api?version=v6&appid=58192418&appsecret=K8vdzO7t"
);
if (res.status == 200) {
this.title.weather = res.data.wea;
this.title.temperature = `${res.data.tem2}-${res.data.tem1}℃`;
this.title.wind = res.data.win;
}
},
//获取时间
setTimeLoop() {
if (this.timeInterval) {
clearInterval(this.timeInterval);
}
const nowDate = new Date();
this.title.time = dayjs(nowDate).format("hh:mm:ss");
this.title.week = this.weekMap[nowDate.getDay()];
this.title.date = dayjs(nowDate).format("YYYY/MM/DD");
this.timeInterval = setInterval(() => {
const nowDate = new Date();
this.title.time = dayjs(nowDate).format("hh:mm:ss");
this.title.week = this.weekMap[nowDate.getDay()];
this.title.date = dayjs(nowDate).format("YYYY/MM/DD");
}, 1000);
},
五、DataV安装使用（http://datav.jiaminghi.com/）
//1、安装
npm install @jiaminghi/data-view
//2、使用
// 将自动注册所有组件为全局组件
import dataV from '@jiaminghi/data-view'
Vue.use(dataV)
//按需加载
import { borderBox1 } from '@jiaminghi/data-view'
Vue.use(borderBox1)
状态更新
避免你的组件更新了数据后，状态却不刷新，也就是没变化，请务必看这里
组件props均未设置deep监听，刷新props时，请直接生成新的props对象（基础数据类型除外），或完成赋值操作后使用ES6拓展运算符生成新的props对象（this.someProps = { ...this.someProps }）。
六、echarts(http://echarts.apache.org/zh/index.html)
//1、安装
cnpm install echarts -S
//2、使用
在main.js中
// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
7、禁止鼠标选择呈现蓝色样式
-webkit-user-select: none; /* 禁止 DIV 中的文本被鼠标选中 */
-moz-user-select: none; /* 禁止 DIV 中的文本被鼠标选中 */
-ms-user-select: none; /* 禁止 DIV 中的文本被鼠标选中 */
user-select: none; /* 禁止 DIV 中的文本被鼠标选中 */
Git码云的使用 常用命令
git status 查看当前分支状态
git checkout -b login 创建新分支login 分支
git branch 查看所有分支
git add . 将修改文件添加到暂存区
git commit -m “新增某页面” 上传同步的留言
git push origin master 上传推送至master 分支
git pull 同步拉取
685
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
