html个人网站设计好兄弟给个网站

当前位置： 首页 > news >正文

html个人网站设计,好兄弟给个网站,wordpress手机apo,黑帽seo培训一、路由的简介 1、实现生活中的路由 路由#xff1a;路由其实就是一个key-value对应关系 路由器#xff1a;用于管理多个路由关系的设备被称为路由器 2、前端的路由 目前使用的前端项目都是单页面的应用#xff08;SPA#xff09;#xff0c;一个项目中只有一个html页…一、路由的简介 1、实现生活中的路由 路由路由其实就是一个key-value对应关系 路由器用于管理多个路由关系的设备被称为路由器 2、前端的路由 目前使用的前端项目都是单页面的应用SPA一个项目中只有一个html页面这种项目是由很多个组件组成组件之间如果要跳转要依靠路由来完成路由是由key和value组成一个对应关系前端路由的key就是url地址路由的value就是组件本身 keyvaluehttp://localhost:8080/loginLogin.vuehttp://localhost:8080/registerRegister.vue 总之路由是实现多个组件之间进行跳转一种方式使用路由将各组件之间联系起来 由于vue是一个渐进式的前端框架vue的核心语法中不包括路由路由以插件的形式存在如果要去使用路由就要去将路由集成到vue项目中 二、路由的基本配置 1、路由的配置 由于路由不是vue的核心功能大家如果要使用就需要去单独集成它在vue中使用路由最多一个路由产品vue-router vue-router的官网Vue Router 注意vue2的项目匹配的路由版本是vue-router3 配置的具体步骤如下 安装vue-router的依赖包
npm install vue-router3.5.1 在src目录创建router的文件夹在router文件夹下创建index.js文件具体代码如下
//导入Vue包 import Vue from vue //导入VueRouter包 import VueRouter from vue-router //将VueRouter作为插件设置到Vue中 Vue.use(VueRouter) //创建路由器对象 const routernew VueRouter() //将这个路由器对象导出 export default router 将路由挂载到vue实例上在main.js文件中
import Vue from vue import App from ./App.vue import router from /router Vue.config.productionTip false ​ new Vue({render: h h(App),router }).\(mount(#app) ​ 2、一级路由的配置 路由是一个key-value的对应关系 创建组件 在src/views目录下分别创建Login.vue、Register.vue、Home.vue 路由配置 在src/router/index.js进行如下配置 //导入Vue包 import Vue from vue //导入VueRouter包 import VueRouter from vue-router //导入组件 import Login from /views/Login import Register from /views/Register import Home from /views/Home //将VueRouter作为插件设置到Vue中 Vue.use(VueRouter) //创建routes数组 const routes[{path:/login,component:Login},{path:/register,component:Register},{path:/home,component:Home} ] /*创建路由器对象const routernew VueRouter(config)config:路由的配置对象routes:路由配置的数组 */ const routernew VueRouter({routes }) //将这个路由器对象导出 export default router 3、路由的出口设置 如上已经将路由的规则配置成功了如果要显示在页面上就需要配置路由出口 在App.vue根组件中配置路由出口 templaterouter-view/router-view /template 4、路由的跳转 使用vue-router进行路由跳转有两种方式 标签式跳转方式使用router-link这个标签进行跳转一般使用在template/template模板之中最终会编译成a标签 编程式跳转方式使用this.\)router对象的push或者replace方法进行跳转的这种跳转方式一般使用在组件的js代码部分
4.1、标签式路由跳转的案例 已有账号?router-link to/login前往登录/router-link 4.2、编程式路由跳转 下载axios
npm i axios 配置package.json
scripts: {serve: vue-cli-service serve,serve:production: set NODE_ENVproductionvue-cli-service serve,build: vue-cli-service build} 封装auth.js方法完成token获取和设置的封装 位置:src/utils/auth.js
const tokenkeyadmin-token // 保存token到localStorage中的方法 export const setTokentokenvallocalStorage.setItem(tokenkey,tokenval) // 从localStorage中获取token export const getToken()localStorage.getToken(tokenkey) 封装axios
位置:src/api/request.js import axios from axios import {getToken} from /utils/auth/* 基础路由的配置 / switch(process.env.NODE_ENV){case production:axios.defaults.baseURLhttp://47.98.128.191:3000/break;default:axios.defaults.baseURLhttp://www.zhaijizhe.cn:3005break } / 设置请求拦截器 / axios.interceptors.request.use(config{//获取token的信息然后将token信息携带到请求头信息中if(getToken){config.headers.AuthorizationgetToken()}return config }) / 设置响应拦截器 / axios.interceptors.response.use(response{return response.data },err{if(err.response){switch(err.response.status){case 401:breakcase 404:breakcase 500:break}} })export default axios 编写登录api方法
位置:src/api/modules/users.js import request from /api/request export default{login:(data)request.post(/users/login,data) } 汇总模块
位置:src/api/api.js import users from ./modules/users; export default{users } 挂载api到Vue原型上
位置:src/main.js import api from /api/api Vue.prototype.\(apiapi 组件中完成登录 位置:src/views/Login.vue templatedivh1登录/h1div没有账号?router-link to/register前往注册/router-link/divdivdivlabel forusername姓名:/labelinput idusername typetext placeholder请输入登录账户 v-modeluser.username/divdivlabel forpassword密码:/labelinput idpassword typetext placeholder请输入登录账户 v-modeluser.password/divdivbutton clicklogin登录/button/div/div/div /templatescript import {setToken} from /utils/auth export default {data(){return{user:{username:admin,password:123}}},methods:{async login(){let {code,message,token}await this.\)api.users.login(this.user)/ 登录成功后要完成的事项有两个1、保存token到localStorage中2、使用路由进行跳转*/setToken(token)if(code){alert(message)//跳转到后台使用编程式路由跳转this.\(router.replace(/home)}}} } /scriptstyle/style 5、路由的嵌套 如果要配置二级路由需要在相应的一级路由对象上添加children属性然后进行配置 位置:src/router/index.js {path:/home,component:Home,children:[{path:workplace,//二级路由的path的前不要带/component:workplace},{path:analysis,component:analysis},{path:studentList,component:studentList}]} 静态菜单 位置src/views/Home.vue templatediv classcontainerdiv classheaderdiv classlogo学苑BOSS系统/div/divdiv classmaindiv classsilderullispan控制面板/spanul classsullirouter-link to/home/workplace工作台/router-link/lilirouter-link to/home/analysis统计报表/router-link/li/ul/lilispan学员管理/spanul classsullirouter-link to/home/studentList学生列表/router-link/li/ul/lilispan系统管理/spanul classsulli班主任管理/lili教师管理/lili专业管理/lili班级管理/li/ul/li/ul/divdiv classcontent!-- 设置二级路由的出口 --router-view/router-view/div/div/div /templatescript export default {} /script 三、路由的其他配置 1、路由的重定向 所谓的路由重定向就是指当你输入一个路由的路径时候它会自动重新跳转到另外一个路由上这种行为称为路由重定向 {path:/,redirect:/home}, 2、路由懒加载 为了提高首屏加载速度可以采用路由懒加载的方式提升加载性能避免白屏现象出现 //导入Vue包 import Vue from vue //导入VueRouter包 import VueRouter from vue-router Vue.use(VueRouter) //创建routes数组 const routes[{path:/login,component:()import(/views/Login)},{path:/register,component:()import(/views/Register)},{path:/,redirect:/home},{path:/home,component:()import(/views/Home),children:[{path:workplace,//二级路由的path的前不要带/component:()import(/views/dashboard/workplace.vue)},{path:analysis,component:()import(/views/dashboard/analysis.vue)},{path:studentList,component:()import(/views/students/studentList.vue)}]} ] const routernew VueRouter({routes }) //将这个路由器对象导出 export default router 3、缓存路由 为需要设计缓存组件取一个名称 export default {name:analysis } 在路由的出口的地方设置keep-alive keep-alive excludeanalysisrouter-view/router-view/keep-alive exclude该组件不被缓存 include:该组件会被缓存 4、路由的元信息 路由对象有很多属性核心有两个一个就是path,表示的路由的路径component表示的是路由的对应的组件除此之外还有其他的属性比如meta属性可以设置路由的额外信息这里以两个例子给大家讲解 4.1、面包屑的功能 需要在路由定义的时候在相应的路由配置对象中添加meta属性配置面包屑的具体配置 {path:workplace,//二级路由的path的前不要带/component:()import(/views/dashboard/workplace.vue),meta:{firstTitle:控制面板,secondTitle:工作台} }, 自定义面包屑组件 在src/components目录下创建BreadCrumb组件 templatedivspan{{\)route.meta.firstTitle}}/spangt;span{{\(route.meta.secondTitle}}/span/div /template 在需要的组件中引入面包屑组件 templatedivbread-crumb/bread-crumbh1学生列表/h1/div /template 4.2、路由缓存状态设置 在路由配置中为meta属性设置isKeepAlive属性 {path:workplace,//二级路由的path的前不要带/component:()import(/views/dashboard/workplace.vue),meta:{firstTitle:控制面板,secondTitle:工作台,iskeepAlive:true}}, 在路由出口的地方通过v-if指令来完成设置 keep-aliverouter-view v-if\)route.meta.iskeepAlive/router-view/keep-aliverouter-view v-if!\(route.meta.iskeepAlive/router-view 说明这种设置方式较之前使用include或者exclude方式的更加合理。 四、路由传参 1、学生列表 编写获取学生的api方法 import request from /api/request export default{getStudents:paramsrequest.get(/students/getStudents,{params}) } 汇总api import users from ./modules/users; import students from ./modules/students; export default{users,students } 2、query传参 vue-router这个路由操作中要进行传参有多种方式比较常用的方式有两种 query传参方式 params传参方式 query传参的步骤 第1步创建页面组件配置路由 {path:studentDetail,component:()import(/views/students/studentDetail.vue),meta:{firstTitle:学生管理,secondTitle:学生详情}} 第2步进行传参 标签跳转的方式 router-link :to/home/studentDetail?_id\){item._id}button classbtn detal查看/button/router-link router-link :to/home/studentDetail?_iditem._idbutton classbtn detal查看/button/router-link router-link :to{path:/home/studentDetail,query:{_id:item._id}}button classbtn detal查看/button/router-link //命名路由 router-link :to{name:xsxq,query:{_id:item._id}}button classbtn detal查看/button/router-link 最后一种写法是使用了命名路由的写法命名路由的好处就是使用name来指定要跳转位置 编程方式进行跳转
goStudentDetail(_id){this.\(router.push(/home/studentDetail?_id\){_id}) } goStudentDetail(_id){this.\(router.push(/home/studentDetail?_id_id) } goStudentDetail(_id){this.\)router.push({path:/home/studentDetail,query:{_id}})}goStudentDetail(_id){this.\(router.push({name:xsxq,query:{_id}})} 第3步接收路由参数 使用this.\)route.query方式获取参数 export default {components:{BreadCrumb},created(){console.log(this.\(route.query._id);} } \)router和\(route 面试题简单的面试题 router它是一个VueRouter类型的一个对象通过new VueRouter构造函数方式将其创建出来它是一个全局对象 设置路由模式 实现路由跳转通过该对象中push或者replace方法来实现跳转的 route:路由信息对象它属于一个局部对象该对象主要用来描述路由信息的 获取该路由path路径 获取该路由的传递的参数(query参数params参数) 获取该路由的meta信息用户自定义的信息 4、params传参 动态路由概念所谓的动态路由是指路由地址的一部分是变化的像这种我们将其称为动态路由 http://localhost:8080/#/home/studentUpadate/10001 http://localhost:8080/#/home/studentUpadate/10002 http://localhost:8080/#/home/studentUpadate/10003 如上操作如果有多条信息就需要在router/index.js中配置多个路由信息对象,这种做法不可取原因有两个 配置信息量特别大 这种配置不灵活 为了解决这个问题我们可以动态路由的方式进行配置具体配置步骤如下 第1步在路由配置文件中配置如下 {path:studentUpdate/:id,component:()import(/views/students/studentUpdate.vue),meta:{firstTitle:学生管理,secondTitle:修改学生}} 第2步路由跳转传参 根据跳转方式的不同 标签方式跳转 router-link :to/home/studentUpdate/\){item._id}button classbtn detal修改/button/router-linkrouter-link :to/home/studentUpdate/item._idbutton classbtn detal修改/button/router-link 编程方式跳转 this.\(router.push(/home/studentUpdate/_id)this.\)router.push(/home/studentUpdate/\({_id})goStudentUpdate(_id){this.\)router.push({name:xsxg,params:{id:_id}})} 注意如果要使用push方法的参数是配置对象形式参数这种params只能和命名路由结合使用不能和path一起使用 第3步接收params参数 接收params参数有两个方法 使用this.\(route.params.参数名 console.log(this.\)route.params.id); 使用props方式传参
配置步骤 首先在路由对象设置可以使用props方式接收 {name:xsxg,path:studentUpdate/:id,component:()import(/views/students/studentUpdate.vue),meta:{firstTitle:学生管理,secondTitle:修改学生},props:true } 其次:在接收参数的组件中设置props选项 export default {props:[id], } 最后在组件中使用 export default {props:[id],components:{BreadCrumb},created(){// console.log(this.\(route.params.id);console.log(id:,this.id);} } 5、修改学生 页面返回和页面刷新 button click\)router.go(-1)返回/button button click\(router.go(0) 刷新/button 五、路由模式【面试题】 由于Vue项目为单页面应用所以整个项目在开发和构建过程中仅存在一个HTML物理文件通过路由系统可以实现将项目的组件与可访问的URL路径进行绑定。由于Vue项目只有一个HTML物理文件切换页面时既需要让访问的URL路径发生变化又不能触发HTML物理文件的重新加载这就使得VueRouter的跳转模式不能使用普通的超链接方式。 VueRouter为了支持单页面应用的页面管理和页面跳转提供了两种页面跳转和加载模式 hash在浏览器 URL 路径中会有一个# history在浏览器 URL 路径中没有# 1、hash模式 hash模式使用了锚点技术重写URL访问路径会在原有的URL路径后拼接/#/xx这种方式可以在不重新加载原有HTML文件的基础上实现切换URL路径的目的hash模式的原理案例代码如下 a href#/index首页/aa href#/about关于我们/adiv classpage index我是首页/divdiv classpage about我是关于页面/divscriptwindow.onhashchangefunction(event){var newURLevent.newURL.split(#/)[1]var oldURLevent.oldURL.split(#/)[1]var newPagedocument.querySelector(.newURL)var oldPagedocument.querySelector(.oldURL)newPage.style.displayblockoldPage.style.displaynone}/script hash模式利用了纯静态技术解决了单页面应用的页面划分它可以在不触发网页重新加载的情况下切换URL路径配合onhashchange可以实现一旦URL中的hash部分发生变化就触发函数通知通过javascript编程便可以很快速的实现DOM对象的切换显示。 hash模式同时也存在着不足之处如在分布式微前端项目中嵌套的子应用和主应用都使用hash模式时由于hash模式的URL路径只能存在一个#会导致子应用和主应用在定义URL路径上存在着困难hash模式的URL路径中包含#,也会在视觉上导致URL路径不美观 2、history模式 histroy模式是VueRouter中常用的一种路由模式它与hash模式不同不需要借助锚点技术重写URL路径所以history模式使用的URL路径中不存在#,在视觉上更加美观histroy模式采用histroy对象中的pushState()函数重写函数URL路径可在触发重新加载的情况下变更URL路径history的原理代码如下 a hrefjavascript:jump(/index)跳转到首页/aa hrefjavascript:jump(/about)跳转到about页/adiv classpage index我是首页/divdiv classpage about我是关于页面/divscriptfunction jump(path){history.pushState(null,page,path)var pagesdocument.querySelectorAll(.page)var newPagedocument.querySelector(path.replace(/,.))pages.forEach(itemitem.style.displaynone)newPage.style.displayblock}/script history模式重写URL路径的解决方案与hash模式现象类似但本质不同虽然histroy模式可以重写URL路径但是重写后的新路径中并不包含原有HTML物理文件的访问路径所以history模式在重写URL路径后一旦刷新网页会造成404无法访问的效果VueCli在开发环境中解决了history模式的刷新问题不过项目发布到生产环境时由于histroy模式的URL路径问题还需要配合生产服务器的转发规则重写用以支持history模式的路由加载。 可以在路由的配置文件中更改路由模式 const router new VueRouter({routes: routes,mode: history }) 不设置 mode 属性则默认为 hash 模式。 六、路由守卫 1、什么是路由守卫 当路由发生变化的时候会触发的一些函数我们这些函数中编写一定业务逻辑这种函数称为路由守卫函数也有人称为导航守卫 按照类型将导航守卫分为三大类 全局前置守卫当所有路由被触发的时候在进入指定组件之前所触发的守卫函数 路由独享守卫触发指定路由的路由的时候触发 组件内守卫当离开组件的时候或者进入组件的时候触发的守卫函数 2、全局前置守卫 2.1、语法 router.beforeEach((to,from,next){}) 参数说明: to:即将要进入目标路由对象 from:当前导航正要离开的路由 next:是一个函数该函数的作用是进入到目标路由所指定的组件或者按照要求进入到指定的组件 案例防止没有token直接进入后台 第1步在router/index.js中编写路由全局前置守卫函数完成token验证 router.beforeEach(async(to,from,next){console.log(********进入路由全局前置守卫************);if(to.path/login||to.path/register){console.log(即将要进入的是登录或者注册组件);//放行进入next()}else{//获取tokenlet tokengetToken()if(token){let resultawait api.users.getUserInfo()if(result.code){next()//放行进入}}else{alert(您还没有登录请先登录)next(/login)}} }) 第2步在二次封装axios的文件中request.js中补全401状态时的执行业务逻辑 axios.interceptors.response.use(response{return response.data },err{if(err.response){switch(err.response.status){case 401:console.log(进入到拦截器的401处理中);//弹框提示alert(您的token已失效请重新登录) //进行路由跳转router.push(/login)breakcase 404:breakcase 500:break}} }) 3、路由独享守卫 这种守卫函数只针对于进入该路由所触发 {path:/home,component:()import(/views/Home),children:[],//如果进入该路由或者该路由下的子路由都会进入到这个守卫函数beforeEnter:async function(to,from,next){let tokengetToken()if(token){let {code}await Vue.prototype.\)api.users.getUserInfo()if(code){next()}}else{alert(您还没有登录请登录)next(/login)}}} 4、组件内守卫 写在组件中 beforeRouteEnter:async function(to,from,next){console.log(——进入该组件———);let resultawait Vue.prototype.\(api.users.getUserInfo()if(result.data.auth1){console.log(------我是超级管理员-----------);next()}else if(result.data.auth2){console.log(-------我是普通管理员----------------------);alert(您没有权限进入请联系系统管理,为您开设权限)}// let resultawait this.\)api.users.getUserInfo()// console.log(result,result);},beforeRouteLeave(to,from,next){console.log(——离开该组件———-);if(this.name||this.fcz||this.startTime){if(window.confirm(您还没有输入完所有的信息您确认你要离开吗?)){next()}}}