Nodejs基础教程(十三)

在ejs模板里整合vue方便我们渲染视图。

项目结构图如下：

实现步骤： 1.在app.js里配置代理

var createError = require('http-errors');
var express = require('express');

var proxy = require('express-http-proxy');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var apiRouter = require('./api/api');

// 配置代理 /
let proxyConfig = {
    URL: 'www.simoniu.com',
    PORT: '8091'
}

var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

//添加json解析,否则无法处理post请求。
//app.use(bodyParser.json());
//app.use(bodyParser.urlencoded({extended: false}));
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({extended: false}));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

//app.use('/', apiProxy);

app.use('/api', proxy('https://'+proxyConfig.URL+':'+proxyConfig.PORT , null));
app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/api', apiRouter);

// catch 404 and forward to error handler
app.use(function (req, res, next) {
    next(createError(404));
});

// error handler
app.use(function (err, req, res, next) {
    // set locals, only providing error in development
    res.locals.message = err.message;
    res.locals.error = req.app.get('env') === 'development' ? err : {};
    // render the error page
    res.status(err.status || 500);
    res.render('error');
});

module.exports = app;

2.在store目录下编写转发代理请求的模块 store.js

const request = require('request');

function queryCatalogList (url,res) {
    request(url, function (error, response, body) {
        let json = JSON.parse(body);
        //res.json(JSON.parse(body));
        console.log(json);
        res.render("index",{ title: 'Hello,Express' ,jsonData: json});
    })
};

module.exports=queryCatalogList

3.在routes/index.js路由里调用store

const request = require('request');
var queryCatalogList = require('../store/store');
var express = require('express');
var router = express.Router();

router.get('/',async function(req, res, next) {
   queryCatalogList('http://localhost:3000/api/examdemo/catalog/',res)
});

module.exports = router;

4.编写index.ejs，获取返回的json

下载vue类库，复制到public/javascript里面。

<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css'/>
    <script src="/javascripts/vue/vue.min.js"></script>
</head>
<body>
<h1><%= title %></h1>
<hr>
<div id="app">
    <div>
        {{msg}}
    </div>
    <div>
        <ul>
            <li v-for="(c,index) in catalog" :key="index">{{c.cname}}</li>
        </ul>
    </div>
</div>

<script>
   var mytitle = '<%=title%>';
   let vm = new Vue({
       el:'#app',
       data:{
           msg: mytitle,
           catalog: JSON.parse('<%- JSON.stringify(jsonData)%>').data
       },
       mounted(){
           console.log(this.catalog);
       }
   })
</script>
</body>
</html>

5.启动项目，地址栏访问首页

启动项目，浏览器地址栏访问, http://localhost:3000

效果如下：

ejs模板里也可以使用axios发送请求。程序改写如下：在routes/index.js里定义一个新的queryCatalogList请求。

const request = require('request');
var queryCatalogList = require('../store/store');
var express = require('express');
var router = express.Router();

router.get('/',async function(req, res, next) {
    res.render('index');
});

router.get('/queryCatalogList',function(req,res,next){
   queryCatalogList('http://localhost:3000/api/examdemo/catalog/',res)
})

module.exports = router;

改写store.js，queryCatalogList方法返回json对象。

const request = require('request');

function queryCatalogList (url,res) {
    request(url, function (error, response, body) {
        let json = JSON.parse(body);
        res.json({ title: 'Hello,Express' ,jsonData: json});
    })
};
module.exports=queryCatalogList

改写index.ejs，在mounted生命周期中发送axios请求，初始化类别列表。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel='stylesheet' href='/stylesheets/style.css'/>
    <script src="/javascripts/vue/vue.min.js"></script>
    <script src="/javascripts/axios/axios.js"></script>
</head>
<body>
<div id="app">
    <h1>{{msg}}</h1>
    <hr>
    <div>
        <div>
            {{msg}}
        </div>
        <div>
            <ul>
                <li v-for="(c,index) in catalog" :key="index">{{c.cname}}</li>
            </ul>
        </div>
    </div>
</div>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            msg: '',
            catalog: []
        },
        mounted() {
            axios.get('/queryCatalogList').then((response) => {
                console.log(response);
                this.msg = response.data.title;
                this.catalog = response.data.jsonData.data;
            }).catch((error) => {
                console.log(error);
            });
        }
    })
</script>
</body>
</html>

运行效果与上完全相同。