资讯专栏INFORMATION COLUMN

手动搭建vue+node单页面(二)

陈江龙 / 2537人阅读

手动搭建vue+node单页面(二)
环境搭建好了,开始写业务和后端接口代码,这一篇讲的内容也比较简单,只适合小白参考;

环境搭建请参考 《手动搭建vue+node单页面(一)》:https://segmentfault.com/a/11...

项目地址:https://github.com/liubingyan...

内容提要:
1.jsonp获取baidu搜索框内容;
2.node调用juejin接口获取前端文章列表;

开发过程中不会讲的太细,有疑问多百度;

一、获取baidu搜索框内容
就是输入的同时下来框展示的内容;

在用node调用百度接口时候发现返回的是gbk格式的内容,node解析遇到困难,所以改用jsonp的方式;

首先在控制台分析接口:

返回值:

很容易看出内容中json数据的‘s’就是我们想要的内容;

接口地址的url内容过长,我们将这个地址复制到地址栏中经过反复测试,最终得到:

对我们有用的参数只有两个:wd(输入框的内容)和cb(返回时调用的方法名),接下来就可以开发了;

这个小功能的开发涉及的:
1.app.vue:将导航和路由写在其中,并做简单布局;
改之前在src目录下创建common文件夹,存放公共样式和方法(base.css等):
比如:

//base.css
//...
.fl{float:left}
.fr{float:right}
//...
//类似这样的预定义样式

app.vue做如下修改:(之后的样式都不再做详细说明)






看效果之前先引入路由,不然页面没东西,src/router文件夹下创建index.js,创建router文件夹的原因还是模块化开发的思想,将作用相同的代码放在一起,利于维护和开发;

//router/index.js
import Vue from "vue"
import Router from "vue-router"
import Home from "../views/home"

Vue.use(Router)

export default new Router({
    routes: [{
        path: "/",
        name: "home",
        component: Home
    }]
})

别忘了安装插件

npm i vue-router -save

main.js引入路由配置

//main.js
import Vue from "vue"
import App from "./app"

import router from "./router"//默认加载index文件
new Vue({
    el: "#app",
    router,//注册到vue实例
    render: h => h(App)
})

效果如下:

导航和路由页面放在左边,右边栏留着放小插件;

3.根据导航最起码要有一个首页,一个论坛页,先做首页,在src下创建home.vue;
home页内容有两个,搜索框和juejin拿到的列表,先做搜索框;

//home.vue





编写搜索框组件,在src/views下创建search.vue

//search.vue





在src/common下创建base.js添加公共方法(vue有自己的方式将自定义函数属性添加到实例上,自己百度学习吧,是通过组件的方式引入,然后通过vue.的方式调用),这里东西不多,我们就简单粗暴点儿,直接在windows下添加方法,调用也简单;

//src/common/base.js代码比较简单,不多解释了
window.log=console.log;

window.searchFunction = function(val) {
    window.searchInfo = val
    //将搜索结果保存在searchInfo 中
};

window.creatScript=function(url) {
//选择promise是它的then方法用起来方便
    return new Promise((resolve, reject) => {
        let script = document.createElement("script");
        script.id = "removeScript";
        script.src = url;
        document.body.appendChild(script);
        script.onload = function() {
            resolve(window.searchInfo);
            document.body.removeChild(document.getElementById("removeScript"));
        }
    });    
};    

在main.js中引入

import "./common/base" 

再看页面,效果出来了:

二、获取juejin文章列表

到目前为止还是没有写后端代码,接下来通过调用juejin接口来看看一个简单接口怎么写

写之前先整理下思路:要写个展示组件,一个后端接口,在把它们联系起来;

1.写组件,在src/views下创建juejinResources.vue文件

//juejinResources.vue(业务代码不再赘述)
  



安装vue-resource插件

npm i vue-resource -save

将vue-resource注册到vue中,修改main.js

//main.js
//....
import VueResource from "vue-resource" 
Vue.use(VueResource)
//....

2.写后端接口,在service目录下创建juejinResources.js

//juejinResources.js
var http = require("http");
var log = console.log;
var express = require("express");
var router = express.Router();

//这样的地址获取方式跟baidu的一样,慢慢试;
var url = "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) {
        var html = "";
        resquest.setEncoding("utf-8"); //防止中文乱码

        //监听data事件,每次取一块数据
        resquest.on("data", function(chunk) {
            html += chunk;
        });

        //监听end事件,如果接口返回获取完毕,就执行回调函数
        resquest.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分配路由的方式,多个服务就多写几个分配就行了
//juejinResources.js中用的router.git("/")会自动把"/juejinResources"拼在前面
app.use("/juejinResources",require("./service/juejinResources"))

其实挺简单,来看看效果:

如果接口是https请求,node环境可能会出现这样的报错:

解决办法网上有很多,但不一定有效,我的就不知道怎么解决了,所以都改成了http请求;

到这里:单页面组件-路由-后端接口-服务就都有了,开发模式,生产模式也都具备,爬虫也是用http或则https多次访问,获取方式跟这个其实是一样的,拿到数据想怎么玩都可以,放到自己数据库都没问题。

这个demo项目还不完整,缺少数据库和admin后台管理,结构已经有了,剩下的基本上就是板砖了,不再赘述。

到目前为止的目录结构:

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/94246.html

相关文章

  • 手动搭建vue+node页面

    手动搭建vue+node单页面(二) 环境搭建好了,开始写业务和后端接口代码,这一篇讲的内容也比较简单,只适合小白参考; 环境搭建请参考 《手动搭建vue+node单页面(一)》:https://segmentfault.com/a/11... 项目地址:https://github.com/liubingyan... 内容提要:1.jsonp获取baidu搜索框内容;2.node调用juejin...

    honmaple 评论0 收藏0
  • 手动搭建vue+node页面(一)

    摘要:这里提供手动搭建单页面开发生产环境,并使用写后台代码,仅供小白参考代码虽然没多少,但牵扯的知识很多,需要逐个研究后续内容手动搭建单页面二项目地址内容提要,这一章会从到开发环境,生产环境的搭建思路先实现单页面的然后实现服务下的开发环境再实 这里提供手动搭建vue单页面开发生产环境,并使用node写后台代码,仅供小白参考;代码虽然没多少,但牵扯的知识很多,需要逐个研究; 后续内容《手动搭建...

    The question 评论0 收藏0
  • 手动搭建vue+node页面(一)

    摘要:这里提供手动搭建单页面开发生产环境,并使用写后台代码,仅供小白参考代码虽然没多少,但牵扯的知识很多,需要逐个研究后续内容手动搭建单页面二项目地址内容提要,这一章会从到开发环境,生产环境的搭建思路先实现单页面的然后实现服务下的开发环境再实 这里提供手动搭建vue单页面开发生产环境,并使用node写后台代码,仅供小白参考;代码虽然没多少,但牵扯的知识很多,需要逐个研究; 后续内容《手动搭建...

    linkin 评论0 收藏0
  • 使用webpack手动搭建一个基于vue页面应用

    摘要:当我们面对复杂的代码,当我们看到各种配置文件的时候,你是否会为此感到头疼,是否会觉得心累今天,大家可以跟着我一起,自己来是用构建一个基于单页面的应用,废话不多,立即开始创建项目创建项目需要的基础文件和文件夹安装以及一些其他的依赖包配置 当我们面对vue-cli 复杂的代码,当我们看到各种配置文件的时候,你是否会为此感到头疼,是否会觉得心累?今天,大家可以跟着我一起,自己来是用webpa...

    maybe_009 评论0 收藏0
  • 关于Vue2一些值得推荐的文章 -- 五、六月份

    摘要:五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新,欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香,消溽暑。鸟雀呼晴,侵晓窥檐语。叶上初阳乾宿雨,水面清圆,一一风荷举。家住吴门,久作长安旅。五月渔郎相忆否。小楫轻舟,梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly;请::点击::集web前端最近很火的vue2框架资源;定时更新,欢迎 Star 一下。 苏...

    Terry_Tai 评论0 收藏0

发表评论

0条评论

陈江龙

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<