手动搭建一个vue+node单页（二）

/*here使用@import，如果你想在js中使用import，在webpack配置中的module中添加/\.css$/match;*/@import"./common/reset.css";@import'./common/base.css';.wrap{min-height:100%;background:#eee;}.app_left{width:75%;background:white;min-height:100vh;box-shadow:-1px000#cccinset;}.app_aside{width:25%;}手工搭建一个vue+node单页（二）环境搭建好后，开始写业务和后台接口代码。本文内容比较简单，仅适合小白参考；环境搭建请参考《手动搭建vue+node单页面（一）》：https://segmentfault.com/a/11...项目地址：https://github.com/liubingyan...内容概要：1.jsonp获取百度搜索框内容;2、Node调用juejin接口获取前端文章列表；开发过程中，不会太详细，有很多问题自行百度；1、获取baidu搜索框的内容就是打字时框内显示的内容；在使用node调用百度接口时，发现返回的内容是gbk格式，node解析遇到困难，于是改用jsonp方式；首先分析控制台中的接口：返回值：很容易看出content中json数据的's'就是我们要的内容；接口地址的url内容太长，我们把这个地址复制到地址栏，反复测试，最后得到：对我们有用的参数只有两个：wd（输入框的内容）和cb（输入框的内容）一个在返回方法名时调用），然后就可以开发了；这个小功能的开发涉及到：1.app.vue：把导航和路由写在里面，做一个简单的布局；更改前，在src目录下创建一个common文件夹，存放公共样式和方法（base.css等）：例如：//base.css//...fl{float:left}.fr{float:right}//...//这样App.vue的预定义样式修改如下：（后续样式不再详述）/*here使用@import，如果你想在js中使用import，在webpack配置中的module中添加/\.css$/match;*/@import"./common/reset.css";@import'./common/base.css';.wrap{min-height:100%;background:#eee;}.app_left{width:75%;background:white;min-height:100vh;box-shadow:-1px000#cccinset;}.app_aside{width:25%;}先引入routing再看效果，不然页面什么都没有，在src/router文件夹下创建index.js，创建router文件夹的原因依然是模块化开发的思路，就是把相同功能的代码放在一起，方便维护和开发；//router/index.jsimportVuefrom'vue'importRouterfrom'vue-router'importHomefrom'../views/home'Vue.use(Router)exportdefaultnewRouter({routes:[{path:'/',name:'home',component:Home}]})不要忘记安装插件npmivue-router-savemain.jsimportroutingconfiguration//main.jsimportVuefrom'vue'importAppfrom'./app'importrouterfrom"./router"//默认加载index文件newVue({el:'#app',router,//注册到vue实例render:h=>h(App)})效果如下：导航和路由页面放在左边，右边的栏目留给小插件；3.根据导航，至少要有首页和论坛页面，先做首页，在src下创建home.vue；首页有两个内容，搜索框和juejin获取的列表，先做搜索框；//home.vue编写搜索框组件，存在在src/views下创建search.vue//search.vue/*style自己写花点时间*/在src/common下创建base.js添加public方法（vue有自己的方法给实例添加自定义函数属性，自己学习吧，通过component，和然后vue调用。），这里东西不多，我们就简单粗暴，直接添加windows下的方法，调用也简单；//src/common/base.js代码比较简单，不多解释.creatScript=function(url){//选择promise其then方法使用方便returnnewPromise((resolve,reject)=>{letscript=document.createElement('script');script.id='removeScript';script.src=url;document.body.appendChild(script);script.onload=function(){resolve(window.searchInfo);document.body.removeChild(document.getElementById('remo脚本'));}});};在main.js中引入import'./common/base'再看页面，效果出来了：2.获取绝津文章列表至此后端代码还没写完，继续下来看看如何通过调用juejin接口写一个简单的接口。写之前整理一下思路：写一个显示组件，一个后端接口，并连接起来；1.编写组件，在src/views下创建juejinResources。vue文件//juejinResources.vue（业务代码不再赘述）/*css还是自己写的，哈哈*/安装vue-resource插件npmivue-resource-saveregistersvue-resource转化为vue，并修改main.js//main.js//....importVueResourcefrom'vue-resource'Vue.use(VueResource)//....2.编写后台接口，在服务目录下创建juejinResources.js//juejinResources.jsvarhttp=require('http');varlog=console.log;varexpress=require('express');varrouter=express。Router();//获取这个地址的方法和baidu一样，慢慢试试；varurl="http://timeline-merger-ms.juejin.im/v1/get_entry_by_rank?src=web&limit=20&category=5562b415e4b00c57d9b94ac8";//express自带路由分发router.get('/',function(req,res){http.get(url,function(resquest){varhtml='';resquest.setEncoding('utf-8');//防止中文乱码//监听数据事件，每条取一条数据timeresquest.on('data',function(chunk){html+=chunk;});//监听结束事件，如果接口返回，获取完成后执行回调函数numberresquest.on('end',function(){//接口返回字符串，中文为unicode编码，处理后返回给前端html=JSON.parse(unescape(html.replace(/\\u/g,'%u')))res.status(200)res.json(html)})})})module.exports=router;3.接口写好后，将它们连接起来，修改server.js//server.js//....在代码末尾添加//node分布路由，多个服务只要多写几个分布//routerjuejinResources.js中使用.git("/")会自动把"/juejinResources"放在最前面这种报错：网上有很多解决办法，但不一定有效。不知道怎么解决，所以改成http请求；去这里：单页组件-路由-后端接口-服务都有，开发模式和生产模式也都有。爬虫也使用http或https多次访问。获取方式其实和这个是一样的。数据你想怎么玩就怎么玩，放到自己的数据库里也没问题。这个演示项目仍然可用。不完整，缺少数据库和admin后台管理，结构已经有了，剩下的基本都是砖头，这里不再赘述。到目前为止的目录结构：