欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 >

搭建一个VUE+Express前后端分离的开发环境

发布时间：2024/4/15 52 豆豆
生活随笔 收集整理的这篇文章主要介绍了 搭建一个VUE+Express前后端分离的开发环境 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

前置条件

请确保安装了node。window+R打开cmd，输入 node -v  查看node版本。

建议使用淘宝镜像代替npm，确保安装速度，接下来都会使用cnpm

一、搭建后台Express环境

1、安装环境

新建一个Express文件夹，之后的操作都在这个文件夹里操作，确保能找到你的项目

在此使用shift+鼠标右键打开cmd

全局安装Express

cnpm install express --save

安装Express应用程序生成器

cnpm install express-generator -g

创建一个名称为 myapp 的 Express 应用

express --view=pug myapp

成功的例子：

之后在你的Express文件夹中会有一个myapp的文件夹，这就是我们的express项目文件

进入myapp安装依赖

  • cd myapp
  • cnpm install

    • 启动应用

    set DEBUG=myapp:* & npm start

    成功：

    在浏览器中输入 http://localhost:3000/ 如下图，成功创建了一个express应用

    2、发送GET请求

    在你的编辑器中打开myapp

    目录：（因为我已经有一个myapp了，所以叫myapp2）

    在routes新建一个produce.js

  • var express = require('express');
  • var router = express.Router();
  • /* GET home page. */
  • router.get('/', function(req, res, next) {
  • var data={
  • code:0,
  • data:{name:'aaa',pwd:'123'},
  • isSuccess:true,
  • msg:"请求成功"
  • }
  • //将product视图与指定的对象渲染后输出到客户端
  • res.json(data);
  • });
  • module.exports = router;

    • app.js中添加

  • var productRouter = require('./routes/product');
  • app.use('/product', productRouter);

    • 重启一下应用，浏览器输入 http://localhost:3000/product ，可以看到请求成功。

    二、搭建VUE环境并接受请求

    在这里我使用vue-cli搭建vue环境

    打开cmd，安装vue-vli

    cnpm install vue-cli -g

    进入刚才创建的Express文件夹，在文件夹用shift+鼠标右键或者cd 进入

    创建自己的vue项目

    vue init webpack vueProject

    接下来会让你选择，在这里不多做解释。一直回车Y即可。

    创建成功：

    myapp是我们的后端express项目，vueProject是我们的前端vue项目。大体的框架已经搭建完成了，接下来需要把前后端连接起来。

    进入vueProject，启动项目

    npm run dev

    启动成功，在浏览器输入 http://localhost:8080/

    安装axios

    cnpm install axios

    在main.js中引入并发送请求

  • import axios from 'axios'
  • var url="http://localhost:3000"
  • axios.get(url+'/product')
  • .then(function (response) {
  • console.log(response);
  • })
  • .catch(function (error) {
  • console.log(error);
  • });

    • 打开f12可以看到请求接收成功

    转载于:https://www.cnblogs.com/ydam/p/10983564.html

    超强干货来袭 云风专访：近40年码龄，通宵达旦的技术人生

    总结

    以上是生活随笔为你收集整理的搭建一个VUE+Express前后端分离的开发环境的全部内容，希望文章能够帮你解决所遇到的问题。

    如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。