angular+express前后端分离总结

        今天弄了下前后端分离，由于学的不多，对于webpack不是太懂，于是按着自己的理解来搭了下环境。

     前端使用的框架是Angular5，后端使用的是express。IDEA一个是webstorm，因为其对Angular支持很好，所以用于编写Angular。另一个是vscode，用于编写express。

        主要步骤

        1、搭建Angular工程

ng new front-end

        2、搭建express工程

express back-end

前后端分离

        3、然后是关键的一步，它可以快速地将前端的页面部署到后端里。

               在angular的工程文件夹里找到.angular-cli.json文件，修改它的outDir，如下图

            （我这里是把它的生成的文件放在了后端的public文件夹下）

outDir

    4、如果使用的是Webstorm，可以点击Edit Configurations来快速配置

Edit Configurations

        选择添加-npm

add npm

        按照下图配置，这就相当于模拟了npm run build指令

build

        （如果没有用webstorm也可以直接在终端里面输入ng build构建）

    5、等待结束后，打开后端工程，就会发现public里已经有一些文件了，这些就是angular构建的文件了。然后就该配置后端了。

        由于express默认的模板引擎是jade（个人觉得不好用，还是html大法好），也因为Angular默认生成的是html页面，那么我们就将express的模板引擎改成html的吧！

        打开express工程文件夹，安装ejs模块

npm install ejs

        然后打开app.js

        把原来的

app.set('view engine','jade');

        替换为

app.engine('html',require('ejs').__express)

app.set('view engine','html');

        这时候就可以直接渲染html了！

        路由这些设置为index.html就可以使用angular了

    6、最后在express工程下，终端里输入npm start就可以启动express服务器了

http://localhost:3000/

        7、最后的最后就是全后端通吃的学习开始了。