<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[DeathDomain的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/DeathDomain</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; DeathDomain]]></copyright><item><title><![CDATA[scrollspy 滚动监听插件]]></title><link>https://blog.youkuaiyun.com/DeathDomain/article/details/112135989</link><guid>https://blog.youkuaiyun.com/DeathDomain/article/details/112135989</guid><author>DeathDomain</author><pubDate>Sun, 03 Jan 2021 16:03:19 +0800</pubDate><description><![CDATA[&lt;style&gt;
    /*第一步*/
    body {
        position: relative;
    }
    #navbar{
        background:#aab;
        position:fixed;
        left:100px;
        top:50px;
    }
&lt;/style&gt;

&lt;!-- 第二步 --&gt;
&lt;body data-spy="scroll" data-target="#nav]]></description><category></category></item><item><title><![CDATA[Koa 2 基础(仿知乎)]]></title><link>https://blog.youkuaiyun.com/DeathDomain/article/details/111564484</link><guid>https://blog.youkuaiyun.com/DeathDomain/article/details/111564484</guid><author>DeathDomain</author><pubDate>Tue, 22 Dec 2020 19:10:47 +0800</pubDate><description><![CDATA[Koa 2 基础
接口文档
Postman仿知乎在线测试
REST 简介
REST是什么
REST是Resource Representational State Transfer的缩写,是一种Web服务架构，其目标是为了创建具有良好扩展性的分布式系统

资源在网络中以某种表现形式进行状态转移



Resource：资源，即数据（网络的核心）。


Representational：某种表现形式，比如用JSON，XML，JPEG等；


State：当前状态或者数据。通过HTTP动词实现。


Trans]]></description><category></category></item><item><title><![CDATA[[React] 尚硅谷 -- 学习笔记(七)]]></title><link>https://blog.youkuaiyun.com/DeathDomain/article/details/109723674</link><guid>https://blog.youkuaiyun.com/DeathDomain/article/details/109723674</guid><author>DeathDomain</author><pubDate>Mon, 16 Nov 2020 16:15:31 +0800</pubDate><description><![CDATA[第七章 react-ui
最流行的开源React UI组件库
material-ui(国外)
官网
GitHub
ant-design(国内蚂蚁金服)
PC官网
GitHub
移动官网
GitHub
&nbsp;
实现按需打包(组件js/css)

下载依赖包

cnpm install react-app-rewired customize-cra babel-plugin-import --save-dev



修改默认配置

找到package.json

"scripts": {
    "sta]]></description><category></category></item><item><title><![CDATA[[React] 尚硅谷 -- 学习笔记(六)]]></title><link>https://blog.youkuaiyun.com/DeathDomain/article/details/109723641</link><guid>https://blog.youkuaiyun.com/DeathDomain/article/details/109723641</guid><author>DeathDomain</author><pubDate>Mon, 16 Nov 2020 16:13:56 +0800</pubDate><description><![CDATA[第六章 react-router4
理解
react-router


react的一个插件库


专门用来实现一个SPA应用


基于react的项目基本都会用到此库


&nbsp;
SPA


单页Web应用（single page web application，SPA）


整个应用只有一个完整的页面


点击页面中的链接不会刷新页面, 本身也不会向服务器发请求


当点击路由链接时, 只会做页面的局部更新


数据都需要通过ajax请求获取, 并在前端异步展现


&nbsp;
路由
什么是路由]]></description><category></category></item><item><title><![CDATA[[React] 尚硅谷 -- 学习笔记(五)]]></title><link>https://blog.youkuaiyun.com/DeathDomain/article/details/109723610</link><guid>https://blog.youkuaiyun.com/DeathDomain/article/details/109723610</guid><author>DeathDomain</author><pubDate>Mon, 16 Nov 2020 16:12:32 +0800</pubDate><description><![CDATA[第五章 总结
组件间通信
通过props传递

共同的数据放在父组件上, 特有的数据放在自己组件内部(state)
通过props可以传递一般数据和函数数据, 只能一层一层传递
一般数据–&gt;父组件传递数据给子组件–&gt;子组件读取数据
函数数据–&gt;子组件传递数据给父组件–&gt;子组件调用函数

使用消息订阅(subscribe)-发布(publish)机制

工具库: PubSubJS
下载: npm install pubsub-js --save
使用

import PubSub fr]]></description><category></category></item><item><title><![CDATA[[React] 尚硅谷 -- 学习笔记(四)]]></title><link>https://blog.youkuaiyun.com/DeathDomain/article/details/109723529</link><guid>https://blog.youkuaiyun.com/DeathDomain/article/details/109723529</guid><author>DeathDomain</author><pubDate>Mon, 16 Nov 2020 16:11:20 +0800</pubDate><description><![CDATA[第四章 react ajax
理解


React本身只关注于界面, 并不包含发送ajax请求的代码


前端应用需要通过ajax请求与后台进行交互(json数据)


react应用中需要集成第三方ajax库(或自己封装)
&nbsp;


常用的ajax请求库


jQuery: 比较重, 如果需要另外引入不建议使用


axios: 轻量级, 建议使用


封装XmlHttpRequest对象的ajax


promise风格


可以用在浏览器端和node服务器端




fetch: 原生函数, ]]></description><category></category></item><item><title><![CDATA[[React] 尚硅谷 -- 学习笔记(三)]]></title><link>https://blog.youkuaiyun.com/DeathDomain/article/details/109723436</link><guid>https://blog.youkuaiyun.com/DeathDomain/article/details/109723436</guid><author>DeathDomain</author><pubDate>Mon, 16 Nov 2020 16:07:35 +0800</pubDate><description><![CDATA[第三章 react应用(基于react脚手架)
使用create-react-app创建react应用
react脚手架


xxx 脚手架：用来帮助程序员快速创建一个基于 xxx 库的模板项目


包含了所有需要的配置


指定好了所有的依赖


可以直接安装/编译/运行一个简单效果




react 提供了一个用于创建 react 项目的脚手架库：create-react-app


项目的整体技术架构为：react + webpack + es6 + eslint


使用脚手架开发的项目的特点：模]]></description><category></category></item><item><title><![CDATA[[React] 尚硅谷 -- 学习笔记(二)]]></title><link>https://blog.youkuaiyun.com/DeathDomain/article/details/109723193</link><guid>https://blog.youkuaiyun.com/DeathDomain/article/details/109723193</guid><author>DeathDomain</author><pubDate>Mon, 16 Nov 2020 16:03:03 +0800</pubDate><description><![CDATA[第二章 React面向组件编程
基本理解和使用
自定义组件


定义组件

工厂函数组件(简单组件)

function MyComponent () {
    return &lt;h2&gt;工厂函数组件(简单组件)&lt;/h2&gt;
}


没有状态的组件


ES6类组件(复杂组件)

class MyComponent2 extends React.Component {
    render () {
        console.log(this) // MyComponent2的实例]]></description><category></category></item><item><title><![CDATA[[React] 尚硅谷 -- 学习笔记(一)]]></title><link>https://blog.youkuaiyun.com/DeathDomain/article/details/109723123</link><guid>https://blog.youkuaiyun.com/DeathDomain/article/details/109723123</guid><author>DeathDomain</author><pubDate>Mon, 16 Nov 2020 15:58:06 +0800</pubDate><description><![CDATA[第一章 React入门
React基本认识

用于构建用户界面的 JavaScript 库(View)

官网
英文官网: https://reactjs.org/
中文官网: https://doc.react-china.org/
特点

Declarative（声明式编码）
Component-Based（组件化编码）
Learn Once，Write Anywhere（支持客户端与服务器渲染，React-Native）
高效
单向数据流

高效的原因

虚拟（virtual）DOM，不总是操作 DO]]></description><category></category></item><item><title><![CDATA[eslint解决方案整理]]></title><link>https://blog.youkuaiyun.com/DeathDomain/article/details/109705643</link><guid>https://blog.youkuaiyun.com/DeathDomain/article/details/109705643</guid><author>DeathDomain</author><pubDate>Sun, 15 Nov 2020 16:38:07 +0800</pubDate><description><![CDATA[eslint 解决方案整理
最近在处理react项目中报的warning，进行了以下整理
&nbsp;
参考文档
Rules
&nbsp;
项目中遇到warning的解决


$ xxx is defined but never used no-unused-vars

禁止出现未使用过的变量删除



$ Expected '===' and instead saw '==' eqeqeq

要求使用 === 和 !====变===



$ img elements must have an alt p]]></description><category></category></item><item><title><![CDATA[[Vue.js] Vuex的使用]]></title><link>https://blog.youkuaiyun.com/DeathDomain/article/details/109650086</link><guid>https://blog.youkuaiyun.com/DeathDomain/article/details/109650086</guid><author>DeathDomain</author><pubDate>Thu, 12 Nov 2020 18:15:23 +0800</pubDate><description><![CDATA[效果展示

&nbsp;
目标


Vuex概述


Vuex基本使用


使用Vuex完成todo案例


&nbsp;
1.Vuex概述

Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间的数据共享
使用Vuex管理数据的好处：

能够在vuex中集中管理共享的数据，便于开发和后期进行维护
能够高效的实现组件之间的数据共享，提高开发效率
存储在vuex中的数据是响应式的，当数据发生改变时，页面中的数据也会同步更新



&nbsp;
2.Vuex的基本使用

创建带有vuex的v]]></description><category></category></item><item><title><![CDATA[[Vue.js]实战 -- 电商项目(八)]]></title><link>https://blog.youkuaiyun.com/DeathDomain/article/details/109628469</link><guid>https://blog.youkuaiyun.com/DeathDomain/article/details/109628469</guid><author>DeathDomain</author><pubDate>Wed, 11 Nov 2020 18:33:44 +0800</pubDate><description><![CDATA[数据统计
数据统计概述
用于统计电商平台运营过程的中的各种统计数据
通过直观的可视化方式展示出来，方便相关运营和管理人员查看
&nbsp;
用户来源数据统计报表
Echarts 第三方可视化库的基本使用

安装echarts库

// 安装echarts库
 npm install echarts -S


导入echarts接口

// 导入echarts接口
 import echarts from 'echarts'

&nbsp;
实现用户来源数据统计报表


调用接口获取后台接口数据


通过ec]]></description><category></category></item><item><title><![CDATA[[Vue.js]实战 -- 电商项目(七)]]></title><link>https://blog.youkuaiyun.com/DeathDomain/article/details/109628036</link><guid>https://blog.youkuaiyun.com/DeathDomain/article/details/109628036</guid><author>DeathDomain</author><pubDate>Wed, 11 Nov 2020 17:59:00 +0800</pubDate><description><![CDATA[订单管理

订单管理概述
用于维护商品的订单信息
可以查看订单的商品信息、物流信息，并且可以根据实际的运营情况对订单做适当的调整。
&nbsp;
订单列表
订单列表展示

订单数据加载
订单列表布局

const { data: res } = await this.$http.get('orders', { params: this.queryInfo })
if (res.meta.status !== 200) {
    return this.$message.error('获取订单列表失败！')]]></description><category></category></item><item><title><![CDATA[[Vue.js]实战 -- 电商项目(六)]]></title><link>https://blog.youkuaiyun.com/DeathDomain/article/details/109620437</link><guid>https://blog.youkuaiyun.com/DeathDomain/article/details/109620437</guid><author>DeathDomain</author><pubDate>Wed, 11 Nov 2020 14:35:33 +0800</pubDate><description><![CDATA[商品管理


商品管理概述
 用于维护电商平台的商品信息
包括商品的类型、参数、图片、详情等信息。通过商品管理模块可以实现商品的添加、修改、展示和删除等功能
&nbsp;
商品列表

实现商品列表布局效果
调用后台接口获取商品列表数据

const { data: res } = await this.$http.get('goods', { params: this.queryInfo })
if (res.meta.status !== 200) {
    return this.$message.e]]></description><category></category></item><item><title><![CDATA[[Vue.js]实战 -- 电商项目(五)]]></title><link>https://blog.youkuaiyun.com/DeathDomain/article/details/109601942</link><guid>https://blog.youkuaiyun.com/DeathDomain/article/details/109601942</guid><author>DeathDomain</author><pubDate>Tue, 10 Nov 2020 16:40:28 +0800</pubDate><description><![CDATA[参数管理

参数管理概述
商品参数用于显示商品的固定的特征信息，可以通过电商平台商品详情页面直观的看到
&nbsp;
商品分类选择
选择商品分类

页面布局

&lt;div&gt;
    &lt;!-- 面包屑导航区域 --&gt;
    &lt;el-breadcrumb separator-class="el-icon-arrow-right"&gt;
        &lt;el-breadcrumb-item :to="{ path: '/home' }"&gt;首页&lt;/el-bread]]></description><category></category></item><item><title><![CDATA[[Vue.js]实战 -- 电商项目(四)]]></title><link>https://blog.youkuaiyun.com/DeathDomain/article/details/109591954</link><guid>https://blog.youkuaiyun.com/DeathDomain/article/details/109591954</guid><author>DeathDomain</author><pubDate>Tue, 10 Nov 2020 09:20:32 +0800</pubDate><description><![CDATA[分类管理

商品分类概述
商品分类用于在购物时，快速找到所要购买的商品，可以通过电商平台主页直观的看到
&nbsp;
商品分类列表
基本布局与数据获取


基本布局

面包屑导航区域

&lt;!-- 面包屑导航区域 --&gt;
&lt;el-breadcrumb separator-class="el-icon-arrow-right"&gt;
    &lt;el-breadcrumb-item :to="{ path: '/home' }"&gt;首页&lt;/el-breadcrumb-item&]]></description><category></category></item><item><title><![CDATA[[Vue.js]实战 -- 电商项目(三)]]></title><link>https://blog.youkuaiyun.com/DeathDomain/article/details/109570196</link><guid>https://blog.youkuaiyun.com/DeathDomain/article/details/109570196</guid><author>DeathDomain</author><pubDate>Mon, 09 Nov 2020 10:09:35 +0800</pubDate><description><![CDATA[权限管理
权限管理业务分析

通过权限管理模块控制不同的用户可以进行哪些操作，具体可以通过角色的方式进行控制，即每个用户分配一个特定的角色，角色包括不同的功能权限

&nbsp;
权限列表展示

创建对应规格


在components文件夹下创建power文件夹,在此文件夹下创建Rights.vue(此vue用于开发权限管理的权限列表内容)


在index.js文件下导入


import Rights from "../components/power/Rights";
{
    path: '/r]]></description><category></category></item><item><title><![CDATA[[Vue.js]实战 -- 电商项目(二)]]></title><link>https://blog.youkuaiyun.com/DeathDomain/article/details/109559759</link><guid>https://blog.youkuaiyun.com/DeathDomain/article/details/109559759</guid><author>DeathDomain</author><pubDate>Sun, 08 Nov 2020 15:12:41 +0800</pubDate><description><![CDATA[主页布局

整体布局
主页布局开始

引入官网的框架时,首先要在element.js中添加

import { 
    Container,
    Header,
    Aside,
    Main
} from 'element-ui'
Vue.use(Container)
Vue.use(Header)
Vue.use(Aside)
Vue.use(Main)

&lt;template&gt;
  &lt;el-container class="home-container"&gt;
    ]]></description><category></category></item><item><title><![CDATA[[Vue.js]实战 -- 电商项目(一)]]></title><link>https://blog.youkuaiyun.com/DeathDomain/article/details/109559666</link><guid>https://blog.youkuaiyun.com/DeathDomain/article/details/109559666</guid><author>DeathDomain</author><pubDate>Sun, 08 Nov 2020 15:07:34 +0800</pubDate><description><![CDATA[项目目录

项目概述
项目初始化
登录/退出功能
主页布局
用户管理模块
权限管理模块
分类管理模块
参数管理模块
商品管理模块
订单管理模块
数据统计模块

&nbsp;
项目概述
电商项目基本业务概述

&nbsp;
电商后台管理系统的功能
用于管理用户账号、商品分类、商品信息、订单、数据统计等业务功能。

&nbsp;
电商后台管理系统的开发模式(前后端分离)

前端项目是基于Vue技术栈的SPA项目


&nbsp;
电商后天管理系统的技术选型


前端项目技术栈

Vue
Vue-router
E]]></description><category></category></item><item><title><![CDATA[[Vue.js] 模块化 -- 前端模块化]]></title><link>https://blog.youkuaiyun.com/DeathDomain/article/details/109513579</link><guid>https://blog.youkuaiyun.com/DeathDomain/article/details/109513579</guid><author>DeathDomain</author><pubDate>Thu, 05 Nov 2020 15:43:53 +0800</pubDate><description><![CDATA[模块化相关规范
模块化概述


传统开发模式的主要问题

命名冲突
文件依赖



通过模块化解决传统开发模式的问题


模块化就是把单独的一个功能封装到一个模块(文件)中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块


好处

方便代码的重用
提升开发效率
方便后期维护





&nbsp;
浏览器端模块化规范


AMD

Require.js



CMD

Sea.js



&nbsp;
服务器端模块化规范


CommonJS


模块分为单文件模块 和 包


]]></description><category></category></item></channel></rss>