网站htm建设,网站设计用什么软件实现,上海建设咨询有限公司,百度网盘手机app下载安装目录
一、本节介绍和上节回顾
1. 上节介绍
2. Vue SpringBoot前后端分离项目实战的目录
3. 本小节介绍
二、Vue-router改造以及路由鉴权
1. 路由数据的拆分
2. 路由守卫
三、404错误页的实现
1. 创建全局css样式
2. 全局样式引入
3. 404页面的开发
4. el-button的…
目录
一、本节介绍和上节回顾
1. 上节介绍
2. Vue SpringBoot前后端分离项目实战的目录
3. 本小节介绍
二、Vue-router改造以及路由鉴权
1. 路由数据的拆分
2. 路由守卫
三、404错误页的实现
1. 创建全局css样式
2. 全局样式引入
3. 404页面的开发
4. el-button的自研实现
5. 实现效果
四、本项目进展图例介绍
1. 内容架构
2. 代码目录
五、读完本小节需要思考的几个问题 一、本节介绍和上节回顾
1. 上节介绍
上一节是在项目搭建完成之后的继续基建工作基于Vue技术栈做了Less的安装和常见安装问题的解答axios的安装基本使用二次封装然后是基于内聚性和耦合性对整个axios请求做了拆解以及ElementUI的安装和基本验证。还不太了解项目上下文的同学可以去专栏里查找或者直接阅读基于VueLessaxios封装ElementUI搭建项目底层支撑实战
2. Vue SpringBoot前后端分离项目实战的目录
我和天哥的联调也在进行着但可能联调和发布博客会有个时间差请小伙伴们多担待狗哥在这里向大家鞠个躬。下面我对专栏的目录和进度对大家做一个汇报
Vue SpringBoot前后端分离项目实战 - 前端部分1. 手把手带你做一套毕业设计-征程开启2. 我应该把毕业设计做到什么程度才能过关3. 做毕业设计前端部分你需要掌握的6个核心技能4. 基于VueVue-cliwebpack搭建渐进式高可维护性前端实战项目5. 基于VueLessaxios封装ElementUI搭建项目底层支撑实战SpringBootVue前后端分离项目实战 - 服务端部分1. 基于SpringBootSpringCloudVue前后端分离项目实战 --开篇2. 天狗实战SpringBootVue一环境安装3. 天狗实战SpringBootVue二项目结构搭建上4. 天狗实战二SpringBoot API开发详解 --SpringMVC注解封装结果支持跨域打包下5. Maven依赖加载不进来? 依赖加载失败? 你值得掌握如何排查的方法6. 实战Git常用操作(IDEA界面命令)初始化(init)、忽略文件(.gitignore)、提交(commit)、查看提交记录(log)、创建切换分支(branch)
3. 本小节介绍
本小节将会在router/index.js的基础上进行router数据抽离并且基于全局路由守卫做一个路由的鉴权主要是为了解决在我们项目使用中如果路由提前没有预写而用户又随便输入了一个路由跳转异常的问题。既然有这样一个问题在用户输入我们没有提前预定的错误的路由的时候我们会通过路由守卫使其跳转到一个404的页面而在文章尾部呢简单实现了一个404错误页面对el-button组件做了一个简单的自研实现对于初学者来说没有项目经验的同学来说本文还是值得一读的。 二、Vue-router改造以及路由鉴权 我们整个实战项目的路由后续在迭代过程中一定会越来越多的而且存在二级路由这本没有问题但如果项目在被使用过程中如果某个用户突发奇想在浏览器的url随便输入一个例如/aaa的路由那么可想而知如果没有做准备的话我们的系统必定不知所措了。所以就需要通过提前的路由守卫进行鉴权控制。
1. 路由数据的拆分
我们一直希望保持一个原则那就是一块代码尽量的去实现一件单一的事情再通过模块化的思想将多个本是分离的功能内聚起来。所以这里我们添加一个404页面的路由之前的HelloWorld实例组件占据着跟路由这是不对的我们进行了HelloWorld组件的路由更换而且添加了/src/router/routersData.js的路由数据文件请看拆分后的代码
/src/router/index.js
import Vue from vue
import Router from vue-router
import { routerData } from ./routesData; // 路由数据Vue.use(Router)const createRouter () new Router({routes: routerData,});
const router createRouter();export default router;
/src/router/routersData.js
export const routerData [{path: /helloWorld,component: () import(/views/HelloWorld),},{path: /404,component: () import(/views/Page404),hidden: true,},
]2. 路由守卫
这里采用的是全局路由守卫的形式目前合法的路由是/helloWorld和/404只有这2个路由是合法的所以哪怕我们后边新建了/bookList和createBook路由等目前也是不合法的所以凡是私自输入其他路由到浏览器上都要跳转到404的路由去代码如下
/src/router/index.js
import Vue from vue
import Router from vue-router
import { routerData } from ./routesData;Vue.use(Router)const createRouter () new Router({routes: routerData,});
const router createRouter();router.beforeEach(async (to, from, next) {// 判断是否合法路由let okPath false;for(let i in routerData) {if (routerData[i][path] to.path) {okPath true;break;}}if (okPath) { // 如果合法则正常跳转next();} else { // 不合法跳转到404页面next({ path: /404 });}
})export default router;
注意因为这里的代码我们判断凡是当前即将打开的路由有一个和我们预写的路由数据相匹配那么就结束循环对比所以这里的break关键字要牢记这是基本知识。 三、404错误页的实现 既然已经开始业务开发了那么全局css少不了页面装饰少不了组件的使用少不了这里的404页面虽然稍微简单一些但已经可以算是整个实战项目的开始了。
1. 创建全局css样式
全局样式不必多说我们的大型项目中必定有多出重复的样式写全局样式是为了减少工作量提供全局的样式控制但这里仍然不够完善我们会随着项目迭代不断的累加新建/src/assets/css/common.css代码如下
html, body, * {margin: 0;padding: 0;font-size: 14px;font-family: Microsoft Yahei ,Arial,sans-serif;
}
ul,li{padding:0; margin:0; list-style:none;}
img{ border: 0px;}
form{padding: 0px; margin: 0px;}
a{ text-decoration:none; cursor: pointer; }
input {outline: none;}
textarea {outline: none;}
注意这里的全局样式字体font-family使用的是Microsoft Yahei而并非“微软雅黑”微软雅黑字体属方正所有如果商用被发现会有侵权的问题。 2. 全局样式引入
全局样式引入是在main.js文件中可添加如下代码
import ElementUI from element-ui
import element-ui/lib/theme-chalk/index.css
import /assets/css/common.css; // global cssVue.config.productionTip false 3. 404页面的开发
本实战项目的404页面和市面上大多数404页面差不多一个配图一个返回首页的按钮再无其他元素内容。而按钮我们初步使用了el-button来实现并且点击按钮可以返回跟路由添加/src/views/Page404.vue文件代码如下
templatediv classbox-404img :srcimage404 /div classbtn-boxel-button typeprimary clickgo2Index返回首页/el-button/div/div
/templatescript
import image404 from /assets/image/404.png;export default {name: Page404,data () {return {image404,}},created() {},methods: {go2Index() {this.$router.push(/index);},}
}
/scriptstyle scoped langless.box-404 {display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100vh;img {width: 480px;height: 256px;}.btn-box {margin-top: 20px;}}
/style4. el-button的自研实现
我们在后续的实战项目中遇到一些第三方组件第三方功能会自研实现一下当然毕竟是结合项目场景不会写的那么细致入微面面俱到但会提供一个满足项目需求的功能而且给你提供一个丰富下去的思路。
修改/src/views/Page404.vue代码
templatediv classbox-404img :srcimage404 /div classbtn-box!-- el-button typeprimary clickgo2Index返回首页/el-button --tg-button txt返回首页 bgColorblur //div/div
/templatescript
import image404 from /assets/image/404.png;
import TgButton from /components/tg-button.vue;export default {name: Page404,components: { TgButton }, /src/components/tg-button.vue文件添加代码如下
templatediv :class[btn, bg-color-bgColor]{{ txt }}/div
/templatescriptexport default {name: TgButton,props: {txt: { type: String, default: ,}, bgColor: { type: String, default: blur,}, },data () {return {}},created() {},methods: {}
}
/scriptstyle scoped langless.btn {padding: 12px 20px;font-size: 14px;border-radius: 4px;cursor: pointer;text-align: center;color: #FFF;}.bg-color-blur {background: #409EFF;}.bg-color-grey {background: #f4f4f5;}
/style注意子组件的几点 props尽量添加限定的传入类型和默认值style部分的scoped可尽量减少子组件样式的全局污染 注意我们的tg-button组件目前只支持了传入文字修改按钮颜色的功能但目前来看暂时是够用的后续需要的时候再添加补充但如果你想实现一个丰富的可以给外面程序员们赋能的组件可能需要包含以下功能的控制 5. 实现效果
文本从刚开的路由拆分路由鉴权功能再到404页面实现再到tg-button自研实现讲了多个知识点现在看一下实现效果截图
初始化/helloWorld页 输入非法路由 回车跳转 四、本项目进展图例介绍
本实战项目会不断的丰富起来不仅表现在文章数量上代码行数上我也会经常的用图例来表现出来我们的进展希望大家阅读专栏的时候可以更清晰的看到自己所处于的阶段
1. 内容架构 2. 代码目录 五、读完本小节需要思考的几个问题
按照本专栏的习惯我会在每个小节最后提出几个问题这些问题需要你读完专栏自己思考而且一定要去思考因为对于面试或者以后的前端开发工作都很有益处。 Vue中的路由守卫都有哪几种形式Vue的路由守卫使用场景是什么如果你的单页面应用项目有用户输入了一个非法路由你如何去控制做一个大型前端web项目你的全局样式会书写哪些内容如果自研实现一个button按钮你会考虑设计哪些功能好啦这就是本小节的内容为了和大家有效沟通我安排了一个有意思的投票环节请投个票吧
