node从入门到放弃系列之（2）创建vue工程 连接后端服务

前端项目代码-》源码

创建vue工程这里就不说了，自行百度。我这边参考的是vue-element-admin的目录结构风格

前端项目目录结构
├─.babelrc      
├─.editorconfig 
├─.eslintignore 
├─.eslintrc.js  
├─.gitignore    
├─.postcssrc.js 
├─index.html    
├─package.json
├─README.md
├─vue.config.js
├─test
|  ├─unit
|  |  ├─.eslintrc
|  |  ├─jest.conf.js
|  |  ├─setup.js
|  |  ├─specs
|  |  |   └HelloWorld.spec.js
|  ├─e2e
|  |  ├─nightwatch.conf.js
|  |  ├─runner.js
|  |  ├─specs
|  |  |   └test.js
|  |  ├─custom-assertions
|  |  |         └elementCount.js
├─static
|   └.gitkeep
├─src
|  ├─App.vue
|  ├─main.js
|  ├─router
|  |   └index.js
|  ├─config
|  |   └index.js
|  ├─components
|  |     └HelloWorld.vue
|  ├─assets
|  |   └logo.png
|  ├─api
|  |  ├─axios.js
|  |  ├─index.js
|  |  └request.js
├─config
|   ├─dev.env.js
|   ├─index.js
|   ├─prod.env.js
|   └test.env.js
├─build
|   ├─build.js
|   ├─check-versions.js
|   ├─logo.png
|   ├─utils.js
|   ├─vue-loader.conf.js
|   ├─webpack.base.conf.js
|   ├─webpack.dev.conf.js
|   └webpack.prod.conf.js

创建了vue项目后我在src下新增了一个api文件夹，用来存放所有的api接口和处理请求拦截等

src/api/index.js里我写了接口测试api

import { get } from './axios'

export default {
// 测试接口
  test: function(params) {
    return get(params, 'test')
  }
}

在src/components/helloword.vue里我访问了这个接口

<template>
  <div class="hello">{{msg}}</div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App1'
    }
  },
  created () {
    this.getTest()
  },
  methods: {
    async getTest() {
      const res = await this.$api.test()
      console.log(res)
      this.msg = res
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">

</style>

所有准备完毕，工程跑起来！！访问不成功报错了

还好，跨域问题，小问题小问题
在服务入口文件处理下跨域，加几行就好了（全部服务代码见git仓库=》源码）

const express = require('express')
const app = express()

//设置允许跨域访问该服务.
app.all('*', function (req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  //Access-Control-Allow-Headers ,可根据浏览器的F12查看,把对应的粘贴在这里就行
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  res.header('Access-Control-Allow-Methods', '*');
  res.header('Content-Type', 'application/json;charset=utf-8');
  next();
});

测试下，成功返回数据！

到这里简单的服务和前端工程都搭建起来了，接下来就搞一个登录页面来耍下吧

上一篇：node从入门到放弃系列之（1）node后端服务项目搭建
下一篇：未完待续！！