qq994849611的博客

原创 uni-app点击按钮其它按钮变暗

uni-app点击按钮其它按钮变暗

原创 vue简单封装axios思路

utils的rquest.js内import axios from 'axios'const ConfigBaseURL = 'https://localhost:3000/' //默认路径，这里也可以使用env来判断环境let loadingInstance = null //这里是loading//使用create方法创建axios实例export const Service = axios.create({ timeout: 7000, // 请求超时时间 baseURL: Co..

原创 【无标题】

建立公司角色页面的基本结构目标建立公司页面的基本结构根据以上的结构，我们采用element-ui的组件实现src/views/setting/index.vue<template> <div class="dashboard-container"> <div class="app-container"> <el-card> <el-tabs> <!-- 放置...

原创 【无标题】

完成新增表单的基本校验条件部门名称（name）：必填 1-50个字符 / 同级部门中禁止出现重复部门部门编码（code）：必填 1-50个字符 / 部门编码在整个模块中都不允许重复部门负责人（manager）：必填部门介绍 ( introduce)：必填 1-300个字符定义数据结构 formData: { name: '', // 部门名称 code: '', // 部门编码 manager: '', // 部门管理者 ...

原创 【无标题】

Token失效的主动介入流程图转化代码流程图转化代码 src/utils/auth.jsconst timeKey = 'hrsaas-timestamp-key' // 设置一个独一无二的key​// 获取时间戳export function getTimeStamp() { return Cookies.get(timeKey)}// 设置时间戳export function setTimeStamp() { Cookies.set(timeKey, Date...

原创 vue阶段面试题

1.vue优点？答：轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十 kb； 简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习； 双向数据绑定：保留了 angular的特点，在数据操作方面更为简单； 组件化：保留了 react的优点，实现了 html的封装和重用，在构建单页面应用方面有着独特的优势； 视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作； 虚拟DOM：dom操作是非常耗费性能的， 不再...

原创 Element的表单校验

我们尝试通过一个案例对Element的表单校验进行一下补充实现表单基本结构创建项目$ vue create login选择babel / eslint安装Element开发时依赖 ： 开发环境所需要的依赖 -> devDependencies运行时依赖: 项目上线依然需要的依赖 -> dependencies$ npm i element-ui在main.js中对ElementUI进行注册import ElementUI from 'elem.

原创 关于Vuex基础的学习使用

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 vuex是采用集中式管理组件依赖的共享数据的一个工具，可以解决不同组件数据共享问题。 结论 修改state状态必须通过mutations mutations只能执行同步代码，类似ajax，定时器之类的代码不能在mutations中执行 执行异步代码，要通过actions，然后将数据提交给mut.

原创 vue手机端项目-文章评论

准备组件为了更好的开发和维护，这里我们把文章评论单独封装到一个组件中来处理。创建组件src/views/article/components/comment-list.vue<template> <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" > <van-ce.

原创 vue手机端项目-文章详情

关注用户思路：给按钮注册点击事件 在事件处理函数中 如果已关注，则取消关注 如果没有关注，则添加关注 功能处理 思路 找到数据接口 封装请求方法 请求调用 视图更新 在api/user.js中添加封装请求方法 给关注/取消关注按钮注册点击事件 data里面定义加载中变量 在事件处理函数中 组件封装删除article/index.vue里面部分内容： 删除followLoading变量 ...

原创 vue手机端项目-文章详情（未完成）

在 api/article.js 中新增封装接口方法在组件article/index.vue中调用获取文章详情展示文章详情先处理标题、作者信息、文章正文显示这几个部分，其他留到稍后处理处理内容加载状态需求：加载中，显示 loading 加载成功，显示文章详情 加载失败，显示错误提示 如果 404，提示资源不存在 其它的，提示加载失败，用户可以点击重试重新加载 处理正文样式文章正文包括各种数据：段落、标题、列表、链接、图片、..

原创 vue手机端项目-搜索历史

在search/index.vue中 data添加一个数据用来存储历史记录在触发搜索的时候，记录历史记录展示历史记录父组件search/index.vue传递数据子组件search-history.vue接收数据渲染数据删除历史记录处理删除相关元素的展示状态，在 data 中添加一个数据用来控制删除相关元素的显示状态绑定处理删除操作父组件search/index.vue监听自定义事件，执行...

原创 vue手机端项目-搜索页(未完成)

1.配置搜索页面路由import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)// 路由映射数组const routes = [{ path: '/search', name: 'search', component: () => import ('@/views/search')...

原创 vue手机端项目(未完成)

频道

原创 vue手机端项目(未完成)

原创 vue手机端项目(未完成)

目录二级目录

原创 使用 Vue CLI 创建项目

npm install --global @vue/cli // 全局安装脚手架vue create toutiao-m // 创建项目选择manually：自定义勾选特性配置，选择完毕之后，才会进入装包等待安装完成2、加入 Git 版本管理（省略）3、调整初始目录结构默认生成的目录结构不满足我们的开发需求，所以这里需要做一些自定义改动。这里主要就是下面的两个工作：删除初始化的默认文件 新增调整我们需要的目录结构...

原创 关于vue路由的学习（一）

1.它是一个单页面应用，一切都在一个html页面执行2.基本使用步骤 1. 安装 yarn add vue-router 2. 引入 import VueRouter from 'vue-router' 3. 使用插件 Vue.use(VueRouter) 4. 创建路由实例 const router = new VueRouter() 5. 关联到vue实例 new Vue({rou...

原创 关于vue的学习（八）

1.动态组件与keep-alive1.1动态组件可以让多个组件进行切换，同时只会显示一个组件<component :is="is"></component>特征：显示某个组件，这个组件会创建，如果某个组件不显示了，这个组件会销毁1.2keep-alive可以让组件被缓存，不被销毁<keep-alive><component></keep-alive>注意：缓存组件不会执行 destroyed和beforeDe...

原创 关于vue的学习（七）

一.vue_axios1.vue_axios基本使用特点 支持客户端发送Ajax请求 支持服务端Node.js发送请求 支持Promise相关用法 支持请求和响应的拦截器功能 自动转换JSON数据 axios 底层还是原生js实现, 内部通过Promise封装的 axios的基本使用axios({ method: '请求方式', // get post url: '请求地址', data: { // 拼接到请求体的参数...

原创 关于vue的学习（六）

1. vue生命周期一组件从 创建 到 销毁 的整个过程就是生命周期1.1_钩子函数目标: Vue 框架内置函数，随着组件的生命周期阶段，自动执行作用: 特定的时间点，执行特定的操作场景: 组件创建完毕后，可以在created 生命周期函数中发起Ajax 请求，从而初始化 data 数据分类: 4大阶段8个方法 初始化 挂载 更新 销毁 阶段 方法名 方法名 初始化 beforeCreate created 挂载

原创 关于VUE的学习（五）

1.1vue计算属性-完整写法语法：computed: { "属性名": { set(值){ }, get() { return "值" } }}计算属性给v-model使用1.2vue侦听器-watch语法：watch: { "被侦听的属性名" (newVal, oldVal){ }}总结: 想要侦听一个属性...

原创 关于vue的学习（四）

这些方法会触发数组改变, v-for会监测到并更新页面 push() pop() shift() unshift() splice() sort() reverse() 这些方法不会触发v-for更新 slice() filter() concat() 注意: vue不能监测到数组里赋值的动作而更新, 如果需要请使用Vue.set() 或者this.$set(), 或者覆盖整个数组总结: 改变原

原创 关于vue的学习（三）

1.Vue指令1.1vue基础-插值表达式<template> <div> <h1>{{ msg }}</h1> <h2>{{ obj.name }}</h2> <h3>{{ obj.age > 18 ? '成年' : '未成年' }}</h3> </div></template>3.1<script>export de...

原创 关于vue的学习（二）

1.1.@vue/cli安装yarn global add @vue/cli# ORnpm install -g @vue/cli1.2@vue/cli 创建项目启动服务1.创建项目注意: 项目名不能带大写字母, 中文和特殊符号vue create vuecli-demo# vue和create是命令, vuecli-demo是文件夹名2.选择模板Default【VUE2】use Yarn3.回车等待生成项目文件夹+文件+下载必须的第三方包们4.进入脚手

原创 关于vue的学习(一)

下载yarnnpm i yarn默认入口: ./src/index.js默认出口: ./dist/main.jswebpack配置 - webpack.config.js(默认)1. 初始化, 得到package.json文件(终端路径所在文件夹下)yarn init2.安装依赖包yarn add webpack webpack-cli -D3.配置scripts(自定义命令)scripts: { "build": "webpack"}4.新建目录src...

原创 关于Node.js的学习(一)

1.什么是Node.jsNode.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境 。Node.js 的官网地址：> (https://nodejs.org/zh-cn/)2.fs 文件系统模块fs.readFile() 方法，用来读取指定文件中的内容fs.writeFile() 方法，用来向指定的文件中写入内容 如果要在 JavaScript 代码中，使用 fs 模块来操作文件，则需要使用如下的方式先导入它：cons fs = require('f

原创 GIT的学习（二）

了解项目托管平台：github或gitee(重要)接下来的学习将用到以上平台:远程仓库和本地数据的方式：1.https：需要每一次输入用户名和密码只需要设置一次用户名和密码的配置 直接在终端执行命令 git config --global credential.helper store2.ssh私钥和公钥：生成公私钥文件：ssh-keygen -t rsa ”your email address“然后在C盘用户找到.ssh文件，用记事本打开id_rsa.pub，复制里

原创 GIT的学习（一）

Git是开源的分布式版本控制系统git的三个区：1.工作区——对文件进行增删改查操作2.暂存区——将工作区的文件暂时存放到这里3.仓库区——将暂存区里面的内容提交到仓库记录版本git的命令学习:配置用户信息：注：（将会在c盘中建立自己输入的用户名与邮箱名，只用输入一次）git config --global user.name zhangsangit config --global user.email zhangsan@itcast.cn查看用户信息:注(查

原创 关于Ajax的学习（六）

现如今，实现跨域数据请求，最主要的两种解决方案，分别是 JSONP 和 CORS。JSONP：出现的早，兼容性好（兼容低版本IE）。是前端程序员为了解决跨域问题，被迫想出来的一种临时解决方案。缺点是只支持 GET 请求，不支持 POST 请求。CORS：出现的较晚，它是 W3C 标准，属于跨域 Ajax 请求的根本解决方案。支持 GET 和 POST 请求。缺点是不兼容某些低版本的浏览器实现一个简单的JSONP<scripit>function success(data){c

原创 关于Ajax的学习（五）

使用jquery发起上传文件的请求$.ajax({method:'post',url:'~',data:fd 注：fd是上文向FormData中追加的文件contentType:false,processData:false,success:function(res){console.log(res)}})用jQuery实现loading效果ajaxStart(callback)$(document).ajaxStart(function() { ..

原创 关于Ajax的学习（四）

使用原生ajax函数XMLHttpRequest来发起请求一.GETvar xhr = new XMLHttpRequest() xhr.open('GET', 'http:~~~?id=1') xhr.send() xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) {...

原创 关于Ajax的学习（三）

1.form表单2.监听form3.serialize()4.art-template模板引擎5.模板引擎的实现原理

原创 关于Ajax的学习（二）

jQuery中的Ajax:常用方法：$.get():请求，用于获取数据 $.post():请求，用于提交数据 $.ajax():比较综合，既可以获取数据，又可以提交数据$.get()：$.get(url,[data],[callback])$.get('http://~',{id:1},function(res){~})$.post():$.post(url,[data],[callback])$.post('http://~',{id:~~},function(res

原创 关于Ajax的学习（一）

什么是Ajax：通俗理解：在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式Ajax的作用：让我实现网页和服务器之间的数据交互应用场景：场景一：用户名检测场景二：搜索提示场景三：数据分页显示场景四：数据的增删改查扩：URL地址的概念&组成：URL的概念：URL（全称是 UniformResourceLocator） 中文叫 统一资源定位符，用于标识互联网上每个资源的唯一存放位置。浏览器只有通过...