- 博客(27)
- 收藏
- 关注
RSS订阅原创 vuex筛选权限路由
1、 登录之后，后端根据该用户的角色查询当该用户的权限信息，这些权限信息包含的标识是和本地完整的动态路由的name是有匹配关系的。我们登录之后拿到权限标识和本地的动态路由进行匹配筛选出属于当前用户的动态路由，然后通过router.addRoutes方法，直接添加到路由实例中去2： 登录之后，后端根据该用户的角色查询当该用户的权限信息，而这些权限信息就是该用户的动态路由，我们只需要将动态路由里面的component字段值为字符串转为真正的组件对象即可。然后通过router.addRoutes方法，直接添加
2022-04-06 22:23:09
609
原创 树型结构布局
组织架构树形结构布局采用 element 中的 tree组件 可以实现树形结构, 用清晰的层级结构展示信息<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree><script> export default { data() { return { data: [{ label: '一级 ...
2022-03-27 21:08:09
255
原创 vuex的基础
vuex是一个专为vue.js应用程序开发的状态管理模式，采用了集中式管理组织依赖的共享数据，解决不同组件数据的共享问题。初始化安装;vue add vuex@3.6.2// main.js中import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({ 配置项 })// 在根实例配置 store 选项指向 store 实例对象new Vue({ el: '#a...
2022-03-20 15:18:12
1057
原创 头条项目07
展示用户信息查看接口文档找数据接口，封装请求方法发送请求获取数据，然后进行模板绑定。修改昵称准备一个弹出层，定义一个变量为false，控制弹出层的隐藏，点击对应按钮时，将变量设置为true来显示弹出层，绘制弹出层组件，给取消按钮绑定一个事件使用$emit传给父组件，在父组件中导入并注册，监听关闭事件。父组件使用v-model将昵称传给子组件用于显示，子组件发送请求，更新昵称后，将新后的值再传给父组件修改性别原理与修改昵称大致相同，子组件使用picker选择器来完成布局<v
2022-03-18 21:53:50
194
原创 头条项目06
点击发布评论,会有弹出层,用vant写出弹出层,弹出层对发布评论的页面来说,是爷爷,要经过两次传参.item中@click="$emit('recleClick', comment)"list中@recleClick="$emit('recleClick', $event)"index,中@recleClick="recleClick"来判断弹出层是否要打开设置样式.发布评论要验证是否登录,没有登录,点击发布评论,会跳到登录页,登录,if (!this.$store.st
2022-03-17 21:53:43
75
原创 头条项目05
文章评论列表，文章评论列表的话还是用到了我们熟悉的vant里的list组件使用了v-model进行了父子组件的数据通信关注用户功能:先封装请求函方法, 然后给关注按钮注册点击事件。在事件函数中判断用户是否登录, 如未登录, 则 return 出来, 并提示用户登录，如果已登录则进行下一个关注的判断。如果已关注，则取消关注，如果没有关注，则添加关注。然后将视图进行更新,给值取反, 因为子组件不能直接修改, 使用 $emit 将值传给父组件为了防止用户频繁点击和用户的交互反馈, 设置一个变...
2022-03-16 00:28:31
52
原创 头条项目学习04
关于路由解耦：props为什么要路由解耦？在组件中使用$route会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的url上使用，限制了灵活性。对路由参数的改变不需要通过this.route去获取了，而是通过props来获取，解决通过watch监听route和通过beforeRouteUpdate传值时通过$route.params获取参数改变时麻烦的写法：只适用于pramas不适用于query。此属性能够将动态路由路径的参数映射到对应组件的props属性中，这样在拿路径中参数的时候
2022-03-14 21:02:53
807
原创 头条项目03
同步列表,登录状态,未登录状态,用户编辑时利用store的state中的user.来判断用户是否登录,没有登录,就保存到本地中,等录保存在网络中.if (this.user) { try { const { data } = await userChines(); this.chennls = data.data.channels; } catch (err) { console.log(err);...
2022-03-14 08:42:16
67
原创 头条项目的文章列表
展示频道列表先在 api目录下面文件封装请求方法然后在 data里面定义变量用于存储数据在 methods里定义获取数据方法。（页面导入这个方法，方法里面调用方法发送请求，请求成功赋值data里面变量）在 created里面调用这个方法。最后渲染。api/user.js 里封装export const getUserChannels = () => {return request({method: 'GET',url: '/v1_0/user/channels'})}..
2022-03-10 21:04:01
152
原创 头条项目登录验证
增加验证规则对象使用vant移动组件库里面的表单 userFormRules: { mobile: [{ required: true, 必带属性 message: '手机号不能为空' }, { pattern: /^1[3|5|7|8]\d{9}$/, 正则验证 message: '手机号格式错误' }],绑定验证规则:rules="userFormRu...
2022-03-08 21:57:35
647
原创 头条项目开始
vue cli创建项目vuecreate 项目名manually：自定义勾选特性配置，选择完毕之后，才会进入装包分别选择： Babel：es6 转 es5 Router：路由 Vuex：数据容器，存储共享数据 CSS Pre-processors：CSS 预处理器，后面会提示你选择 less、sass、stylus 等 Linter / Formatter：代码格式校验选择在什么时机下触发代码格式校验：Lint on save：每当保存文件的时候Lint and fix on comm
2022-03-07 21:54:11
66
原创 关于vuex学习
什么是vuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。getters使用：当state中的数据需要经过加工后再使用时，可以使用getters加工。四个map的使用方法mapState方法：用于帮助我们映射state中的数据为计算属性。mapGetters方法：用于帮助我们映射getters中的数据为计算属性。mapActions方法：用于帮助我们生成与actions对话
2022-03-07 08:55:33
62
原创 vue的路由学习
路由是一种映射关系，vue中的路由是路径和组件的映射关系。单页面应用是指所有功能在一个html页面上实现。其优点：整体不刷新页面，用户体验好，数据传递容易，开发效率高。缺点：首次加载会比较慢一点，不利于seo。路由 - 声明式导航目标：可用全局组件router-link来替代a标签（链接导航, 用router-link配合to, 实现点击切换路由 ）vue-router提供了一个全局组件 router-linkrouter-link实质上最终会渲染成a链接 to属性等价于提供
2022-03-03 21:49:01
539
原创 vue组件
一、动态组件多个组件使用同一个挂载点，并动态切换，这就是动态组件。需求: 完成一个注册功能页面, 2个按钮切换, 一个填写注册信息, 一个填写用户简介信息效果如下:准备被切换的 - UserName.vue / UserInfo.vue 2个组件引入到UseDynamic.vue注册准备变量来承载要显示的"组件名"设置挂载点, 使用is属性来设置要显示哪个组件点击按钮 – 修改comName变量里的"组件名"补充：生命周期:activated - 激活 de
2022-03-02 19:17:24
232
原创 关于$nextTick和$resf
$resf获取DOM利用ref和$resf可以用于获取dom元素<template> <div> <p>1. 获取原生DOM元素</p> <h1 id="h" ref="myH">这是h1</h1> </div></template><script>// 目标: 获取组件对象// 1. 创建组件/引入组件/注册组件/使用组件// 2. 组件起别名r...
2022-02-28 19:24:53
305
原创 vue学习axios基本使用
特点：1、支持客户端发送ajax请求。2、支持服务端node.js发送请求。3、支持promise相关用法。4、支持请求和响应的拦截器功能。5、自动转换json数据。6、axios底层还是原生js实现，内部通过promise封装的。一、axios基本使用axios({ method: '请求方式', // get post url: '请求地址', data: { // 拼接到请求体的参数, post请求的参数 xxx: xxx, },...
2022-02-28 19:12:26
420
原创 生命周期vue学习
总的来说是一个组件从创建到销毁的整个过程就是生命周期1、钩子函数vue框架内置函数，随着组件的生命周期阶段，自行执行阶段：1、初始化 beforeCreate created2、挂载 beforeMount mounted3、更新 beforeUpdate updated4、销毁 beforeDestroy destroyed初始化阶段含义讲解:1.new Vue() – Vue实例化(组件也是一个小的Vue实例)2.Init Events & Lif
2022-02-26 21:51:25
43
原创 vue学习03
1、vue计算属性-computer用于一个数据依赖另外一些数据计算而来的结构语法：computer:{"计算属性名"(){return "值"}}计算属性也是vue数据变量，所以不要和data里重名，用法和data相同计算属性的缓存木标: 计算属性是基于它们的依赖项的值结果进行缓存的，只要依赖的变量不变, 都直接从缓存取结果计算属性根据依赖变量结果缓存, 依赖变化重新计算结果存入缓存, 比普通方法性能更高计算属性完整写法计算属性也是变量, 如果想要直接赋值, 需要使用完整
2022-02-25 21:09:05
524
原创 vue指令学习理解
1、v-text和v-html用于更新DOM对象的innerText/innerHTML语法：v-text="vue 数据变量" （v-text会把值当成普通字符串显示）v-html = "vue 数据变量" （v-html会把值当html解析）<template> <div> <p v-text="cc"></p> <p v-html="cc"></p> </div></t
2022-02-24 19:30:32
323
原创 关于vue脚手架和基础
一：关于vue1：vue是渐进式的JavaScript的框架，有一套属于自己的一套规则。2：库是封装的属性和方法，而框架拥有自动规则和元素。二：脚手架@vue/cli它是一个官方提供的一个全局模块包，为了保证顺利而搭建的一个工作平台。它的好处是：（1）0配置webpack（2）babel、css、less、支持（3）开发服务器支持1、@vue/cli安装全局安装命令yarn global add @vue/cli或者npm install -g @vue/cli，用v
2022-02-22 21:28:42
196
原创 webpack的使用(未用脚手架)
一、什么是webpack?为什么使用它?webpack本质是一个第三方模块包,可以用来分析和打包代码。为什么使用，是因为可以提高浏览器的打开速度，可以压缩代码。二、webpack的安装使用1、安装初始化：yarn init安装指令：yarn add webpack webpack-cli -D然后在配置：在package。json里配置scripts:{"build": "webpack"}2、用webpack打包创建src文件夹下创建cc文件夹创建cc.js，写入exp
2022-02-21 20:55:44
257
原创 Git指令学习
开源项目托管平台:GitHub:全球最强项目托管平台,没有之一,不过现在访问时不时卡掉线建议挂个vpn.Gitee:又名码云,我国国产的开源项目平台,纯中文使用很友好.Gitlab: 对代码私有性很好,一般企业用户很多.git的指令:git remote add origin 远程曾库地址git push -u origin mastergit push 将本地仓库代码上传远程仓库git clone 远程仓库地址查看分支列表:查看本地的用git branch,查看远程的g
2022-01-20 21:15:41
444
原创 Git的学习
1、什么是GitGit全称是分布式版本控制系统，常在编程中用到，而且git支持分布式部署，可以高速的处理小到非常大的项目版本管理。直白点就是版本的控制软件。如果出现问题我们可以快速的回退到我们之前没问题的版本。（改嘛，问题不大，越是大的越是杂的项目git的好处就越是明显）好处：操作简单，还好对比能快速找到问题出在什么地方，也易于回退到之前的某一个版本。git中的三个区域和三个状态工作区，暂存区，仓库已修改(modified) ,表示修改了文件但是修改好的结果还没放到暂存区已暂存(
2022-01-18 21:01:15
245
原创 Ajax学习03
1、什么是同源策略了解同源策略首先得知道同源是什么意思，同源指的是协议、域名以及端口全部相同，这个时候我们才能说这两个页面同源（源自于同一样个根地址）。然而同源策略相当于是浏览器的一个安全阀，两个非同源页面相互交替资源，用于隔离恶意文件的一种安全机制。例如接触非同源的dom或者向非同源地址发送Ajax请求等都不行。2、什么是跨域上面说了同源是协议域名端口都一致，而如果其中但凡有一个不一样就是跨域。其根本原因就是因为浏览的同源策略。3、浏览器怎么实现跨域请求？因为浏览器...
2022-01-17 20:58:44
325
原创 Ajax学习2
1、什么是XMLHttpRequestXMLHttpRequest（简称 xhr）是浏览器提供的 Javascript 对象，通过它可请求服务器上的数据资源。jQ中的Ajax函数就是基于xhr对象封装的。2、如何使用xhr发送请求步骤：1：创建xhr对象2：调用 xhr.open() 函数3：调用 xhr.send() 函数4：监听xhr.onreadystatechange 事件var xhr = new XMLHttpRequest() //创建一个xh.
2022-01-15 21:23:00
388
原创 Ajax基础理解
1、什么AjaxAJAX 并非编程语言。AJAX 仅仅组合了：浏览器内建的 XMLHttpRequest 对象（从 web 服务器请求数据） JavaScript 和 HTML DOM（显示或使用数据）2、Ajax的工作网页中发生一个事件（页面加载、按钮点击） 由 JavaScript 创建 XMLHttpRequest （xhr）对象 XMLHttpRequest 对象向 web 服务器发送请求 服务器处理该请求 服务器将响应发送回网页 由 JavaScript 读取响应
2022-01-14 16:12:03
233
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人