vue-cli3+Express本地项目搭建

一、Express 项目搭建

请先安装node.js
安装Node.js
搭建项目
1. 创建文件夹
  随便找一个地方，创建一个文件夹，取名为 service（名字请随意）。进入该文件终端，然后输入 npm init，初始化一个 node 项目，之后一直 enter 到结束。现在 service 文件夹里面就有一个 package.json 文件了
  
  image.png
2. 安装Express
  命令行输入 npm install express --save，会自动生成一个node_modules文件夹和package-lock.json文件。
  
  image.png
3. 搭建服务器
  在service文件夹里面新建一个index.js文件，并编辑：
```
const express = require("express");
const app = express();
app.listen(5000, () => console.log('**********【服务器启动成功】**********'));
```
  image.png
4. 启动服务器
  在终端输入node index回车，即可启动成功，并且会打印 **********【服务器启动成功】**********
  
  image.png

二、VUE项目构建

安装vue-cli3
请先全局安装vue-cli3，进入终端，输入命令npm install -g @vue/cli

注意：如果以前安装过vue-cli的其他版本，请先卸载，详情请看npm更新vue-cli3，报错问题解决
vue页面构建
找一个文件夹，进入终端，输入vue create pro-name，其中的pro-name是你的项目名称，可以随意取名。然后就是依据提示，enter下去（新手可以直接使用默认的配置，配置过的朋友可以自己选择自己需要的进行配置），安装完成后用编辑器（我使用的是VS code）打开你的pro-name项目，在终端里面运行npm install，完成后npm run serve，然后打开显示出来的网址，里面是 vue 构建的一些页面，这样 vue 单页面项目就构建成功了。

image.png

image.png

三、Vue 与 Express 连接

vue页面配置
在pro-name文件夹里面新建一个vue.config.js文件，编辑内容：

const host = require('ip').address()

module.exports = {
    devServer: {
        // 打开网址
        open: true,
        host,
        port: 8080,
    },
}

image.png

Node项目index.js(入口文件)配置
在index.js里面写入 get、post 接口：

app.get('/user/get', (req, res) => {
    console.log('req', req)
    console.log('res', res)
    res.send('get访问成功')
})
app.post('/user/post', (req, res) => {
    console.log('req', req)
    console.log('res', res)
    res.send('post访问成功')
})

image.png

vue项目访问get、post

安装axios，在pro-name文件夹终端输入npm install axios --save
引入和配置axios
在src文件夹下创建一个plugins文件夹，再在plugins文件夹下创建一个axios文件夹，最后在axios文件夹下创建一个index.js文件，编辑内容：
```
import Vue from 'vue'
import axios from 'axios'

const instance = axios.create({
    // http://本机IP地址:端口号
    baseURL: 'http://192.168.0.102:8000',
    // 请求时长
    timeout: 15000,
})

Vue.prototype.$instance = instance
```
image.png

注意：本机IP地址:在终端输入ifconfig查询，端口号在你的node项目的index.js文件里面

image.png

image.png

接下来在main.js文件里面引入axios里面的index.js文件：import './plugins/axios/index'

image.png

选择一个页面访问get、post,我选择的是Home.vue页面，在script标签里面添加代码：

// get接口
// 模板渲染成html前调用
created() {
    this.$instance
        .get('/user/get', {
            params: {
                name: 'name',
            },
        })
        .then(res => {
            console.log(res)
        })
        .catch(error => {
            console.log('error: ', error)
        })
    this.$instance
        .post('/user/post', {
            name: 'name',
        })
        .then(res => {
            console.log(res)
        })
        .catch(error => {
            console.log('error: ', error)
        })
},

image.png

重新运行node：node index 和 vue：npm run serce
可能你会得到一个报错的页面，这是跨域报错

image.png

解决办法，在node项目的index.js文件里面添加：

app.all('*', function (req, res, next) {
    //设置允许跨域的域名，*代表允许任意域名跨域
    res.header('Access-Control-Allow-Origin', '*')
    //允许的header类型
    res.header('Access-Control-Allow-Headers', 'content-type')
    //跨域允许的请求方式
    res.header('Access-Control-Allow-Methods', 'DELETE,PUT,POST,GET,OPTIONS')
    if (req.method.toLowerCase() == 'options') res.send(200)
    //让options尝试请求快速结束
    else next()
})

image.png

再次重新运行node：node index 和 vue：npm run serce
得到这个结果，接口就算访问成功啦！

image.png