vue2.0实践 —— Node + vue 实现移动官网 - Raychan_H5之家

简介

使用 Node + vue 对公司的官网进行了一个简单的移动端的实现。

源码

https://github.com/wx1993/node-vue-fabaocn

效果

组件技术

Express、Vue、Vue-Router、Vue-Resource、Webpack

Vue

vue 的组件化思想和 React 很像，一个 vue 组件将 html、css 和 js 都写在一个文件里面，组件管理和维护自己的数据和状态，方便编写也便于调试。

Vue-Resource

作为 vue 全家桶的一员，vue-resource 主要用在 HTTP 请求功能上，类似的工具还有 axios，虽然 vue2.0 推荐使用 axios，但是个人还是习惯于用 vue-resource，使用起来也十分简单，在实例中可以使用以下格式的写法：

this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

关于 vue-resource 的使用可以参考：

Vue-Router

vue 通过配合 vue-router 来创建单页应用，其思想是将 vue 组件映射到路由，并将路由挂载到 app 上，在页面中通过 router-link 和 router-view 来定义页面路由并切换到不同的组件。

<router-link to="/home">Home</router-link> // js import Home from './components/home' const routes = [ { path: '/home', component: Home }, ] const router = new VueRouter({ routes }) const app = new Vue({ router }).$mount('#app')

构建

Express + Vue + Webpack

为什么不用脚手架工具？

针对 React 可以使用 dva-cli 快速生成项目结构，同样，vue 也提供了 vue-cli 作为脚手架工具，使用起来都非常方便，但是使用脚手架工具很明显的一个问题就是，不同的框架通过脚手架生成的项目结构都是不同的，而针对一些实际项目，可能这样的目录结构并不能很好得符合项目需要，而为了不同的项目之间结构的一致性，个人更喜欢使用 express 生成 node 项目，并在 node 项目中手动得引入和使用框架，这样一方面避免了项目结构的不一致性，同时也更有利于对框架的理解。

项目结构

经典的 node 项目结构配合手动创建的 src 目录（用来放置所有的组件、入口和路由文件）。

安装启动

// 安装依赖 npm install // 项目打包 webpack -w // 启动项目 npm start

几个问题

因为项目本身并不复杂，所以这里仅针对几个难点和遇到的坑进行简单的解释和分析。

1、接口的封装和数据的请求

应用相关的接口都在node中进行封装，具体使用到了 request 模块的 get 和 post 方法，如下：

// 获取职位列表 router.post('/getJobs', function (req, res, next) { console.log(req.body.jobId); const jobsUrl = 'http://www.fabao.cn/api/FABAO_WEBSITE/job/getjobinfo?nonce=1494212786000&sectionid=' + req.body.jobId +'&pageNumber=1&pageSize=20'; console.log(jobsUrl); request(jobsUrl, function (error, response, body) { if(!error && response.statusCode == '200') { res.send(body) } }) })

请求接口在组件中通过 vue-resource 来实现，如下：

getJoblist () { this.$http.post('/getJobs', { jobId }).then(data => { console.log(data); this.items = data.body.res; }, error => { console.log(error); }) }

2、路由地址变化的的监听

在项目中的新闻详情页面有一个点击按钮查看上一篇或下一篇新闻的功能：

这里通过直接在按钮上定义路由中的新闻 id 的增减的方式来实现，如下：

<router-link :to="{name: 'news', params: {id: data.id - 1}}" replace>{{prevTxt}}</router-link> <router-link :to="{name: 'news', params: {id: data.id + 1}}">{{nextTxt}}</router-link>

但是发现，在点击了按钮之后，地址栏中的 url 确实变了，新闻 id 对应的加1或减1，但是页面内容并没有发生变化，针对这个问题，可以通过监听router 来解决，如下：

watch: { 　　// 当路由发生变化时自动请求数据　　"$route": "getNewsDetail" }

这样，在 url 发生变化时，就获取新的 url 地址，并主动请求一次数据，从而实现了内容的更新。

getNewsDetail 方法如下：

getNewsDetail () { // use vue-resource const curId = this.$route.params.id; this.$http.post('/getNewsDetail', {id: curId }).then(data => { if (data.body.res) { this.prevTxt = '上一篇'; this.nextTxt = '下一篇' this.data = data.body.res[0] }else { if (curId > this.initialId) { .nextTxt = '没有啦'; this.prevTxt = '上一篇'; }else { .prevTxt = '没有啦' this.nextTxt = '下一篇' } } }, error => { console.log(error); }) }

3、元素的切换和显示隐藏