vue-cli3+Express本地项目搭建

一、Express 项目搭建

1. 请先安装node.js
   安装Node.js

2. 搭建项目

   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项目构建

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

   注意：如果以前安装过vue-cli的其他版本，请先卸载，详情请看npm更新vue-cli3，报错问题解决

2. 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 连接

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

   const host = require('ip').address()
   
   module.exports = {
       devServer: {
           // 打开网址
           open: true,
           host,
           port: 8080,
       },
   }
   

   image.png
2. 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
3. vue项目访问get、post

   1. 安装axios，在pro-name文件夹终端输入npm install axios --save

   2. 引入和配置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

   3. 选择一个页面访问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

   4. 重新运行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

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

      image.png