如何使用node快速创建前后端分离的项目

基本开发环境配置

1.安装node.js

打开node.js的下载官网 node下载链接， 选择LTS版本（稳定版）进行下载，下载完成后，双击安装包，开始安装，一直点next即可，最新版node已包含npm，所以安装后，可运行cmd ，分别输入node -v 和 npm -v 查看安装的版本，如下图所示：

安装cnpm

安装npm 的全局淘宝镜像，继续输入：

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装成功后，输入cnpm -v 查看版本。

 

 

2.安装webpack

node和npm安装成功后，继续安装webpack，在cmd中输入全局安装指令：

npm install webpack webpack-cli –g

安装成功后，输入webpack -v 查看安装版本，如下图：

3.安装vue-cli脚手架

node和npm安装成功后，继续安装vue-cli脚手架，在cmd中输入全局安装指令：

npm install -g @vue/cli

安装成功后，输入vue -V 查看版本，如下图所示：

4.安装VS code

Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux。

 

vscode 官网： https://code.visualstudio.com/

 

汉化

按f1 搜索 Configore Display Language 设置 zh-cn 关闭软件重启。

 

注意：

如果重启后还是英文的，那么在商店查看已安装的插件，把中文插件Chinese(simplified) 重新安装一遍，然后重启软件即可。

 

项目所用的技术

项目中主要使用了node.js 、egg.js、vue、axios

1.后端服务 node+egg

egg的快速入门 https://eggjs.org/zh-cn/intro/quickstart.html

2.前端应用 vue+axios

vue的使用 https://cn.vuejs.org/v2/guide/

项目

后台服务

1、项目创建

新建一个文件夹作为项目的根目录，如 testServer，

在cmd中进入到testServer的目录下，输入

npm init egg --type=simple

2、安装项目的相关依赖

项目创建成功后，进入到项目文件夹init中，使用cnpm安装相关项目依赖，继续输入

cd D:\vue_work\testServer\init
cnpm i

依赖全部安装成功后，项目中会出现node_modules文件夹

 

3、运行项目

 

直接输入运行指令：

npm run dev

浏览器打开  http://127.0.0.1:7001 即可查看，如下图所示：

 

4、项目主要目录介绍

app/router.js 用于配置 URL 路由规则

app/controller/**  用于解析用户的输入，处理后返回相应的结果

app/public/** 用于放置静态资源，可选

config/config.{env}.js 用于编写配置文件

config/plugin.js 用于配置需要加载的插件

 

详情可参考 https://eggjs.org/zh-cn/basics/structure.html

 

5、项目优化（简单解决跨eee域问题）重点

1. 将项目的依赖包node_modules文件夹删除
2. 进入项目的目录，依次使用指令，再次重新安装依赖包

cnpm install egg-cors --save
cnpm i

1. 使用VS code打开项目，进入config/plugin.js文件夹，添加代码，

 cors: {
        enable: true,
        package: 'egg-cors',
    }

如下图所示：

1. 进入config/config.default.js文件夹，添加代码，

  config.security = {
        csrf: {
            enable: false,
            ignoreJSON: true,
        },
        //domainWhiteList: ['http://localhost:8080'],
    };
    config.cors = {
        origin: '*',
        allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH',
    };

如下图所示：

1. 重新运行项目，输入指令

npm run dev

前端应用

1、项目创建

1. 打开cmd，进入testSever文件目录中，输入指令

vue create hello

创建新项目，如下图所示

2、项目运行

进入项目目录hello，继续输入指令

cd hello
npm run serve

如下图所示：

在浏览器中打开，如下图所示：

3、项目优化

1. 输入指令 ctrl+c 停止项目运行
2. 安装网络框架axios，输入指令

cnpm install axios --save

如下图所示

1. 修改src/components/HelloWorld.vue 文件

<template>
  <div class="hello">
    <button @click="getDatas">获取数据</button>
    <div> {{ result  }}</div>
  </div>
</template>

<script>
    import axios from 'axios' //引入axios
    export default {
        name: "HelloWorld",
        data() {
            return {
                result: "",
            }
        },
        methods: {
            getDatas: function() {
                axios.get("http://127.0.0.1:7001/").then(res => {
                    console.log(res.data);
                    this.result = res.data;
                });
            }
        },
        props: {
            msg: String
        }
    };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">

</style>

1. 修改src/views/Home.vue 文件

<template>
  <div class="home">
    <HelloWorld msg="Welcome to Your Vue.js App" />
  </div>
</template>

<script>
    // @ is an alias to /src
    import HelloWorld from "@/components/HelloWorld.vue";

    export default {
        name: "Home",
        components: {
            HelloWorld
        }
    };
</script>

1. 修改src/App.vue 文件

<template>
  <div id="app">
    <div id="nav">
      <!-- <router-link to="/">Home</router-link> | -->
      <!-- <router-link to="/about">About</router-link> -->
    </div>
    <router-view />
  </div>
</template>

<style lang="less">
    #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
    }
    
    #nav {
        padding: 30px;
        a {
            font-weight: bold;
            color: #2c3e50;
            &.router-link-exact-active {
                color: #42b983;
            }
        }
    }
</style>

1. 重新运行项目即可，输入指令

npm run serve

1. 刷新界面，如下图所示：