简单的Web应用，从数据的获取到页面的展现

数据的抓取

• 抓取商家列表
• 抓取图片
• 抓取的数据导入数据库
• superagent模块抓取内容

后台搭建

• express数据加密
• Jwt Token
• 路由拦截鉴权

前端

• Vue生命周期
• Vue路由搭建
• vuex模块化
• ajax库的拦截器，过滤
• 我的推荐的vue组件

• 大神请绕道，若有说的不对的地方望指正。
• 应届毕业生在求职中，不少都是由于经验不足而不被录用（很牛的程序猿另说），在面试的时候不只要对专业的技能熟悉掌握，最好是有本身的一些小做品小项目等等，才能博取面试官的青睐，因而不少毕业生开始本身的面试项目制做，记得回看刚出来求职的面试项目，简直惨不忍睹，不知道大家是否是也这样，为了打救像我同样选择了前端又常常逃课的应届毕业生，因而开始了长篇大论的逼逼。
• 最近无聊抓了点数据，写了下好久没用的vue，发现了一些不错的组件。
• 先上图

开始入坑（数据的抓取）

* 开始项目以前，必须确立主题，想完成一个什么Web应用（商城、音乐、外卖等等），今天就之外卖来举个栗子。 * 首先是定制数据的需求，须要商家->商品->商品分类...这些数据的来源固然是网上了，随便找一下一大堆关于使用Node抓取的数据，以eleme为例子，打开eleme的官网，看到Network中获取到的数据，根据请求能够知道数据的具体来源等信息，可使用node直接调用接口来保存返回的数据。 > Eleme的地区商家列表数据获取 🌰

//数据地址：https://www.ele.me/restapi/shopping/restaurants?extras%5B%5D=activities&geohash=ws0e5f7pu8xe&latitude=23.041037&limit=24&longitude=113.372243&offset=0&terminal=web

let imgCount = 0,imgIndex = 0,dataCount = 0,dataIndex = 0	
// 获取的图片总数    正在处理的图片下标      获取商家的总数     正在处理的商家数据下标
const start = () => {                       //开始调用数据接口使用UTF8编码获取数据
	https.get(url, (res, req) => {
		res.setEncoding('utf8')
		let data = ""
		res.on("data", (chunk) => {
			data += chunk
		}).on("end", () => {
			gatData(JSON.parse(data))   //JSON格式化一下，再去对数据作处理，过滤一些本身想要的数据
		})
	})
}
复制代码

Eleme的地区商家列表数据过滤与处理 🌰

const gatData = (data) => {
	let arr = [],imgarr = []
	data.forEach((item, index) => {
		let obj = {
			sid:item.id,			//商家ID
			name:item.name,			//商家名字
			address: item.address,								
			latitude: item.latitude,			//商家经度
			longitude: item.longitude,			//商家纬度
			icon: getImg(item.image_path).src	//商家图标    
			//此处省略一大堆过滤数据
		}
		if(imgarr.indexOf(item.image_path) === -1){
			imgarr.push(item.image_path)
		}
		arr.push(obj)
	})
	imgCount = imgarr.length - 1
	dataCount = arr.length - 1
	console.log("共获取图片:" + imgarr.length + "张")
	console.log("共获取数据:" + arr.length + "条")
}
复制代码

Eleme商家列表的图片获取 🌰

//图片获取
const saveImg = (_src,list) => {
	let src = getImgType(_src).src,         //获取图片的地址
		name = getImgType(_src).type        //根据本身需求肯定保存图片的名字
	https.get(src, (res) => {
		let imgData = ''
		res.setEncoding("binary")           //注意请求返回的编码
		res.on('data', (chunk) => {
			imgData += chunk
		})
		res.on('end', () => {
			fs.writeFile("./保存图片的路径/" + _src + "." + name, imgData, 'binary', (error) => {
				if(error) {
					console.log('下载失败')
				}
				imgIndex++
				console.log('下载成功！',src)
				if(imgIndex === imgCount){
					return
				}
				download(list)
			})
		})
	})
}
复制代码

Eleme商家列表的数据库的写入-> 使用MySQL的 🌰

const saveDB = (list,i) => {
	if(dataIndex === dataCount + 1){
		return console.log("所有插入完成!!!!")
	}
	//此处对数据处理 -----   必须对数据的格式作些处理
	let SQL = "INSERT INTO `ele_seller` (`sel_id`, `sel_name`,....) VALUES (NULL, '" + list[i].name + "', "....");"
	db.query(SQL, function(error, rows) {
		if(error) {
			return console.log(error)
		}
		dataIndex++
		saveDB(list,dataIndex)
		console.log("插入数据库成功!!!__")
	})
}
//这是在人家没有对返回的数据进行加密、还有没有对请求域拦截的状况下可行
复制代码

下面是关于某商城直接抓页面的数据 🌰

//获取数据的来源:https://www.yohobuy.com/list/ci56-gd1.html?page=1
//先是获取左侧商品的分类，再经过分类获取具体的所属商品
// 上衣（所有）下装（所有）鞋子（所有）包类（所有）居家生活（所有）服配（所有）
const start = () => {
	let _url = "https://www.yohobuy.com/list/ci" + typeArr[typeIndex] + "-gd1.html?page=" + page
	superagent.get(_url).end((err, res) => {
		if(err) {
			return console.log("err", err)
		}
		gatData(res.text,typeArr[typeIndex] + "--" + page)
	})
}
const gatData = (html) => {
	let $ = cheerio.load(html),sknArr = []
	$(".good-info").map((index, item) => {
		let obj = {
			id:$(item).attr("data-skn"),
			img:imgForm($(item).find("img").eq(0).attr("data-original"))
			//此处省略一大堆数据
		}
		sknArr.push(obj)
	})
	console.log(sknArr)
} //使用Http直接请求页面会返回403，经过superagent模块去请求页面，再经过cheerio抓取对应数据，这种方式获取的数据不全
复制代码

• 伤心病狂

  

后台搭建

* 数据有了后台就简单使用express搭建，能够考虑各类问题，数据的加密，路由的拦截，用户的注册登陆权限判断等等 * 数据的返回格式根据我的而定，我的比较懒，返回的通常数据结构都是： ``` { code:状态码, msg:操做的结果, timestamp:时间戳, data:返回的数据 } ```

express的数据加密 -> AES加密 🌰

//加密的模块不少，推荐使用crypto、crypto-js
//这里的加密解密是把加密向量一同发送的，每次加密的加密向量都是一段固定长度的随机字符串，因此每次请求同一个URI，返回的数据同样，可是返回的加密数据是不同的
//加密      data为须要加密的数据
const encode = data => {
	let key = cryptojs.enc.Latin1.parse(加密的KEY),
		ivs = crypt(),                          //这只是固定长度的随机字符串
		iv = cryptojs.enc.Latin1.parse(ivs)     //加密向量
	let backdata = cryptojs.AES.encrypt(JSON.stringify(data), key, {
			iv: iv,
			mode: cryptojs.mode.CBC,
			padding: cryptojs.pad.ZeroPadding
		}).toString()
	let json = {
		data:backdata,
		iv:ivs
	}
	return json
}
//解密     
const decode = data => {
    let key = cryptojs.enc.Latin1.parse(加密的KEY),
		iv = cryptojs.enc.Latin1.parse(config.data.result.iv)   //加密向量
	let decrypted = cryptojs.AES.decrypt(config.data.result.data, key, {
		iv: iv,
		padding: cryptojs.pad.ZeroPadding
	})
	let data = config.data
	data.result.data = JSON.parse(decrypted.toString(cryptojs.enc.Utf8))
	return data
}
复制代码

路由的鉴权（可使用session，写文件，[token](https://mp.weixin.qq.com/s/82kGtrI1QK7gkswtd-QsAQ)等等） 🌰

• token通常格式为：字符串A.字符串B.字符串C，字符串A为Header（头部），字符串B为Payload（负载），字符串C为Signature（签名）

  • Header：存放用户的非敏感元信息
  • Payload：存放实际传递的数据
  • Signature：是对前两部分的签名，防止修改

• SESSION，可使用redis或者写文件的方式保存用户的登陆方式、逾期时间等等

* 这里以Token为例子，JWT(Json Web Token)为服务器无状态token，一旦确认用户身份，就颁发token，知道token过时以前，都是有权请求资源的
* Token的加密方法不少，默认采用HMAC SHA256算法加密
const jwt = require("jsonwebtoken")
//颁发Token
const getToken = data => {      //data必须为JSON格式的对象，保存用户非敏感的元信息
    jwt.sign(data, "加密的KEY", {
		expiresIn: 60 * 60 * 24,        //token的过时时间
		algorithm: "HS256",             //token的加密方式
		subject: "webside"              //token主题     
	})      //token带的参数
}
//验证token
jwt.verify(token, "加密的KEY", (err, decoded) => {
	if(err) {
		return false
	}
	return decoded      //decoded为token前两个json的数据
})
复制代码

express路由的搭建与路由拦截鉴权 🌰

• express的路由采用由上到下的匹配模式，一旦匹配到了路由将不会继续往下个路由匹配

//设置全部路由公用的配置
app.all("*", function(req, res, next) {
    //CROS 设置跨域、请求的方式、容许携带的请求头等等
	if(req.path !== "/" && !req.path.includes(".")) {
		res.header("Access-Control-Allow-Origin", req.headers["origin"] || "*");
		res.header("Access-Control-Allow-Credentials", true);
		res.header("Access-Control-Allow-Headers", 'Content-Type,Content-Length, Authorization,\'Origin\',Accept,X-Requested-With');
		res.header("Access-Control-Allow-Methods", "POST,GET,PUT,DELETE,OPTIONS");
		res.header("Content-Type", "application/json;charset=utf-8");
	}
	next()  //路由一级一级往下传递，必须定义next才会执行传递下个路由
})
app.use("/api/eleme/catalog", require("./eleme/getCatalog"), (req, res, next) => {
	console.log("eleme => 获取商家经营分类")
})

app.use("/api/eleme/map", require("./eleme/getAddress"), (req, res, next) => {
	console.log("eleme => 获取城市地区列表")
})
//--------------
//上面路由匹配的是从/api/eleme/子路由进去
//下面路由匹配为/api/eleme => 定义相同 /api/eleme/子路由的权限鉴定
//--------------
app.use("/api/eleme", (req, res, next) => {
	let token = req.body.token || req.query.token || req.headers['x-access-token']
	if(token) {
	    //权限的鉴定
		next()      //成功才匹配/api/eleme/下的子路由
	} else {
	   //获取token失败，token的获取与存放在什么位置自定义就好
	}
})
//上面一个/api/eleme/路由开启鉴定，下面的路由必须经过上面路由的鉴权成功才能访问
app.use("/api/eleme/search", require("./eleme/getSearch"), (req, res, next) => {
	console.log("eleme => 商家搜索")
})
复制代码

• 剩下就是各个路由路面的细节逻辑，具体业务逻辑具体操做。

最后工做交给前端了（Web的用户界面）

* 下面以Vue做为例子去演示Web的构建

Vue生命周期 🌰

生命钩子函数	Data	DOM	描述	适用环境
beforeCreate	未初始化	未初始化		loading加载效果
created	初始化	未初始化	属性绑定DOM,不存在,$el不存在	结束loading
beforeMount	初始化	初始化	$el为元素的虚拟节点
mounted			不保证组建在document中,$el被DOM替换	ajax请求
beforeUpdate			组件更新以前
updated			组件更新以后
activated			使用keep-alive,组件被激活时使用
deactivated			使用keep-alive,组件被移除时使用
beforeDestory			组件被销毁前调用	判断组件是否应被删除
destroyed			组件被销毁后调用	组件移除

Vue路由的搭建 🌰

//使用路由懒加载
const 页面A = resolve => require(['./../view/页面A.vue'], resolve)
const 页面B = resolve => require(['./../view/页面B.vue'], resolve)
//路有钩子          将公用的路由钩子业务扔到公用的钩子函数，也能够给组件单独设置
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不！能！直接获取组件实例 `this`，在next中能够用参数获取间接获取实例
// 由于当钩子执行前，组件实例还没被建立
}
beforeRouteUpdate (to, from, next) {
// 在当前路由改变，可是该组件被复用时调用
// 举例来讲，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 因为会渲染一样的 Foo 组件，所以组件实例会被复用。而这个钩子就会在这个状况下被调用。能够访问组件实例 `this`
}
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用   能够访问组件实例 `this`
}
const router = new Router({
	mode: 'history',
	routes: [{
		name: 'index',
		path: '/',
		component: ElemeView,
		meta:{          //对应路由的元信息 =>  可动态设置路由下的title、description
		    title:"首页",
		    description:"这是对首页的描述"
		}
		redirect: '/home',
		children: [{
			name: 'home',
			path: 'home',
			component: ElemeHome
		}, {
			name: 'order',
			path: 'order',
			component: ElemeOrder,
			redirect: '/order/home'
		}]
	},{
		name: 'orderInfo',
		path: '/order/:id',
		component: OrderInfo,
		meta:{          
		    title:"订单详情页",
		    description:"这是对订单详情页面的描述"
		}
	}, {
		path: '*',
		redirect: '/home'
	}]
})
export default router
//当动态对meta设置的时候
router.beforeEach((to, from, next) => {
    if (to.meta.title) {            //当有title或者其余的元信息时，能够手动动态设置(并不知道会不会对SEO有没有效)
        document.title = to.meta.title
    }
    next()      //传递下去
})
复制代码

vuex 单向数据流的模块化编写 🌰

• 当应用逐渐变的臃肿时，将状态树利用模块分开，有效管理，在调用mutations、actions时，带上模块的名字，为了防止各个模块中的状态，方法重命名，应该使用空间命名

const Store = new Vuex.Store({
	getters: {
		router: state => state.common.router,
		cartList: state => state.cart.cartList,
		cartCount: state => state.cart.cartCount,
		cartPay: state => state.cart.cartPay,
		sellerInfo: state => state.common.sellerInfo,
		sellerList: state => state.common.sellerList,
		orderList: state => state.order.orderList
	},
	mutations: {
	    getState(state){
	        console.log(state)          //state为全局state
	    }
	},
	modules: {
		common: commonStore,
		order: orderStore,
		cart: shopcartStore
	}
})
//组件中调用某模块的mutations时
this.$store.commit("order/finishOrder", e.target.dataset.id)
this.$store.commit("模块名字/该模块下的方法名字", 传过去的数据)
//组件中使用异步actions
this.$store.commit("模块名字/actions名字")
//直接调用全局的mutations或actions时，不须要加模块名即可以调用
复制代码

ajax库 -> 顺便在ajax拦截器中将后台的数据解密 🌰

• 只使用过两个，都够你用了（axios：比较好用，Fly：比较轻量可在小程序mpvue中使用）

//以axios为例子，其实都差很少的         加密解密方法上面提到，跟服务器的方法同样
axios.defaults.timeout = 10000              //请求超时时间
axios.defaults.retry = 4                    //请求失败后，继续请求，请求次数为5次

axios.interceptors.request.use((config) => {            //发送请求的拦截    
	config.headers["Content-Type"] = "application/x-www-form-urlencoded"
	//在这里加密    
	return config
})

axios.interceptors.response.use((res) => {              //响应请求的拦截
	if(res.status === 654) {
		window.alert('请求超时！')
	}
	if(res.data.code < 200 || res.data.result > 300) {
		window.alert('数据返回有误')
		return Promise.reject(res)
	}
	//在这里解密 -> 直接将解密的数据返回，其他的无关字段能够不用管
}, (error) => {             //失败的后续操做
	let config = error.config
	if(!config || !config.retry) return Promise.reject(error)
	config.__retryCount = config.__retryCount || 0

	if(config.__retryCount >= config.retry) {
		return Promise.reject(error)
	}
	config.__retryCount += 1
	let backoff = new Promise(function(resolve) {
		setTimeout(function() {
			resolve()
		}, config.retryDelay || 1)
	})
	return backoff.then(function() {
		return axios(config)
	})
})

export default axios
复制代码

一些比较好看的vue组件 🌰

• vuePutTo:能够实现上拉加载，下拉刷新的炫酷操做，无心中发小的，组件还挺小的。
• vue-awesome-swiper：简直是vue版的swiper，有点大了，其接口与swiper一致
• vue-msgbox：弹框
• 若是是使用大型的组件库的时候，可使用babel中的plugins对组件库进行按需加载

总结

• 以上的操做后，放上Online Demo，侵删。
• 献上我刚毕业时弄的我的网站:Billson
• 上面的一些教程，对应届毕业生来讲应该挺简单的了，应该总比拿着学校的项目去面试要好吧，若是你是比较牛的能够考虑写成SSR，这样子对SEO很友好，无论技术上仍是使用上，有比这个SPA更高大上一些，确定会在面试多加积分。