20240112收获

vue的router路由

首先，创建方式是引入vue和vue-router，要记得router的文件叫做vue-router，同时引入vue的目的是为了注册路由，这样才能使用，才能实例化。

实例化的时候是通过new 导入时的命名 来实例。参数是一个对象，如new Router 也可以不叫Router

有属性mode,默认为hash，通过这个属性来控制地址栏的显示规则，是否会携带#在域名后面，一般设置其为history。

有属性scrollBehavior，可以添加其值为{y：0}，这里注意，值应该是一个函数，

scrollBehavior:()=>{return {y:0}}或者()=>{y:0}

这样的才对，我之前搞错了,这是第二次修改了，第一次修改都改错了。改成()=>{{y:0}}，这种是错的。

作用是在路由切换的时候，如果页面有滚动条，那么切换后会自动回到上方，而不是滚动条停留。

有属性routes，即路由规则，在配置的时候，要注意一级路由和二级路由，区分方式是是否是children里面的路由，然后要注意的是，path的写法上有区分，一级路由一般写作"/login"，是带斜杠的，而二级路由是不带斜杠的，但是vue在拼接路由的时候会自动添加上，理解为写法上我们自己要意识到区分开来。还有在开发中会有一种特殊页面，因为像404或者登陆页这种，自身就是一个页面，而我们登陆后显示的workbench页面，一般都是由layout和内容部分组成的，就是有左侧的菜单，上方的导航栏以及右侧的内容区域。这种页面是有嵌套的，即我们要将我们想展示的首页渲染到右侧的内容区域。而我们路由上却是一级路由，因此这里有个特殊的点，就是当children的path是""，里面什么都不写的时候，是不会再加上斜杠的，这样在视觉上看，还是一级路由，但是本质上就已经是二级路由了，有两个component。

路由的本质其实就是把url规则唯一化，这样用url规则匹配要加载的页面组件，然后通过router-view标签将内容展示在我们想要的地方，而让我们在页面上手操改变路由的方式有点击左侧菜单，所以左侧菜单应该要和路由是对应的关系。但是有些页面我们是不想直接展示的比如404页面，login页面，path为"/"的页面，所以我们要将其隐藏，通常通过在路由规则里添加hidden属性为true，然后在左侧菜单的渲染的地方通过v-if来判断其值，从而进行隐藏，还有就是通过设置meta属性来给其赋上菜单文字以及图片，那么没有meta属性的，在代码中也可以通过自己的设置来使其不展示。

同时，路由在main.js注册后，我们想在.vue页面中使用routes，我们可以通过this.$router.options.routes来获取，那么和routes同级的，比如mode应该也是在options对象里面。

（路由的代码跳转还没遇到）

vuex的实例化比较特别，

是通过new Vuex.store()来实例化的，同时store里面可以有几个对象，state 数据,getters 类似计算属性,mutations 操作state的方法,actions 异步操作，modules 模块名。这里要注意，只有state是不带s的，这里也要专门去记忆。然后使用的时候，推荐用map辅助函数，而不是去通过一行代码去使用，因为不用map的话，记忆的成本很高，（这里是我之前的理解，我以为可以避开this.$store.dispatch之类的这种，后来在实际操作中发现避不开，因为map辅助函数只能在.vue文件里使用，如果我们需要在.js文件中使用vuex的东西，就只能导入store，然后通过store.state.模块名.数据之类的方法去使用，所以这一段是我的错误理解，但是我意外的发现如果先不去记忆那些使用方式，先理解map辅助函数，好像对我来说还蛮合适的，先记忆了map辅助函数，再回过头去看那几个长得很奇葩的用法，心理压力上要小一些，毕竟我会辅助函数了。）几个方法有区别。map辅助函数的话，要记忆的就是像state和getters这种数据型的是在computed里面去使用，mutations和actions这种是放在methods里面去使用.，同时，map辅助函数是从vuex里面导入的。

import {mapState,mapGetters,mapActions,mapMutations} from 'vuex'

computed{

        ...mapState('模块名',['state属性1','state属性2']),

        ...mapGetters('模块名',['getters属性1','getters属性2'])

}

methods{

        ...mapMutations('模块名',['mutations方法1','mutations方法2']),

        ...mapActions('模块名',['actions方法名1','actions方法名2'])

}

还需要注意的是，有namespaced属性，要注意这个单词，这个属性出现在模块文件中。

request的封装，

axios的实例化的写法也要单独记忆 axios.create({})这里面一般设置baseURL和timeout这俩属性,实例化后的请求再添加拦截器interceptors，分别是请求前和响应后的拦截，这里是一个在前，一个在后，不需要特意记。请求.interceptors.request.use()这里面接受两个函数，记得就算写成箭头函数，也要有return

service.interceptors.request.use(config=>{

        return config

},error =>{

        return Promise.reject(error)

})

service.interceptors.response.use(request=>{

        return request.data//这里之所以加上data是因为axios会将返回来的数据包装一层，放到data里面，和data同级的有status，config之类的属性，这些我们并不需要，所以直接.data拿到数据

},error=>{

        return Promise.reject(error)

})

export default service

//这里理解一下export的写法，常见的有几种export default xx,export function xx(){},export const xx =1,export {xx}，观察一下得出规律，export不能直接跟变量名，要么用default要么用{}隔开，或者直接用function,const这样的定义。还有就是export的简写，通常是多个同级的文件，我们希望把这些文件放到一个入口文件里面，这样调用起来，只需要导入这个入口文件就好了，而不是每次都把所有的都import,通常我们把入口文件叫做index，里面用export的简写

export {default as AppMain} from './AppMain'

这里如果正常写要写成

import AppMain from './AppMain'

export {AppMain}

要写两行，简写的话只用一行就行了。

这里要注意，目前我看到的这种写法，适合layout，因为首先layout需要整合多个vue组件，这种便捷写法可以实现按需导出，再就是vue组件一般都是export default {}这样的形式的，也就是默认导出，所以可以实现上面的简写，其他的，我还没见识到。

然后到需要使用的地方

import request from "request的文件路径"

export function 命名一个api函数(data){

return request({

//这里我最开始的时候少写了return，后来随着我慢慢去试图自己理解promise,async,await，这个地方的细节我基本上记住了，这里的return一定要加，加了之后外层函数调用完才能得到一个promise对象。

        url:"/xx/yy",  //这里注意，一般都是带/的，因为baseURL一般不带/，所以url中带上/这样拼接才不会出错

        method:"post",

        这里是data还是params根据上面的是post还是get，params可以理解为是写在地址栏里的，对应java的@RequestParams,所以很多东西之所以我们难记，是因为创造者创造的时候为了迁就其他的，所以导致我们看着那些挺别扭的。

        data:数据

})}

这里要注意，我一开始写错了，我没有考虑封装性，确实应该是在使用的时候是新创建一个函数，虽然函数内部调用的只有request，但是需要封装起来，这样在用的时候才可以传值。

git的操作，

如果是从网上其他人仓库拉下来的代码，要先把.git文件删掉，解除关联，然后在git命令行中git init初始化，生成我们自己的.git文件，然后就是

git add .

git commit -m "文字"

然后就是设置远程仓库地址，先进入码云创建仓库，然后复制相应的git命令

git remote add origin 然后地址啥的

git push

这里可能会有情况，就是密码和账户不对的情况，那么只需要

git config --global user.name "自己的账号" copygitee上面的命令，重新修改账号和邮箱，然后密码的话，去找凭据管理器下的windows管理器，如果没有的话，直接git push，会自动弹窗让我们填。

git查看账号密码的指令

git config --global -l

elementUI的表单

el-form-item这个标签，往往会包裹各种其他标签，用来实现表单的控件功能，同时这个标签自身也有独特的功能，即展示文字，这个是使用的label属性，还有根据后台返回的值来进行数据绑定，从而在用户打开表单的时候能够看到以往的数据，比如编辑啦，登录啦，这些功能都要用到这个能力，这个能力是通过prop属性。但是prop和后台数据没有直接关联，prop是和:model或者:data关联的，然后我们自己将：m或：d的值与接口请求来的数据关联。

el表单校验四要素，

el-form的:model ,是表单对应的数据对象

el-form的:rules，是一个对象，而非数组，里面的每一项代表对哪个字段加校验

el-form-item的prop

el-input,el-checkbox之类的表单元素的v-model

表单元素的v-model会将表单元素的值给收集起来，这里为了简化工作，所以最好能够和我们要传给后端的数据对应起来，这样能减少代码。

同时，因为校验的时候是校验：mode上的整个对象，所以在代码中，推荐把username,password这些字段都放到一个对象里面，即：model对应的数据。

vue代码中犯错的地方

在data中要写成

data(){

return {

}

}，要记得加上return，

对象是 xx:{}，第一次写的时候把冒号给忘记了。然后这里面的属性调用的时候，忘记加上对象了

比如

data(){

return {

loginForm:{

        username:'',

        password:''

}

}//这里又把return{}给忘记了。

}

在html里面使用的时候要写成v-model="loginForm.username"这样才对，同时，等号右边不能有空格。之前又误加了一个空格，我就说看着像是有空格。