vue2 + express创建项目前后端1

vue2 + express创建项目前后端1

1. 创建vue项目

命令行输入 vue init webpack projectName，projectName为要创建的项目的名称，根据需要决定要安装的内容。

Project name：项目名称 ，不能包含大写字母，如果不需要更改直接回车就可以了。
Project description：项目描述，默认为A Vue.js project，可不用更改。
Author：作者。
Install vue-router? ：是否安装vue的路由插件，需要安装则选择Y。
Use ESLint to lint your code? ：是否用ESLint来限制你的代码错误和风格，对于个人项目一般不需要检查代码。
setup unit tests with Nightwatch? ：是否需要安装单元测试工具Nightwatch。
Setup e2e tests with Nightwatch?：是否安装e2e来进行用户行为模拟测试。
安装成功后的结果，可在项目目录下通过命令npm run dev运行项目。

2. 配置后端express

2.1 创建后端文件夹back，在back文件夹下执行npm init，然后执行npm install express。
2.2 3. 在back文件夹中创建server.js文件，然后编写server.js文件的内容。

// 设置端口
const express = require('express');

const app = express();

// 设置路由
app.get("/",(req,res)=>{
    res.send("hello world!")
})

/*****************************API*****************************/
app.listen(3000,function(){
    console.log("http://127.0.0.1:3000/data");
}); 

//设置允许跨域请求
app.all('*', function(req, res, next) {
    res.header('Access-Control-Allow-Origin', '*'); //访问控制允许来源：所有
    res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept'); //访问控制允许报头 X-Requested-With: xhr请求
    res.header('Access-Control-Allow-Metheds', 'PUT, POST, GET, DELETE, OPTIONS'); //访问控制允许方法
    res.header('X-Powered-By', 'nodejs'); //自定义头信息，表示服务端用nodejs
    res.header('Content-Type', 'application/json;charset=utf-8');
    res.setHeader('Cache-Control', 'public, max-age=120');      // 设置强缓存 时间间隔2min
    next();
});

修改完成后，在back目录下执行node server.js或者node server或者npm run start，在浏览器中打开http://127.0.0.1:3000即可见如下页面。

3 修改vue项目配置

3.1 执行npm install axios和npm install vue-axios安装axios和vue-axios，在main.js文件中加入以下内容，设置axios.

/*import axios*/
import axios from 'axios'
Vue.prototype.$axios=axios
axios.defaults.baseURL = '/api'
axios.defaults.timeout = 15000;  //超时响应
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'; // 配置请求头（推荐）
axios.defaults.withCredentials = true;   // axios 默认不发送cookie，需要全局设置true发送cookie
Vue.config.productionTip = false

3.2 在index.js文件中加入一下内容，设置proxy代理。

    proxyTable: {
      //服务器代理
      '/api': {
        target: 'http://127.0.0.1:3000',
        secure: false,
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }

至此，在前端vue中通过axios即可访问后端数据。

例子

1. 在后端 server.js文件夹中添加路由并保存。

app.get("/dt",(req,res)=>{
    res.send("hello world!")
    res.end()
})

2. 在HelloWorld.vue组件中修改export default部分（增加了axios获取数据的部分）。

export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
    };
  },
  mounted() {
    this.$axios({
      method: "get",
      url: "/dt"
    }).then((res) => {
        console.log(res.data)
      })
      .catch((reason) => {
        console.log(reason);
      });
  },
};

运行vue项目，可以在控制台中看见如下内容。