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、最后的最后就是全后端通吃的学习开始了。

你可能感兴趣的:(angular+express前后端分离总结)