egg.js前后端分离

最新推荐文章于 2023-08-09 20:20:08 发布

weixin_30595035

最新推荐文章于 2023-08-09 20:20:08 发布

阅读量895

点赞数

文章标签： webpack javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/dingdingdown/p/9473153.html

版权

此文的目的是：让egg作为中间接口层，只出接口，前端做页面渲染，搞成前后端分离。

思路是：首先给前端启动一个服务，用http-server 或者 webpack-dev-server
后端启动一个服务，将前端代码打包之后的js,css文件通过script，link的方式引入到egg的模板文件里去。
一：http-server 启动一个前端服务

新建一个前端项目：

mkdir http-server-test
cd http-server-test
npm install http-server -g

新建一个test.html页面，随便写个hello world,然后运行

http-server

访问http://127.0.0.1:8080/test.html 得到下面页面

前端 http server就启动好了。

二：前端项目通过webpack工具+react前端框架打包出js,css文件

1.进到http-server-test目录,npm init一路回车即可

npm init

2.安装相关依赖

//babel编译js相关
npm install babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev

//css文件处理相关
npm install css-loader style-loader less-loader postcss-loader less --save-dev

//将css达成独立的css文件
//加上@next是为了防止出错，遇到了这个坑
npm install extract-text-webpack-plugin@next --save-dev

//安装react框架相关
npm install react react-dom --save

//webpack打包文件相关依赖
npm install webpack -g
npm install webpack --save-dev
//因为直接webpack打包的时候报错说是webpack-cli是独立出来的，所以也要安装一下
npm install webpack-cli --save-dev

3.配置babel,新建一个.babelrc文件，写入如下代码

{
    "presets":["es2015","react"]
}

4.配置webpack文件，新建webpack.config.js文件，写入如下代码：

const webpack = require('webpack');
const path = require('path'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { context:path.resolve(__dirname,''), entry:{ main:'./src/index.jsx' }, output:{ path:path.resolve(__dirname,'dist/'), filename:'index.js' }, module:{ rules:[ { test:/\.jsx$/, use:'babel-loader' }, { test:/\.less$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: ["css-loader","less-loader"] }) } ] }, plugins:[ new webpack.DefinePlugin({ 'process.env.NODE_ENV':JSON.stringify('development'), __DEV__:true }), new ExtractTextPlugin('index.css'), ] }

5.继续丰富目录，目路结构（dist目录是webpack打包自动生成的文件，不需要手动创建）如下：

//src/index.html
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>hello</title> </head> <body> <div id="app"></div> <script src="../dist/index.js"></script> </body> </html>

//src/index.jsx
import React from 'react' import ReactDOM from 'react-dom' import HelloComponent from '../components/hello.jsx' import './index.less' ReactDOM.render( <div className="app-box"> <HelloComponent /> </div>, document.getElementById('app') );

//src/index.less
.app-box{
    width:200px;
    height: 400px;
    margin:50px auto; border:1px solid #ccc; }

//components/hello.jsx
import React from 'react' import './hello.less' export default class HelloComponent extends React.Component{ render(){ return( <div className="hello-box">hello world</div> ); } }

//components/hello.less
.hello-box{
    color:#f00;
}

6.运行webpack打包出文件

webpack --watch

三：将打包出来的css，js文件通过script src=""链接到egg.js的模板文件中

打开上一节新建的egg项目

//app/controller/home.js
const Controller = require('egg').Controller; class HomeController extends Controller{ async index(){ await this.ctx.render('home/home.tpl'); } } module.exports = HomeController;

//app/view/home/home.tpl
<html>
  <head> <title>Hacker News</title> <link rel="stylesheet" href="http://127.0.0.1:8080/dist/index.css" /> </head> <body> <div id="app"></div> <script src="http://127.0.0.1:8080/dist/index.js"></script> </body> </html>

最后命令行运行：

npm run dev

访问http://127.0.0.1:7001/

注意：前端的服务http-server,以及egg的服务都要开启。

结语：如此便实现egg.js负责接口服务，前端做前端的事，前后端分离。

作者：梦想成真213
链接：https://www.jianshu.com/p/798c5e9fde75
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

转载于:https://www.cnblogs.com/dingdingdown/p/9473153.html

weixin_30595035

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
egg.js前后端分离

此文的目的是：让egg作为中间接口层，只出接口，前端做页面渲染，搞成前后端分离。思路是：首先给前端启动一个服务，用http-server 或者 webpack-dev-server后端启动一个服务，将前端代码打包之后的js,css文件通过script，link的方式引入到egg的模板文件里去。一：http-server 启动一个前端服务新建一个前端项目：mkdir h...
复制链接

扫一扫