2024下学期学习总结加今日学习总结
Vue router
Vue Router 是一个为 Vue.js 应用程序设计的官方路由管理器。它使你能够轻松地在 Vue 应用中实现页面导航，处理 URL 和视图的映射。
安装router
在运行框内输入
npm install vue-router@4 //vue2专用
npm install vue-router@3 //vue3专用对router进行安装。
创建router映射文件
手动在src文件夹下创建router文件夹，然后在router文件夹下创建index.js文件在index.js文件内添加以下内容
import { createWebHistory, createRouter } from 'vue-router' //从vue-router中导入createRouter和createWebHistory方法const routes = [ //创建routes映射信息{path:"/number1", //对应路径component: ()=>import ('../components/number1.vue') //对应的组件},{path:"/number2",component: ()=>import ("../components/number2.vue")},{path:"/number3",component: ()=>import ("../components/number3.vue")}
]const router = createRouter({history: createWebHistory(),//createWebHistory() 表示使用 HTML5 的历史模式，允许浏览器的前进和后退按钮正常工作。routes,//对应的routes映射信息
})
export default router /把生成的router路由实例进行导出最后把router导入到main.js文件中，通过app.use(router)来把router插件添加到vue应用中去
const app=createApp(App)
app.use(router)
app.mount('#app')这样在所有的组件中都可以使用router插件了。
使用router
router-link和router-view
router-link是用来对路由进行切换的，router-link标签可以指定跳转的路由，这样通过点击不同的标签就可以跳转到不同的路由，router-link在底层是使用超链接标签<a>来实现的在浏览器中显示的代码为<a>，使用to属性来指定跳转的位置
router-view是用来展示切换路由之后的组件的，切换的组件都在这个标签内显示.
<!-- 声明路由链接 --><router-link to="/number1">number1</router-link><router-link to="/number2">number2</router-link><router-link to="/number3">number3</router-link><!-- 声明路由占位标签 --><router-view></router-view>重定向
使用router的时候因为在进入主页面的时候是不会指定任何组件的所以就不会显示任何的东西，这明显不符合实际的环境，所以需要为路由设置一个默认显示的组件，我们可以通过重定向来完成这个操作，我们在路由规则中把默认的主页给重定向到一个组件就可以实现这个功能了。
{path:"/",redirect: "/number1"
}路由嵌套
路由嵌套顾名思义就是可以通过对路由的嵌套来完成多重的组件选择。通过在路由规则中给对应的组件添加子级路由就可以完成这个功能。
{path:"/number1",component: ()=>import ('../components/number1.vue'),children: [{path:"/",redirect:"/list"},{path:"/list",component:()=>import("../components/list.vue")},{path:"/find",component:()=>import("../components/find.vue")}]
}这样通过/number/list就可以访问到list组件了。
动态路由
如果我们有很多的商品，每个商品都可以点击跳转到商品详情页面，那么我们如果使用上面学过的方法就需要对每一个商品都写一个router-link，这很麻烦，使用动态路由可以避免这种情况。
动态路由允许在跳转组件的时候进行传参，这样我们就可以在跳转页面的同时把参数传输过去另一边接收后再进行处理，根据传输的参数显示对应的商品数据。
使用
想要使路径可以放置参数并且可以正确跳转页面，需要在路径后、参数前写上 " : "然后接上对应的参数名，例如：
path:"food/:id"这样使用$route.params.id就可以把传输过来的参数给提取出来。使用这种方法当参数多起来就不好用了。
所以我们可以使用props来处理传输的数据：在路由规则中需要传输参数的地方把props属性修改为true，然后在接收数据的地方使用props属性来接收属性。
path:"food/:id",component:()=>import("../components/food.vue"),props:true<template><div><h3>食物{{id}}</h3></div>
</template>
<script>export default{props:{id:{required:true}}}
</script>编程跳转
在实际应用中有些地方不一定是需要点击之后就跳转的比如登录，需要在进行判断之后再决定是否需要进行跳转，这时就需要通过运行代码去进行跳转，使用router.push方法来进行跳转
router.push(path: "/number1")导航守卫
效果类似于前端拦截器，作用是在跳转页面的时候对路由进行拦截，全局导航守卫会拦截每一个路由规则，从而实现对每一个路由进行访问权限的控制。
上图的代码为伪代码
Element-ui（组件库）
安装
在命令行输入进行安装
$ npm install element-plus --save安装成功后在main.js文件中添加语句把对应的文件导入进去
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import router from "./router/index"const app=createApp(App)
app.use(ElementPlus)
app.use(router)
app.mount('#app') 使用element：到element网把代码copy到自己的项目中，就当一个自定义的组件进行使用
axios
安装
在命令行中输入进行安装
$ npm install axios然后只需要在main.js中对axios进行导入就可以使用了
import axios from 'axios'因为每一次发送请求需要填写一次后端服务器所在的位置，而且如果后端服务器的地址发生变化那么就需要对所有的请求地址进行改变，这就导致了代码的冗余，所以我们可以通过设置默认服务器地址来对代码进行优化。
axios.defaults.baseURL="http://localhost:8088"
app.config.globalProperties.$http=axios设置完默认地址后我们只需要在需要发送请求的地方使用this.$http进行发送请求（请求地址就只需要填写对应的方法地址）就可以了。
this.$http.get("/test/getAllUser")
.then((response)=>{console.log(response.data.data);this.tableData=response.data.data;
})仔细想来下半年好多事情要做啊：每天要抽时间锻炼、要学spirngboot、要写项目、还要考四级，这个学期要是把这些任务都完成了就成了时间管理大师了，这个springboot项目需要写好一点，争取写出令自己满意的项目。要在这个学期结束之前把能力加强到可以写出一个令自己满意的项目，这样才可以面对明年初的比赛。
在下个学期到来之前把《Java核心技术卷》、《并发编程的艺术》、《设计模式之美》这几本书给看了对于书中的知识要多去思考把每个知识点都去想一想别的优化或者平替方法，再去学习java虚拟机。在学习的同时必须去做笔记。每周的水课用来看书。
还要抽空去写算法题、尽量做到一天写一道题。
尽量少熬夜，早睡，早起。把晚上的时间调用到早上去。
备战四级：每天记20个单词，周末写一些题目，每天中午听听力。
不是水课的课要认真听，让期末周不要那么匆忙。