vue-cli3+Express本地項(xiàng)目搭建

一嫉鲸、Express 項(xiàng)目搭建

請先安裝node.js
安裝Node.js
搭建項(xiàng)目
1. 創(chuàng)建文件夾
  隨便找一個(gè)地方枕赵，創(chuàng)建一個(gè)文件夾蝇完，取名為 service（名字請隨意）牌柄。進(jìn)入該文件終端曾掂，然后輸入 npm init绷旗，初始化一個(gè) node 項(xiàng)目，之后一直 enter 到結(jié)束〖食耍現(xiàn)在 service 文件夾里面就有一個(gè) package.json 文件了
  
  image.png
2. 安裝Express
  命令行輸入 npm install express --save坡倔，會(huì)自動(dòng)生成一個(gè)node_modules文件夾和package-lock.json文件。
  
  image.png
3. 搭建服務(wù)器
  在service文件夾里面新建一個(gè)index.js文件脖含，并編輯：
```
const express = require("express");
const app = express();
app.listen(5000, () => console.log('**********【服務(wù)器啟動(dòng)成功】**********'));
```
  image.png
4. 啟動(dòng)服務(wù)器
  在終端輸入node index回車罪塔，即可啟動(dòng)成功，并且會(huì)打印 **********【服務(wù)器啟動(dòng)成功】**********
  
  image.png

二养葵、VUE項(xiàng)目構(gòu)建

安裝vue-cli3
請先全局安裝vue-cli3征堪，進(jìn)入終端，輸入命令npm install -g @vue/cli

注意：如果以前安裝過vue-cli的其他版本关拒，請先卸載佃蚜，詳情請看npm更新vue-cli3，報(bào)錯(cuò)問題解決
vue頁面構(gòu)建
找一個(gè)文件夾着绊，進(jìn)入終端谐算，輸入vue create pro-name，其中的pro-name是你的項(xiàng)目名稱归露，可以隨意取名洲脂。然后就是依據(jù)提示，enter下去（新手可以直接使用默認(rèn)的配置靶擦，配置過的朋友可以自己選擇自己需要的進(jìn)行配置）腮考，安裝完成后用編輯器（我使用的是VS code）打開你的pro-name項(xiàng)目，在終端里面運(yùn)行npm install玄捕，完成后npm run serve踩蔚，然后打開顯示出來的網(wǎng)址，里面是 vue 構(gòu)建的一些頁面枚粘，這樣 vue 單頁面項(xiàng)目就構(gòu)建成功了奈梳。

image.png

image.png

三厂捞、Vue 與 Express 連接

vue頁面配置
在pro-name文件夾里面新建一個(gè)vue.config.js文件析命，編輯內(nèi)容：

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

module.exports = {
    devServer: {
        // 打開網(wǎng)址
        open: true,
        host,
        port: 8080,
    },
}

image.png

Node項(xiàng)目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項(xiàng)目訪問get、post

安裝axios攀圈，在pro-name文件夾終端輸入npm install axios --save
引入和配置axios
在src文件夾下創(chuàng)建一個(gè)plugins文件夾暴凑，再在plugins文件夾下創(chuàng)建一個(gè)axios文件夾，最后在axios文件夾下創(chuàng)建一個(gè)index.js文件赘来，編輯內(nèi)容：
```
import Vue from 'vue'
import axios from 'axios'

const instance = axios.create({
    // http://本機(jī)IP地址:端口號
    baseURL: 'http://192.168.0.102:8000',
    // 請求時(shí)長
    timeout: 15000,
})

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

注意：本機(jī)IP地址:在終端輸入ifconfig查詢现喳，端口號在你的node項(xiàng)目的index.js文件里面

image.png

image.png

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

image.png

選擇一個(gè)頁面訪問get凯傲、post,我選擇的是Home.vue頁面，在script標(biāo)簽里面添加代碼：

// get接口
// 模板渲染成html前調(diào)用
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

重新運(yùn)行node：node index 和 vue：npm run serce
可能你會(huì)得到一個(gè)報(bào)錯(cuò)的頁面嗦篱，這是跨域報(bào)錯(cuò)

image.png

解決辦法冰单，在node項(xiàng)目的index.js文件里面添加：

app.all('*', function (req, res, next) {
    //設(shè)置允許跨域的域名，*代表允許任意域名跨域
    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嘗試請求快速結(jié)束
    else next()
})

image.png

再次重新運(yùn)行node：node index 和 vue：npm run serce
得到這個(gè)結(jié)果灸促，接口就算訪問成功啦诫欠！

image.png