12 |
13 |
14 |
15 |
20 |
21 | ## 写在前面
22 |
23 | 此篇文章为一篇说明文档，不是教你从零构建一个后台管理系统，而是基于一个实际项目，已经搭建好了一个后台管理系统的基础框架，教你如何在此基础上快速开发自己的后台管理系统，能让读者能在掌握一些基础知识的情况下，也能上手vue后台开发。只有接触项目，才能更好地理解自己所学知识的意义，触类旁通把死知识点变成活学活用的技能。
24 |
25 | ## 先跑起来
26 |
27 | ```bash
28 | # 克隆项目
29 | git clone https://github.com/tuture-dev/vue-admin-template.git
30 | # 进入目录
31 | cd vue-admin-template
32 | # 安装依赖
33 | npm install --registry=https://registry.npm.taobao.org
34 | # 运行
35 | npm run dev
36 | ```
37 |
38 | 
39 |
40 | > 本文所涉及的源代码都放在了 [Github](https://github.com/tuture-dev/vue-admin-template) 上，如果您觉得我们写得还不错，希望您能给❤️这篇文章**点赞**+[Github](https://github.com/tuture-dev/vue-admin-template)仓库加星❤️哦~
41 |
42 | ## 增添侧边导航
43 | 1. 新建文件。在**src/views/** 新建一个空白的文件夹 **test**，在此目录下新建文件 **test.vue**
44 | 2. 添加路由。打开 **src/router/index.js**，此文件为该项目的后台路由配置文件。在**constantRoutes**这个数组中，添加路由的格式如下：
45 |
46 | ```js
47 | {
48 | path: '/test', //url路径
49 | component: Layout, // 此处不用动，这个全局统一的一个布局文件
50 | children: [{
51 | path: 'test', // 二级路径
52 | name: 'test',
53 | component: () => import('@/views/test/test'), // 懒加载，此处写所添加文件的路径
54 | meta: {
55 | title: '测试', icon:'plane' //配置选项可配置测试名称和图标
56 | }
57 | }]
58 | },
59 | ```
60 | 我们可以自定义图标，格式的文件，可以在[iconfont](https://www.iconfont.cn/)中下载，之后放入**src/icons/svg** 目录下即可
61 |
62 | 
63 |
64 |
65 | 对于二级导航可以按照如下的方式进行配置。
66 |
67 | 
68 |
69 | ```js
70 | {
71 | path: '/material',
72 | component: Layout,
73 | redirect: '/material/upload',
74 | meta: {
75 | title: '素材管理', //元信息，一级导航的名称
76 | icon: 'plane' // 元信息，导航图标的名称
77 | },
78 | children: [{
79 | path: 'check-template',
80 | name: 'check-template',
81 | component: () => import('@/views/material/check-template'),
82 | meta: {
83 | title: '查看模板',
84 | }
85 | },
86 | {
87 | path: 'logo',
88 | name: 'logo',
89 | component: () => import('@/views/material/check-logo'),
90 | meta: {
91 | title: '查看logo',
92 | }
93 | },
94 | {
95 | path: 'generate',
96 | name: 'generate',
97 | component: () => import('@/views/material/generate'),
98 | meta: {
99 | title: '生成素材',
100 | }
101 | },
102 | {
103 | path: 'check',
104 | name: 'check',
105 | component: () => import('@/views/material/check'),
106 | meta: {
107 | title: '查看素材',
108 | }
109 | },
110 | ]
111 | },
112 | ```
113 | 在此配置完成后，框架会自动地根据路由配置文件，生成边侧导航条目。我们所需要做的工作就是根据业务需求，编写一个个vue组件，往框架里面填充内容就OK了。
114 |
115 | ### 使用Element UI组件
116 |
117 | [Element UI](https://element.eleme.cn/#/zh-CN/component/installation)提供了很多可复用的组件，对于一般的后台应用，这些组件完全可以满足需求。如果个性化需求不高的话，我们完全可以做一名“复制粘贴”工程师又称“CV”工程师，快速开发。
118 |
119 | 对于每一个组件，其文档上都有效果示例与代码，只需选择所需组件，将其代码粘贴进我们的代码文件中，稍加修改即可。
120 |
121 | ## 网络请求
122 |
123 | 当整个框架搭建完毕以后，前端程序员最主要的工作就是发起请求，渲染数据。现在我们就来完整地走一遍这个过程。
124 |
125 | ### 基础配置
126 |
127 | 1. 配置代理。
128 |
129 | 因为跨域资源请求的问题，在开发阶段所有和后端交互的网络请求在底层由node.js代理。[相关文档](https://cli.vuejs.org/config/#devserver-proxy)
130 |
131 | 打开根目录下的**vue.config.js**文件
132 |
133 | ```js
134 | // 代理所有以‘/admin’开头的网络请求
135 | proxy: {
136 | '/admin': {
137 | target: `http://localhost:8886/`, //后台服务地址
138 | changeOrigin: true,
139 | pathRewrite: {
140 | }
141 | }
142 | }
143 | ```
144 | 2. 配置地址
145 |
146 | 生产环境与开发环境通常有不同的服务地址。编辑 **.env.development** 以及 **.env.production** 这两个文件，修改其中的 **VUE_APP_BASE_API** 配置项即可
147 |
148 | 以开发环境为例：
149 |
150 | ```js
151 | VUE_APP_BASE_API = '/admin'
152 | ```
153 |
154 | 3. 配置拦截器
155 |
156 | 打开**src/utils/request.js**，此文件封装了一个axios请求对象，该系统中的网络请求都是基于这个对象来处理的。
157 | 我们可以在网络请求发送之前和收到服务端回复之后做一些通用性的工作。比如根据服务端的状态码判断请求是否正常，若不正常给出相应的提示。
158 |
159 | ```js
160 | service.interceptors.response.use(
161 | response => {
162 | const res = response.data
163 | // 如果服务器的状态码不为200，说明请求异常，应给出错误提示。
164 | if (res.code !== 200) {
165 | Message({
166 | message: res.msg || 'Error check your token or method',
167 | type: 'error',
168 | duration: 2 * 1000
169 | })
170 | return Promise.reject(new Error(res.msg || 'Error'))
171 | } else {
172 | return res
173 | }
174 | },
175 | error => {
176 | console.log('err' + error) // for debug
177 | Message({
178 | message: error.message,
179 | type: 'error',
180 | duration: 2 * 1000
181 | })
182 | return Promise.reject(error)
183 | }
184 | )
185 | ```
186 |
187 | 4. 挂载请求对象
188 |
189 | 在**src/main.js**首先导入网络请求对象，并挂载至Vue全局对象，这样在每个组件中直接引用即可，不用要再导入。
190 |
191 | ```js
192 | import request from '@/utils/request'
193 | Vue.prototype.req = request
194 | ```
195 |
196 | ### 请求与渲染
197 | 1. 搭建一个简易node服务
198 |
199 | 仅供教程说明使用
200 |
201 | ```js
202 | let http = require('http');
203 | let querystring = require('querystring');
204 | let my_result = [{
205 | date: '2016-05-02',
206 | name: '王小虎',
207 | address: '上海市普陀区金沙江路 1518 弄'
208 | }, {
209 | date: '2016-05-04',
210 | name: '王小虎',
211 | address: '上海市普陀区金沙江路 1517 弄'
212 | }, {
213 | date: '2016-05-01',
214 | name: '王小虎',
215 | address: '上海市普陀区金沙江路 1519 弄'
216 | }, {
217 | date: '2016-05-03',
218 | name: '王小虎',
219 | address: '上海市普陀区金沙江路 1516 弄'
220 | }]
221 |
222 | let server = http.createServer((req, res) => {
223 | let post = '';
224 | req.on('data', function (chunk) {
225 | post += chunk;
226 | });
227 |
228 | req.on('end', function () {
229 | res.writeHead(200, {
230 | 'Content-Type': 'application/json; charset=utf-8'
231 | })
232 | post = querystring.parse(post);
233 | console.log('post-data:', post);
234 | if (post) {
235 | let result = {
236 | code: 200,
237 | // msg: "server error"
238 | data: my_result
239 | }
240 | res.end(JSON.stringify(result));
241 | } else {
242 | let result = {
243 | code: '0',
244 | msg: '没有接受到数据'
245 | }
246 | res.end(JSON.stringify(result));
247 | }
248 | });
249 | });
250 | server.listen(8886)
251 | //在命令行 node server.js 即可运行
252 | ```
253 |
254 | 2. 发起请求
255 |
256 | ```js
257 | this.req({
258 | url: "getInfo?id=6", // 此处写不同业务对应的url，框架会自动与baseURL拼接
259 | data: {},
260 | method: "GET"
261 | }).then(
262 | res => {
263 | // 请求成功后的处理
264 | console.log("res :", res);
265 | },
266 | err => {
267 | // 请求失败后的处理
268 | console.log("err :", err);
269 | }
270 | );
271 | ```
272 | 按照最佳实践，应该把网络请求统一抽离到单一文件，然后在每个具体的页面进行对服务端数据的处理。
273 | 比如下面的这种形式，首先创建文件**src/api/test.js**，把在**test**组件中需要用到的网络请求都写入此文件。
274 |
275 | ```js
276 | // src/api/test.js
277 | import request from '@/utils/request'
278 |
279 | export function getList(params) {
280 | return request({
281 | url: 'getTableData',
282 | method: 'get',
283 | params
284 | })
285 | }
286 |
287 |
288 | ```
289 |
290 | 在组件**test.vue**中引入请求方法
291 |
292 | ```js
293 | import { getTableData } from "@/api/test.js";
294 | ……
295 | mounted: function() {
296 | // 网络请求统一处理
297 | getTableData().then(res => {
298 | console.log("api tableData :", res);
299 | this.tableData = res.data;
300 | },err=>{
301 | console.log("err :", err);
302 | });
303 | // 网络请求直接写在文件中
304 | this.req({
305 | url: "getTableData",
306 | data: {},
307 | method: "GET"
308 | }).then(
309 | res => {
310 | console.log("tableData :", res);
311 | this.tableData = res.data;
312 | },
313 | err => {
314 | console.log("err :", err);
315 | }
316 | );
317 | },
318 | ```
319 |
320 | 3. 网络数据流
321 |
322 | 
323 |
324 | 在控制台可以看出，我们的请求地址为localhost:9528,而后台服务的的地址为localhost:8886。为啥不一样呢？我们以一流程图说明
325 |
326 | 
327 |
328 | 应用程序上线后，对于CORS跨域资源访问的问题，可以用类似的方案（Nginx反向代理）在前端解决。
329 |
330 | ### Hello Table
331 |
332 | 现在我们在**test.vue**中用Element UI所提供的 Table组件写一个表格数据展示页面。
333 |
334 | 1. 进入Element UI [Table](https://element.eleme.cn/#/zh-CN/component/table)组件的说明文档，复制粘贴对应的代码。框架对于Element UI已经进行了全局引入，所以这些组件拿来即用。如果是其他第三方的组件，还需要我们自己引入后再使用。
335 |
336 |
337 | ```html
338 |
339 |
340 |
341 |
342 |
343 |
344 |
345 | ```
346 |
347 | 2. 在组件装载时请求数据
348 |
349 | ```js
350 | mounted: function() {
351 | this.req({
352 | url: "getTableData",
353 | data: {},
354 | method: "GET"
355 | }).then(
356 | res => {
357 | console.log("tableData :", res);
358 | this.tableData = res.data // 数据渲染
359 | },
360 | err => {
361 | console.log("err :", err); // 当业务逻辑发生错误时 进行处理
362 | }
363 | );
364 | },
365 | ```
366 |
367 | 3. 实际效果
368 |
369 | 业务逻辑正常
370 |
371 | 
372 |
373 | 业务出错时，弹出服务端给的错误信息。弹出此信息是在拦截器**request.js**文件定义的，这是统一的业务逻辑错误处理，也可以在每个请求中单独处理。
374 |
375 | 
376 |
377 |
378 | ## 简易权限控制
379 |
380 | 这种权限控制方式为静态方式，有些复杂的动态权限管理不在此说明。
381 | 该框架每一次的路由跳转都会通过**router.beforeEach**检验一遍权限，我们可以在这里添加配置项。
382 | 进入文件 **src/permission.js**，以只有管理员才能进入用户管理界面为例：
383 |
384 | ```js
385 | if (to.path === '/user/user') {
386 | let id = JSON.parse(localStorage.getItem('userInfo')).id
387 | console.log(id)
388 | if (id > 2) { //id>2位普通用户，无权访问
389 | next({ path: '/task' })
390 | window.alert('permission denied')
391 | }
392 | }
393 | ```
394 |
395 | ## 结语
396 |
397 | 到此后台开发中最常用的操作已经介绍完毕，对于一些小项目已经是绰绰有余。花盆里长不出参天松，庭院里练不出千里马，项目写得多了很多东西就自然而然的通透了。一千个读者就有一千个哈姆雷特，这只是一个基础框架，在开发的过程，需要我们自己对其修改，让它成为你自己最顺手的框架。
398 |
399 | > 此项目演绎自： https://github.com/PanJiaChen/vue-admin-template.git
400 |
--------------------------------------------------------------------------------
/source/_posts/@5e60587.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "爬虫养成记——先跨进这个精彩的世界（女生定制篇）"
3 | description: "这是一套基于实战的系列教程，从最简单的爬虫程序开始，授人予渔，详细剖析程序设计的思路，完整展现爬虫是如何一步步调试到最终完成。分享关于爬虫的各种知识、技巧，旨在帮助大家认识爬虫、设计爬虫、使用爬虫最后享受爬虫带给我们在工作和生活上的各种便利。"
4 | tags: ["爬虫"]
5 | categories: ["后端", "Python", "入门"]
6 | date: 2020-03-05T00:00:00.509Z
7 | photos:
8 | - https://static.tuture.co/c/%405e60587.md/spider-1-cover.jpg
9 | ---
10 |
11 |
12 |
13 |
14 |
15 |
20 |
21 |
22 | ## 预备知识
23 | 1. 基本的python编程知识
24 | 1. 这里使用 Python3 作为开发环境
25 | 2. 同时具备基本的装包知识
26 | 2. 基本的网页编程知识
27 | 3. 初步了解HTTP协议
28 |
29 | ## 这是最简单的计算机程序
30 | 说起爬虫每个人都或多或少的听过与之相关的内容，觉得它或高深、或有趣。作为一名写代码四五年的初级码农来看，爬虫程序是计算机程序里面最简单也是最有趣的程序。**只要会上网冲浪就有写爬虫程序的天赋**。
31 |
32 | 爬虫为什么是虫呢？因为虫子的头脑比较简单，爬虫程序也是 ++“一根筋”++ ，不需要讳莫如深的数学知识，也不用设计精巧的各类算法。我们只需要用计算机能听懂的“大白话”平铺直叙就可以啦。
33 |
34 | ## 开发爬虫的基本套路
35 | 一句话总结所有爬虫程序的作用： 模拟人类上网的操作，以此来查找、下载、存储数据。
36 | 接下来我要以 [男人图](https://www.nanrentu.cc/sgtp/)这个网站为例，分享套路。
37 |
38 | ### step 1： 打开目标网址
39 |
40 | > 此处强烈推荐Chrome
41 |
42 | 首先打开这个网址：https://www.nanrentu.cc/sgtp/， 会看到以下界面
43 |
44 | 。
45 |
46 | 现在我们只是用浏览器手动打开了这个页面，接下来我们要用代码，让程序也打开这个页面。这就要分析一下浏览器是如何打开这个页面的了，请看简易流程图。
47 |
48 | 
49 |
50 | 在python中，可以使用 **requests** 这一工具包来发送HTTP请求。为了了解程序所“看到” 页面是什么样子的，我们需要把程序所得到HTML文件保存到本地，然后再用浏览器打开，就能和程序感同身受了。从而达到“人机合一”的境界。
51 |
52 | 光说不练假把式，让我们马上来新建一个 `index.py` 文件，然后在其中编写如下内容：
53 |
54 | ```Python
55 | import requests
56 | url = "https://www.nanrentu.cc/sgtp/"
57 | response = requests.get(url)
58 | if response.status_code == 200:
59 | with open("result.html",'a',encoding="utf-8") as f:
60 | f.write(response.text)
61 | ```
62 |
63 | 在浏览器打开写入的HTML文件是这样的
64 |
65 | [](https://imgchr.com/i/3IqM36)
66 |
67 | [](https://imgchr.com/i/3IqK9x)
68 |
69 | 这怎么和在浏览器中看到的不一样呢？
70 |
71 | 这个时候我就要亮出一件绝世宝贝————Chrome调试台（按F12）来给您分析一波了。
72 | 
73 |
74 | 其实我们在浏览器中看到的页面并不仅仅是HTML页面，而是css、js、html以及各种媒体资源综合在一起并有浏览器最终渲染而出页面，红框的部分，标出了在这个过程中所加载的各个资源。
75 |
76 | 当我们用程序去请求服务器时，得到仅仅是HTML页面，所以程序和我们所看到的页面就大相径庭了。不过没关系HTML是主干，抓住了主干其他的只需要顺藤摸瓜就可以了。
77 |
78 | ### step2：找到目标资源
79 |
80 | 打开这个网址以后，各位小仙女就可以各取所需咯，想体验萧亚轩的快乐嘛？那目标就是小鲜肉；馋彭于晏的那样的身子了？那肌肉帅哥就是你的菜。此外韩国欧巴，欧美型男也是应有尽有。
81 |
82 | 人类是高级生物，眼睛会自动聚焦的目标身上，但是爬虫是“一根筋”啊，它可不会自动聚焦，我们还得帮它指引道路。
83 |
84 | 写过前端页面的朋友都知道CSS样式用过各种选择器来绑定到对应的节点上，那么我们也可以通过CSS的选择器来选中我们想要的元素，从而提取信息。Chrome中已经准备了CSS选择器神器，可以生成我们想要元素的选择器。
85 |
86 | 具体过程如下：第三步为好好欣赏小哥哥们~
87 |
88 | 
89 |
90 | ### step3：解析页面
91 |
92 | 这个时候要介绍页面解析神器**pyquery**，这个工具库可以通过我们所复制的CSS选择器，在 HTML 页面中查找对应元素，并且能很便捷地提取各种属性。那么接下来我们就把这个小哥哥解析出来吧。
93 |
94 | 我们首先安装 `PyQuery` 这个包，具体可以使用 pip 包管理器安装，然后将代码修改成如下这样：
95 |
96 | ```Python
97 | import requests
98 | from pyquery import PyQuery as pq
99 | url = "https://www.nanrentu.cc/sgtp/"
100 | response = requests.get(url)
101 | if response.status_code == 200:
102 | with open("result.html",'w',encoding="utf-8") as f:
103 | f.write(response.text)
104 | # 开始解析
105 | doc = pq(response.text)
106 | # 把复制的选择器粘贴进去
107 | # 选择对应的节点
108 | imgElement = doc('body > div:nth-child(5) > div > div > div:nth-child(2) > ul > li:nth-child(3) > a > img')
109 | # 提取属性，获取图片链接
110 | imgSrc = imgElement.attr('src')
111 | # 将图片链接输出在屏幕上
112 | print(imgSrc)
113 |
114 | ```
115 |
116 | ### step4：存储目标
117 |
118 | 这么好看的小哥哥怎么能只让他在互联网上呆着呢？把他放进硬盘里的**学习资料**文件夹里才是最安全的。接下来，我们就把小哥哥放到碗里来。
119 |
120 | 下载图片的过程其实和抓取HTML页面的流程是一样的，也是利用 **requests** 发送请求从而获取到数据流再保存到本地。
121 |
122 | ```Python
123 | import requests
124 | from pyquery import PyQuery as pq
125 | url = "https://www.nanrentu.cc/sgtp/"
126 | response = requests.get(url)
127 | if response.status_code == 200:
128 | with open("result.html",'w',encoding="utf-8") as f:
129 | f.write(response.text)
130 | doc = pq(response.text)
131 | imgElement = doc('body > div:nth-child(5) > div > div > div:nth-child(2) > ul > li:nth-child(3) > a > img')
132 | imgSrc = imgElement.attr('src')
133 | print(imgSrc)
134 | # 下载图片
135 | imgResponse = requests.get(imgSrc)
136 | if imgResponse.status_code == 200:
137 | # 填写文件路径 以二进制的形式写入文件
138 | with open('学习文件/boy.jpg', 'wb') as f:
139 | f.write(imgResponse.content)
140 | f.close()
141 |
142 | ```
143 | 此时先来看看效果
144 |
145 | 
146 |
147 | ### 四步虫
148 | 至此仅仅十多行代码就完成了一个小爬虫，是不是很简单。其实爬虫的基本思路就这四步，所谓复杂的爬虫就是在这个四步的基础上不断演化而来的。爬虫最终的目的是为了获取各种资源（文本或图片），所有的操作都是以资源为核心的。
149 | 1. 打开资源
150 | 2. 定位资源
151 | 3. 解析资源
152 | 4. 下载资源
153 |
154 | ## 更多的小哥哥
155 | 通过上述步骤我们只能获取到一个小哥哥，集美们就说了，我直接右击鼠标下载也可以啊，干嘛费劲写爬虫呢？那接下来，我们就升级一波选择器，把小哥哥们装进数组，统统搞到碗里来。
156 |
157 | ### 重构代码
158 |
159 | 为了以后写代码更方便，要先进行一个简单的重构，让代码调理清晰。
160 | 1. 增加入口函数
161 | 2. 封装对于图片的操作
162 |
163 | 重构后的代码如下：
164 |
165 | ```Python
166 | import requests
167 | from pyquery import PyQuery as pq
168 |
169 | def saveImage(imgUrl,name):
170 | imgResponse = requests.get(imgUrl)
171 | fileName = "学习文件/%s.jpg" % name
172 | if imgResponse.status_code == 200:
173 | with open(fileName, 'wb') as f:
174 | f.write(imgResponse.content)
175 | f.close()
176 |
177 | def main():
178 | baseUrl = "https://www.nanrentu.cc/sgtp/"
179 | response = requests.get(baseUrl)
180 | if response.status_code == 200:
181 | with open("result.html",'w',encoding="utf-8") as f:
182 | f.write(response.text)
183 | doc = pq(response.text)
184 | imgElement = doc('body > div:nth-child(5) > div > div > div:nth-child(2) > ul > li:nth-child(3) > a > img')
185 | imgSrc = imgElement.attr('src')
186 | print(imgSrc)
187 | saveImage(imgSrc,'boy')
188 |
189 | if __name__ == "__main__":
190 | main()
191 | ```
192 |
193 | ### 升级选择器
194 |
195 | 有过前端编程经验的同学们可以看出来，Chrome自动生成的选择器指定了具体的某个子元素，所以就只选中了一个小哥哥，那么接下来我们要分析出通用的选择器，把臭弟弟们一锅端。
196 |
197 | 
198 |
199 | 多拿着鼠标点点这个调试台，一层层地看这个HTML文件的元素层级，找到其中相同重复的地方，这就是我们的突破口所在。
200 |
201 | 我们可以看出图片都在一个类名为 h-piclist 的 `
` 标签中，那么我们可写出以下的选择器 `.h-piclist > li > a > img`。这样就选中了这一页所有的图片元素。接着用一个 for 循环遍历就可以了。
202 |
203 |
204 | ```Python
205 | import requests
206 | from pyquery import PyQuery as pq
207 |
208 | # 引入UUID为图片命名
209 | import uuid
210 |
211 | def saveImage(imgUrl,name):
212 | imgResponse = requests.get(imgUrl)
213 | fileName = "学习文件/%s.jpg" % name
214 | if imgResponse.status_code == 200:
215 | with open(fileName, 'wb') as f:
216 | f.write(imgResponse.content)
217 | f.close()
218 |
219 | def main():
220 | baseUrl = "https://www.nanrentu.cc/sgtp/"
221 | response = requests.get(baseUrl)
222 | if response.status_code == 200:
223 | with open("result.html",'w',encoding="utf-8") as f:
224 | f.write(response.text)
225 | doc = pq(response.text)
226 | # 选则这一页中所有的目标图片元素
227 | imgElements = doc('.h-piclist > li > a > img').items()
228 | # 遍历这些图片元素
229 | for i in imgElements:
230 | imgSrc = i.attr('src')
231 | print(imgSrc)
232 | saveImage(imgSrc,uuid.uuid1().hex)
233 |
234 | if __name__ == "__main__":
235 | main()
236 | ```
237 |
238 | ### 无法下载的图片
239 |
240 | [](https://imgchr.com/i/3o2Ygs)
241 |
242 | 可以看出图片的连接已经全部拿到了，但是当去下载图片时却发生了一些意外，请求图片竟然没有反应。这是哪里出了问题呢？图片连接全部拿到，证明代码没毛病，把图片链接放到浏览器里正常打开，证明连接没毛病，那现在可能就是网络有毛病了。
243 | 1. 网速慢
244 | 2. 网络波动
245 | 2. 对方网站有防爬措施
246 | 3. ……
247 |
248 | 这时候因素很多，我们首先用最简单的方法来解决问题，断线重连。把笔记本WIFI重启，重新加入网络，再运行程序。
249 |
250 | 惊喜来了，臭弟弟们成功入库。
251 |
252 | 
253 |
254 | 当然啦，这种方式并不是银弹，我们需要有更多的技巧来提升爬虫程序的“演技”，我们的爬虫程序表现的越像个人，那我们获取资源的成功率就会越高。
255 |
256 | 看到这里，应该跨进爬虫世界的大门了，如果这个世界有主题曲的话那么一定是薛之谦的《演员》接下来的教程中会一遍磨砺“演技”，一遍获取更多的小哥哥。
257 |
--------------------------------------------------------------------------------
/source/_posts/@70fc9b9.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "一小时的时间，上手 Webpack"
3 | description: "为什么要用构建工具？如果你只会js+css+html，最多再加上jquery，那么当你听到构建工具这个说法是不是蒙的？这种情况下我不建议你学习webpack，建议你学下 vue 或者 react 框架，这两个框架都有自己的脚手架，所谓脚手架就是别人用构建工具帮你搭好了原始项目，你可以在不懂构建工具的情况下进行前端开发。"
4 | tags: ["Webpack"]
5 | categories: ["前端", "Webpack", "入门"]
6 | date: 2020-03-18T00:00:00.509Z
7 | photos:
8 | - https://static.tuture.co/c/%4070fc9b9.md/webpack-cover-1.jpg
9 | ---
10 |
11 |
12 |
13 |
14 |
15 |
23 |
text-color
225 |
226 | ```
227 |
228 | 
229 |
230 | 然后运行npm run build命令，执行成功后，在浏览器打开dist目录下index.html文件，会看到以下内容，样式文件被成功打包并发挥了作用：
231 |
232 | 
233 |
234 | 解析less文件也是一样的，直接把public.css文件改成less后缀，此时是不能解析的，需要安装less依赖，添加配置。
235 |
236 | **安装less相关依赖**
237 |
238 |
239 | ```bash
240 | npm i less less-loader -D
241 | ```
242 |
243 | **添加less文件解析配置**
244 |
245 | ```js
246 | // ...
247 | module: {
248 | rules: [
249 | {
250 | test: /.js$/,
251 | use: 'babel-loader'
252 | },
253 | {
254 | test: /.css$/,
255 | use: [
256 | 'style-loader',
257 | 'css-loader'
258 | ]
259 | },
260 | {
261 | test: /.less$/,
262 | use: [
263 | 'style-loader',
264 | 'css-loader',
265 | 'less-loader'
266 | ]
267 | },
268 | ]
269 | }
270 | // ...
271 | ```
272 |
273 | 这些步骤完成后，再运行 `npm run build` 命令进行打包，最后在浏览器查看 `dist\index.html` ，会发现效果是一样的。
274 |
275 | #### webpack加载图片
276 |
277 | 图片在webpack中的打包步骤跟上面类似，只不过loader不同。
278 |
279 | **安装file-loader**
280 |
281 | 执行以下命令，安装file-loader依赖
282 |
283 | ```bash
284 | npm i file-loader -D
285 | ```
286 |
287 | 然后在webpack.config.js配置文件 `module` 节点下添加解析配置内容：
288 |
289 |
290 | ```js
291 | {
292 | test: /.(jpg|png|gif|jpeg)$/,
293 | use: 'file-loader'
294 | }
295 | ```
296 |
297 | 随便找一张图片放在src目录下，在同级目录的public.css文件中加上背景图片样式，输入内容如下：
298 |
299 |
300 | ```css
301 | .color-text {
302 | font-size: 20px;
303 | color: red;
304 | height: 500px;
305 | background: url(beautiful.jpg) no-repeat;
306 | }
307 | ```
308 |
309 | 然后运行npm run build命令进行构建，最后执行时并没有图片展示，但是我们在dist目录下发现了刚才打包过来的图片，如图所示。这就尴尬了，虽然图片是打包过来了，问题是我每次还在拷贝复制一下名称再引用，这很不科学。
310 |
311 | 
312 |
313 | 有没有更好的办法加载图片呢？答案是肯定的！看步骤：
314 |
315 | **安装url-loader**
316 |
317 | ```bash
318 | npm i url-loader -D
319 | ```
320 |
321 | url-loader直接内置了file-loader，是对它的再封装，在配置文件里可以直接去掉file，用url替换。
322 |
323 | 在webpack.config.js文件添加配置内容，注意limit是指图片大小上限，单位是字节，如果图片大小小于这个值，就会被打包为base64格式，否则就仍是图片。由于这个图片有120K，我这里设置为160000，差不多是150多K了。
324 |
325 | ```js
326 | {
327 | test: /.(jpg|png|gif|jpeg)$/,
328 | use: [{
329 | loader:'url-loader',
330 | options: {
331 | limit:160000,
332 | name: 'imgs/[name].[hash].[ext]'
333 | }
334 | }]
335 | }
336 | ```
337 |
338 | 执行npm run build查看效果，发现成功了，再看dist目录下的index.js文件，发现内容多了很多，其实就是多了这张图片的base64数据。
339 |
340 | 
341 |
342 | 好了，这篇文章就写到这里，如果你按我的步骤来，一定可以轻松体验入门。当然，要真正达到应用水平，还要继续深入学习，webpack的内容还有很多，比如如何加载vue指令或者jsx语法，如何打包组件等，后面我会继续带来入门教程。
343 |
--------------------------------------------------------------------------------
/source/_posts/@auY0siFek.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'Nest.js 从零到壹系列（四）：使用中间件、拦截器、过滤器打造日志系统'
3 | description: '上一篇介绍了如何使用 JWT 进行单点登录，接下来，要完善一下后端项目的一些基础功能。'
4 | tags: ['Nest.js']
5 | categories: ['后端', 'Node.js', '进阶']
6 | date: 2020-05-12T00:03:00.509Z
7 | photos:
8 | - https://static.tuture.co/c/%40auY0siFek/4.jpg
9 | ---
10 |
11 |
12 |
13 |
14 |
15 |
20 |
10 |
11 |
12 |
13 |
18 |