- 博客(31)
- 收藏
- 关注
RSS订阅原创 黑马人资项目
封装一个通用的工具栏目标：封装一个通用的工具栏供大家使用通用工具栏的组件结构在后续的业务开发中，经常会用到一个类似下图的工具栏，作为公共组件，进行一下封装组件 src/components/PageTools/index.vue<template> <el-card class="page-tools"> <el-row type="flex" justify="space-between" align="middle"> ...
2022-03-31 21:08:35
424
1
原创 黑马人资项目
建立公司角色页面的基本结构目标建立公司页面的基本结构根据以上的结构，我们采用element-ui的组件实现src/views/setting/index.vue<template> <div class="dashboard-container"> <div class="app-container"> <el-card> <el-tabs> <!-- 放置...
2022-03-29 21:52:48
488
原创 黑马人资项目
封装删除接口，注册下拉菜单事件首先，封装删除功能模块 src/api/departments.js/** * * 根据id根据部门 接口是根据restful的规则设计的 删除 delete 新增 post 修改put 获取 get * **/export function delDepartments(id) { return request({ url: `/company/department/${id}`, method: 'delete' })}...
2022-03-28 21:56:41
962
1
原创 黑马人资项目
路由页面整理目标 删除基础模板中附带的多余页面基础模板帮我们提前内置了一些页面，本章节我们进行一下整理首先，我们需要知道类似这种大型中台项目的页面路由是如何设置的。简单项目当前项目结构为什么要拆成若干个路由模块呢？因为复杂中台项目的页面众多，不可能把所有的业务都集中在一个文件上进行管理和维护，并且还有最重要的，前端的页面中主要分为两部分，一部分是所有人都可以访问的， 一部分是只有有权限的人才可以访问的，拆分多个模块便于更好的控制静态路由和动态路由注意这
2022-03-26 21:15:47
2779
原创 黑马人资项目
封装Vuex的登录Action并处理token目标在vuex中封装登录的action,并处理token在这个小节中，我们将在vuex中加入对于用户的登录的处理在Vuex中对token进行管理在传统模式中，我们登录的逻辑很简单，如图上图中，组件直接和接口打交道，这并没有什么问题，但是对于用户token这一高频使用的钥匙，我们需要让vuex来介入，将用户的token状态共享，更方便的读取，如图实现store/modules/user.js基本配置// 状态co
2022-03-25 22:10:47
1402
原创 人资项目详情
vuex基础-介绍为什么会有Vuex ? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 vuex是采用集中式管理组件依赖的共享数据的一个工具，可以解决不同组件数据共享问题。 结论 修改state状态必须通过mutations mutations只能执行同步代码，类似ajax，定时器之类的代码不能在mutations中执行 执行异步代码，要通过a
2022-03-19 21:24:20
190
1
原创 vue黑马头条
业务功能分析#2、展示文章评论列表#2.1、准备组件为了更好的开发和维护，这里我们把文章评论单独封装到一个组件中来处理。创建组件src/views/article/components/comment-list.vue<template> <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" .
2022-03-17 21:53:59
251
原创 vue黑马头条
4.8、文章收藏该功能和关注用户的处理思路几乎一样，建议由学员自己编写。封装组件处理视图功能处理思路：给收藏按钮注册点击事件 如果已经收藏了，则取消收藏 如果没有收藏，则添加收藏下面是具体实现。1、封装组件创建src/components/collect-article/index.vue<template> <van-button icon="star-o"></van-button></template>
2022-03-15 21:50:56
244
原创 vue黑马头条项目
4.3、搜索历史记录#4.3.1 添加历史记录当发生搜索的时候我们才需要记录历史记录。1、在search/index.vue中 data添加一个数据用来存储历史记录2、在触发搜索的时候，记录历史记录4.3.2 展示历史记录需要父子通信，将数据传递给search-history.vue去渲染使用1、父组件search/index.vue传递数据2、子组件search-history.vue接收数据3、渲染数据4.3.3 删除历史记录基本思路：给历史记录中的每一项
2022-03-14 21:47:14
438
原创 前端黑马头条
六、文章搜索#1、业务功能分析#2、创建组件并配置路由1、创建src/views/search/index.vue<template> <div class="search-container">搜索页面</div></template><script> export default { name: "SearchPage", components: {}, props: {}, .
2022-03-12 21:51:31
1648
原创 vue基础
五、首页—频道编辑#1、处理页面弹出层Vant 中内置了Popup 弹出层(opens new window)组件。1、在views/home/index.vue里面data中添加一个数据变量data () { return { ... isChannelEditShow: true // 这里我们先设置为 true 就能看到弹窗的页面了 }}2、在views/home/index.vue里面添加弹出层组件<!-- 频道编辑 --...
2022-03-11 21:08:05
1233
原创 黑马移动端文章列表页面
首页—文章列表#1、页面布局#1.1、头部导航栏1、使用导航栏组件2、在导航栏组件中插入按钮文本 图标3、样式调整宽高 背景色 边框 文本大小 图标大小<template> <div class="home-container"> <!-- 导航栏 --> <van-nav-bar class="page-nav-bar" fixed> <van-button c
2022-03-10 19:00:00
596
原创 vue基础
三、个人中心#1 模块介绍#2 TabBar 处理通过分析页面，我们可以看到，首页、问答、视频、我的 都使用的是同一个底部标签栏，我们没必要在每个页面中都写一个，所以为了通用方便，我们可以使用 Vue Router 的嵌套路由来处理。父路由：一个空页面，包含一个 tabbar，中间留子路由出口 子路由 首页 问答 视频 我的 #2.1 创建layout并配置路由这里主要使用到的 Vant 组件：Tabbar.
2022-03-08 21:59:32
244
原创 vue 头条项目
一、项目初始化目标能使用 Vue CLI 创建项目 了解 Vant 组件库的导入方式 掌握制作使用字体图标的方式 掌握如何在 Vue 项目中处理 REM 适配 理解 axios 请求模块的封装#1、使用 Vue CLI 创建项目如果你还没有安装 VueCLI，请执行下面的命令安装或是升级：npm install --global @vue/cli // 全局安装脚手架1在命令行中输入以下命令创建 Vue 项目：vue create toutiao-m
2022-03-07 20:31:37
307
原创 vue基础
网易云音乐-播放音乐目标: 从预习资料拿到播放的api和页面, 配置好路由规则==时间关系,这个页面不用写, 直接用, 注释在备课代码里写好了==组件SongItem里 – 点击事件api/Play.js – 提前准备好 – 接口方法跳转到Play页面 – 把歌曲id带过进去在SongItem.vue - 点击播放字体图标methods: { playFn(){ this.$router.push({ path: '/play...
2022-03-05 21:50:02
403
原创 vue基础
一 .什么是路由映射关系1.设备和ip的映射关系2.接口和服务的映射关系3.路径和组件的映射关系二. 为什么使用路由单页面应用(SPA): 所有功能在一个html页面上实现前端路由作用: 实现业务场景切换优点：- 整体不刷新页面，用户体验更好- 数据传递容易, 开发效率高缺点：- 开发成本高(需要学习专门知识)- 首次加载会比较慢一点。不利于seo三.vue-router介绍目标: 如何在Vue项目中集成路由官网: https://router.vuejs.org/z
2022-03-03 18:50:02
726
原创 vue基础
1. 目标: 动态组件 - 切换组件显示场景: 同一个挂载点要切换 不同组件 显示1. 创建要被切换的组件 - 标签+样式2. 引入到要展示的vue文件内, 注册// 3. 变量-承载要显示的组件名4. 设置挂载点<component :is="变量"></component>5. 点击按钮-切换comName的值为要显示的组件名2.组件进阶 - 组件缓存> 目标: 组件切换会导致组件被频繁销毁和重新创建, 性能不高使用Vue内置的keep-alive组件,
2022-03-01 21:54:38
55
原创 vue基础
axios基本使用axios文档特点 支持客户端发送Ajax请求 支持服务端Node.js发送请求 支持Promise相关用法 支持请求和响应的拦截器功能 自动转换JSON数据 axios 底层还是原生js实现, 内部通过Promise封装的 axios({ method: '请求方式', // get post url: '请求地址', data: { // 拼接到请求体的参数, post请求的参数 xxx: ...
2022-02-28 20:50:56
66
原创 vue基础
vue生命周期1_钩子函数目标: Vue 框架内置函数，随着组件的生命周期阶段，自动执行作用: 特定的时间点，执行特定的操作场景: 组件创建完毕后，可以在created 生命周期函数中发起Ajax 请求，从而初始化 data 数据分类: 4大阶段8个方法 初始化 挂载 更新 销毁 .2_初始化阶段目标: 掌握初始化阶段2个钩子函数作用和执行时机含义讲解:1.new Vue() – Vue实例化(组件也是一个.
2022-02-26 20:04:30
46
原创 vue基础
vue计算属性3.0_vue计算属性-computed目标: 一个数据, 依赖另外一些数据计算而来的结果语法: computed: { "计算属性名" () { return "值" }} vue计算属性-缓存目标: 计算属性是基于它们的依赖项的值结果进行缓存的，只要依赖的变量不变, 都直接从缓存取结果 // 计算属性优势: // 带缓存 // 计算属性对应函数执行后, 会把return值缓存起来 // 依赖项不变, 多...
2022-02-25 19:48:35
93
原创 vue基础
1.vue指令 v-text和v-html目的: 更新DOM对象的innerText/innerHTML 语法: v-text="vue数据变量" v-html="vue数据变量" 注意: 会覆盖插值表达式 v-text把值当成普通字符串显示, v-html把值当做html解析 2.vue指令 v-show和v-if目标: 控制标签的隐藏或出现 语法: v-show="vue变量" v-if="vu
2022-02-24 21:45:38
451
原创 vue基础
_Vue是什么:渐进式开发框架什么是库和框架补充概念:库: 封装的属性或方法 (例jquery.js)框架: 拥有自己的规则和元素, 比库强大的多 (例vue.js)好处: 开箱即用0配置webpackbabel支持css, less支持开发服务器支持@vue/cli安装目标: 把@vue/cli模块包按到全局, 电脑拥有vue命令, 才能创建脚手架工程 全局安装命令 yarn global add @vue/cli# ORnpm
2022-02-22 21:36:16
37
原创 【无标题】webpack基础
快速、可靠、安全的依赖管理工具。和 npm 类似, 都是包管理工具, 可以用于下载包, 就是比npm快理工具, 可以用于下载包, 就是比npm快1.webpack基本概念webpack本身是, node的一个第三方模块包, 用于打包代码webpack能做什么把很多文件打包整合到一起, 缩小项目体积, 提高加载速度总结: src并列处, 生成默认dist目录和打包后默认main.js文件 less/sass -> css ES6/7/8 -
2022-02-21 20:21:16
54
原创 大事件项目侧边栏操作
新建重置密码的页面， user_pwd.html ，给侧边栏对应a标签设置 href 的路径，以及 target 属 性 利用 layui 的卡片（页面元素 > 面板 > 卡片布局） 搭建结构 利用 layui 的表单元素（页面元素 > 表单）来搭建里面内容 修改下里面的文字内容为密码框定义校验规则(必须按照一定的顺序)导入相关 js 脚本 （ layui的js > jQuery的js > baseAPI.js > 导入自己的...
2022-01-24 21:57:18
446
原创 大事件项目后台操作
后台主页 快速实现后台主页的布局效果找到 LayUI 文档里面 页面元素 > 布局 > 后台布局 拷贝里面的代码，修改以下对应的文字内容修改侧边栏的结构找到没有二级分类的 li ，移植到第一个位置 对应修改里面的文字内容即可使用lay-shrink实现左侧菜单互斥效果 目前效果是侧边栏的二级列表都可以展开，这个不是我们需要的效果，我们需要的是，一个二级列表展 开之后，另外的二级列表需要关闭只需要给侧边栏的 ul 添加一个 lay-shrin
2022-01-22 21:46:51
485
原创 大事件项目
0. 今天完成的功能效果 登录功能实现 注册功能实现 后台主页结构搭建将 素材 目录下的 assets 和 home 文件夹，拷贝到 code 目录下 assets > css 文件夹 自己编写的 css 代码 assets > fonts 字体图标文件夹 assets > images 存放图标文件夹 assets > js 自己 js 代码的文件夹 assets > lib 第三方依赖的文件夹 home > dashb.
2022-01-21 21:50:58
663
原创 git 重点
开源是指不仅提供程序还提供程序的源代码 闭源是只提供程序，不提供源代码 开源并不意味着完全没有限制，为了限制使用者的使用范围和保护作者的权利，每个开源项目都应该遵 守开源 许可协议（ Open Source License ）。 常见的 5 种开源许可协议 BSD （Berkeley Software Distribution） Apache Licence 2.0 GPL （GNU General Public License） (⭐⭐⭐) 具有传染性的一种开
2022-01-21 18:36:11
190
原创 git 基础
1.版本控制软件把手工管理文件版本的方式，改为由软件管理文件的版本； 这个负责管理文件版本的软件，叫做“版本控制软件”2.版本控制系统的分类2.1本地版本控制系统缺点： ① 单机运行，不支持多人协作开发 ② 版本数据库故障后，所有历史更新记录会丢失 2.2集中化的版本控制系统 联网运行，支持多人协作开发缺点：；性能差、用户体验不好① 不支持离线提交版本更新 ② 中心服务器崩溃后，所有人无法正常工作 ③ 版本数据库故障后，所有历史更新记录会
2022-01-18 20:28:47
42
原创 Ajax第三天
1.jQuery高级用法- jQuery实现文件上传1.定义UI结构<!-- 导入 jQuery --> <script src="./lib/jquery.js"></script> <!-- 文件选择框 --> <input type="file" id="file1" /> <!-- 上传文件按钮 --> <button id="btnUpload">上传</button>
2022-01-17 19:58:18
233
原创 Ajax第二天
什么是:XMLHttpRequest:XMLHttpRequest （简称 xhr ）是浏览器提供的 Javascript 对象，通过它，可以请求服务器上的数据资源。前所学的 jQuery 中的 Ajax 函数，就是基于 xhr 对象封装出来的使用xhr发起GET请求:1.创建 xhr 对象2.调用 xhr.open() 函数3.调用 xhr.send() 函数4.监听 xhr.onreadystatechange 事件xhr.onreadystatechange = function
2022-01-15 20:19:04
252
原创 AJAX笔记
服务器:存放和对外提供资源 的电脑客户端:负责 获取和消费资源 的电脑URL（全称是 UniformResourceLocator ） 中文叫 统一资源定位符，用于标识互联网上每个资源的唯一存放位置。浏览器只有通过URL地址，才能正确定位资源的存放位置，从而成功访问到对应的资源URL地址一般由三部分组成:客户端与服务器之间的--通信协议存有该资源的 --服务器名称资源在服务器---具体存放位置客户端与服务器之间的通讯过程，分为： 请求 - 处理 - 响应 三个步骤网页中...
2022-01-14 15:24:08
61
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人