2/8 Express 简单入门 & Vue.js 实现通过接口获得数据

写在前面

  天了撸,其实昨天写完 postman 的 mock server 我就在想一个问题,为什么我的数据不是实时改变的,为什么是浏览器缓存后的数据

  导致我晚上睡不着。。。

  然后第二天起来,吃完饭就开始想着怎么搞出来 ( 其实是先看了 无职转生 多好看的 )

  接着我发现,我其实只是在 mounted  时候才进行的 axios 

  按照实际意义来说,其实除非 data 里面其他数据发生改变,这辈子这个数据都不会变。。。

  百度了一下,好家伙,keepalive 是一个方法,但是我这没组件阿

  还有一个是 websocket  好像是保持通讯的一个东西 具体我没用去深入了解

  然后就是一个笨方法 轮询

  当然 这个就很好操作,直接写个计时器就好了,然后我就开始搞,

  类似这样的 console.log ( 写定时器 不断刷新 覆盖 笨方法 )

  

  正当我觉得可能要把缓存这个事情弄出来的时候,好家伙 postman 给我来一个

  

   然后我炸了,postman 不支持这个东西阿,你用多了 他就要叫你充钱

  于是有了今天的这一个随笔 开始搞 express 来模拟 接口


Express

安装

  1.首先是安装,这个东西呢,还是推荐到自己的建的文件夹里面安装然后编辑器打开编辑就是了

    如果只是临时安装的话 不要 --save

  cnpm install express --save

  2.安装应用生成器 这个能以后方便地生成我们的项目文件( 类似 vue-cli 脚手架一样 )

  cnpm install express-generator -g

  3.进入希望安装到的文件目录 进行操作 这里是 app

    express app

  4.进行相关的包的安装

    cnpm install

  5.进行启动

    set DEBUG= app & npm start

  但是呢,这样下来 并不是热部署,意味着你启动后在编译器里面修改后,还得在控制台里面按一下 ctrl + c

  于是,我们得曲线救国一下 用 supervisor

    ( 用了supervisor 的时候 就不用 第五步的操作,不然会提示端口 占用 )

    a.直接进行全局安装

    cnpm install -g supervisor         

    b.进行启动 ( 以后就不用用 第五步的启动方式了 前提还是进入项目目录 )

    supervisor bin/www

  6.打开网页 localhost:3000

  

配置

express的配置

  这里只是简单说一下我收集资料的配置问题 

  项目文件分为这个

  

   ( 有了vue前端其实不需要 去管其他的东西,我们只关心 routes 和入口文件 app.js 就好了 然后 demo 是我后来加的 )

  .bin文件夹中的www.js包含着对启动项目的一些测试服务器的配置,包括启动服务器的端口监听及bug控制台输出等。
  .node_ modules 文件夹中是npm安装的依赖包和相关的资源。
  .public 文件夹下是本系统相关的静态资源。
  routes文件夹下即为项目的全部代码和路由内容。
  views 文件夹下的jade文件为在routes 文件夹下的逻辑代码调用的相关模板文件,但是在这里,因为Express只是提供相关的API接口,前台使用Vuejis进行显示而不使用Express的前台模板进行输出。
  
  然后说一下,我理解的这个东西是怎么玩的,
    其实就是 get 和 post 
    get 得到接口提供的数据
    post 提交数据
  这里我的处理方法就是在 routes 里面新建一个js  demo
  红色框是必须有的东西
  

  router.get 就是 get  方法,function 里面分别是 request , response . next

  next 其实就是指的是 过滤器 类似于 vue 里面的 | 

  这有一篇通俗易懂的好文章

  ( 如果下一个还有中间件 就暂停本中间件的操作,跳转进行下一个中间件,否则执行本中间件 )

   

  然后呢看 app.js 里面要添加的东西

  

  可能这里有点懵逼了,但是我还是推荐有缘人自己看一下源码,其实这里的路径是在

  localhost:3000后添加的

  比如我在这里 app.use ('/demo',...) 其实就是相当于 localhost:3000/demo 

  而 刚才那个demo.js  是指的是 /demo 后面添加的东西

  以上就是 express 的配置

 vue 项目的配置

    
  在上面的这个文件夹里面找到dev
  添加一个代理
  

   然后对项目写一个demo.vue 部分代码如下,进行测试

  

 结果

  

  可以看到接受到的数据,可能这里看起来少了很多东西,但是太细了 我懒得写

  期间,我也用了postman 来测试得不得的到数据

  还有一些弯路,这里就不记录了

  

  总结

    有点打脑壳,但是这样下去再看看orm的东西,应该可以把数据库连上

    明天继续                                                     

Let it roll
原文地址:https://www.cnblogs.com/WaterMealone/p/14391112.html